feat(web): add dnd upload report (#51)

Co-authored-by: Chenxin Yan <yanchenxin2004@gmail.com>

Author: xyspg

apps/web/package.json

@@ -30,9 +30,12 @@
     "convex": "^1.28.0",
     "lucide-react": "^0.548.0",
     "next": "^15.5.6",
+    "next-themes": "^0.4.6",
     "pdfjs-dist": "^5.4.296",
+    "radix-ui": "^1.4.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "zod": "^4.1.12"
   },

apps/web/src/app/dashboard/page.tsx

@@ -1,7 +1,7 @@
-import FileUploadButton from "@/modules/report-parsing/components/file-upload-button";
+import DegreeProgreeUpload from "@/modules/report-parsing/components/degree-progress-upload";
 
 const HomePage = () => {
-  return <FileUploadButton />;
+  return <DegreeProgreeUpload />;
 };
 
 export default HomePage;

apps/web/src/app/layout.tsx

@@ -3,6 +3,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import ConvexClientProvider from "@/components/ConvexClientProvider";
+import { Toaster } from "@/components/ui/sonner";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -32,6 +33,7 @@ export default function RootLayout({
         <ClerkProvider>
           <ConvexClientProvider>{children}</ConvexClientProvider>
         </ClerkProvider>
+        <Toaster position="top-center" richColors />
       </body>
     </html>
   );

apps/web/src/components/ui/sonner.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }