add dashboard page

SkidGod4444 · Nov 9, 2024 · 4534add · 4534add
1 parent a49ebb5
commit 4534add
Show file tree

Hide file tree

Showing 10 changed files with 281 additions and 23 deletions.
diff --git a/apps/app/app/(routes)/[slug]/page.tsx b/apps/app/app/(routes)/[slug]/page.tsx
@@ -1,3 +1,125 @@
+"use client";
+import { IconCoins, IconInfoSquareRounded } from "@tabler/icons-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 export default function Home() {
-  return <div>Hii</div>;
+  return (
+    <div className="flex flex-col h-full w-full items-start overflow-hidden px-5 md:px-2">
+      <Tabs defaultValue="overview" className="space-y-5">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="analytics">Analytics</TabsTrigger>
+          <TabsTrigger value="reports">Reports</TabsTrigger>
+          <TabsTrigger value="notifications">Notifications</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview" className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-5">
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">
+                  Queries Resolved
+                </CardTitle>
+                <IconInfoSquareRounded className="size-5 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">45,321</div>
+                <p className="text-xs text-muted-foreground">
+                  +20.1% from last month
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">Mails</CardTitle>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="h-4 w-4 text-muted-foreground"
+                >
+                  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+                  <circle cx="9" cy="7" r="4" />
+                  <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+                </svg>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">+2350</div>
+                <p className="text-xs text-muted-foreground">
+                  +180.1% from last month
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">Sales</CardTitle>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="h-4 w-4 text-muted-foreground"
+                >
+                  <rect width="20" height="14" x="2" y="5" rx="2" />
+                  <path d="M2 10h20" />
+                </svg>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">+12,234</div>
+                <p className="text-xs text-muted-foreground">
+                  +19% from last month
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">
+                  Events Logged
+                </CardTitle>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="h-4 w-4 text-muted-foreground"
+                >
+                  <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                </svg>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">+573</div>
+                <p className="text-xs text-muted-foreground">
+                  +201 since last hour
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">
+                  Credits Left
+                </CardTitle>
+                <IconCoins className="size-5 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">2346</div>
+                <p className="text-xs text-muted-foreground">
+                  +201 since last hour
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
 }
