109 lines
4.1 KiB
TypeScript
109 lines
4.1 KiB
TypeScript
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>
|
|
);
|
|
}
|