init

.env.local.example

@@ -0,0 +1,5 @@
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
+NEXT_PUBLIC_SUPABASE_SERVICE_KEY=
+NEXT_PUBLIC_SUPABASE_STORAGE_BUCKET=
+CRON_SECRET=

.env.production

@@ -0,0 +1,5 @@
+NEXT_PUBLIC_SUPABASE_URL=https://dohsfmrbydlxkobwhblt.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRvaHNmbXJieWRseGtvYndoYmx0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDEyNDM3NDAsImV4cCI6MjA1NjgxOTc0MH0.wtHPnFJuhgGQHl6wLzx8ztTHpmn1OwFMUYOUBaE06ls
+NEXT_PUBLIC_SUPABASE_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRvaHNmbXJieWRseGtvYndoYmx0Iiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc0MTI0Mzc0MCwiZXhwIjoyMDU2ODE5NzQwfQ.oa881BvgxIJcffbEw_N00LIc9-Oj30IBsD-3y2AqIjM
+NEXT_PUBLIC_SUPABASE_STORAGE_BUCKET=pnp-bot-storage
+CRON_SECRET="fLXB3uzAfSgjrMxg3NxsprqYuPk63+F4ZlUZXlv2fE="

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+.next/
+out/
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+node_modules

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

Dockerfile

