@snksergio/design-system 0.62.0 → 0.64.0

package/dist-lib/ai/exemplos/mapa-rede/mapa-rede-screen.tsx

@@ -0,0 +1,227 @@
+import { useMemo, useState } from "react";
+import {
+  Clock,
+  Coins,
+  Eye,
+  MapPin,
+  MoreHorizontal,
+  Network,
+  Pencil,
+  RefreshCw,
+  UserMinus,
+  UserPlus,
+  Users,
+} from "lucide-react";
+import { DataList } from "@/components/ui/DataList";
+import type { ListItemData, ListRenderState } from "@/components/ui/List";
+import { Button } from "@/components/ui/Button/button";
+import { Chip } from "@/components/ui/Chip";
+import { PageHeader } from "@/components/ui/PageHeader";
+import { AlertModal } from "@/components/ui/AlertModal";
+import {
+  FILTER_FIELDS,
+  GRADUACAO,
+  NETWORK,
+  REGIAO,
+  VIEWS,
+  countNetwork,
+  findConsultor,
+  formatNum,
+  subtreeLabel,
+} from "./mapa-de-rede-mocks";
+import type { Consultor } from "./mapa-de-rede.types";
+import { ConsultorDetailPanel } from "./components/ConsultorDetailPanel";
+
+/* ── Card rico do consultor (renderItem do DataList hierárquico) ──── */
+
+function MetaInline({
+  icon,
+  children,
+}: {
+  icon: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <span className="inline-flex items-center gap-gp-xs text-body-sm text-fg-muted [&>svg]:size-icon-sm [&>svg]:text-fg-subtle">
+      {icon}
+      {children}
+    </span>
+  );
+}
+
+function renderConsultorCard(item: ListItemData, state: ListRenderState) {
+  const c = item.data as Consultor;
+  const grad = GRADUACAO[c.graduacao];
+  return (
+    <div className="flex w-full items-center gap-gp-xl">
+      {/* nível por profundidade (N1 = líder), mesma cor — quadrado arredondado
+          na altura de título + subtítulo (centralizado). */}
+      <span className="grid size-form-md shrink-0 place-items-center rounded-radius-md bg-bg-muted text-caption-sm font-semibold text-fg-muted [font-variant-numeric:tabular-nums]">
+        N{state.depth + 1}
+      </span>
+
+      <div className="flex min-w-0 flex-1 flex-col gap-gp-sm">
+        <div className="flex flex-wrap items-center gap-gp-sm">
+          <span className="truncate text-body-md font-semibold text-fg-default">
+            {c.name}
+          </span>
+          <Chip color={grad.color} variant="soft" size="sm" shape="pill">
+            {grad.label}
+          </Chip>
+          {c.pro && (
+            <Chip color="success" variant="soft" size="sm" shape="pill">
+              PRO
+            </Chip>
+          )}
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-gp-2xl gap-y-gp-2xs">
+          <MetaInline icon={<Coins />}>
+            <strong className="font-semibold text-fg-default [font-variant-numeric:tabular-nums]">
+              {formatNum(c.gpProprio)}
+            </strong>{" "}
+            GP
+          </MetaInline>
+          <MetaInline icon={<Users />}>
+            <strong className="font-semibold text-fg-default [font-variant-numeric:tabular-nums]">
+              {formatNum(c.clientes)}
+            </strong>{" "}
+            clientes
+          </MetaInline>
+          <MetaInline icon={<Network />}>{subtreeLabel(c)}</MetaInline>
+          <MetaInline icon={<MapPin />}>{REGIAO[c.regiao]}</MetaInline>
+        </div>
+      </div>
+
+      <span className="hidden shrink-0 items-center gap-gp-xs whitespace-nowrap text-caption-sm text-fg-subtle md:inline-flex [&>svg]:size-icon-xs">
+        <Clock />
+        {c.lastActive}
+      </span>
+    </div>
+  );
+}
+
+function toItem(c: Consultor): ListItemData {
+  return {
+    id: c.id,
+    title: c.name,
+    data: c,
+    children: c.children?.map(toItem),
+  };
+}
+
+/**
+ * Mapa de Rede — exemplo de tela (conteúdo, sem AppShell). DataList hierárquico
+ * (árvore de consultores por níveis, conectores) + card rico + filtros/abas/
+ * refresh + painel de detalhe + modal de remoção. Renderize `<MapaDeRedeScreen />`.
+ */
+export function MapaDeRedeScreen() {
+  const [detailId, setDetailId] = useState<string | null>(null);
+  const [removing, setRemoving] = useState<Consultor | null>(null);
+
+  const items = useMemo(() => NETWORK.map(toItem), []);
+  const total = useMemo(() => countNetwork(NETWORK), []);
+  const detail = detailId ? findConsultor(NETWORK, detailId) : null;
+
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-gp-2xl">
+      <PageHeader
+        title="Mapa de Rede"
+        description="Navegue a rede de consultores por níveis (líderes → N1 → N2…). Cada card mostra graduação, GP próprio, clientes e o agregado da subárvore. Use as abas, a busca e os filtros pra recortar; clique no card pra ver o detalhe."
+        badge={
+          <Chip color="primary" variant="soft" size="sm" shape="rounded">
+            {total.toLocaleString("pt-BR")} consultores
+          </Chip>
+        }
+        actions={
+          <>
+            <Button
+              variant="outline"
+              color="secondary"
+              size="icon-md"
+              aria-label="Mais ações"
+            >
+              <MoreHorizontal />
+            </Button>
+            <Button
+              variant="filled"
+              color="primary"
+              size="md"
+              iconLeft={<UserPlus />}
+            >
+              Convidar consultor
+            </Button>
+          </>
+        }
+      />
+
+      <DataList
+        fillHeight
+        className="flex-1 min-h-0"
+        title="Consultores"
+        items={items}
+        layout="hierarchical"
+        branchHighlight="none"
+        renderItem={renderConsultorCard}
+        searchable
+        searchPlaceholder="Buscar consultor..."
+        filterFields={FILTER_FIELDS}
+        views={VIEWS}
+        onRefresh={() => {}}
+        persistKey="mapa-de-rede"
+        onItemClick={(id) => setDetailId(id)}
+        getMenuItems={(item) => {
+          const c = item.data as Consultor;
+          return [
+            {
+              label: "Ver detalhe",
+              icon: <Eye />,
+              onClick: () => setDetailId(c.id),
+            },
+            {
+              label: "Editar",
+              icon: <Pencil />,
+              onClick: () => setDetailId(c.id),
+            },
+            { separator: true },
+            {
+              label: "Remover da rede",
+              icon: <UserMinus />,
+              destructive: true,
+              onClick: () => setRemoving(c),
+            },
+          ];
+        }}
+        moreActions={[
+          { label: "Atualizar rede", icon: <RefreshCw />, onClick: () => {} },
+          { label: "Exportar CSV", onClick: () => {} },
+        ]}
+      />
+
+      <ConsultorDetailPanel
+        consultor={detail}
+        onClose={() => setDetailId(null)}
+        onEdit={() => {}}
+        onRemove={(c) => {
+          setDetailId(null);
+          setRemoving(c);
+        }}
+      />
+
+      <AlertModal
+        open={removing !== null}
+        onOpenChange={(open) => {
+          if (!open) setRemoving(null);
+        }}
+        tone="danger"
+        title={`Remover ${removing?.name ?? "consultor"} da rede?`}
+        description="O consultor e toda a sua subárvore deixam de aparecer no mapa. Esta ação é apenas demonstrativa neste exemplo."
+        confirmLabel="Remover"
+        cancelLabel="Cancelar"
+        onConfirm={() => setRemoving(null)}
+      />
+    </div>
+  );
+}
+
+export default MapaDeRedeScreen;

