WEE GOT DASHBOARD DONE

lryanle · Nov 27, 2023 · 80b3c6d · 80b3c6d
1 parent 93b586f
commit 80b3c6d
Show file tree

Hide file tree

Showing 32 changed files with 3,318 additions and 72 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -28,5 +28,13 @@
 		"editor.defaultFormatter": "esbenp.prettier-vscode",
 		"editor.formatOnSave": true
 	},
-	"eslint.workingDirectories": ["./frontend"]
+	"eslint.workingDirectories": [
+		"./frontend"
+	],
+	"[typescript][typescriptreact]": {
+		"editor.codeActionsOnSave": {
+			"source.fixAll": "explicit",
+			"source.organizeImports": "explicit"
+		}
+	}
 }
diff --git a/frontend/app/dashboard/page.tsx b/frontend/app/dashboard/page.tsx
@@ -0,0 +1,183 @@
+/* eslint-disable new-cap */
+import { authOptions } from "@/app/api/auth/[...nextauth]/authOptions";
+import { Metadata } from "next";
+import { getServerSession } from "next-auth/next";
+import Image from "next/image";
+
+import { CalendarDateRangePicker } from "@/components/dashboard/date-range-picker";
+import { Overview } from "@/components/dashboard/overview";
+import { RecentListings } from "@/components/dashboard/recent-sales";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs";
+import { redirect } from "next/navigation";
+
+export const metadata: Metadata = {
+  title: "Dashboard",
+  description: "Example dashboard app built using the components.",
+}
+
+export default async function DashboardPage() {
+  const session = await getServerSession(authOptions);
+  if (!session) { redirect('/api/auth/signin')  }
+
+  return (session && (
+    <div className="py-24">
+      <div className="md:hidden">
+        <Image
+          src="/examples/dashboard-light.png"
+          width={1280}
+          height={866}
+          alt="Dashboard"
+          className="block dark:hidden"
+        />
+        <Image
+          src="/examples/dashboard-dark.png"
+          width={1280}
+          height={866}
+          alt="Dashboard"
+          className="hidden dark:block"
+        />
+      </div>
+      <div className="bg-whitehidden flex-col md:flex">
+        {/* <div className="border-b">
+          <div className="flex h-16 items-center px-4">
+            <TeamSwitcher />
+            <MainNav className="mx-6" />
+            <div className="ml-auto flex items-center space-x-4">
+              <Search />
+              <UserNav />
+            </div>
+          </div>
+        </div> */}
+        <div className="flex-1 space-y-4 p-8 pt-6">
+          <div className="flex items-center justify-between space-y-2">
+            <h2 className="text-3xl font-bold tracking-tight">Marketplace Listings Dashboard</h2>
+            <div className="flex items-center space-x-2">
+              <CalendarDateRangePicker />
+              <Button>Download</Button>
+            </div>
+          </div>
+          <Tabs defaultValue="overview" className="space-y-4">
+            <TabsList>
+              <TabsTrigger value="overview">Overview</TabsTrigger>
+              <TabsTrigger value="analytics" disabled>
+                Analytics
+              </TabsTrigger>
+              <TabsTrigger value="reports" disabled>
+                Reports
+              </TabsTrigger>
+              <TabsTrigger value="notifications" disabled>
+                Notifications
+              </TabsTrigger>
+              <TabsTrigger value="search" disabled>
+                Search
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent value="overview" className="space-y-4">
+              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+                <Card>
+                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                    <CardTitle className="text-sm font-medium">
+                      Total Listings
+                    </CardTitle>
+                    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5 1C11.7761 1 12 1.22386 12 1.5V13.5C12 13.7761 11.7761 14 11.5 14C11.2239 14 11 13.7761 11 13.5V1.5C11 1.22386 11.2239 1 11.5 1ZM9.5 3C9.77614 3 10 3.22386 10 3.5V13.5C10 13.7761 9.77614 14 9.5 14C9.22386 14 9 13.7761 9 13.5V3.5C9 3.22386 9.22386 3 9.5 3ZM13.5 3C13.7761 3 14 3.22386 14 3.5V13.5C14 13.7761 13.7761 14 13.5 14C13.2239 14 13 13.7761 13 13.5V3.5C13 3.22386 13.2239 3 13.5 3ZM5.5 4C5.77614 4 6 4.22386 6 4.5V13.5C6 13.7761 5.77614 14 5.5 14C5.22386 14 5 13.7761 5 13.5V4.5C5 4.22386 5.22386 4 5.5 4ZM1.5 5C1.77614 5 2 5.22386 2 5.5V13.5C2 13.7761 1.77614 14 1.5 14C1.22386 14 1 13.7761 1 13.5V5.5C1 5.22386 1.22386 5 1.5 5ZM7.5 5C7.77614 5 8 5.22386 8 5.5V13.5C8 13.7761 7.77614 14 7.5 14C7.22386 14 7 13.7761 7 13.5V5.5C7 5.22386 7.22386 5 7.5 5ZM3.5 7C3.77614 7 4 7.22386 4 7.5V13.5C4 13.7761 3.77614 14 3.5 14C3.22386 14 3 13.7761 3 13.5V7.5C3 7.22386 3.22386 7 3.5 7Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">286</div>
+                    <p className="text-xs text-muted-foreground">
+                      +1098% 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">
+                      Flagged Listings
+                    </CardTitle>
+                    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.4449 0.608765C8.0183 -0.107015 6.9817 -0.107015 6.55509 0.608766L0.161178 11.3368C-0.275824 12.07 0.252503 13 1.10608 13H13.8939C14.7475 13 15.2758 12.07 14.8388 11.3368L8.4449 0.608765ZM7.4141 1.12073C7.45288 1.05566 7.54712 1.05566 7.5859 1.12073L13.9798 11.8488C14.0196 11.9154 13.9715 12 13.8939 12H1.10608C1.02849 12 0.980454 11.9154 1.02018 11.8488L7.4141 1.12073ZM6.8269 4.48611C6.81221 4.10423 7.11783 3.78663 7.5 3.78663C7.88217 3.78663 8.18778 4.10423 8.1731 4.48612L8.01921 8.48701C8.00848 8.766 7.7792 8.98664 7.5 8.98664C7.2208 8.98664 6.99151 8.766 6.98078 8.48701L6.8269 4.48611ZM8.24989 10.476C8.24989 10.8902 7.9141 11.226 7.49989 11.226C7.08567 11.226 6.74989 10.8902 6.74989 10.476C6.74989 10.0618 7.08567 9.72599 7.49989 9.72599C7.9141 9.72599 8.24989 10.0618 8.24989 10.476Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">+0</div>
+                    <p className="text-xs text-muted-foreground">
+                      +0% 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">New Listings</CardTitle>
+                    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49998 0.849976C7.22383 0.849976 6.99998 1.07383 6.99998 1.34998V3.52234C6.99998 3.79848 7.22383 4.02234 7.49998 4.02234C7.77612 4.02234 7.99998 3.79848 7.99998 3.52234V1.8718C10.8862 2.12488 13.15 4.54806 13.15 7.49998C13.15 10.6204 10.6204 13.15 7.49998 13.15C4.37957 13.15 1.84998 10.6204 1.84998 7.49998C1.84998 6.10612 2.35407 4.83128 3.19049 3.8459C3.36919 3.63538 3.34339 3.31985 3.13286 3.14115C2.92234 2.96245 2.60681 2.98825 2.42811 3.19877C1.44405 4.35808 0.849976 5.86029 0.849976 7.49998C0.849976 11.1727 3.82728 14.15 7.49998 14.15C11.1727 14.15 14.15 11.1727 14.15 7.49998C14.15 3.82728 11.1727 0.849976 7.49998 0.849976ZM6.74049 8.08072L4.22363 4.57237C4.15231 4.47295 4.16346 4.33652 4.24998 4.25C4.33649 4.16348 4.47293 4.15233 4.57234 4.22365L8.08069 6.74051C8.56227 7.08599 8.61906 7.78091 8.19998 8.2C7.78089 8.61909 7.08597 8.56229 6.74049 8.08072Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">+243</div>
+                    <p className="text-xs text-muted-foreground">
+                      +876% 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">
+                      Listings Today
+                    </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">+36</div>
+                    <p className="text-xs text-muted-foreground">
+                      +36 from last 24 hours
+                    </p>
+                  </CardContent>
+                </Card>
+              </div>
+              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+                <Card className="col-span-4">
+                  <CardHeader>
+                    <CardTitle>Overview</CardTitle>
+                  </CardHeader>
+                  <CardContent className="pl-2">
+                    <Overview />
+                  </CardContent>
+                </Card>
+                <Card className="col-span-3">
+                  <CardHeader>
+                    <CardTitle>Recent Listings</CardTitle>
+                    <CardDescription>
+                      8 listings flagged in the last 24 hours
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <RecentListings />
+                  </CardContent>
+                </Card>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  ))
+}
diff --git a/frontend/app/fonts/index.ts b/frontend/app/fonts/index.ts
@@ -1,13 +1,7 @@
-import { Inter } from "next/font/google";
+/* eslint-disable new-cap */
 import localFont from "next/font/local";
 
 export const sfPro = localFont({
   src: "./SF-Pro-Display-Medium.otf",
   variable: "--font-sf",
 });
