Initial SeConectai briefing system

2026-10-04 10:42:23 -03:00
commit 45cd8d2f03
163 changed files with 12659 additions and 0 deletions
@@ -0,0 +1,108 @@
+import Link from "next/link";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { getSecaoBriefing } from "@/lib/briefing-service";
+import { SecaoForm } from "./secao-form";
+
+export default async function SecaoBriefingPage({
+  params
+}: {
+  params: { id: string; secao: string };
+}) {
+  const ordemSecao = Number(params.secao);
+  const { briefing, secao, secoes, progressoGeral, anterior, proxima } = await getSecaoBriefing(
+    params.id,
+    ordemSecao
+  );
+  const percentual =
+    progressoGeral.total > 0 ? Math.round((progressoGeral.respondidas / progressoGeral.total) * 100) : 0;
+
+  return (
+    <main className="container py-8">
+      <div className="mb-6">
+        <Button asChild variant="ghost" className="mb-4 px-0">
+          <Link href={`/briefings/${briefing.id}`}>
+            <ChevronLeft className="mr-2 h-4 w-4" />
+            Voltar para abertura
+          </Link>
+        </Button>
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div>
+            <Badge variant="muted">Secao {secao.ordem} de {secoes.length}</Badge>
+            <h1 className="mt-3 text-3xl font-semibold">{secao.titulo}</h1>
+            {secao.descricao ? <p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">{secao.descricao}</p> : null}
+          </div>
+          <div className="min-w-56 space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="font-medium">Progresso geral</span>
+              <span className="text-muted-foreground">{progressoGeral.respondidas}/{progressoGeral.total}</span>
+            </div>
+            <Progress value={percentual} />
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-[280px_1fr]">
+        <aside className="lg:sticky lg:top-6 lg:self-start">
+          <Card>
+            <CardContent className="p-3">
+              <nav aria-label="Secoes do briefing" className="grid gap-1">
+                {secoes.map((item) => (
+                  <Link
+                    key={item.id}
+                    href={`/briefings/${briefing.id}/${item.ordem}`}
+                    className={`rounded-md px-3 py-2 text-sm transition ${
+                      item.ordem === secao.ordem
+                        ? "bg-primary text-primary-foreground"
+                        : "hover:bg-muted"
+                    }`}
+                  >
+                    <span className="block font-medium">{item.ordem}. {item.titulo}</span>
+                    <span className={item.ordem === secao.ordem ? "text-primary-foreground/80" : "text-muted-foreground"}>
+                      {item.respondidas}/{item.total} respondidas
+                    </span>
+                  </Link>
+                ))}
+              </nav>
+            </CardContent>
+          </Card>
+        </aside>
+
+        <div className="space-y-6">
+          <SecaoForm
+            briefingId={briefing.id}
+            secaoId={secao.id}
+            perguntas={secao.perguntas}
+            readOnly={briefing.status !== "RASCUNHO"}
+          />
+
+          <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
+            {anterior ? (
+              <Button asChild variant="outline">
+                <Link href={`/briefings/${briefing.id}/${anterior.ordem}`}>
+                  <ChevronLeft className="mr-2 h-4 w-4" />
+                  Secao anterior
+                </Link>
+              </Button>
+            ) : <span />}
+            {proxima ? (
+              <Button asChild>
+                <Link href={`/briefings/${briefing.id}/${proxima.ordem}`}>
+                  Proxima secao
+                  <ChevronRight className="ml-2 h-4 w-4" />
+                </Link>
+              </Button>
+            ) : (
+              <Button asChild>
+                <Link href={`/briefings/${briefing.id}/revisao`}>Ir para revisao</Link>
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}