feat: Implement guide matricole

next.config.ts

@@ -10,9 +10,20 @@ const config: NextConfig = {
     ignoreBuildErrors: true,
   },
   output: "standalone",
-  transpilePackages: ["@t3-oss/env-nextjs", "@t3-oss/env-core"],
+  transpilePackages: ["@t3-oss/env-core", "@t3-oss/env-nextjs"],
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**.blob.core.windows.net",
+      },
+    ],
+  },
   experimental: {
     reactCompiler: true,
+    serverActions: {
+      bodySizeLimit: "2mb",
+    },
   },
 }
 

package.json

@@ -16,7 +16,7 @@
     "@base-ui/react": "^1.3.0",
     "@better-auth/passkey": "^1.5.5",
     "@hookform/resolvers": "^3.9.1",
-    "@polinetwork/backend": "^0.16.0",
+    "@polinetwork/backend": "^0.16.4",
     "@radix-ui/react-dialog": "^1.1.15",
     "@t3-oss/env-nextjs": "^0.13.10",
     "@tanstack/react-table": "^8.21.2",

src/app/dashboard/(active)/azure/members/table.tsx

@@ -49,11 +49,7 @@ export function AssocTable({ members }: { members: AzureMember[] }) {
         <CreateAssocUser />
       </div>
 
-      <DataTable
-        data={sortByAssocNumber(users)}
-        // @ts-expect-error idk what is going on here
-        columns={columns}
-      />
+      <DataTable data={sortByAssocNumber(users)} columns={columns} />
     </div>
   )
 }

src/app/dashboard/(active)/web/guide/columns.tsx

@@ -0,0 +1,35 @@
+"use client"
+import { createColumnHelper } from "@tanstack/react-table"
+import { format } from "date-fns"
+import { DeleteGuide } from "./delete-guide"
+import type { Guide } from "./types"
+
+const ch = createColumnHelper<Guide>()
+
+export const columns = (onDeleted: (id: number) => void) => [
+  ch.accessor("version", {
+    id: "version",
+    header: "Version",
+    cell: ({ getValue }) => <span>{getValue()}</span>,
+  }),
+  ch.accessor("date", {
+    id: "date",
+    header: "Date",
+    cell: ({ getValue }) => format(new Date(getValue()), "dd/MM/yyyy"),
+  }),
+  ch.accessor("file", {
+    id: "file",
+    header: "File",
+    cell: ({ getValue }) => (
+      <a href={getValue()} target="_blank" rel="noreferrer" className="text-primary underline">
+        Download
+      </a>
+    ),
+  }),
+  ch.group({
+    id: "actions",
+    cell: (props) => (
+      <DeleteGuide id={props.row.original.id} version={props.row.original.version} onDeleted={onDeleted} />
+    ),
+  }),
+]

