Merge remote-tracking branch 'origin/develop' into feature/fileupload

 the commit.
Merged origin into PR to fix build issues

Author: ShriramJana

.env.example

@@ -0,0 +1,56 @@
+// This file defines the API route for POST /api/reports
+// It lets logged-in users submit a report for a specific file.
+
+import { NextResponse } from 'next/server'; // Used to send HTTP responses (JSON, status codes)
+import { z } from 'zod'; // Zod validates and parses input data
+
+// Import database connection and the "report" table schema
+import { db } from '@src/server/db';
+import { report } from '@src/server/db/schema/reports';
+
+// Import session helper to check if a user is logged in
+import { getServerAuthSession } from '@src/server/auth';
+
+// This ensures the API only accepts the correct fields
+const CreateReportSchema = z.object({
+  fileId: z.string().min(1),
+  category: z
+    .enum(['inappropriate', 'copyright', 'spam', 'other'])
+    .default('other'),
+  details: z.string().min(1),
+});
+
+// This function runs when someone sends a POST request to /api/reports
+export async function POST(req: Request) {
+  const session = await getServerAuthSession();
+
+  // If there’s no session or no user ID, reject the request
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  // Try to parse and validate the incoming request body
+  let body: z.infer<typeof CreateReportSchema>;
+  try {
+    body = CreateReportSchema.parse(await req.json());
+  } catch (e) {
+    return NextResponse.json(
+      { error: 'Invalid body', details: (e as Error).message },
+      { status: 400 },
+    );
+  }
+
+  // Insert the validated report into the database
+  const [created] = await db
+    .insert(report)
+    .values({
+      userId: session.user.id,
+      fileId: body.fileId,
+      category: body.category,
+      details: body.details,
+    })
+    .returning(); // return the newly created record
+
+  // Send the inserted report back as JSON
+  return NextResponse.json(created, { status: 201 });
+}

src/app/api/reports/route.ts

@@ -5,8 +5,10 @@ import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
 import { Bai_Jamjuree, Inter } from 'next/font/google';
 import { type Metadata } from 'next';
 import { GoogleAnalytics } from '@next/third-parties/google';
+import Link from 'next/link';
 
 import theme from '@src/utils/theme';
+import { ToastProvider } from '@src/components/toast/ToastProvider';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -54,11 +56,18 @@ export default function RootLayout({
         className={`bg-white dark:bg-black ${inter.variable} font-main ${baiJamjuree.variable} text-haiti dark:text-white`}
       >
         <AppRouterCacheProvider>
-          <ThemeProvider theme={theme}>{children}</ThemeProvider>
+          <ThemeProvider theme={theme}>
+            <ToastProvider>{children}</ToastProvider>
+          </ThemeProvider>
         </AppRouterCacheProvider>
         {process.env.NEXT_PUBLIC_VERCEL_ENV === 'production' && (
           <GoogleAnalytics gaId="G-3NDS0P32CZ" />
         )}
+        <nav>
+          <Link href="/profile" className="px-3 py-1 hover:underline">
+            Profile
+          </Link>
+        </nav>
       </body>
     </html>
   );

src/app/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import NavBar from '@components/NavBar';
 
 export const metadata: Metadata = {
   alternates: {
@@ -7,7 +8,11 @@ export const metadata: Metadata = {
 };
 
 const Home = () => {
-  return 'UTD Notebook';
+  return (
+    <>
+      <NavBar />
+    </>
+  );
 };
 
 export default Home;

src/app/page.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import Avatar from '@mui/material/Avatar';
+import Link from 'next/link';
+
+export default function ProfilePage() {
+  const user = {
+    name: 'John Doe',
+    handle: '@johndoe',
+    email: '[email protected]',
+    avatar: '/images/avatar.jpg',
+    posts: 0,
+    reports_submitted: 0,
+  };
+
+  return (
+    <main className="min-h-screen p-8">
+      <div className="mx-auto max-w-4xl">
+        <div className="flex items-center gap-6">
+          <Avatar
+            alt={user.name}
+            src={user.avatar}
+            sx={{ width: 96, height: 96 }}
+          />
+          <div>
+            <h1 className="text-2xl font-semibold">{user.name}</h1>
+            <div className="text-sm text-white">{user.handle}</div>
+            <p className="mt-2 text-white">{user.email}</p>
+            <div className="mt-4 flex gap-4 text-sm text-white">
+              <div>
+                <strong className="font-bold">{user.posts}</strong> posts
+              </div>
+              <div>
+                <strong className="font-bold">{user.reports_submitted}</strong>{' '}
+                reports submitted
+              </div>
+            </div>
+          </div>
+          <div className="ml-auto flex items-center gap-3">
+            <Link
+              href="/profile/edit"
+              className="rounded-md px-4 py-2 text-white"
+            >
+              Edit Profile
+            </Link>
+          </div>
+        </div>
+        <h2 className="mt-10 text-xl font-semibold">Saved Notes:</h2>
+        <h2 className="mt-10 text-xl font-semibold">Uploaded Notes:</h2>
+      </div>
+    </main>
+  );
+}

src/app/profile/page.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { IconButton, Tooltip } from '@mui/material';
+
+export default function NavBar() {
+  return (
+    <>
+      <div className="bg-darken relative flex flex-wrap items-center gap-x-2 gap-y-0 overflow-hidden border-b-1 px-4 py-1 sm:flex-nowrap md:gap-x-4 md:px-8 md:py-1 lg:gap-x-8 lg:px-16">
+        <Image
+          src={'/background.png'}
+          alt="background"
+          className="-z-10 object-cover"
+          fill
+        />
+
+        <Link
+          href="/"
+          className="font-display flex items-center gap-2 text-lg font-medium md:text-xl md:font-bold"
+        >
+          UTD Notebook
+        </Link>
+
+        <div className="ml-auto flex items-center gap-x-2 md:gap-x-4">
+          <Tooltip title="Profile">
+            <IconButton size="medium" href="/profile">
+              <div className="relative size-10 flex-shrink-0 md:size-12">
+                <Image
+                  src="/icon-white.svg"
+                  alt="profile picture"
+                  fill
+                  className="rounded-full border-2 border-white object-cover"
+                />
+              </div>
+            </IconButton>
+          </Tooltip>
+        </div>
+      </div>
+    </>
+  );
+}