From b342211da0e381cb2c85c52d5aa4b8bc8dbc5945 Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Tue, 8 Sep 2026 21:22:45 +0200
Subject: [PATCH] feat: implement reporting functionality for broken and
 missing group links

---
 src/app/groups/layout.tsx                     |  11 ++
 src/components/card-course-group.tsx          |   2 +-
 src/components/groups/constants.ts            |  11 ++
 src/components/groups/groups-result.tsx       |   3 +-
 .../groups/report/broken-link-flow.tsx        |  32 ++++
 src/components/groups/report/fab.tsx          |  21 ++
 .../groups/report/finder-dialog.tsx           | 139 ++++++++++++++
 .../report/missing-link/category-step.tsx     |  24 +++
 .../report/missing-link/course-step.tsx       |  54 ++++++
 .../report/missing-link/details-step.tsx      |  61 ++++++
 .../groups/report/missing-link/index.tsx      | 181 ++++++++++++++++++
 .../groups/report/missing-link/level-step.tsx |  43 +++++
 .../report/missing-link/school-step.tsx       |  23 +++
 .../groups/report/missing-link/types.ts       |   9 +
 .../groups/report/selectable-card-icon.tsx    |  22 +++
 src/components/groups/school-step.tsx         |  14 +-
 src/components/home/group-search.tsx          |  44 +++--
 src/components/ui/dialog.tsx                  | 158 +++++++++++++++
 src/queries/groups.ts                         |  20 +-
 src/queries/types.ts                          |   9 +
 src/utils/merge-groups.ts                     |   2 +-
 21 files changed, 848 insertions(+), 35 deletions(-)
 create mode 100644 src/app/groups/layout.tsx
 create mode 100644 src/components/groups/report/broken-link-flow.tsx
 create mode 100644 src/components/groups/report/fab.tsx
 create mode 100644 src/components/groups/report/finder-dialog.tsx
 create mode 100644 src/components/groups/report/missing-link/category-step.tsx
 create mode 100644 src/components/groups/report/missing-link/course-step.tsx
 create mode 100644 src/components/groups/report/missing-link/details-step.tsx
 create mode 100644 src/components/groups/report/missing-link/index.tsx
 create mode 100644 src/components/groups/report/missing-link/level-step.tsx
 create mode 100644 src/components/groups/report/missing-link/school-step.tsx
 create mode 100644 src/components/groups/report/missing-link/types.ts
 create mode 100644 src/components/groups/report/selectable-card-icon.tsx
 create mode 100644 src/components/ui/dialog.tsx
 create mode 100644 src/queries/types.ts