diff --git a/apps/app/app/(routes)/settings/page.tsx b/apps/app/app/(routes)/settings/page.tsx
@@ -6,7 +6,7 @@ import React from "react";
 
 export default function SettingsPage() {
   return (
-    <div className="flex flex-col h-full w-full items-start overflow-hidden">
+    <div className="flex flex-col h-full w-full items-start overflow-hidden px-5 md:px-2">
       <InfoBreadCrumb />
       <div className="flex flex-col gap-10">
         <BillingSettings />

diff --git a/apps/app/app/layout.tsx b/apps/app/app/layout.tsx
@@ -35,7 +35,6 @@ async function RootLayout({
           <SidebarProvider defaultOpen={defaultOpen}>
             <AppSidebar />
             <div className="p-2">
-              {/* <SidebarTrigger/> */}
               <ProgressBar />
               <Infobar />
               {children}

diff --git a/apps/app/components/custom/dashboard/stats.tsx b/apps/app/components/custom/dashboard/stats.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function DashboardStats() {
+  return <div className="grid grid-cols-1 lg:grid-cols-5 gap-10"></div>;
+}
diff --git a/apps/app/components/custom/infobar/infobar.tsx b/apps/app/components/custom/infobar/infobar.tsx
@@ -68,7 +68,7 @@ export default function Infobar() {
   return (
     <nav
       className={`flex flex-col w-full items-start sticky top-0 right-0 bg-background transition-all duration-200 ${
-        isScrolled ? "shadow-sm backdrop-blur-sm z-10" : ""
+        isScrolled ? "shadow-sm z-10" : ""
       }`}
     >
       <div className="flex flex-row items-center gap-2 py-3 w-full">
@@ -196,9 +196,6 @@ export default function Infobar() {
           </BreadcrumbList>
         </Breadcrumb>
       </div>
-      {isScrolled && (
-        <div className="h-px bg-gradient-to-r from-transparent via-foreground/10 to-transparent" />
-      )}
     </nav>
   );
 }
diff --git a/apps/app/components/custom/loader.tsx b/apps/app/components/custom/loader.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { motion, Variants } from "framer-motion";
+
+const containerVariants: Variants = {
+  animate: {
+    transition: {
+      staggerChildren: 0.25,
+    },
+  },
+};
+
+const itemVariants: Variants = {
+  initial: {
+    scaleY: 0.5,
+    opacity: 0,
+  },
+  animate: {
+    scaleY: 1,
+    opacity: 1,
+    transition: {
+      repeat: Infinity,
+      repeatType: "mirror",
+      duration: 1,
+      ease: "circIn",
+    },
+  },
+};
+
+export default function LoaderAnim() {
+  return (
+    <motion.div
+      variants={containerVariants}
+      initial="initial"
+      animate="animate"
+      className="flex gap-1"
+    >
+      {[...Array(5)].map((_, index) => (
+        <motion.div
+          key={index}
+          variants={itemVariants}
+          className="h-12 w-2 bg-primary rounded-md"
+        />
+      ))}
+    </motion.div>
+  );
+}
diff --git a/apps/app/components/custom/progress.bar.tsx b/apps/app/components/custom/progress.bar.tsx
@@ -45,7 +45,6 @@ export default function ProgressBar() {
       clearInterval(interval);
     }, 800); // Total time for the progress to complete
 
-    // Cleanup timeouts and interval on unmount or rerender
     return () => {
       clearTimeout(complete);
       clearInterval(interval);

diff --git a/apps/app/components/custom/settings/billing.settings.tsx b/apps/app/components/custom/settings/billing.settings.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 import SectionLabel from "../section/section.label";
+import { Card, CardContent, CardDescription } from "@/components/ui/card";
+import { CheckCircle2, Plus } from "lucide-react";
 
 export default function BillingSettings() {
   return (
@@ -10,6 +12,32 @@ export default function BillingSettings() {
           msg="Add payment information, upgrade or modify your plan."
         />
       </div>
+      <div className="lg:col-span-2 flex justify-start lg:justify-center ">
+        <Card className="border-dashed border-muted-foreground w-[350px] h-[200px] cursor-pointer flex justify-center items-center">
+          <CardContent className="flex gap-2 items-center">
+            <div className="rounded-full border-2 p-1">
+              <Plus className="text-muted-fborder-muted-foreground" />
+            </div>
+            <CardDescription className="font-semibold">
+              Upgrade Plan
+            </CardDescription>
+          </CardContent>
+        </Card>
+      </div>
+      <div className="lg:col-span-2">
+        <h3 className="text-xl font-semibold mb-2">Current Plan</h3>
+        <p className="text-sm font-semibold">Freemium</p>
+        <div className="flex gap-2 flex-col mt-2">
+          <div className="flex gap-2">
+            <CheckCircle2 className="text-muted-foreground" />
+            <p className="text-muted-foreground">200 Credits</p>
+          </div>
+          <div className="flex gap-2">
+            <CheckCircle2 className="text-muted-foreground" />
+            <p className="text-muted-foreground">2 Domains</p>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/apps/app/components/custom/sidebar/sidebar.tsx b/apps/app/components/custom/sidebar/sidebar.tsx
@@ -1,10 +1,16 @@
+"use client";
 import {
-  Calendar,
+  Webhook,
   ChevronDown,
-  Home,
-  Inbox,
-  Search,
+  Layers2,
+  Waypoints,
+  Mails,
   Settings,
+  Brain,
+  BrainCircuit,
+  FlaskConical,
+  ArchiveRestore,
+  Codepen,
 } from "lucide-react";
 
 import {
@@ -25,28 +31,29 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { usePathname } from "next/navigation";
 
 // Menu items.
 const items = [
   {
-    title: "Home",
+    title: "Dashboard",
     url: "/home",
-    icon: Home,
+    icon: Layers2,
   },
   {
-    title: "Inbox",
-    url: "#",
-    icon: Inbox,
+    title: "Integrations",
+    url: "/integrations",
+    icon: Waypoints,
   },
   {
-    title: "Calendar",
-    url: "#",
-    icon: Calendar,
+    title: "Events",
+    url: "/events",
+    icon: Webhook,
   },
   {
-    title: "Search",
+    title: "Mails",
     url: "#",
-    icon: Search,
+    icon: Mails,
   },
   {
     title: "Settings",
@@ -55,7 +62,38 @@ const items = [
   },
 ];
 
+// Playground items.
+const IntelItems = [
+  {
+    title: "Agents",
+    url: "/agents",
+    icon: Brain,
+  },
+  {
+    title: "Memory",
+    url: "/memory",
+    icon: BrainCircuit,
+  },
+  {
+    title: "Playground",
+    url: "/playground",
+    icon: FlaskConical,
+  },
+  {
+    title: "Components",
+    url: "/components",
+    icon: Codepen,
+  },
+  {
+    title: "Archives",
+    url: "/archives",
+    icon: ArchiveRestore,
+  },
+];
+
 export function AppSidebar() {
+  const path = usePathname();
+
   return (
     <Sidebar collapsible="icon" variant="floating">
       <SidebarHeader>
@@ -89,7 +127,28 @@ export function AppSidebar() {
             <SidebarMenu>
               {items.map((item) => (
                 <SidebarMenuItem key={item.title}>
-                  <SidebarMenuButton asChild>
+                  <SidebarMenuButton
+                    asChild
+                    tooltip={item.title}
+                    isActive={path === item.url}
+                  >
+                    <a href={item.url}>
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Intelligence</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {IntelItems.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild tooltip={item.title}>
                     <a href={item.url}>
                       <item.icon />
                       <span>{item.title}</span>