@@ -0,0 +1,54 @@
+# Gunakan Python base image dengan Debian
+FROM python:3.11-slim AS base
+
+# Install curl dan Node.js 18 (versi LTS yang stabil)
+RUN apt-get update && \
+    apt-get install -y curl gnupg build-essential && \
+    curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && \
+    apt-get install -y nodejs && \
+    apt-get clean && rm -rf /var/lib/apt/lists/*
+
+# Set working directory
+WORKDIR /app
+
+# Copy dan install dependencies Node.js
+COPY package*.json ./
+RUN npm install
+
+# Copy semua file project ke container
+COPY . .
+
+# Install dependencies Python
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Build Next.js app
+RUN npm run build
+
+# Expose port yang digunakan Next.js
+EXPOSE 7860
+
+# Jalankan Next.js app (mode production)
+CMD ["npm", "start"]
+
+
+
+# Dockerfile Lama
+# Node image
+# FROM node:22.2-alpine
+
+# # Set workdir
+# WORKDIR /app
+# COPY package*.json ./
+
+# # Install dependencies
+# RUN npm install
+# COPY . .
+
+# # Build app
+# RUN npm run build
+
+# EXPOSE 3000
+
+# # Start app
+# CMD ["npm", "start"]

README.md

@@ -10,3 +10,37 @@ short_description: Admin Chatbot PNP
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+### Chatbot Admin App
+
+#### Technologies
+
+- Javascript/Typescript
+- Next Js
+- React
+- Supabase (Database and Authentication)
+- shadcn/ui
+
+#### Install dependencies
+
+```bash
+  npm install
+```
+
+#### Setup env
+
+Create env using env.example file
+
+```bash
+  cp .env.local.example .env.local
+```
+
+Fill the variable with your own API keys from https://supabase.com/
+
+#### Running
+
+```bash
+  npm run dev
+```
+
+#

app/(auth)/layout.tsx

@@ -0,0 +1,9 @@
+import "../globals.css";
+
+export default function AuthLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <div className="mx-auto w-full">{children}</div>;
+}

app/(auth)/login/page.tsx

@@ -0,0 +1,37 @@
+import SignInForm from "@/components/SignInForm";
+import Image from "next/image";
+import PnpLogo from "../../../public/logo-pnp.webp";
+import { redirect } from "next/navigation";
+import { createClient } from "@/utils/supabase/server";
+
+export default async function Login() {
+  const supabase = createClient();
+
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
+
+  if (session) {
+    return redirect("/");
+  }
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center">
+      <div className="w-10/12 rounded-md border p-5 text-center shadow-md sm:w-8/12 md:w-6/12 lg:w-4/12 xl:w-3/12 2xl:w-3/12">
+        <div className="flex justify-center py-5">
+          <Image
+            src={PnpLogo}
+            width={150}
+            height={150}
+            alt="Logo Politeknik Negeri Padang"
+          />
+        </div>
+        <h1 className="pb-3 text-xl font-semibold">Login</h1>
+        <p className="mb-5 text-sm">
+          Selamat Datang di Situs Manajemen Data Chatbot Politeknik Negeri
+          Padang
+        </p>
+        <SignInForm />
+      </div>
+    </div>
+  );
+}

app/(main)/components/ExampleDoc.tsx

@@ -0,0 +1,30 @@
+// FileTable.tsx
+"use client";
+import { Button } from "@/components/ui/button";
+import { createClient } from "@/utils/supabase/client";
+import { FileCheck } from "lucide-react";
+
+export default function ExampleDoc() {
+  const supabase = createClient();
+
+  const inspectItem = () => {
+    const { data } = supabase.storage
+      .from("example")
+      .getPublicUrl("example.pdf");
+    window.open(`${data.publicUrl}`, "_blank");
+  };
+
+  return (
+    <Button onClick={inspectItem} asChild>
+      <div className="group inline-flex rounded-lg border border-slate-400 bg-slate-100 px-5 py-3 shadow-sm hover:bg-slate-200">
+        <div className="flex gap-2">
+          <FileCheck
+            size={20}
+            className="text-red-500 group-hover:text-red-700"
+          />
+          <h1 className="text-sm text-slate-600">Doc Example V1</h1>
+        </div>
+      </div>
+    </Button>
+  );
+}

app/(main)/components/RagDashboard.tsx

@@ -0,0 +1,253 @@
+"use client";
+import { useEffect, useState } from "react";
+import FileTable from "../../../components/FileTable";
+import SemesterFilter from "../../../components/SemesterFilter";
+import { createClient } from "@/utils/supabase/client";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@radix-ui/react-dropdown-menu";
+import { ChevronDown, RefreshCw } from "lucide-react";
+import { toast } from "@/hooks/use-toast";
+
+interface FileData {
+  name: string;
+  id: string;
+  created_at: string;
+  updated_at: string;
+  last_accessed_at: string;
+  metadata: {
+    eTag: string;
+    size: number;
+    mimetype: string;
+    cacheControl: string;
+    lastModified: string;
+    contentLength: number;
+    httpStatusCode: number;
+  };
+}
+
+export default function RagDashboard() {
+  const supabase = createClient();
+  const [ragData, setRagData] = useState<FileData[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [semesterFilter, setSemesterFilter] = useState("all");
+  const [showingFilteredResults, setShowingFilteredResults] = useState(false);
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    setIsRefreshing(true);
+    try {
+      const res = await supabase.storage.from("pnp-bot-storage").list("", {
+        limit: 1000,
+        offset: 0,
+        sortBy: { column: "name", order: "asc" },
+      });
+
+      if (res.data) {
+        setRagData(
+          res.data.map((file: any) => ({
+            ...file,
+            metadata: {
+              eTag: file.metadata?.eTag ?? "",
+              size: file.metadata?.size ?? 0,
+              mimetype: file.metadata?.mimetype ?? "",
+              cacheControl: file.metadata?.cacheControl ?? "",
+              lastModified: file.metadata?.lastModified ?? "",
+              contentLength: file.metadata?.contentLength ?? 0,
+              httpStatusCode: file.metadata?.httpStatusCode ?? 0,
+            },
+          })),
+        );
+      } else if (res.error) {
+        throw new Error(res.error.message);
+      }
+    } catch (error) {
+      console.error("Error fetching data:", error);
+      toast({
+        title: "Error",
+        description: "Failed to load data. Please try again.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const handleSemesterFilterChange = (semesterId: string) => {
+    setSemesterFilter(semesterId);
+    setShowingFilteredResults(semesterId !== "all");
+  };
+
+  const isInSemester = (date: string, semesterId: string) => {
+    if (semesterId === "all") return true;
+
+    const [type, academicYear] = semesterId.split("-");
+    const [startYear, endYear] = academicYear.split("/");
+    const docDate = new Date(date);
+    const docMonth = docDate.getMonth() + 1;
+    const docYear = docDate.getFullYear();
+
+    if (type === "odd") {
+      return (
+        (docYear === parseInt(startYear) && docMonth >= 9 && docMonth <= 12) ||
+        (docYear === parseInt(endYear) && docMonth === 1)
+      );
+    } else {
+      return docYear === parseInt(endYear) && docMonth >= 2 && docMonth <= 8;
+    }
+  };
+
+  const filteredData =
+    semesterFilter === "all"
+      ? ragData
+      : ragData.filter((file) => isInSemester(file.created_at, semesterFilter));
+
+  const handleStartScraping = async (type = "all") => {
+    setIsLoading(true);
+    try {
+      const response = await fetch("/api/start-scraping", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ type }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Scraping failed");
+      }
+
+      const result = await response.json();
+
+      toast({
+        title: "Success",
+        description: result.message,
+        variant: "default",
+        duration: 2000,
+      });
+
+      setTimeout(fetchData, 5000);
+    } catch (error) {
+      console.error("Scraping error:", error);
+      let errorMessage = "Failed to run scraping";
+      if (error instanceof Error) {
+        errorMessage = error.message.includes("timeout")
+          ? "Scraping took too long to complete"
+          : error.message;
+      }
+
+      toast({
+        title: "Error",
+        description: errorMessage,
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const scraperTypeNames = {
+    all: "All Data",
+    dosen: "Data Dosen",
+    jadwal: "Data Jadwal",
+    jurusan: "Data Jurusan",
+    pnp: "Data PNP",
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="mb-6 flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
+        <div>
+          <h1 className="text-2xl font-bold">Documents</h1>
+          <p className="text-muted-foreground">
+            {ragData.length} documents available
+            {showingFilteredResults && ` (${filteredData.length} filtered)`}
+          </p>
+        </div>
+
+        <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={isRefreshing}
+            className="flex items-center gap-2"
+          >
+            <RefreshCw
+              className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
+            />
+            {isRefreshing ? "Refreshing..." : "Refresh"}
+          </Button>
+
+          <SemesterFilter onFilterChange={handleSemesterFilterChange} />
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                disabled={isLoading}
+                className="flex gap-2 bg-orange-600 hover:bg-orange-800 sm:me-2"
+              >
+                {isLoading ? "Scraping..." : "Start Scraping"}
+                <ChevronDown className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent
+              align="end"
+              className="z-50 min-w-[160px] rounded-md border bg-popover shadow-lg"
+            >
+              {Object.entries(scraperTypeNames).map(([type, name]) => (
+                <DropdownMenuItem
+                  key={type}
+                  className="cursor-pointer px-4 py-2 text-sm hover:bg-accent"
+                  onSelect={() => handleStartScraping(type)}
+                >
+                  {name}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <Button asChild className="bg-orange-600 hover:bg-orange-800">
+            <Link href={"/upload-document"}>Upload Document</Link>
+          </Button>
+        </div>
+      </div>
+
+      <div className="rounded-lg border">
+        {filteredData.length === 0 && showingFilteredResults ? (
+          <div className="p-8 text-center">
+            <p className="text-muted-foreground">
+              No documents match your filter.
+            </p>
+            <button
+              onClick={() => handleSemesterFilterChange("all")}
+              className="mt-2 text-orange-600 hover:underline"
+            >
+              Show all documents
+            </button>
+          </div>
+        ) : filteredData.length === 0 && !isRefreshing ? (
+          <div className="p-8 text-center">
+            <p className="text-muted-foreground">No documents available.</p>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Please upload documents or run scraping.
+            </p>
+          </div>
+        ) : (
+          <FileTable fetchData={fetchData} ragData={filteredData} />
+        )}
+      </div>
+    </div>
+  );
+}

app/(main)/layout.tsx

@@ -0,0 +1,19 @@
+import { Footer } from "@/components/Footer";
+import "../globals.css";
+import { Navbar } from "@/components/Navbar";
+import { Toaster } from "@/components/ui/toaster";
+
+export default function HomeLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="mx-auto w-full">
+      <Navbar />
+      <div className="mx-auto min-h-screen w-10/12 px-2">{children}</div>
+      <Toaster />
+      <Footer />
+    </div>
+  );
+}

app/(main)/page.tsx

@@ -0,0 +1,23 @@
+import RagDashboard from "@/app/(main)/components/RagDashboard";
+import { createClient } from "@/utils/supabase/server";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
+export default async function Home() {
+  const supabase = createClient();
+
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
+
+  if (!session) {
+    revalidatePath("/login", "page");
+    redirect("/login");
+  }
+
+  return (
+    <div>
+      <RagDashboard />
+    </div>
+  );
+}

app/(main)/upload-document/page.tsx

@@ -0,0 +1,116 @@
+import { UploadForm } from "@/components/UploadForm";
+import { createClient } from "@/utils/supabase/server";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import ExampleDoc from "../components/ExampleDoc";
+
+export default async function UploadDocument() {
+  const supabase = createClient();
+
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
+
+  if (!session) {
+    revalidatePath("/login", "page");
+    redirect("/login");
+  }
+
+  return (
+    <div className="mx-auto w-full md:w-3/4">
+      <h1 className="font-semibold">Upload Document</h1>
+      <div className="my-5 flex w-full rounded-md border border-slate-200 bg-slate-50 p-5">
+        <UploadForm />
+      </div>
+      <div className="mx-2">
+        <h1 className="font-semibold underline underline-offset-4">
+          Document Structure Guide
+        </h1>
+        <ol className="mt-5 list-decimal space-y-2 px-5">
+          <li>
+            Title And Metadata
+            <ul className="list-disc px-5">
+              <li>
+                Each document must start with a clear and concise title that
+                reflects the content of the document.
+              </li>
+              <li>
+                Include metadata such as author, date of creation, and keywords
+                for easier retrieval.{" "}
+                <span className="text-green-400">(optional)</span>
+              </li>
+            </ul>
+          </li>
+          <li>
+            Content Organization
+            <ul className="list-disc px-5">
+              <li>
+                The document should be organized into distinct sections, each
+                focusing on a single context or topic.
+              </li>
+              <li>
+                Each section must contain exactly one paragraph per context.
+              </li>
+            </ul>
+          </li>
+          <li>
+            Paragraph Formatting
+            <ul className="list-disc px-5">
+              <li>
+                Each paragraph should be concise, ideally between 50 to 150
+                words.
+              </li>
+              <li>
+                Paragraphs should be self-contained and contextually complete,
+                providing sufficient information on the topic without relying on
+                external references.
+              </li>
+              <li>
+                There must be one blank line between each paragraph to clearly
+                delineate contexts.
+              </li>
+            </ul>
+          </li>
+          <li>
+            Language and Style
+            <ul className="list-disc px-5">
+              <li>
+                Use clear and unambiguous language suitable for the intended
+                audience.
+              </li>
+              <li>
+                Avoid jargon unless it is defined within the paragraph or
+                commonly understood by the target audience.
+              </li>
+              <li>
+                Ensure proper grammar, punctuation, and spelling throughout the
+                document.
+              </li>
+            </ul>
+          </li>
+          <li>
+            Content Requirements
+            <ul className="list-disc px-5">
+              <li>
+                Information must be accurate, up-to-date, and relevant to the
+                topic.
+              </li>
+              <li>
+                Each paragraph should aim to answer a specific question or
+                address a particular aspect of the context.
+              </li>
+              <li>
+                Include any necessary explanations, examples, or evidence within
+                the paragraph to enhance understanding.
+              </li>
+            </ul>
+          </li>
+        </ol>
+        {/* <h1 className="mb-3 mt-5 font-semibold underline underline-offset-4">
+          Document Example :
+        </h1>
+        <ExampleDoc /> */}
+      </div>
+    </div>
+  );
+}

