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,95 @@
+"use client";
+
+import type { Ajuda } from "@prisma/client";
+import { useState } from "react";
+import { HelpCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "@/components/ui/dialog";
+
+type Props = {
+  rotulo: string;
+  ajuda: Ajuda | null;
+  allowTextShortcuts?: boolean;
+  onUseShortcut?: (value: string) => void;
+};
+
+export function AjudaButton({ rotulo, ajuda, allowTextShortcuts = false, onUseShortcut }: Props) {
+  const [open, setOpen] = useState(false);
+
+  if (!ajuda) {
+    return null;
+  }
+
+  function useShortcut(value: string) {
+    onUseShortcut?.(value);
+    setOpen(false);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="h-8 gap-1.5 px-2"
+          aria-label={`Ajuda sobre: ${rotulo}`}
+        >
+          <HelpCircle className="h-4 w-4" />
+          <span className="max-[360px]:hidden">Ajuda</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{rotulo}</DialogTitle>
+          <DialogDescription>
+            Use estas orientacoes para responder com mais seguranca.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-5">
+          <section className="space-y-2">
+            <h3 className="text-sm font-semibold">O que responder</h3>
+            <p className="text-sm leading-6 text-muted-foreground">{ajuda.oQueResponder}</p>
+          </section>
+          <section className="space-y-2">
+            <h3 className="text-sm font-semibold">Por que perguntamos</h3>
+            <p className="text-sm leading-6 text-muted-foreground">{ajuda.porQuePerguntamos}</p>
+          </section>
+          <section className="space-y-2 rounded-lg border bg-muted p-4">
+            <h3 className="text-sm font-semibold">Mini exemplo</h3>
+            <p className="text-sm leading-6 text-muted-foreground">{ajuda.miniExemplo}</p>
+            <p className="text-xs leading-5 text-muted-foreground">
+              Os exemplos servem apenas como referência. Substitua pelas informações reais da sua empresa.
+            </p>
+          </section>
+        </div>
+
+        <DialogFooter>
+          {allowTextShortcuts ? (
+            <>
+              <Button type="button" variant="outline" onClick={() => useShortcut("Nao se aplica")}>
+                Usar "Nao se aplica"
+              </Button>
+              <Button type="button" variant="outline" onClick={() => useShortcut("A definir")}>
+                Usar "A definir"
+              </Button>
+            </>
+          ) : null}
+          <DialogClose asChild>
+            <Button type="button">Fechar</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}