package/dist-lib/ai/exemplos/order-detail/components/ActivityTab.tsx

@@ -0,0 +1,77 @@
+import { Fragment } from "react";
+import { Chip } from "@/components/ui/Chip";
+import { SectionCard } from "./section-card";
+import type { Order, OrderActivity } from "../order.types";
+
+export function ActivityTab({ order }: { order: Order }) {
+  // Agrupa eventos por dateGroup preservando a ordem do mock.
+  const groups: { date: string; items: OrderActivity[] }[] = [];
+  for (const ev of order.activity) {
+    const last = groups[groups.length - 1];
+    if (last && last.date === ev.dateGroup) last.items.push(ev);
+    else groups.push({ date: ev.dateGroup, items: [ev] });
+  }
+
+  return (
+    <SectionCard
+      title="Atividade"
+      action={
+        <Chip color="info" variant="soft" size="sm" shape="pill">
+          Enviado
+        </Chip>
+      }
+    >
+      <div className="flex flex-col gap-gp-5xl">
+        {groups.map((g) => (
+          <div key={g.date}>
+            <p className="mb-gp-lg text-caption-sm font-semibold uppercase tracking-wider text-fg-muted">
+              {g.date}
+            </p>
+            <ol className="relative flex flex-col">
+              {g.items.map((ev, i) => (
+                <Fragment key={ev.id}>
+                  <li className="relative flex gap-gp-lg pb-pad-3xl last:pb-0">
+                    {/* trilha + dot */}
+                    <div className="relative flex w-3 shrink-0 justify-center">
+                      {i < g.items.length - 1 && (
+                        <span
+                          className="absolute top-3 h-full w-px bg-border-default"
+                          aria-hidden="true"
+                        />
+                      )}
+                      <span
+                        className={
+                          "relative z-10 mt-1 size-2.5 rounded-full " +
+                          (ev.done ? "bg-bg-success" : "bg-bg-brand")
+                        }
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p
+                        className={
+                          "text-body-sm font-semibold " +
+                          (ev.done ? "text-fg-success" : "text-fg-default")
+                        }
+                      >
+                        {ev.title}
+                      </p>
+                      {ev.description && (
+                        <p className="text-caption-sm text-fg-muted">
+                          {ev.description}
+                        </p>
+                      )}
+                      <p className="mt-gp-2xs text-caption-sm text-fg-subtle [font-variant-numeric:tabular-nums]">
+                        {ev.time}
+                      </p>
+                    </div>
+                  </li>
+                </Fragment>
+              ))}
+            </ol>
+          </div>
+        ))}
+      </div>
+    </SectionCard>
+  );
+}