diff --git a/src/app/groups/layout.tsx b/src/app/groups/layout.tsx
new file mode 100644
index 0000000..957b823
--- /dev/null
+++ b/src/app/groups/layout.tsx
@@ -0,0 +1,11 @@
+import type { ReactNode } from "react"
+import { ReportFab } from "@/components/groups/report/fab"
+
+export default function GroupsLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      {children}
+      <ReportFab />
+    </>
+  )
+}
diff --git a/src/components/card-course-group.tsx b/src/components/card-course-group.tsx
index f1d5532..2813272 100644
--- a/src/components/card-course-group.tsx
+++ b/src/components/card-course-group.tsx
@@ -47,7 +47,7 @@ export function CardCourseGroup({
       <CardTitle gradient={false} className="typo-body-medium md:typo-headline-small min-w-0 grow">
         {groupName}
       </CardTitle>
-      <div className={cn("flex items-center gap-3", stacked ? "md:contents" : "contents")}>
+      <div className={cn("flex items-center gap-1.5", stacked ? "md:contents" : "contents")}>
         {waLink && (
           <a href={waLink} target="_blank" rel="noopener noreferrer" aria-label={`${groupName} su WhatsApp`}>
             <CardAction gradient={false} className={actionClassName} icon={IconWhatsApp} iconSize="sm" />
diff --git a/src/components/groups/constants.ts b/src/components/groups/constants.ts
index d9479db..a2e702a 100644
--- a/src/components/groups/constants.ts
+++ b/src/components/groups/constants.ts
@@ -1,3 +1,5 @@
+import { FiBox } from "react-icons/fi"
+import type { GradientIconType } from "@/components/gradient-icon"
 import type { Level, School } from "@/components/groups/types"
 
 export const SCHOOLS: School[] = [
@@ -7,6 +9,15 @@ export const SCHOOLS: School[] = [
   { slug: "design", name: "Scuola di Design" },
 ]
 
+export const SCHOOL_ICONS: Record<string, GradientIconType | string> = {
+  "ingegneria-industriale-informazione": "/icons/ingegneria.png",
+  auic: "/icons/architettura.png",
+  "ingegneria-civile-ambientale-territoriale": "/icons/civile.png",
+  design: "/icons/design.png",
+}
+
+export const DEFAULT_SCHOOL_ICON: GradientIconType = FiBox
+
 export const LEVELS: Level[] = [
   { slug: "triennale", name: "Triennale" },
   { slug: "magistrale", name: "Magistrale" },
diff --git a/src/components/groups/groups-result.tsx b/src/components/groups/groups-result.tsx
index ebfee8a..ba15d7f 100644
--- a/src/components/groups/groups-result.tsx
+++ b/src/components/groups/groups-result.tsx
@@ -3,7 +3,8 @@ import { notFound } from "next/navigation"
 import { FiArrowLeft, FiX } from "react-icons/fi"
 import { CardCourseGroup } from "@/components/card-course-group"
 import { getLevel, getSchool } from "@/components/groups/constants"
-import { getVisibleGroups, type VisibleGroup } from "@/queries/groups"
+import { getVisibleGroups } from "@/queries/groups"
+import type { VisibleGroup } from "@/queries/types"
 import {
   cohortLabelText,
   courseCohortFromLabels,
diff --git a/src/components/groups/report/broken-link-flow.tsx b/src/components/groups/report/broken-link-flow.tsx
new file mode 100644
index 0000000..c5e5738
--- /dev/null
+++ b/src/components/groups/report/broken-link-flow.tsx
@@ -0,0 +1,32 @@
+import { GroupSearch, type SearchGroup } from "@/components/home/group-search"
+import { DialogDescription, DialogHeader } from "@/components/ui/dialog"
+import type { BrokenGroupLinkReportInput } from "@/queries/types"
+
+export function ReportBrokenLinkFlow({
+  onBack,
+  onSelect,
+}: {
+  onBack: () => void
+  onSelect: (report: BrokenGroupLinkReportInput, groupName: string) => void
+}) {
+  function selectGroup(group: SearchGroup) {
+    onSelect(
+      {
+        groupId: group.telegramId,
+        type: group.type,
+        reportType: "broken_link",
+        reportedLink: group.link,
+      },
+      group.title
+    )
+  }
+
+  return (
+    <>
+      <DialogHeader title="Segnala link non funzionante" onBack={onBack}>
+        <DialogDescription>Cerca il gruppo a cui si riferisce la segnalazione.</DialogDescription>
+      </DialogHeader>
+      <GroupSearch onSelect={selectGroup} />
+    </>
+  )
+}
diff --git a/src/components/groups/report/fab.tsx b/src/components/groups/report/fab.tsx
new file mode 100644
index 0000000..32dbc07
--- /dev/null
+++ b/src/components/groups/report/fab.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { FiFlag } from "react-icons/fi"
+import { ButtonIcon } from "@/components/button-icon"
+import { ReportFinderDialog } from "@/components/groups/report/finder-dialog"
+
+export function ReportFab() {
+  return (
+    <ReportFinderDialog
+      trigger={
+        <ButtonIcon
+          icon={FiFlag}
+          variant="tertiary"
+          size="icon-lg"
+          aria-label="Segnala un gruppo o un link"
+          className="fixed right-5 bottom-[max(1.25rem,env(safe-area-inset-bottom))] z-40 touch-manipulation rounded-full shadow-lg sm:right-8"
+        />
+      }
+    />
+  )
+}
diff --git a/src/components/groups/report/finder-dialog.tsx b/src/components/groups/report/finder-dialog.tsx
new file mode 100644
index 0000000..19f661f
--- /dev/null
+++ b/src/components/groups/report/finder-dialog.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import { type ReactNode, useRef, useState } from "react"
+import { FiAlertCircle, FiCheckCircle, FiLink } from "react-icons/fi"
+import { ButtonIcon } from "@/components/button-icon"
+import { ReportBrokenLinkFlow } from "@/components/groups/report/broken-link-flow"
+import { ReportMissingLinkFlow } from "@/components/groups/report/missing-link"
+import { SelectableCardIcon } from "@/components/groups/report/selectable-card-icon"
+import { Button } from "@/components/ui/button"
+import { Card, CardAction, CardContent } from "@/components/ui/card"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { reportGroupLink } from "@/queries/groups"
+import type { BrokenGroupLinkReportInput, MissingGroupLinkReportInput } from "@/queries/types"
+
+type View = "problem" | "broken" | "missing" | "confirmation" | "done"
+
+export function ReportFinderDialog({ trigger }: { trigger: ReactNode }) {
+  const [open, setOpen] = useState(false)
+  const [view, setView] = useState<View>("problem")
+  const [report, setReport] = useState<BrokenGroupLinkReportInput | null>(null)
+  const [groupName, setGroupName] = useState("")
+  const [status, setStatus] = useState<"idle" | "submitting" | "error">("idle")
+  const inFlightRef = useRef(false)
+  const requestIdRef = useRef(0)
+
+  function reset() {
+    requestIdRef.current++
+    inFlightRef.current = false
+    setView("problem")
+    setReport(null)
+    setGroupName("")
+    setStatus("idle")
+  }
+
+  function handleOpenChange(next: boolean) {
+    setOpen(next)
+    if (!next) reset()
+  }
+
+  async function submit(input: BrokenGroupLinkReportInput | MissingGroupLinkReportInput) {
+    if (inFlightRef.current) return
+    inFlightRef.current = true
+    const requestId = ++requestIdRef.current
+
+    setStatus("submitting")
+    const result = await reportGroupLink(input)
+    if (requestId !== requestIdRef.current) return // dialog was reset/closed meanwhile
+
+    inFlightRef.current = false
+    if (result.ok) {
+      setView("done")
+      setStatus("idle")
+      return
+    }
+
+    setStatus("error")
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent className={view === "broken" ? "overflow-visible" : undefined}>
+        {view === "done" ? (
+          <>
+            <DialogHeader title="Segnalazione inviata">
+              <DialogDescription>Grazie, la verificheremo al più presto.</DialogDescription>
+            </DialogHeader>
+            <DialogFooter className="w-full flex-row justify-start sm:justify-start">
+              <Button variant="primary" onClick={() => handleOpenChange(false)}>
+                Chiudi
+              </Button>
+            </DialogFooter>
+          </>
+        ) : view === "confirmation" && report ? (
+          <>
+            <DialogHeader
+              title="Conferma segnalazione"
+              onBack={() => {
+                setView("broken")
+                setStatus("idle")
+              }}
+            >
+              <DialogDescription>Controlla i dettagli prima di inviarla.</DialogDescription>
+            </DialogHeader>
+            <Card className="h-auto w-full flex-row items-center gap-3 px-5 py-4">
+              <CardAction icon={FiAlertCircle} iconSize="sm" gradient={false} className="static shrink-0" />
+              <CardContent className="typo-body-medium min-w-0 text-text-primary">
+                Il link {report.type === "tg" ? "Telegram" : "WhatsApp"} di “{groupName}” non funziona.
+              </CardContent>
+            </Card>
+            {status === "error" && (
+              <p aria-live="polite" className="typo-body-small text-red-600">
+                Non è stato possibile inviare la segnalazione. Riprova tra qualche minuto.
+              </p>
+            )}
+            <DialogFooter>
+              <ButtonIcon
+                icon={FiCheckCircle}
+                text={status === "submitting" ? "Invio…" : "Invia segnalazione"}
+                disabled={status === "submitting"}
+                onClick={() => void submit(report)}
+              />
+            </DialogFooter>
+          </>
+        ) : view === "broken" ? (
+          <ReportBrokenLinkFlow
+            onBack={reset}
+            onSelect={(selectedReport, selectedGroupName) => {
+              setReport(selectedReport)
+              setGroupName(selectedGroupName)
+              setView("confirmation")
+            }}
+          />
+        ) : view === "missing" ? (
+          <ReportMissingLinkFlow
+            onBack={reset}
+            onSubmit={(missingReport) => void submit(missingReport)}
+            status={status}
+          />
+        ) : (
+          <>
+            <DialogHeader title="Quale problema vuoi segnalare?" titleClassName="typo-title-large" />
+            <div className="grid grid-cols-2 gap-3">
+              <SelectableCardIcon title="Link non funzionante" icon={FiLink} onClick={() => setView("broken")} />
+              <SelectableCardIcon title="Link mancante" icon={FiAlertCircle} onClick={() => setView("missing")} />
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/components/groups/report/missing-link/category-step.tsx b/src/components/groups/report/missing-link/category-step.tsx
new file mode 100644
index 0000000..9e4cbe0
--- /dev/null
+++ b/src/components/groups/report/missing-link/category-step.tsx
@@ -0,0 +1,24 @@
+import { FiBook, FiStar } from "react-icons/fi"
+import { SelectableCardIcon } from "@/components/groups/report/selectable-card-icon"
+import { DialogDescription, DialogHeader } from "@/components/ui/dialog"
+import type { ReportMissingLinkCategory } from "./types"
+
+export function CategoryStep({
+  onBack,
+  onSelect,
+}: {
+  onBack: () => void
+  onSelect: (category: ReportMissingLinkCategory) => void
+}) {
+  return (
+    <>
+      <DialogHeader title="Segnala link mancante" onBack={onBack}>
+        <DialogDescription>Che tipo di gruppo manca?</DialogDescription>
+      </DialogHeader>
+      <div className="grid grid-cols-2 gap-3">
+        <SelectableCardIcon title="Didattica" icon={FiBook} onClick={() => onSelect("didattica")} />
+        <SelectableCardIcon title="Extra" icon={FiStar} onClick={() => onSelect("extra")} />
+      </div>
+    </>
+  )
+}
diff --git a/src/components/groups/report/missing-link/course-step.tsx b/src/components/groups/report/missing-link/course-step.tsx
new file mode 100644
index 0000000..b5f0105
--- /dev/null
+++ b/src/components/groups/report/missing-link/course-step.tsx
@@ -0,0 +1,54 @@
+import { CardCourse } from "@/components/card-course"
+import { Spinner } from "@/components/spinner"
+import { Button } from "@/components/ui/button"
+import { DialogDescription, DialogFooter, DialogHeader } from "@/components/ui/dialog"
+import { humanizeSlug } from "@/utils/labels"
+
+export function CourseStep({
+  path,
+  courses,
+  onBack,
+  onSelectCourse,
+  onSpecifyMissing,
+}: {
+  path: string
+  courses: string[] | null
+  onBack: () => void
+  onSelectCourse: (course: string) => void
+  onSpecifyMissing: () => void
+}) {
+  return (
+    <>
+      <DialogHeader title="Segnala link mancante" onBack={onBack}>
+        <DialogDescription>{path}</DialogDescription>
+      </DialogHeader>
+      <div className="flex max-h-68 flex-col gap-3 overflow-y-auto pr-1">
+        {courses ? (
+          courses.length > 0 ? (
+            courses.map((course) => (
+              <button
+                key={course}
+                type="button"
+                className="rounded-rectangles text-left focus-visible:ring-2 focus-visible:ring-blue-primary"
+                onClick={() => onSelectCourse(course)}
+              >
+                <CardCourse courseName={humanizeSlug(course)} />
+              </button>
+            ))
+          ) : (
+            <p className="typo-body-medium text-text-secondary">Nessun corso disponibile al momento.</p>
+          )
+        ) : (
+          <div className="flex justify-center py-8">
+            <Spinner className="fill-blue-primary text-blue-primary/20" />
+          </div>
+        )}
+      </div>
+      <DialogFooter>
+        <Button variant="primary" onClick={onSpecifyMissing}>
+          Specifica il gruppo mancante
+        </Button>
+      </DialogFooter>
+    </>
+  )
+}
diff --git a/src/components/groups/report/missing-link/details-step.tsx b/src/components/groups/report/missing-link/details-step.tsx
new file mode 100644
index 0000000..b906708
--- /dev/null
+++ b/src/components/groups/report/missing-link/details-step.tsx
@@ -0,0 +1,61 @@
+import { FiCheckCircle } from "react-icons/fi"
+import { ButtonIcon } from "@/components/button-icon"
+import { Glass } from "@/components/glass"
+import { DialogDescription, DialogFooter, DialogHeader } from "@/components/ui/dialog"
+import type { ReportMissingLinkCategory } from "./types"
+
+export function DetailsStep({
+  path,
+  category,
+  details,
+  status,
+  onBack,
+  onChangeDetails,
+  onSubmit,
+}: {
+  path: string
+  category: ReportMissingLinkCategory | null
+  details: string
+  status: "idle" | "submitting" | "error"
+  onBack: () => void
+  onChangeDetails: (value: string) => void
+  onSubmit: () => void
+}) {
+  return (
+    <>
+      <DialogHeader title="Cosa manca?" onBack={onBack}>
+        <DialogDescription>{path}</DialogDescription>
+      </DialogHeader>
+      <label className="flex flex-col gap-2" htmlFor="missing-link-details">
+        <span className="typo-body-medium text-text-primary">Descrivi il gruppo o il link mancante</span>
+        <Glass className="border-white/50 bg-background-blur p-0">
+          <textarea
+            id="missing-link-details"
+            className="typo-body-medium min-h-28 w-full resize-y bg-transparent p-4 text-text-primary outline-none placeholder:text-text-secondary"
+            value={details}
+            maxLength={500}
+            placeholder={
+              category === "extra"
+                ? "Ad esempio: manca il gruppo Telegram del mercatino dell'usato..."
+                : "Ad esempio: manca il gruppo Telegram del corso..."
+            }
+            onChange={(event) => onChangeDetails(event.target.value)}
+          />
+        </Glass>
+      </label>
+      {status === "error" && (
+        <p aria-live="polite" className="typo-body-small text-red-600">
+          Non è stato possibile inviare la segnalazione. Riprova tra qualche minuto.
+        </p>
+      )}
+      <DialogFooter>
+        <ButtonIcon
+          icon={FiCheckCircle}
+          text={status === "submitting" ? "Invio…" : "Invia segnalazione"}
+          disabled={!details.trim() || status === "submitting"}
+          onClick={onSubmit}
+        />
+      </DialogFooter>
+    </>
+  )
+}
diff --git a/src/components/groups/report/missing-link/index.tsx b/src/components/groups/report/missing-link/index.tsx
new file mode 100644
index 0000000..101d6a2
--- /dev/null
+++ b/src/components/groups/report/missing-link/index.tsx
@@ -0,0 +1,181 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { getLevel, getSchool } from "@/components/groups/constants"
+import { getCoursesForLevel } from "@/queries/groups"
+import type { MissingGroupLinkReportInput } from "@/queries/types"
+import { courseLabel, humanizeSlug, levelLabel, schoolLabel } from "@/utils/labels"
+import { CategoryStep } from "./category-step"
+import { CourseStep } from "./course-step"
+import { DetailsStep } from "./details-step"
+import { LevelStep } from "./level-step"
+import { SchoolStep } from "./school-step"
+import type { ReportMissingLinkCategory, ReportMissingLinkSelection, ReportMissingLinkStep } from "./types"
+
+export function ReportMissingLinkFlow({
+  onBack,
+  onSubmit,
+  status,
+}: {
+  onBack: () => void
+  onSubmit: (report: MissingGroupLinkReportInput) => void
+  status: "idle" | "submitting" | "error"
+}) {
+  const [step, setStep] = useState<ReportMissingLinkStep>("category")
+  const [category, setCategory] = useState<ReportMissingLinkCategory | null>(null)
+  const [selection, setSelection] = useState<ReportMissingLinkSelection>({ school: null, level: null, course: null })
+  const [courses, setCourses] = useState<string[] | null>(null)
+  const [details, setDetails] = useState("")
+  const [detailsFrom, setDetailsFrom] = useState<ReportMissingLinkStep | null>(null)
+  const courseRequest = useRef(0)
+
+  useEffect(() => {
+    if (!selection.school || !selection.level) return
+
+    const request = ++courseRequest.current
+    setCourses(null)
+    void getCoursesForLevel(selection.school, selection.level)
+      .then((result) => {
+        if (request === courseRequest.current) setCourses(result)
+      })
+      .catch(() => {
+        if (request === courseRequest.current) setCourses([])
+      })
+  }, [selection.level, selection.school])
+
+  const school = selection.school ? getSchool(selection.school) : undefined
+  const level = selection.school && selection.level ? getLevel(selection.school, selection.level) : undefined
+  const path =
+    category === "extra"
+      ? "Gruppi Extra"
+      : [school?.name, level?.name, selection.course ? humanizeSlug(selection.course) : undefined]
+          .filter(Boolean)
+          .join(" · ")
+
+  function selectCategory(next: ReportMissingLinkCategory) {
+    setCategory(next)
+    setSelection({ school: null, level: null, course: null })
+    if (next === "extra") {
+      setDetailsFrom("category")
+      setStep("details")
+    } else {
+      setStep("school")
+    }
+  }
+
+  function selectSchool(schoolSlug: string) {
+    setSelection({ school: schoolSlug, level: null, course: null })
+    setStep("level")
+  }
+
+  function selectLevel(levelSlug: string) {
+    setSelection((current) => ({ ...current, level: levelSlug, course: null }))
+    setStep("course")
+  }
+
+  function selectCourse(course: string) {
+    setSelection((current) => ({ ...current, course }))
+    setDetailsFrom("course")
+    setStep("details")
+  }
+
+  function specifyMissing(from: ReportMissingLinkStep) {
+    setDetailsFrom(from)
+    setStep("details")
+  }
+
+  function goBack() {
+    if (step === "category") {
+      onBack()
+      return
+    }
+
+    if (step === "school") {
+      setSelection({ school: null, level: null, course: null })
+      setStep("category")
+      return
+    }
+
+    if (step === "level") {
+      setSelection({ school: null, level: null, course: null })
+      setStep("school")
+      return
+    }
+
+    if (step === "course") {
+      setSelection((current) => ({ ...current, level: null, course: null }))
+      setStep("level")
+      return
+    }
+
+    // step === "details"
+    setStep(detailsFrom ?? "category")
+  }
+
+  function submit() {
+    if (!details.trim() || status === "submitting") return
+
+    const label =
+      category === "extra"
+        ? "Gruppi Extra"
+        : selection.school && selection.course && selection.level
+          ? courseLabel(selection.school, selection.level, selection.course)
+          : selection.school && selection.level
+            ? levelLabel(selection.school, selection.level)
+            : selection.school
+              ? schoolLabel(selection.school)
+              : null
+
+    if (label === null) return
+
+    onSubmit({
+      reportType: "missing",
+      label,
+      details: details.trim(),
+    })
+  }
+
+  if (step === "category") {
+    return <CategoryStep onBack={goBack} onSelect={selectCategory} />
+  }
+
+  if (step === "school") {
+    return <SchoolStep onBack={goBack} onSelect={selectSchool} />
+  }
+
+  if (step === "level" && selection.school) {
+    return (
+      <LevelStep
+        schoolName={school?.name}
+        schoolSlug={selection.school}
+        onBack={goBack}
+        onSelectLevel={selectLevel}
+        onSpecifyMissing={() => specifyMissing("level")}
+      />
+    )
+  }
+
+  if (step === "course" && selection.school && selection.level) {
+    return (
+      <CourseStep
+        path={path}
+        courses={courses}
+        onBack={goBack}
+        onSelectCourse={selectCourse}
+        onSpecifyMissing={() => specifyMissing("course")}
+      />
+    )
+  }
+
+  return (
+    <DetailsStep
+      path={path}
+      category={category}
+      details={details}
+      status={status}
+      onBack={goBack}
+      onChangeDetails={setDetails}
+      onSubmit={submit}
+    />
+  )
+}
diff --git a/src/components/groups/report/missing-link/level-step.tsx b/src/components/groups/report/missing-link/level-step.tsx
new file mode 100644
index 0000000..8e810fd
--- /dev/null
+++ b/src/components/groups/report/missing-link/level-step.tsx
@@ -0,0 +1,43 @@
+import { CardPathSelection } from "@/components/card-path-selection"
+import { getLevelsForSchool } from "@/components/groups/constants"
+import { Button } from "@/components/ui/button"
+import { DialogDescription, DialogFooter, DialogHeader } from "@/components/ui/dialog"
+
+export function LevelStep({
+  schoolName,
+  schoolSlug,
+  onBack,
+  onSelectLevel,
+  onSpecifyMissing,
+}: {
+  schoolName?: string
+  schoolSlug: string
+  onBack: () => void
+  onSelectLevel: (levelSlug: string) => void
+  onSpecifyMissing: () => void
+}) {
+  return (
+    <>
+      <DialogHeader title="Segnala link mancante" onBack={onBack}>
+        <DialogDescription>{schoolName}</DialogDescription>
+      </DialogHeader>
+      <div className="flex flex-col gap-3">
+        {getLevelsForSchool(schoolSlug).map((item) => (
+          <button
+            key={item.slug}
+            type="button"
+            className="rounded-rectangles text-left focus-visible:ring-2 focus-visible:ring-blue-primary"
+            onClick={() => onSelectLevel(item.slug)}
+          >
+            <CardPathSelection caption={item.name} className="w-full px-5 py-4" />
+          </button>
+        ))}
+      </div>
+      <DialogFooter>
+        <Button variant="primary" onClick={onSpecifyMissing}>
+          Specifica il gruppo mancante
+        </Button>
+      </DialogFooter>
+    </>
+  )
+}
diff --git a/src/components/groups/report/missing-link/school-step.tsx b/src/components/groups/report/missing-link/school-step.tsx
new file mode 100644
index 0000000..057863c
--- /dev/null
+++ b/src/components/groups/report/missing-link/school-step.tsx
@@ -0,0 +1,23 @@
+import { DEFAULT_SCHOOL_ICON, SCHOOL_ICONS, SCHOOLS } from "@/components/groups/constants"
+import { SelectableCardIcon } from "@/components/groups/report/selectable-card-icon"
+import { DialogDescription, DialogHeader } from "@/components/ui/dialog"
+
+export function SchoolStep({ onBack, onSelect }: { onBack: () => void; onSelect: (schoolSlug: string) => void }) {
+  return (
+    <>
+      <DialogHeader title="Segnala link mancante" onBack={onBack}>
+        <DialogDescription>Da quale Scuola vuoi partire?</DialogDescription>
+      </DialogHeader>
+      <div className="grid gap-3 sm:grid-cols-2">
+        {SCHOOLS.map((item) => (
+          <SelectableCardIcon
+            key={item.slug}
+            title={item.name}
+            icon={SCHOOL_ICONS[item.slug] ?? DEFAULT_SCHOOL_ICON}
+            onClick={() => onSelect(item.slug)}
+          />
+        ))}
+      </div>
+    </>
+  )
+}
diff --git a/src/components/groups/report/missing-link/types.ts b/src/components/groups/report/missing-link/types.ts
new file mode 100644
index 0000000..3f50aab
--- /dev/null
+++ b/src/components/groups/report/missing-link/types.ts
@@ -0,0 +1,9 @@
+export type ReportMissingLinkStep = "category" | "school" | "level" | "course" | "details"
+
+export type ReportMissingLinkCategory = "didattica" | "extra"
+
+export type ReportMissingLinkSelection = {
+  school: string | null
+  level: string | null
+  course: string | null
+}
diff --git a/src/components/groups/report/selectable-card-icon.tsx b/src/components/groups/report/selectable-card-icon.tsx
new file mode 100644
index 0000000..1805c88
--- /dev/null
+++ b/src/components/groups/report/selectable-card-icon.tsx
@@ -0,0 +1,22 @@
+import { CardIcon } from "@/components/card-icon"
+import type { GradientIconType } from "@/components/gradient-icon"
+
+export function SelectableCardIcon({
+  title,
+  icon,
+  onClick,
+}: {
+  title: string
+  icon: GradientIconType | string
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      className="rounded-rectangles text-left focus-visible:ring-2 focus-visible:ring-blue-primary"
+      onClick={onClick}
+    >
+      <CardIcon title={title} icon={icon} size="xs" hoverEffect className="h-full min-h-30" />
+    </button>
+  )
+}
diff --git a/src/components/groups/school-step.tsx b/src/components/groups/school-step.tsx
index fdcae32..a25bb1e 100644
--- a/src/components/groups/school-step.tsx
+++ b/src/components/groups/school-step.tsx
@@ -1,20 +1,8 @@
-import { FiBox } from "react-icons/fi"
 import { CardIcon } from "@/components/card-icon"
-import type { GradientIconType } from "@/components/gradient-icon"
-import { SCHOOLS } from "@/components/groups/constants"
+import { DEFAULT_SCHOOL_ICON, SCHOOL_ICONS, SCHOOLS } from "@/components/groups/constants"
 import { WizardShell } from "@/components/groups/wizard-shell"
 import { stepHref } from "../../utils/step-href"
 
-const SCHOOL_ICONS: Record<string, GradientIconType | string> = {
-  "ingegneria-industriale-informazione": "/icons/ingegneria.png",
-  auic: "/icons/architettura.png",
-  "ingegneria-civile-ambientale-territoriale": "/icons/civile.png",
-  design: "/icons/design.png",
-}
-
-// Generic placeholder for a school without a dedicated icon — never a specific school's own image.
-const DEFAULT_SCHOOL_ICON: GradientIconType = FiBox
-
 export function SchoolStep() {
   return (
     <WizardShell
diff --git a/src/components/home/group-search.tsx b/src/components/home/group-search.tsx
index 983a258..b89ba9e 100644
--- a/src/components/home/group-search.tsx
+++ b/src/components/home/group-search.tsx
@@ -6,7 +6,6 @@ import { FaWhatsapp } from "react-icons/fa"
 import { FiSearch } from "react-icons/fi"
 import { LiaTelegramPlane } from "react-icons/lia"
 import { Input } from "@/components/ui/input"
-import { cn } from "@/lib/utils"
 import { searchGroups } from "@/queries/groups"
 import type { ApiOutput } from "@/types"
 import { Glass } from "../glass"
@@ -15,7 +14,9 @@ import { Spinner } from "../spinner"
 const PLATFORM_ICON = { tg: LiaTelegramPlane, wa: FaWhatsapp }
 const PLATFORM_LABEL = { tg: "Telegram", wa: "WhatsApp" }
 
-export function GroupSearch() {
+export type SearchGroup = ApiOutput["groups"]["search"]["search"]["groups"][number] & { link: string }
+
+export function GroupSearch({ onSelect }: { onSelect?: (group: SearchGroup) => void }) {
   const [query, setQuery] = useState("")
   const [results, setResults] = useState<ApiOutput["groups"]["search"]["search"] | null>(null)
 
@@ -51,25 +52,38 @@ export function GroupSearch() {
       />
 
       {query && (
-        <Glass className={cn("absolute top-15 z-20 grid w-full overflow-hidden rounded-xl p-0")}>
+        <Glass className="absolute top-15 z-20 grid w-full overflow-hidden rounded-xl p-0">
           <div className="max-h-70 overflow-y-auto">
             {results && results.count > 0 ? (
               results?.groups
-                .filter((g): g is typeof g & { link: string } => !!g.link)
+                .filter((g): g is SearchGroup => !!g.link)
                 .map((g) => {
                   const Icon = PLATFORM_ICON[g.type]
-                  return (
-                    <Link key={`${g.type}:${g.telegramId}`} href={g.link} target="_blank">
-                      <div className="flex items-center justify-start gap-3 px-4 py-3 text-start hover:bg-background-blur">
-                        <div
-                          role="img"
-                          aria-label={PLATFORM_LABEL[g.type]}
-                          className="flex size-8 shrink-0 items-center justify-center rounded-full bg-[#74D4FF]"
-                        >
-                          <Icon className="size-4.5" />
-                        </div>
-                        {g.title}
+                  const content = (
+                    <div className="flex items-center justify-start gap-3 px-4 py-3 text-start hover:bg-background-blur">
+                      <div
+                        role="img"
+                        aria-label={PLATFORM_LABEL[g.type]}
+                        className="flex size-8 shrink-0 items-center justify-center rounded-full bg-[#74D4FF]"
+                      >
+                        <Icon className="size-4.5" />
                       </div>
+                      {g.title}
+                    </div>
+                  )
+
+                  return onSelect ? (
+                    <button
+                      key={`${g.type}:${g.telegramId}`}
+                      type="button"
+                      className="w-full"
+                      onClick={() => onSelect(g)}
+                    >
+                      {content}
+                    </button>
+                  ) : (
+                    <Link key={`${g.type}:${g.telegramId}`} href={g.link} target="_blank">
+                      {content}
                     </Link>
                   )
                 })
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..b2e251e
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,158 @@
+import { Dialog as DialogPrimitive } from "radix-ui"
+import type * as React from "react"
+import { FiArrowLeft, FiX } from "react-icons/fi"
+import { Shape } from "@/components/shapes"
+import { cn } from "@/lib/utils"
+
+function Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal>
+      <div className="fixed inset-0 z-50 overflow-hidden">
+        <DialogOverlay />
+        <DialogPrimitive.Content
+          data-slot="dialog-content"
+          className={cn(
+            "-translate-x-1/2 -translate-y-1/2 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100svh-2rem)] w-[calc(100%-2rem)] max-w-md flex-col gap-5 overflow-y-auto overscroll-contain rounded-[1.25rem] bg-white p-6 shadow-lg focus-visible:ring-2 focus-visible:ring-blue-primary data-[state=closed]:animate-out data-[state=open]:animate-in",
+            className
+          )}
+          {...props}
+        >
+          <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[1.25rem]">
+            <div className="-inset-x-16 -bottom-80 absolute top-0">
+              <Shape variant="big-teal" className="-top-24 -right-16 absolute h-80 w-80" />
+              <Shape variant="small-blue" className="-bottom-28 -left-16 absolute h-64 w-64" />
+              <Shape variant="big-blue" className="-right-40 -bottom-56 absolute h-112 w-112" />
+              <Shape variant="looper" className="-bottom-72 -left-52 absolute h-128 w-128" />
+            </div>
+          </div>
+          <div className="relative z-10 flex flex-col gap-5">{children}</div>
+        </DialogPrimitive.Content>
+      </div>
+    </DialogPortal>
+  )
+}
+
+function DialogHeaderIconSlot({ className, ...props }: React.ComponentProps<"button">) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "size-6 shrink-0 rounded-full p-1 text-text-secondary transition-colors hover:bg-white/60 hover:text-text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogHeader({
+  className,
+  title,
+  titleClassName,
+  onBack,
+  showClose = true,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  title: React.ReactNode
+  titleClassName?: string
+  onBack?: () => void
+  showClose?: boolean
+}) {
+  return (
+    <div data-slot="dialog-header" className={cn("flex flex-col gap-1.5", className)} {...props}>
+      <div className="flex items-center gap-2">
+        {onBack ? (
+          <DialogHeaderIconSlot aria-label="Indietro" onClick={onBack}>
+            <FiArrowLeft className="size-4" />
+          </DialogHeaderIconSlot>
+        ) : (
+          <span className="size-6 shrink-0" aria-hidden="true" />
+        )}
+        <DialogTitle className={cn("min-w-0 flex-1 text-center", titleClassName)}>{title}</DialogTitle>
+        {showClose ? (
+          <DialogPrimitive.Close asChild>
+            <DialogHeaderIconSlot aria-label="Chiudi">
+              <FiX className="size-4" />
+            </DialogHeaderIconSlot>
+          </DialogPrimitive.Close>
+        ) : (
+          <span className="size-6 shrink-0" aria-hidden="true" />
+        )}
+      </div>
+      {children}
+    </div>
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("typo-headline-small text-text-primary", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("typo-body-small text-text-secondary", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/src/queries/groups.ts b/src/queries/groups.ts
index 2609497..ad99fe2 100644
--- a/src/queries/groups.ts
+++ b/src/queries/groups.ts
@@ -1,17 +1,29 @@
 "use server"
 
 import { trpc } from "@/lib/backend"
-import type { ApiOutput } from "@/types"
+import type { GroupLinkReportInput, GroupLinkReportResult, VisibleGroup } from "@/queries/types"
+import { courseFacetsForLevel } from "@/utils/labels"
 
 export async function searchGroups(query: string, limit: number = 6) {
   const res = await trpc.groups.search.search.query({ query, limit })
   return res
 }
 
-export type VisibleGroup = ApiOutput["groups"]["search"]["getAll"][number] & { link: string }
-
-/** All Telegram/WhatsApp groups (tagged by `groups.labels`) that are neither hidden nor missing an invite link. */
 export async function getVisibleGroups(): Promise<VisibleGroup[]> {
   const groups = await trpc.groups.search.getAll.query()
   return groups.filter((g): g is VisibleGroup => !g.hide && !!g.link)
 }
+
+export async function getCoursesForLevel(school: string, level: string) {
+  return [...courseFacetsForLevel(await getVisibleGroups(), school, level).keys()].sort()
+}
+
+export async function reportGroupLink(input: GroupLinkReportInput): Promise<GroupLinkReportResult> {
+  try {
+    await trpc.web.reports.create.mutate(input)
+    return { ok: true }
+  } catch (error) {
+    console.error(error)
+    return { ok: false, error: "UNKNOWN" }
+  }
+}
diff --git a/src/queries/types.ts b/src/queries/types.ts
new file mode 100644
index 0000000..0c23918
--- /dev/null
+++ b/src/queries/types.ts
@@ -0,0 +1,9 @@
+import type { ApiInput, ApiOutput } from "@/types"
+
+export type VisibleGroup = ApiOutput["groups"]["search"]["getAll"][number] & { link: string }
+
+export type GroupLinkReportInput = ApiInput["web"]["reports"]["create"]
+export type BrokenGroupLinkReportInput = Extract<GroupLinkReportInput, { reportType: "broken_link" }>
+export type MissingGroupLinkReportInput = Extract<GroupLinkReportInput, { reportType: "missing" }>
+
+export type GroupLinkReportResult = { ok: true } | { ok: false; error: "UNKNOWN" }
diff --git a/src/utils/merge-groups.ts b/src/utils/merge-groups.ts
index a5e34fd..f296591 100644
--- a/src/utils/merge-groups.ts
+++ b/src/utils/merge-groups.ts
@@ -1,4 +1,4 @@
-import type { VisibleGroup } from "@/queries/groups"
+import type { VisibleGroup } from "@/queries/types"
 
 export type MergedGroup = {
   /** Stable React key — `type:id`, since numeric ids aren't guaranteed unique across the tg/wa namespaces. */