src/app/dashboard/(active)/web/guide/create-guide.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import { format } from "date-fns"
+import { ChevronDownIcon, Plus, Upload } from "lucide-react"
+import { useState } from "react"
+import { toast } from "sonner"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Field, FieldLabel } from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { createGuide } from "@/server/actions/guides"
+import type { Guide } from "./types"
+
+export function CreateGuide({
+  existingVersions,
+  latestVersion,
+  onCreated,
+}: {
+  existingVersions: string[]
+  latestVersion?: string
+  onCreated: (guide: Guide) => void
+}) {
+  const [open, setOpen] = useState(false)
+  const [version, setVersion] = useState(latestVersion ?? "")
+  const [date, setDate] = useState<Date | undefined>(new Date())
+  const [datePickerOpen, setDatePickerOpen] = useState(false)
+  const [file, setFile] = useState<File | null>(null)
+  const [pending, setPending] = useState(false)
+
+  const trimmedVersion = version.trim()
+  const isDuplicate = trimmedVersion.length > 0 && existingVersions.includes(trimmedVersion)
+  const disabled = !trimmedVersion || !date || !file || isDuplicate || pending
+
+  function handleOpenChange(v: boolean) {
+    setOpen(v)
+    if (v) {
+      setVersion(latestVersion ?? "")
+      setDate(new Date())
+      setFile(null)
+    }
+  }
+
+  async function handleSubmit() {
+    if (!date || !file || isDuplicate) return
+    setPending(true)
+
+    try {
+      const { guide, error } = await createGuide({ version: trimmedVersion, date: date.toISOString(), file })
+
+      if (error === "UNAUTHORIZED") toast.error("You don't have permission to add guides.")
+      else if (error === "DUPLICATE_VERSION") toast.error("This version already exists.")
+      else if (!guide) toast.error("There was an error creating the guide.")
+      else {
+        toast.success("Guide created successfully")
+        onCreated(guide)
+        handleOpenChange(false)
+      }
+    } catch (err) {
+      toast.error("There was an error")
+      console.error(err)
+    } finally {
+      setPending(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger
+        render={
+          <Button variant="outline">
+            <Plus size={20} /> Add Guide
+          </Button>
+        }
+      />
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Add Guide</DialogTitle>
+          <DialogDescription>Upload a new version of the Guida della Matricola.</DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4">
+          <div className="grid w-full items-center gap-1.5">
+            <Label htmlFor="version">Version</Label>
+            <Input
+              id="version"
+              autoComplete="off"
+              placeholder="v.1.0.0"
+              value={version}
+              required
+              aria-invalid={isDuplicate}
+              onChange={(e) => setVersion(e.target.value)}
+            />
+            {isDuplicate && <p className="text-destructive text-sm">This version already exists.</p>}
+          </div>
+
+          <Field>
+            <FieldLabel htmlFor="date-picker">Date</FieldLabel>
+            <Popover open={datePickerOpen} onOpenChange={setDatePickerOpen}>
+              <PopoverTrigger
+                render={
+                  <Button variant="outline" id="date-picker" className="w-full justify-between font-normal">
+                    {date ? format(date, "dd/MM/yyyy") : "Select date"}
+                    <ChevronDownIcon data-icon="inline-end" />
+                  </Button>
+                }
+              />
+              <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+                <Calendar
+                  mode="single"
+                  selected={date}
+                  captionLayout="dropdown"
+                  defaultMonth={date}
+                  required
+                  onSelect={(d) => {
+                    setDate(d)
+                    setDatePickerOpen(false)
+                  }}
+                />
+              </PopoverContent>
+            </Popover>
+          </Field>
+
+          <div className="grid w-full items-center gap-1.5">
+            <Label htmlFor="file">PDF File</Label>
+            <label
+              htmlFor="file"
+              className="flex h-8 w-full cursor-pointer items-center gap-2 rounded-lg border border-input bg-transparent px-2.5 text-sm transition-colors hover:bg-accent/50"
+            >
+              <Upload className="size-4 shrink-0 text-muted-foreground" />
+              <span className={file ? "truncate" : "truncate text-muted-foreground"}>
+                {file ? file.name : "Choose a PDF file..."}
+              </span>
+            </label>
+            <Input
+              id="file"
+              type="file"
+              accept="application/pdf"
+              onChange={(e) => setFile(e.target.files?.[0] ?? null)}
+              className="sr-only"
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <DialogClose render={<Button variant="outline">Cancel</Button>} />
+          <Button disabled={disabled} onClick={handleSubmit}>
+            {pending ? "Saving..." : "Create"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/app/dashboard/(active)/web/guide/delete-guide.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import { OctagonX, Trash } from "lucide-react"
+import { useState } from "react"
+import { toast } from "sonner"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui/button"
+import { deleteGuide } from "@/server/actions/guides"
+
+export function DeleteGuide({
+  id,
+  version,
+  onDeleted,
+}: {
+  id: number
+  version: string
+  onDeleted: (id: number) => void
+}) {
+  const [open, setOpen] = useState(false)
+
+  async function handleDelete() {
+    try {
+      const { error } = await deleteGuide(id)
+
+      if (error === "UNAUTHORIZED") toast.error("You don't have permission to delete guides.")
+      else if (error === "NOT_FOUND") toast.info("This guide was already deleted.")
+      else {
+        toast.success("Guide deleted successfully")
+        onDeleted(id)
+      }
+    } catch (err) {
+      toast.error("There was an error")
+      console.error(err)
+    } finally {
+      setOpen(false)
+    }
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger
+        render={
+          <Button type="button" variant="destructive" size="icon" aria-label={`Delete ${version}`}>
+            <Trash className="size-4" />
+          </Button>
+        }
+      />
+      <AlertDialogContent size="sm">
+        <AlertDialogHeader>
+          <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
+            <OctagonX />
+          </AlertDialogMedia>
+          <AlertDialogTitle>Delete Guide</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete version <strong>{version}</strong>? <br />
+            This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleDelete} variant="destructive">
+            Confirm
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

src/app/dashboard/(active)/web/guide/page.tsx

@@ -0,0 +1,12 @@
+import { getAllGuides } from "@/server/actions/guides"
+import { GuideTable } from "./table"
+
+export default async function GuideMatricolaPage() {
+  const guides = await getAllGuides()
+
+  return (
+    <div className="container">
+      <GuideTable guides={guides} />
+    </div>
+  )
+}