-
-// eslint-disable-next-line new-cap
-export const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-});
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
@@ -72,5 +72,24 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+    }
+    }
+
+    @layer utilities {
+      .step {
+        counter-increment: step;
+      }
+
+      .step:before {
+        @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
+        @apply ml-[-50px] mt-[-4px];
+        content: counter(step);
+      }
+    }
+
+    @media (max-width: 640px) {
+      .container {
+        @apply px-4;
   }
 }
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -1,11 +1,23 @@
+/* eslint-disable new-cap */
 import Footer from "@/layouts/footer";
 import Nav from "@/layouts/nav";
+import { cn } from "@/lib/utils";
 import { Analytics } from "@vercel/analytics/react";
 import cx from "classnames";
+
 import { Suspense } from "react";
-import { inter, sfPro } from "./fonts";
+import { sfPro } from "./fonts";
 import "./globals.css";
 
+import { Inter as FontSans } from "next/font/google";
+
+export const fontSans = FontSans({
+  subsets: ["latin"],
+  variable: "--font-sans",
+})
+
+
+
 export const metadata = {
   title: "SMARE - Social Marketplace Automotive Risk Engine",
   description:
@@ -20,17 +32,23 @@ export default async function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={cx(sfPro.variable, inter.variable)}>
-        <div className="fixed h-screen w-full bg-gradient-to-br from-indigo-50 via-white to-red-100" />
+    <html lang="en" >
+      <body className={cx(sfPro.variable)+" overscroll-y-none "+cn(
+          "min-h-screen bg-background font-sans antialiased",
+          fontSans.variable
+        )}
+      >
+
         <Suspense fallback="...">
           <Nav />
         </Suspense>
-        <main className="flex min-h-screen w-full flex-col items-center justify-center py-32">
+        <main className="flex min-h-screen w-full flex-col items-center justify-center">
           {children}
         </main>
+
         <Footer />
         <Analytics />
+
       </body>
     </html>
   );

diff --git a/frontend/app/middleware.ts b/frontend/app/middleware.ts
@@ -0,0 +1,14 @@
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  if (request.nextUrl.pathname.startsWith('/profile')) {
+    // Add /profile specific logics
+  }
+  if (request.nextUrl.pathname.startsWith('/dashboard')) {
+    // Add /dashboard specific logics
+  }
+}
+
+export const config = {
+  matcher: ['/profile/:path*', '/dashboard/:path*'],
+}
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 
 export default async function Home() {
   return (
-    <>
+    <div className="flex min-h-screen w-full flex-col items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-red-100">
       <div className="z-10 w-full max-w-4xl px-5 xl:px-0">
         <h1
           className="animate-fade-up bg-gradient-to-br from-statefarm to-red-700 bg-clip-text text-center font-display text-4xl font-bold tracking-[-0.02em] text-transparent drop-shadow-sm [text-wrap:balance] md:text-7xl md:leading-[5rem]"
@@ -76,7 +76,7 @@ export default async function Home() {
           />
         ))} */}
       </div>
-    </>
+    </div>
   );
 }
 

diff --git a/frontend/components.json b/frontend/components.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
+  "style": "new-york",
   "rsc": true,
   "tsx": true,
   "tailwind": {