package/dist-lib/ai/exemplos/order-detail/components/AttachmentsTab.tsx

@@ -0,0 +1,45 @@
+import { Download, FileText, ImageIcon } from "lucide-react";
+import { Button } from "@/components/ui/Button/button";
+import { SectionCard } from "./section-card";
+import type { Order } from "../order.types";
+
+export function AttachmentsTab({ order }: { order: Order }) {
+  return (
+    <SectionCard title="Anexos">
+      <ul className="flex flex-col">
+        {order.attachments.map((f, i) => {
+          const Icon = f.kind === "image" ? ImageIcon : FileText;
+          return (
+            <li
+              key={f.id}
+              className={
+                "flex items-center gap-gp-md py-pad-lg" +
+                (i > 0 ? " border-t border-border-subtle" : "")
+              }
+            >
+              <span className="grid size-9 shrink-0 place-items-center rounded-radius-md bg-bg-muted text-fg-muted">
+                <Icon className="size-icon-sm" />
+              </span>
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-body-sm font-semibold text-fg-default">
+                  {f.name}
+                </p>
+                <p className="text-caption-sm uppercase tracking-wider text-fg-muted">
+                  {f.kind} · {f.size}
+                </p>
+              </div>
+              <Button
+                variant="ghost"
+                color="secondary"
+                size="sm"
+                iconLeft={<Download />}
+              >
+                Baixar
+              </Button>
+            </li>
+          );
+        })}
+      </ul>
+    </SectionCard>
+  );
+}

package/dist-lib/ai/exemplos/order-detail/components/CommentsTab.tsx

