111 lines
4.6 KiB
TypeScript
111 lines
4.6 KiB
TypeScript
import Link from "next/link";
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import { getAberturaBriefing } from "@/lib/briefing-service";
|
|
import { CabecalhoBriefingForm } from "./cabecalho-briefing-form";
|
|
|
|
function asStringArray(value: unknown) {
|
|
return Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
|
|
}
|
|
|
|
export default async function AberturaBriefingPage({ params }: { params: { id: string } }) {
|
|
const { briefing, progresso, comoPreencher, avisoSenhas } = await getAberturaBriefing(params.id);
|
|
const totalPerguntas = progresso.reduce((sum, secao) => sum + secao.total, 0);
|
|
const totalRespondidas = progresso.reduce((sum, secao) => sum + secao.respondidas, 0);
|
|
const percentual = totalPerguntas > 0 ? Math.round((totalRespondidas / totalPerguntas) * 100) : 0;
|
|
const primeiraPendente = progresso.find((secao) => secao.respondidas < secao.total) ?? progresso[0];
|
|
|
|
return (
|
|
<main className="container py-8">
|
|
<div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
<div>
|
|
<Badge variant="muted">{briefing.status.replace("_", " ")}</Badge>
|
|
<h1 className="mt-3 text-3xl font-semibold">{briefing.titulo}</h1>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
Revise as orientacoes e continue pela secao indicada.
|
|
</p>
|
|
</div>
|
|
{primeiraPendente ? (
|
|
<Button asChild>
|
|
<Link href={`/briefings/${briefing.id}/${primeiraPendente.ordem}`}>Continuar de onde parei</Link>
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="mb-6 space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="font-medium">Progresso geral</span>
|
|
<span className="text-muted-foreground">{totalRespondidas}/{totalPerguntas}</span>
|
|
</div>
|
|
<Progress value={percentual} />
|
|
</div>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-[360px_1fr]">
|
|
<div className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Cabecalho do briefing</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<CabecalhoBriefingForm
|
|
empresaMarca={briefing.cliente.razaoSocial ?? briefing.cliente.nomeCompleto}
|
|
responsavel={briefing.cliente.nomeCompleto}
|
|
contato={`${briefing.cliente.user.email} | ${briefing.cliente.whatsapp}`}
|
|
data={new Date().toISOString().slice(0, 10)}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{avisoSenhas ? (
|
|
<Alert>
|
|
<AlertTitle>Aviso importante</AlertTitle>
|
|
<AlertDescription>{String(avisoSenhas)}</AlertDescription>
|
|
</Alert>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Como preencher</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ul className="space-y-3 text-sm leading-6 text-muted-foreground">
|
|
{asStringArray(comoPreencher).map((item) => (
|
|
<li key={item} className="rounded-md bg-muted p-3">{item}</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="grid gap-3">
|
|
{progresso.map((secao) => {
|
|
const secaoPercentual = secao.total > 0 ? Math.round((secao.respondidas / secao.total) * 100) : 0;
|
|
|
|
return (
|
|
<Link
|
|
key={secao.id}
|
|
href={`/briefings/${briefing.id}/${secao.ordem}`}
|
|
className="rounded-lg border bg-card p-4 transition hover:border-primary"
|
|
>
|
|
<div className="mb-3 flex items-start justify-between gap-3">
|
|
<div>
|
|
<p className="font-medium">{secao.ordem}. {secao.titulo}</p>
|
|
{secao.descricao ? <p className="mt-1 text-sm text-muted-foreground">{secao.descricao}</p> : null}
|
|
</div>
|
|
<Badge variant="muted">{secao.respondidas}/{secao.total}</Badge>
|
|
</div>
|
|
<Progress value={secaoPercentual} />
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|