feature(dashboard): add integrations and notifications

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/realtime-live-histogram.tsx

@@ -81,7 +81,7 @@ export function RealtimeLiveHistogram({
         {staticArray.map((percent, i) => (
           <div
             key={i as number}
-            className="flex-1 animate-pulse rounded bg-def-200"
+            className="flex-1 animate-pulse rounded-sm bg-def-200"
             style={{ height: `${percent}%` }}
           />
         ))}
@@ -101,7 +101,7 @@ export function RealtimeLiveHistogram({
             <TooltipTrigger asChild>
               <div
                 className={cn(
-                  'flex-1 rounded transition-all ease-in-out hover:scale-110',
+                  'flex-1 rounded-sm transition-all ease-in-out hover:scale-110',
                   minute.count === 0 ? 'bg-def-200' : 'bg-highlight',
                 )}
                 style={{

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/integrations/page.tsx

@@ -0,0 +1,37 @@
+import { ActiveIntegrations } from '@/components/integrations/active-integrations';
+import { AllIntegrations } from '@/components/integrations/all-integrations';
+import { PageTabs, PageTabsLink } from '@/components/page-tabs';
+import { Padding } from '@/components/ui/padding';
+import { parseAsStringEnum } from 'nuqs';
+
+interface PageProps {
+  params: {
+    projectId: string;
+  };
+  searchParams: {
+    tab: string;
+  };
+}
+
+export default function Page({
+  params: { projectId },
+  searchParams,
+}: PageProps) {
+  const tab = parseAsStringEnum(['installed', 'available'])
+    .withDefault('available')
+    .parseServerSide(searchParams.tab);
+  return (
+    <Padding>
+      <PageTabs className="mb-4">
+        <PageTabsLink href="?tab=available" isActive={tab === 'available'}>
+          Available
+        </PageTabsLink>
+        <PageTabsLink href="?tab=installed" isActive={tab === 'installed'}>
+          Installed
+        </PageTabsLink>
+      </PageTabs>
+      {tab === 'installed' && <ActiveIntegrations />}
+      {tab === 'available' && <AllIntegrations />}
+    </Padding>
+  );
+}

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/notifications/page.tsx

@@ -0,0 +1,40 @@
+import { NotificationRules } from '@/components/notifications/notification-rules';
+import { Notifications } from '@/components/notifications/notifications';
+import { PageTabs, PageTabsLink } from '@/components/page-tabs';
+import { Padding } from '@/components/ui/padding';
+import { parseAsStringEnum } from 'nuqs';
+
+interface PageProps {
+  params: {
+    projectId: string;
+  };
+  searchParams: {
+    tab: string;
+  };
+}
+
+export default function Page({
+  params: { projectId },
+  searchParams,
+}: PageProps) {
+  const tab = parseAsStringEnum(['notifications', 'rules'])
+    .withDefault('notifications')
+    .parseServerSide(searchParams.tab);
+  return (
+    <Padding>
+      <PageTabs className="mb-4">
+        <PageTabsLink
+          href="?tab=notifications"
+          isActive={tab === 'notifications'}
+        >
+          Notifications
+        </PageTabsLink>
+        <PageTabsLink href="?tab=rules" isActive={tab === 'rules'}>
+          Rules
+        </PageTabsLink>
+      </PageTabs>
+      {tab === 'notifications' && <Notifications />}
+      {tab === 'rules' && <NotificationRules />}
+    </Padding>
+  );
+}

apps/dashboard/src/app/(onboarding)/onboarding/onboarding-tracking.tsx

@@ -169,7 +169,7 @@ const Tracking = ({
                             placeholder="Add a domain"
                             value={field.value?.split(',') ?? []}
                             renderTag={(tag) =>
-                              tag === '*' ? 'Allow domains' : tag
+                              tag === '*' ? 'Allow all domains' : tag
                             }
                             onChange={(newValue) => {
                               field.onChange(

apps/dashboard/src/app/providers.tsx

@@ -15,6 +15,7 @@ import { Provider as ReduxProvider } from 'react-redux';
 import { Toaster } from 'sonner';
 import superjson from 'superjson';
 
+import { NotificationProvider } from '@/components/notifications/notification-provider';
 import { OpenPanelComponent } from '@openpanel/nextjs';
 
 function AllProviders({ children }: { children: React.ReactNode }) {
@@ -76,6 +77,7 @@ function AllProviders({ children }: { children: React.ReactNode }) {
           <QueryClientProvider client={queryClient}>
             <TooltipProvider delayDuration={200}>
               {children}
+              <NotificationProvider />
               <Toaster />
               <ModalProvider />
             </TooltipProvider>