app/api/cron-scraping/route.ts

@@ -0,0 +1,85 @@
+// File: app/api/cron-scraping/route.ts
+import { spawn } from "child_process";
+import { NextResponse } from "next/server";
+
+const VALID_SCRAPERS = ["dosen", "jadwal", "jurusan", "pnp", "all"];
+const CRON_SECRET =
+  process.env.CRON_SECRET || "fLXB3uzAfSgjrMxg3NxsprqYuPk63+F41zUI2Xlv2fE=";
+
+export async function GET(request: Request) {
+  try {
+    const url = new URL(request.url);
+    const authHeader = request.headers.get("Authorization");
+    const token = authHeader?.startsWith("Bearer ")
+      ? authHeader.substring(7)
+      : url.searchParams.get("key");
+
+    // Validasi token
+    if (token !== CRON_SECRET) {
+      console.log("[Scraping] Unauthorized access attempt");
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    // Ambil tipe scraper
+    const scraperType = url.searchParams.get("type") || "all";
+    if (!VALID_SCRAPERS.includes(scraperType)) {
+      return NextResponse.json(
+        {
+          error: `Invalid scraper type. Must be one of: ${VALID_SCRAPERS.join(", ")}`,
+        },
+        { status: 400 },
+      );
+    }
+
+    // Tentukan nama script
+    let commandArgs: string[] = [];
+    switch (scraperType) {
+      case "dosen":
+        commandArgs = ["dosen_scrap.py"];
+        break;
+      case "jadwal":
+        commandArgs = ["jadwal_scrap.py"];
+        break;
+      case "jurusan":
+        commandArgs = ["jurusan_scrap.py"];
+        break;
+      case "pnp":
+        commandArgs = ["pnp_scrap.py"];
+        break;
+      case "all":
+        commandArgs = ["run_all.py"]; // Buat file khusus jika ingin sekaligus
+        break;
+    }
+
+    // Jalankan proses secara terpisah
+    const child = spawn("python3", commandArgs, {
+      cwd: "scrapping",
+      detached: true,
+      stdio: "ignore",
+      env: {
+        ...process.env,
+        SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
+        SUPABASE_KEY: process.env.NEXT_PUBLIC_SUPABASE_SERVICE_KEY,
+        SUPABASE_BUCKET: process.env.NEXT_PUBLIC_SUPABASE_STORAGE_BUCKET,
+      },
+    });
+
+    child.unref();
+
+    return NextResponse.json({
+      success: true,
+      message: `Scraping ${scraperType} started in background`,
+      startedAt: new Date().toISOString(),
+    });
+  } catch (error: any) {
+    console.error("[Scraping] Unexpected error:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: "Failed to start scraping",
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}

app/api/start-scraping/route.ts

@@ -0,0 +1,98 @@
+import { exec } from "child_process";
+import { NextResponse } from "next/server";
+import { promisify } from "util";
+
+const execAsync = promisify(exec);
+
+const VALID_SCRAPERS = ["dosen", "jadwal", "jurusan", "pnp", "all"];
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json().catch(() => ({}));
+    const scraperType = body.type || "all";
+
+    if (!VALID_SCRAPERS.includes(scraperType)) {
+      return NextResponse.json(
+        {
+          error: `Invalid scraper type. Must be one of: ${VALID_SCRAPERS.join(", ")}`,
+        },
+        { status: 400 },
+      );
+    }
+
+    // Set working directory to the scraper folder
+    const baseCommand = "cd scrapping &&";
+    let command;
+
+    switch (scraperType) {
+      case "dosen":
+        command = `${baseCommand} python3 dosen_scrap.py`;
+        break;
+      case "jadwal":
+        command = `${baseCommand} python3 jadwal_scrap.py`;
+        break;
+      case "jurusan":
+        command = `${baseCommand} python3 jurusan_scrap.py`;
+        break;
+      case "pnp":
+        command = `${baseCommand} python3 pnp_scrap.py`;
+        break;
+      case "all":
+      default:
+        command = `${baseCommand} python3 run_all.py`;
+        break;
+    }
+
+    console.log(`[Scraping] Starting process: ${command}`);
+
+    // Increased timeout to 15 minutes
+    const { stdout, stderr } = await execAsync(command, {
+      timeout: 900000,
+      maxBuffer: 1024 * 1024 * 5, // 5MB buffer
+    });
+
+    console.log("[Scraping] Process completed:", {
+      stdout: stdout,
+      stderr: stderr,
+    });
+
+    // Only treat as error if stderr contains actual error messages
+    if (stderr && !stderr.includes("INFO:") && !stderr.includes("DEBUG:")) {
+      console.error("[Scraping] Error output:", stderr);
+      return NextResponse.json(
+        {
+          success: false,
+          error: "Scraping process completed with errors",
+          details: stderr,
+        },
+        { status: 500 },
+      );
+    }
+
+    return NextResponse.json({
+      success: true,
+      message: `Scraping ${scraperType} completed successfully`,
+      output: stdout,
+      warnings: stderr || null,
+      finishedAt: new Date().toISOString(),
+    });
+  } catch (error: any) {
+    console.error("[Scraping] Failed to execute:", error);
+
+    let errorMessage = "Scraping process failed";
+    if (error.code === "ETIMEDOUT") {
+      errorMessage = "Scraping process timed out (took too long)";
+    } else if (error.killed) {
+      errorMessage = "Scraping process was terminated";
+    }
+
+    return NextResponse.json(
+      {
+        success: false,
+        error: errorMessage,
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}

app/error/page.tsx

@@ -0,0 +1,3 @@
+export default function ErrorPage() {
+  return <p>Sorry, something went wrong</p>;
+}

app/globals.css

@@ -0,0 +1,76 @@
+@tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer base {
+    :root {
+      --background: 0 0% 100%;
+      --foreground: 222.2 84% 4.9%;
+
+      --card: 0 0% 100%;
+      --card-foreground: 222.2 84% 4.9%;
+
+      --popover: 0 0% 100%;
+      --popover-foreground: 222.2 84% 4.9%;
+
+      --primary: 222.2 47.4% 11.2%;
+      --primary-foreground: 210 40% 98%;
+
+      --secondary: 210 40% 96.1%;
+      --secondary-foreground: 222.2 47.4% 11.2%;
+
+      --muted: 210 40% 96.1%;
+      --muted-foreground: 215.4 16.3% 46.9%;
+
+      --accent: 210 40% 96.1%;
+      --accent-foreground: 222.2 47.4% 11.2%;
+
+      --destructive: 0 84.2% 60.2%;
+      --destructive-foreground: 210 40% 98%;
+
+      --border: 214.3 31.8% 91.4%;
+      --input: 214.3 31.8% 91.4%;
+      --ring: 222.2 84% 4.9%;
+
+      --radius: 0.5rem;
+    }
+
+    .dark {
+      --background: 222.2 84% 4.9%;
+      --foreground: 210 40% 98%;
+
+      --card: 222.2 84% 4.9%;
+      --card-foreground: 210 40% 98%;
+
+      --popover: 222.2 84% 4.9%;
+      --popover-foreground: 210 40% 98%;
+
+      --primary: 210 40% 98%;
+      --primary-foreground: 222.2 47.4% 11.2%;
+
+      --secondary: 217.2 32.6% 17.5%;
+      --secondary-foreground: 210 40% 98%;
+
+      --muted: 217.2 32.6% 17.5%;
+      --muted-foreground: 215 20.2% 65.1%;
+
+      --accent: 217.2 32.6% 17.5%;
+      --accent-foreground: 210 40% 98%;
+
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 210 40% 98%;
+
+      --border: 217.2 32.6% 17.5%;
+      --input: 217.2 32.6% 17.5%;
+      --ring: 212.7 26.8% 83.9%;
+    }
+  }
+
+  @layer base {
+    * {
+      @apply border-border;
+    }
+    body {
+      @apply bg-background text-foreground;
+    }
+  }

app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "PNP-Bot Admin",
+  description: " Situs Manajemen Data Chatbot Politeknik Negeri Padang",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

components/FileTable.tsx

@@ -0,0 +1,341 @@
+"use client";
+import { useEffect, useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { DownloadIcon, EyeOpenIcon, TrashIcon } from "@radix-ui/react-icons";
+import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
+import { formatDatetime } from "@/utils/formatDatetime";
+import { createClient } from "@/utils/supabase/client";
+import { toast } from "@/hooks/use-toast";
+
+interface FileTableProps {
+  fetchData: () => Promise<void>;
+  ragData: any[];
+}
+
+export default function FileTable({ fetchData, ragData }: FileTableProps) {
+  const supabase = createClient();
+  const [loadingMap, setLoadingMap] = useState<Record<string, boolean>>({});
+  const [currentPage, setCurrentPage] = useState(1);
+  const [sortedData, setSortedData] = useState<any[]>([]);
+  const itemsPerPage = 10; // Adjust as needed
+  const pagesToShow = 2; // Number of page buttons to display at once
+
+  useEffect(() => {
+    // Sort data by created_at in descending order (newest first)
+    if (ragData && ragData.length > 0) {
+      const sorted = [...ragData].sort((a, b) => {
+        return (
+          new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+        );
+      });
+      setSortedData(sorted);
+    } else {
+      setSortedData([]);
+    }
+  }, [ragData]);
+
+  const deleteItem = async (fileName: string) => {
+    const confirmed = window.confirm(
+      `Yakin ingin menghapus file "${fileName}"?`,
+    );
+    if (!confirmed) return;
+
+    try {
+      setLoadingMap((prev) => ({ ...prev, [fileName]: true }));
+
+      const { error } = await supabase.storage
+        .from("pnp-bot-storage")
+        .remove([fileName]);
+
+      if (error) {
+        toast({
+          title: "Gagal menghapus file",
+          description: error.message,
+          variant: "destructive",
+        });
+      } else {
+        toast({
+          title: "File berhasil dihapus",
+          description: `File "${fileName}" telah dihapus.`,
+        });
+        fetchData(); // refresh daftar file
+      }
+    } catch (err) {
+      console.error("Gagal menghapus:", err);
+      toast({
+        title: "Terjadi kesalahan",
+        description: "Tidak dapat menghapus file.",
+        variant: "destructive",
+      });
+    } finally {
+      setLoadingMap((prev) => ({ ...prev, [fileName]: false }));
+    }
+  };
+
+  // Lihat File (Open in New Tab)
+  const inspectItem = (fileName: string) => {
+    const { data } = supabase.storage
+      .from("pnp-bot-storage")
+      .getPublicUrl(fileName);
+
+    if (!data?.publicUrl) {
+      toast({
+        title: "Gagal membuka file",
+        description: `File "${fileName}" tidak memiliki URL publik.`,
+        variant: "destructive",
+      });
+      return;
+    }
+
+    window.open(data.publicUrl, "_blank");
+  };
+
+  // Unduh File
+  const downloadItem = async (fileName: string) => {
+    try {
+      // Retrieve the file as a blob using the download method
+      const { data, error } = await supabase.storage
+        .from("pnp-bot-storage") // Use your bucket name
+        .download(fileName);
+
+      if (error) {
+        toast({
+          title: "Gagal mengunduh file",
+          description: error.message || "Terjadi kesalahan saat mengunduh.",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      // Create a link element to download the file
+      const url = URL.createObjectURL(data);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = fileName;
+
+      // Programmatically trigger the download
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+
+      // Clean up the object URL
+      URL.revokeObjectURL(url);
+
+      toast({
+        title: "Unduh berhasil",
+        description: `File "${fileName}" berhasil diunduh.`,
+        duration: 2000,
+      });
+    } catch (err) {
+      console.error("Gagal mengunduh:", err);
+      toast({
+        title: "Terjadi kesalahan",
+        description: "Tidak dapat mengunduh file.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  // Calculate pagination
+  const totalPages = Math.ceil(sortedData.length / itemsPerPage);
+  const paginatedData = sortedData.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage,
+  );
+
+  const goToNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const goToPrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const goToPage = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  // Calculate the range of page numbers to display
+  const startPage = Math.max(1, currentPage - Math.floor(pagesToShow / 2));
+  const endPage = Math.min(totalPages, startPage + pagesToShow - 1);
+  const pageNumbers = Array.from(
+    { length: endPage - startPage + 1 },
+    (_, index) => startPage + index,
+  );
+
+  return (
+    <div className="space-y-4">
+      <Table>
+        <TableHeader className="bg-slate-100">
+          <TableRow>
+            <TableHead className="text-center">#</TableHead>
+            <TableHead className="min-w-[240px]">Name</TableHead>
+            <TableHead>Uploaded At</TableHead>
+            <TableHead>File Size</TableHead>
+            <TableHead></TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {paginatedData && paginatedData.length > 0 ? (
+            paginatedData.map((item: any, index: number) => (
+              <TableRow key={index}>
+                <TableCell className="text-center">
+                  {(currentPage - 1) * itemsPerPage + index + 1}
+                </TableCell>
+                <TableCell className="min-w-[240px] font-medium">
+                  {item.name}
+                </TableCell>
+                <TableCell>{formatDatetime(item.created_at)}</TableCell>
+                <TableCell>{item.metadata.size}</TableCell>
+                <TableCell className="flex justify-center gap-2">
+                  <Button
+                    variant={"secondary"}
+                    className="hover:bg-neutral-500 hover:text-white"
+                    onClick={() => inspectItem(item.name)}
+                  >
+                    <EyeOpenIcon className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="hover:bg-blue-600 hover:text-white"
+                    onClick={() => downloadItem(item.name)}
+                  >
+                    <DownloadIcon className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant={"destructive"}
+                    className="hover:bg-red-800"
+                    onClick={() => deleteItem(item.name)}
+                  >
+                    {loadingMap[item.name] ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <TrashIcon className="h-4 w-4" />
+                    )}
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={5} className="py-4 text-center">
+                No Data Available
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+
+      {/* Pagination Controls */}
+      {sortedData.length > 0 && (
+        <div className="flex items-center justify-between px-4 py-3">
+          <div className="text-sm text-muted-foreground">
+            Showing{" "}
+            <span className="font-medium">
+              {(currentPage - 1) * itemsPerPage + 1}
+            </span>{" "}
+            to{" "}
+            <span className="font-medium">
+              {Math.min(currentPage * itemsPerPage, sortedData.length)}
+            </span>{" "}
+            of <span className="font-medium">{sortedData.length}</span> files
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={goToPrevPage}
+              disabled={currentPage === 1}
+              className="px-3"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+
+            {/* Always show first page */}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => goToPage(1)}
+              className={currentPage === 1 ? "bg-blue-500 text-white" : ""}
+              disabled={currentPage === 1}
+            >
+              1
+            </Button>
+
+            {/* Show "..." if current page is far from start */}
+            {currentPage > 3 && <span className="px-2">...</span>}
+
+            {/* Dynamic page numbers (middle range) */}
+            <div className="flex space-x-1">
+              {Array.from({ length: Math.min(3, totalPages - 2) }, (_, i) => {
+                let page;
+                if (currentPage <= 2)
+                  page = i + 2; // Near start: 2, 3, 4
+                else if (currentPage >= totalPages - 1)
+                  page = totalPages - 2 + i; // Near end
+                else page = currentPage - 1 + i; // Middle range
+
+                if (page > 1 && page < totalPages) {
+                  return (
+                    <Button
+                      key={page}
+                      variant="outline"
+                      size="sm"
+                      className={
+                        currentPage === page ? "bg-blue-500 text-white" : ""
+                      }
+                      onClick={() => goToPage(page)}
+                    >
+                      {page}
+                    </Button>
+                  );
+                }
+                return null;
+              })}
+            </div>
+
+            {/* Show "..." if current page is far from end */}
+            {currentPage < totalPages - 2 && <span className="px-2">...</span>}
+
+            {/* Always show last page (if different from first) */}
+            {totalPages > 1 && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => goToPage(totalPages)}
+                disabled={currentPage === totalPages}
+                className={
+                  currentPage === totalPages ? "bg-blue-500 text-white" : ""
+                }
+              >
+                {totalPages}
+              </Button>
+            )}
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={goToNextPage}
+              disabled={currentPage === totalPages || totalPages === 0}
+              className="px-3"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

components/Footer.tsx

@@ -0,0 +1,12 @@
+"use client";
+import * as React from "react";
+
+export function Footer() {
+  return (
+    <div className="mt-10 flex w-full items-center justify-center border-t bg-orange-600 py-5">
+      <h1 className="text-center text-sm font-semibold text-white">
+        PNP Bot est. 2025
+      </h1>
+    </div>
+  );
+}

components/Navbar.tsx

@@ -0,0 +1,27 @@
+"use client";
+import * as React from "react";
+import PnpLogo from "../public/logo-pnp-small.webp";
+import Image from "next/image";
+import SignOutButton from "./SignOutButton";
+import Link from "next/link";
+
+export function Navbar() {
+  return (
+    <div className="mb-5 flex w-full border-b bg-slate-50 py-5">
+      <div className="mx-auto flex w-10/12 items-center justify-between">
+        <Link href="/">
+          <div className="flex items-center gap-2">
+            <Image
+              src={PnpLogo}
+              width={30}
+              height={30}
+              alt="Logo Teknologi Informasi"
+            />
+            <h1 className="font-semibold">PNP-Bot</h1>
+          </div>
+        </Link>
+        <SignOutButton />
+      </div>
+    </div>
+  );
+}

components/SemesterFilter.tsx

@@ -0,0 +1,178 @@
+import { useState, useEffect } from "react";
+import { ChevronDown, Filter, Calendar } from "lucide-react";
+
+// Define the props interface for the component
+interface SemesterFilterProps {
+  onFilterChange?: (semesterId: string) => void; // Make it optional with ?
+}
+
+// Define the semester option type
+interface SemesterOption {
+  id: string;
+  label: string;
+  description: string;
+}
+
+export default function SemesterFilter({
+  onFilterChange,
+}: SemesterFilterProps) {
+  const [semesterFilter, setSemesterFilter] = useState("all");
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+
+  // Get current year
+  const currentYear = new Date().getFullYear();
+
+  // Generate academic years (e.g., 2023/2024, 2024/2025)
+  const generateAcademicYears = (
+    startYear: number,
+    endYear: number,
+  ): string[] => {
+    const years: string[] = [];
+    for (let year = startYear; year <= endYear; year++) {
+      years.push(`${year}/${year + 1}`);
+    }
+    return years.reverse(); // Most recent first okay
+  };
+
+  const academicYears = generateAcademicYears(currentYear - 3, currentYear);
+
+  // Generate semester options
+  const semesterOptions: SemesterOption[] = [];
+  academicYears.forEach((academicYear) => {
+    const [startYear, endYear] = academicYear.split("/");
+    // Odd semester (September startYear - January endYear)
+    semesterOptions.push({
+      id: `odd-${academicYear}`,
+      label: `Ganjil ${academicYear}`,
+      description: `September ${startYear} - January ${endYear}`,
+    });
+
+    // Even semester (February - August of endYear)
+    semesterOptions.push({
+      id: `even-${academicYear}`,
+      label: `Genap ${academicYear}`,
+      description: `February - August ${endYear}`,
+    });
+  });
+
+  // Check if a document falls within a specific semester
+  const isInSemester = (date: string, semesterId: string) => {
+    if (semesterId === "all") return true;
+
+    const [type, academicYear] = semesterId.split("-");
+    const [startYear, endYear] = academicYear.split("/");
+    const docDate = new Date(date);
+    const docMonth = docDate.getMonth() + 1; // 1-12
+    const docYear = docDate.getFullYear();
+
+    if (type === "odd") {
+      // Odd semester: September (9) - January (1) of next year
+      return (
+        (docYear === parseInt(startYear) && docMonth >= 9 && docMonth <= 12) ||
+        (docYear === parseInt(endYear) && docMonth === 1)
+      );
+    } else {
+      // Even semester: February (2) - August (8)
+      return docYear === parseInt(endYear) && docMonth >= 2 && docMonth <= 8;
+    }
+  };
+
+  const handleFilterClick = () => {
+    setIsFilterOpen(!isFilterOpen);
+  };
+
+  const handleSemesterSelect = (semesterId: string) => {
+    setSemesterFilter(semesterId);
+    setIsFilterOpen(false);
+
+    // Call the onFilterChange prop if it exists
+    if (onFilterChange) {
+      onFilterChange(semesterId);
+    }
+  };
+
+  // Get display text for current filter
+  const getCurrentFilterText = () => {
+    if (semesterFilter === "all") return "All Semesters";
+
+    const selectedSemester = semesterOptions.find(
+      (option) => option.id === semesterFilter,
+    );
+    return selectedSemester ? selectedSemester.label : "All Semesters";
+  };
+
+  return (
+    <div className="relative">
+      {/* Filter Button */}
+      <button
+        onClick={handleFilterClick}
+        className="flex items-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm hover:bg-gray-50"
+      >
+        <Filter className="h-4 w-4" />
+        <Calendar className="h-4 w-4" />
+        <span>{getCurrentFilterText()}</span>
+        <ChevronDown className="h-4 w-4" />
+      </button>
+
+      {/* Dropdown Menu */}
+      {isFilterOpen && (
+        <div className="absolute z-50 mt-2 min-w-[240px] rounded-md border border-gray-200 bg-white shadow-lg">
+          <div className="py-1">
+            {/* All option */}
+            <div
+              onClick={() => handleSemesterSelect("all")}
+              className={`cursor-pointer px-4 py-2 hover:bg-gray-100 ${
+                semesterFilter === "all" ? "bg-blue-50 text-blue-600" : ""
+              }`}
+            >
+              All Semesters
+            </div>
+
+            {/* Divider */}
+            <div className="my-1 border-t border-gray-200"></div>
+
+            {/* Academic Years and Semesters */}
+            {academicYears.map((year, yearIndex) => (
+              <div key={year}>
+                {yearIndex > 0 && (
+                  <div className="my-1 border-t border-gray-200"></div>
+                )}
+                <div className="px-4 py-2 text-xs font-semibold text-gray-500">
+                  Academic Year {year}
+                </div>
+
+                {/* Odd Semester */}
+                <div
+                  onClick={() => handleSemesterSelect(`odd-${year}`)}
+                  className={`cursor-pointer px-4 py-2 hover:bg-gray-100 ${
+                    semesterFilter === `odd-${year}`
+                      ? "bg-blue-50 text-blue-600"
+                      : ""
+                  }`}
+                >
+                  <div className="font-medium">Ganjil {year}</div>
+                  <div className="text-xs text-gray-500">
+                    September - January
+                  </div>
+                </div>
+
+                {/* Even Semester */}
+                <div
+                  onClick={() => handleSemesterSelect(`even-${year}`)}
+                  className={`cursor-pointer px-4 py-2 hover:bg-gray-100 ${
+                    semesterFilter === `even-${year}`
+                      ? "bg-blue-50 text-blue-600"
+                      : ""
+                  }`}
+                >
+                  <div className="font-medium">Genap {year}</div>
+                  <div className="text-xs text-gray-500">February - August</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

components/SignInForm.tsx

@@ -0,0 +1,84 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { z } from "zod";
+import { Input } from "./ui/input";
+import { Button } from "./ui/button";
+import { login } from "@/utils/signIn";
+import { Label } from "./ui/label";
+
+const schema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+});
+
+type FormFields = z.infer<typeof schema>;
+
+const SignInForm = () => {
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<FormFields>({
+    defaultValues: {},
+    resolver: zodResolver(schema),
+  });
+
+  const onSubmit: SubmitHandler<FormFields> = async (data) => {
+    try {
+      await login(data.email, data.password);
+    } catch (error) {
+      setError("root", {
+        message: "Invalid email or password",
+      });
+    }
+  };
+
+  return (
+    <>
+      <form className="flex flex-col gap-2" onSubmit={handleSubmit(onSubmit)}>
+        <Label htmlFor="email" className="text-left">
+          Email
+        </Label>
+        <Input
+          {...register("email")}
+          placeholder="Email"
+          id="email"
+          type="email"
+        />
+        {errors.email && (
+          <div className="text-left text-xs text-red-500">
+            {errors.email.message}
+          </div>
+        )}
+        <Label htmlFor="password" className="text-left">
+          Password
+        </Label>
+        <Input
+          {...register("password")}
+          placeholder="Password"
+          type="password"
+          id="password"
+        />
+        {errors.password && (
+          <div className="text-left text-xs text-red-500">
+            {errors.password.message}
+          </div>
+        )}
+        <Button
+          disabled={isSubmitting}
+          type="submit"
+          className="mt-4 bg-orange-600 hover:bg-orange-800"
+        >
+          {isSubmitting ? "Loading..." : "Login"}
+        </Button>
+        {errors.root && (
+          <div className="text-xs text-red-500">{errors.root.message}</div>
+        )}
+      </form>
+    </>
+  );
+};
+
+export default SignInForm;

components/SignOutButton.tsx

@@ -0,0 +1,41 @@
+"use client";
+import { signOut } from "@/utils/signOut";
+import { Button } from "./ui/button";
+import { ExitIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
+
+const SignOutButton = () => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  async function handleSignOut() {
+    try {
+      setIsLoading(true);
+      await signOut();
+      setIsLoading(false);
+    } catch (error) {}
+  }
+
+  return (
+    <>
+      <Button
+        className="hover:bg-slate-100"
+        variant={"ghost"}
+        onClick={handleSignOut}
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            Logging Out
+          </>
+        ) : (
+          <>
+            <ExitIcon className="mr-2 h-4 w-4" />
+            Log Out
+          </>
+        )}
+      </Button>
+    </>
+  );
+};
+
+export default SignOutButton;

components/UploadForm.tsx

@@ -0,0 +1,73 @@
+"use client";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { createClient } from "@/utils/supabase/client";
+import { useRouter } from "next/navigation";
+
+type FormValues = {
+  file: FileList;
+};
+
+export function UploadForm() {
+  const supabase = createClient();
+  const router = useRouter();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>();
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    const selectedFile = data.file[0];
+    try {
+      await supabase.storage
+        .from("pnp-bot-storage")
+        .upload(`${selectedFile.name}`, selectedFile, {
+          cacheControl: "3600",
+          upsert: false,
+        });
+      reset();
+      router.replace("/");
+    } catch (error) {
+      console.error("Upload error:", error);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="w-full">
+      <div className="mb-3">
+        <Input
+          placeholder="Upload file"
+          {...register("file", { required: true })}
+          id="upload_file"
+          type="file"
+          accept=".pdf, .doc, .docx, .txt"
+          className="mb-1 bg-white"
+        />
+      </div>
+      <div className="flex justify-end">
+        <Button
+          disabled={isSubmitting}
+          type="submit"
+          className="bg-orange-600 hover:bg-orange-800"
+        >
+          {isSubmitting ? "Loading..." : "Submit"}
+        </Button>
+      </div>
+    </form>
+  );
+}

components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

components/ui/dialog.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

components/ui/navigation-menu.tsx

@@ -0,0 +1,128 @@
+import * as React from "react"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDownIcon
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}

components/ui/table.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

components/ui/toast.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <Cross2Icon className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}

components/ui/toaster.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useToast } from "@/hooks/use-toast";
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}

database.types.ts

@@ -0,0 +1,138 @@
+export type Json =
+  | string
+  | number
+  | boolean
+  | null
+  | { [key: string]: Json | undefined }
+  | Json[]
+
+export type Database = {
+  public: {
+    Tables: {
+      user: {
+        Row: {
+          created_at: string
+          email: string | null
+          id: number
+          name: string | null
+          password: string | null
+          position: string | null
+          updated_at: string | null
+        }
+        Insert: {
+          created_at?: string
+          email?: string | null
+          id?: number
+          name?: string | null
+          password?: string | null
+          position?: string | null
+          updated_at?: string | null
+        }
+        Update: {
+          created_at?: string
+          email?: string | null
+          id?: number
+          name?: string | null
+          password?: string | null
+          position?: string | null
+          updated_at?: string | null
+        }
+        Relationships: []
+      }
+    }
+    Views: {
+      [_ in never]: never
+    }
+    Functions: {
+      [_ in never]: never
+    }
+    Enums: {
+      [_ in never]: never
+    }
+    CompositeTypes: {
+      [_ in never]: never
+    }
+  }
+}
+
+type PublicSchema = Database[Extract<keyof Database, "public">]
+
+export type Tables<
+  PublicTableNameOrOptions extends
+    | keyof (PublicSchema["Tables"] & PublicSchema["Views"])
+    | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+        Database[PublicTableNameOrOptions["schema"]]["Views"])
+    : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+      Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
+      Row: infer R
+    }
+    ? R
+    : never
+  : PublicTableNameOrOptions extends keyof (PublicSchema["Tables"] &
+        PublicSchema["Views"])
+    ? (PublicSchema["Tables"] &
+        PublicSchema["Views"])[PublicTableNameOrOptions] extends {
+        Row: infer R
+      }
+      ? R
+      : never
+    : never
+
+export type TablesInsert<
+  PublicTableNameOrOptions extends
+    | keyof PublicSchema["Tables"]
+    | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+    : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Insert: infer I
+    }
+    ? I
+    : never
+  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
+    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+        Insert: infer I
+      }
+      ? I
+      : never
+    : never
+
+export type TablesUpdate<
+  PublicTableNameOrOptions extends
+    | keyof PublicSchema["Tables"]
+    | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+    : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Update: infer U
+    }
+    ? U
+    : never
+  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
+    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+        Update: infer U
+      }
+      ? U
+      : never
+    : never
+
+export type Enums<
+  PublicEnumNameOrOptions extends
+    | keyof PublicSchema["Enums"]
+    | { schema: keyof Database },
+  EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
+    : never = never,
+> = PublicEnumNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
+  : PublicEnumNameOrOptions extends keyof PublicSchema["Enums"]
+    ? PublicSchema["Enums"][PublicEnumNameOrOptions]
+    : never

hooks/use-toast.ts

@@ -0,0 +1,194 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }

lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

middleware.ts

@@ -0,0 +1,12 @@
+import { type NextRequest } from "next/server";
+import { updateSession } from "@/utils/supabase/middleware";
+
+export async function middleware(request: NextRequest) {
+  return await updateSession(request);
+}
+
+export const config = {
+  matcher: [
+    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
+  ],
+};

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "admin-ui",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.4.2",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.7",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.2.7",
+    "@supabase/ssr": "^0.3.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "jose": "^5.4.0",
+    "lucide-react": "^0.383.0",
+    "next": "14.2.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-hook-form": "^7.51.5",
+    "sharp": "^0.34.1",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8",
+    "prettier": "^3.3.0",
+    "prettier-plugin-tailwindcss": "^0.6.1",
+    "supabase": "^1.172.2",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;