@@ -0,0 +1,111 @@
+import { useState } from "react";
+import { Send } from "lucide-react";
+import { Avatar } from "@/components/ui/avatar-ig";
+import { Button } from "@/components/ui/Button/button";
+import { Textarea } from "@/components/shadcn/textarea";
+import { SectionCard } from "./section-card";
+import type { Order, OrderComment } from "../order.types";
+
+export function CommentsTab({ order }: { order: Order }) {
+  const [comments, setComments] = useState<OrderComment[]>(order.comments);
+  const [draft, setDraft] = useState("");
+
+  const submit = () => {
+    const text = draft.trim();
+    if (!text) return;
+    setComments((prev) => [
+      ...prev,
+      {
+        id: `local-${prev.length + 1}`,
+        author: "Suporte iGreen",
+        initials: "SI",
+        colorHex: "#3B82F6",
+        when: "agora",
+        text,
+      },
+    ]);
+    setDraft("");
+  };
+
+  return (
+    <div className="flex flex-col gap-gp-xl">
+      {/* Card só com a thread */}
+      <SectionCard
+        title="Comentários"
+        action={
+          <span className="rounded-radius-full bg-bg-muted px-pad-md py-pad-2xs text-caption-sm font-semibold text-fg-muted">
+            {comments.length}
+          </span>
+        }
+      >
+        <ul className="flex flex-col gap-gp-4xl">
+          {comments.map((cm) => (
+            <li key={cm.id} className="flex gap-gp-md">
+              <Avatar size="md" colorHex={cm.colorHex} aria-label={cm.author}>
+                {cm.initials}
+              </Avatar>
+              <div className="min-w-0 flex-1">
+                <div className="rounded-radius-lg border border-border-subtle bg-bg-canvas px-pad-lg py-pad-md">
+                  <div className="flex items-center justify-between gap-gp-sm">
+                    <span className="text-body-sm font-semibold text-fg-default">
+                      {cm.author}
+                    </span>
+                    <span className="text-caption-sm text-fg-subtle">
+                      {cm.when}
+                    </span>
+                  </div>
+                  <p className="mt-gp-xs text-body-sm leading-relaxed text-fg-muted">
+                    {cm.text}
+                  </p>
+                </div>
+                <div className="mt-gp-2xs flex items-center gap-gp-lg pl-pad-sm">
+                  <button
+                    type="button"
+                    className="text-caption-sm font-medium text-fg-muted transition-colors hover:text-fg-brand"
+                  >
+                    Responder
+                  </button>
+                  <button
+                    type="button"
+                    className="text-caption-sm font-medium text-fg-muted transition-colors hover:text-fg-brand"
+                  >
+                    Curtir
+                  </button>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </SectionCard>
+
+      {/* Composer — embaixo e fora do card; avatar no footer junto da legenda */}
+      <div className="overflow-hidden rounded-radius-lg border border-border-default bg-bg-surface transition-[border-color,box-shadow] focus-within:border-border-brand focus-within:shadow-sh-ring">
+        <Textarea
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          placeholder="Escreva um comentário..."
+          rows={3}
+          className="resize-none border-0 bg-transparent px-pad-lg py-pad-md shadow-none focus-visible:ring-0"
+        />
+        <div className="flex items-center justify-between gap-gp-md border-t border-border-subtle px-pad-lg py-pad-lg">
+          <span className="flex items-center gap-gp-sm text-caption-sm text-fg-subtle">
+            <Avatar size="xs" colorHex="#3B82F6" aria-label="Você">
+              SI
+            </Avatar>
+            Visível para a equipe e o cliente.
+          </span>
+          <Button
+            variant="filled"
+            color="primary"
+            size="sm"
+            iconLeft={<Send />}
+            disabled={!draft.trim()}
+            onClick={submit}
+          >
+            Comentar
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist-lib/ai/exemplos/order-detail/components/DetailsTab.tsx

@@ -0,0 +1,189 @@
+import {
+  CreditCard,
+  FileText,
+  Percent,
+  StickyNote,
+  Tag,
+  Truck,
+  User,
+} from "lucide-react";
+import { Avatar } from "@/components/ui/avatar-ig";
+import { Chip } from "@/components/ui/Chip";
+import { SectionCard, SectionDivider, Field } from "./section-card";
+import { formatBRL } from "../order-mocks";
+import type { Order } from "../order.types";
+
+export function DetailsTab({ order }: { order: Order }) {
+  const c = order.customer;
+  const a = order.shippingAddress;
+  const b = order.billing;
+
+  return (
+    <div className="flex flex-col gap-gp-2xl">
+      {/* Tags rápidas no topo */}
+      <div className="flex flex-wrap items-center gap-gp-sm">
+        {order.tags.map((t) => (
+          <Chip key={t.label} color={t.color} variant="soft" size="sm" shape="pill">
+            {t.label}
+          </Chip>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 gap-gp-2xl lg:grid-cols-3">
+        {/* Coluna principal */}
+        <div className="flex flex-col gap-gp-2xl lg:col-span-2">
+          <SectionCard
+            title="Informações do cliente"
+            icon={<User className="size-icon-md" />}
+          >
+            <div className="flex items-start gap-gp-lg">
+              <Avatar size="xl" colorHex={c.colorHex} aria-label={`${c.firstName} ${c.lastName}`}>
+                {c.initials}
+              </Avatar>
+              <div className="grid flex-1 grid-cols-1 gap-x-gp-2xl gap-y-gp-2xl sm:grid-cols-3">
+                <Field label="Nome" value={c.firstName} />
+                <Field label="Nome do meio" value={c.middleName ?? "—"} />
+                <Field label="Sobrenome" value={c.lastName} />
+                <Field label="E-mail" value={c.email} accent />
+                <Field label="Telefone" value={c.phone} />
+                <Field label="Tipo de conta" value={c.accountType} />
+                <Field label="ID do cliente" value={c.customerId} />
+                <Field label="Cadastro" value={c.registeredAt} />
+                <Field
+                  label="Status"
+                  value={
+                    <span className="text-fg-success">
+                      {c.active ? "Ativo" : "Inativo"}
+                    </span>
+                  }
+                />
+              </div>
+            </div>
+          </SectionCard>
+
+          <SectionCard
+            title="Informações de entrega"
+            icon={<Truck className="size-icon-md" />}
+          >
+            <div className="grid grid-cols-1 gap-x-gp-2xl gap-y-gp-2xl sm:grid-cols-3">
+              <Field label="Endereço linha 1" value={a.line1} />
+              <Field label="Endereço linha 2" value={a.line2 ?? "—"} />
+              <Field label="Cidade" value={a.city} />
+              <Field label="Estado" value={a.state} />
+              <Field label="CEP" value={a.zip} />
+              <Field label="País" value={a.country} />
+            </div>
+            <SectionDivider className="my-gp-2xl" />
+            <div className="grid grid-cols-1 gap-x-gp-2xl gap-y-gp-2xl sm:grid-cols-3">
+              <Field label="Transportadora" value={a.carrier} />
+              <Field label="Rastreamento" value={a.tracking} accent />
+              <Field label="Previsão de entrega" value={a.eta} />
+            </div>
+          </SectionCard>
+
+          <SectionCard
+            title="Informações de cobrança"
+            icon={<CreditCard className="size-icon-md" />}
+          >
+            <div className="grid grid-cols-1 gap-x-gp-2xl gap-y-gp-2xl sm:grid-cols-3">
+              <Field label="Endereço de cobrança" value={b.address} />
+              <Field label="Cidade / Estado" value={b.cityState} />
+              <Field label="País" value={b.country} />
+            </div>
+            <SectionDivider className="my-gp-2xl" />
+            <div className="grid grid-cols-1 gap-x-gp-2xl gap-y-gp-2xl sm:grid-cols-3">
+              <Field label="Forma de pagamento" value={b.method} />
+              <Field label="ID da transação" value={b.transactionId} accent />
+              <Field label="Data do pagamento" value={b.paymentDate} />
+            </div>
+          </SectionCard>
+        </div>
+
+        {/* Coluna lateral */}
+        <div className="flex flex-col gap-gp-2xl">
+          <SectionCard
+            title="Resumo do pedido"
+            icon={<FileText className="size-icon-md" />}
+          >
+            <div className="grid grid-cols-2 gap-x-gp-2xl gap-y-gp-2xl">
+              <Field label="ID do pedido" value={`#${order.id}`} />
+              <Field label="Data" value="8 jan 2024" />
+              <Field label="Itens" value={`${order.items.length} produtos`} />
+              <Field
+                label="Total"
+                value={
+                  <span className="text-fg-success [font-variant-numeric:tabular-nums]">
+                    {formatBRL(order.total)}
+                  </span>
+                }
+              />
+              <Field
+                label="Pagamento"
+                value={
+                  <Chip color="success" variant="soft" size="sm" shape="pill">
+                    Pago
+                  </Chip>
+                }
+              />
+              <Field
+                label="Fulfillment"
+                value={
+                  <Chip color="info" variant="soft" size="sm" shape="pill">
+                    Enviado
+                  </Chip>
+                }
+              />
+            </div>
+          </SectionCard>
+
+          <SectionCard
+            title="Notas internas"
+            icon={<StickyNote className="size-icon-md" />}
+          >
+            <p className="text-body-sm leading-relaxed text-fg-muted">
+              {order.internalNote}
+            </p>
+          </SectionCard>
+
+          <SectionCard
+            title="Tags e rótulos"
+            icon={<Tag className="size-icon-md" />}
+          >
+            <div className="flex flex-wrap gap-gp-sm">
+              {order.tags.map((t) => (
+                <Chip
+                  key={t.label}
+                  color={t.color}
+                  variant="soft"
+                  size="sm"
+                  shape="pill"
+                >
+                  {t.label}
+                </Chip>
+              ))}
+            </div>
+          </SectionCard>
+
+          {order.discountValue != null && (
+            <SectionCard
+              title="Desconto aplicado"
+              icon={<Percent className="size-icon-md" />}
+            >
+              <div className="grid grid-cols-2 gap-x-gp-2xl gap-y-gp-2xl">
+                <Field label="Cupom" value={order.discountCode} />
+                <Field
+                  label="Desconto"
+                  value={
+                    <span className="text-fg-success">
+                      {order.discountLabel} ({formatBRL(order.discountValue)})
+                    </span>
+                  }
+                />
+              </div>
+            </SectionCard>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}