forlogic-core 2.1.4 → 2.2.0

package/docs/design-system/charts-dashboards.md

@@ -11,24 +11,24 @@ Sistema de gráficos baseado em Recharts com suporte a temas e tooltips customiz
 
 **Uso:**
 ```tsx
-import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from "forlogic-core"
-import { Bar, BarChart, XAxis, YAxis, CartesianGrid } from "recharts"
-
-const chartConfig = {
-  desktop: { label: "Desktop", color: "hsl(var(--primary))" },
-  mobile: { label: "Mobile", color: "hsl(var(--secondary))" },
-}
-
-<ChartContainer config={chartConfig} className="h-[300px]">
-  <BarChart data={data}>
-    <CartesianGrid strokeDasharray="3 3" vertical={false} />
-    <XAxis dataKey="month" tickLine={false} axisLine={false} />
-    <YAxis tickLine={false} axisLine={false} />
-    <ChartTooltip content={<ChartTooltipContent />} />
-    <ChartLegend content={<ChartLegendContent />} />
-    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-  </BarChart>
+import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from "forlogic-core"
+import { Bar, BarChart, XAxis, YAxis, CartesianGrid } from "recharts"
+
+const chartConfig = {
+  desktop: { label: "Desktop", color: "hsl(var(--primary))" },
+  mobile: { label: "Mobile", color: "hsl(var(--secondary))" },
+}
+
+<ChartContainer config={chartConfig} className="h-[300px]">
+  <BarChart data={data}>
+    <CartesianGrid strokeDasharray="3 3" vertical={false} />
+    <XAxis dataKey="month" tickLine={false} axisLine={false} />
+    <YAxis tickLine={false} axisLine={false} />
+    <ChartTooltip content={<ChartTooltipContent />} />
+    <ChartLegend content={<ChartLegendContent />} />
+    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+  </BarChart>
 </ChartContainer>
 ```
 
@@ -44,7 +44,7 @@ const chartConfig = {
 
 **Exemplos:**
 ```tsx
-<BarChart data={data}>
+<BarChart data={data}>
   <Bar dataKey=
 ```
 
@@ -69,7 +69,7 @@ const chartConfig = {
 -  e 
 -  para visual mais moderno
 
-> Fonte: `src\design-system\docs\components\ChartDoc.tsx`
+> Fonte: `src/design-system/docs/components/ChartDoc.tsx`
 
 ---
 
@@ -79,30 +79,30 @@ Módulo completo de dashboards portado do qex-dashboards Angular. Inclui 14 tipo
 
 **Uso:**
 ```tsx
-import {
-  // Orquestrador principal
-  DashboardGeneralView,
-
-  // Componentes de página
-  DashboardView,
-  DashboardList,
-  DashboardForm,
-  DashboardGrid,
-  DashboardPanelRenderer,
-
-  // Painéis individuais
-  NumericPanel, TextPanel, ListPanel,
-  CartesianPanel, PiePanel, ParetoPanel,
-  BurndownPanel, PerformancePanel, MatrixRiskPanel,
-
-  // Shared de painel
-  PanelHeader, PanelError, PanelLoader, PanelNoData, PanelUnavailable,
-
-  // Types & Helpers
-  DashboardPanelType, PanelState, AggregationType,
-  type PanelConfig, type Dashboard, type DashboardPanel,
-  getDefaultPanelSize, getMinPanelSize,
-  currencyFormatter, processUrl, getLinkFromRow,
+import {
+  // Orquestrador principal
+  DashboardGeneralView,
+
+  // Componentes de página
+  DashboardView,
+  DashboardList,
+  DashboardForm,
+  DashboardGrid,
+  DashboardPanelRenderer,
+
+  // Painéis individuais
+  NumericPanel, TextPanel, ListPanel,
+  CartesianPanel, PiePanel, ParetoPanel,
+  BurndownPanel, PerformancePanel, MatrixRiskPanel,
+
+  // Shared de painel
+  PanelHeader, PanelError, PanelLoader, PanelNoData, PanelUnavailable,
+
+  // Types & Helpers
+  DashboardPanelType, PanelState, AggregationType,
+  type PanelConfig, type Dashboard, type DashboardPanel,
+  getDefaultPanelSize, getMinPanelSize,
+  currencyFormatter, processUrl, getLinkFromRow,
 } from 'forlogic-core';
 ```
 
@@ -120,15 +120,15 @@ import {
 
 **Exemplos:**
 ```tsx
-// O renderer mapeia typeId → componente automaticamente
-<DashboardPanelRenderer
-  config={{ ...panelConfig, typeId: DashboardPanelType.Column }}
-  state={PanelState.Loaded}
-  cartesianData={chartData}
+// O renderer mapeia typeId → componente automaticamente
+<DashboardPanelRenderer
+  config={{ ...panelConfig, typeId: DashboardPanelType.Column }}
+  state={PanelState.Loaded}
+  cartesianData={chartData}
   cartesianSeries={[{ dataKey:
 ```
 
-> Fonte: `src\design-system\docs\components\dashboards\DashboardOverviewDoc.tsx`
+> Fonte: `src/design-system/docs/components/dashboards/DashboardOverviewDoc.tsx`
 
 ---
 
@@ -138,49 +138,49 @@ Componente orquestrador que gerencia todo o ciclo de vida do módulo de Dashboar
 
 **Uso:**
 ```tsx
-import { DashboardGeneralView } from 'forlogic-core';
-
-// Uso básico (uncontrolled — gerencia estado internamente)
-<DashboardGeneralView
-  dashboards={dashboards}
-  limit={{ maxDashboards: 50, countDashboards: 12 }}
-  canAdd canEdit canRemove
-  activePanels={panels}
-  activePages={pages}
-  getPanelData={(panelId) => ({
-    state: PanelState.Loaded,
-    data: panelData[panelId],
-  })}
-  onOpen={(d) => loadPanels(d.id)}
-  onSave={(values) => createDashboard(values)}
-  onUpdate={(id, values) => updateDashboard(id, values)}
-  onRemove={(d) => removeDashboard(d.id)}
-  onToggleFavorite={(d) => toggleFav(d.id)}
-/>
-
-// Uso controlado (com react-router)
-const [viewState, setViewState] = useState({ mode: 'list' });
-
-<DashboardGeneralView
-  dashboards={dashboards}
-  viewState={viewState}
-  onViewStateChange={(state) => {
-    setViewState(state);
-    if (state.mode === 'view') navigate(\`/dashboards/\${state.dashboardId}\`);
-    if (state.mode === 'list') navigate('/dashboards');
-  }}
-  // ... demais props
+import { DashboardGeneralView } from 'forlogic-core';
+
+// Uso básico (uncontrolled — gerencia estado internamente)
+<DashboardGeneralView
+  dashboards={dashboards}
+  limit={{ maxDashboards: 50, countDashboards: 12 }}
+  canAdd canEdit canRemove
+  activePanels={panels}
+  activePages={pages}
+  getPanelData={(panelId) => ({
+    state: PanelState.Loaded,
+    data: panelData[panelId],
+  })}
+  onOpen={(d) => loadPanels(d.id)}
+  onSave={(values) => createDashboard(values)}
+  onUpdate={(id, values) => updateDashboard(id, values)}
+  onRemove={(d) => removeDashboard(d.id)}
+  onToggleFavorite={(d) => toggleFav(d.id)}
+/>
+
+// Uso controlado (com react-router)
+const [viewState, setViewState] = useState({ mode: 'list' });
+
+<DashboardGeneralView
+  dashboards={dashboards}
+  viewState={viewState}
+  onViewStateChange={(state) => {
+    setViewState(state);
+    if (state.mode === 'view') navigate(\`/dashboards/\${state.dashboardId}\`);
+    if (state.mode === 'list') navigate('/dashboards');
+  }}
+  // ... demais props
 />
 ```
 
 **Exemplos:**
 ```tsx
-// DashboardViewState
-type DashboardViewState =
+// DashboardViewState
+type DashboardViewState =
   | { mode:
 ```
 
-> Fonte: `src\design-system\docs\components\dashboards\DashboardGeneralViewDoc.tsx`
+> Fonte: `src/design-system/docs/components/dashboards/DashboardGeneralViewDoc.tsx`
 
 ---
 
@@ -190,105 +190,144 @@ Lista/tabela de dashboards com busca integrada, filtros rápidos (Todos / Meus /
 
 **Uso:**
 ```tsx
-import { DashboardList, QuickFilterDashboard } from 'forlogic-core';
-
-<DashboardList
-  dashboards={dashboards}
-  limit={{ maxDashboards: 50, countDashboards: 12 }}
-  language={DashboardLanguage.PtBr}
-  canAdd canEdit canRemove
-  onOpen={(d) => navigate(\`/dashboards/\${d.id}\`)}
-  onEdit={(d) => navigate(\`/dashboards/\${d.id}/edit\`)}
-  onShare={(d) => openShareDialog(d)}
-  onDuplicate={(d) => duplicateDashboard(d.id)}
-  onRemove={(d) => removeDashboard(d.id)}
-  onAdd={() => navigate('/dashboards/new')}
-  onToggleFavorite={(d) => toggleFavorite(d.id)}
-  onSearch={(q) => setSearch(q)}
-  onQuickFilterChange={(f) => setFilter(f)}
+import { DashboardList, QuickFilterDashboard } from 'forlogic-core';
+
+<DashboardList
+  dashboards={dashboards}
+  limit={{ maxDashboards: 50, countDashboards: 12 }}
+  language={DashboardLanguage.PtBr}
+  canAdd canEdit canRemove
+  onOpen={(d) => navigate(\`/dashboards/\${d.id}\`)}
+  onEdit={(d) => navigate(\`/dashboards/\${d.id}/edit\`)}
+  onShare={(d) => openShareDialog(d)}
+  onDuplicate={(d) => duplicateDashboard(d.id)}
+  onRemove={(d) => removeDashboard(d.id)}
+  onAdd={() => navigate('/dashboards/new')}
+  onToggleFavorite={(d) => toggleFavorite(d.id)}
+  onSearch={(q) => setSearch(q)}
+  onQuickFilterChange={(f) => setFilter(f)}
 />
 ```
 
 **Exemplos:**
 ```tsx
-<DashboardList
-  dashboards={dashboards}
-  limit={{ maxDashboards: 50, countDashboards: 12 }}
-  canAdd canEdit canRemove
-  onOpen={(d) => openDashboard(d)}
-  onToggleFavorite={(d) => toggleFav(d.id)}
-  onSearch={(q) => fetchFiltered(q)}
-  onQuickFilterChange={(filter) => {
-    // QuickFilterDashboard.All | OnlyMine | Favorites
-    refetch(filter);
-  }}
+<DashboardList
+  dashboards={dashboards}
+  limit={{ maxDashboards: 50, countDashboards: 12 }}
+  canAdd canEdit canRemove
+  onOpen={(d) => openDashboard(d)}
+  onToggleFavorite={(d) => toggleFav(d.id)}
+  onSearch={(q) => fetchFiltered(q)}
+  onQuickFilterChange={(filter) => {
+    // QuickFilterDashboard.All | OnlyMine | Favorites
+    refetch(filter);
+  }}
 />
 ```
 ```tsx
-// As ações são controladas por callbacks
-<DashboardList
-  canEdit={true}
-  canRemove={true}
+// As ações são controladas por callbacks
+<DashboardList
+  canEdit={true}
+  canRemove={true}
   onOpen={(d) => navigate(\
 ```
 
-> Fonte: `src\design-system\docs\components\dashboards\DashboardListDoc.tsx`
+> Fonte: `src/design-system/docs/components/dashboards/DashboardListDoc.tsx`
 
 ---
 
-### DashboardForm
+### Form
 
-Formulário de criação/edição de dashboards com títulos multilíngue (PT-BR, EN-US, ES-ES), intervalo de atualização, tipo de visualização (Normal/Carousel), switch de situação e aba de compartilhamento com três modos.
+Construindo formulários com React Hook Form e Zod.
 
 **Uso:**
 ```tsx
-import { DashboardForm, type DashboardFormValues } from 'forlogic-core';
-
-// Criação
-<DashboardForm
-  onSave={(values: DashboardFormValues) => {
-    // values: { titlePtBr, titleEnUs, titleEsEs, isActive,
-    //           idUpdateTime, idViewType, idPageTime,
-    //           idShare, groups?, places?, collaborators? }
-    createDashboard(values);
-  }}
-  onCancel={() => navigate('/dashboards')}
-/>
-
-// Edição
-<DashboardForm
-  dashboard={existingDashboard}
-  users={usersList}
-  groups={groupsList}
-  places={placesList}
-  collaborators={collaboratorsList}
-  isSaving={mutation.isPending}
-  onSave={(values) => updateDashboard(dashboard.id, values)}
-  onCancel={() => goBack()}
-/>
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "forlogic-core"
+
+const formSchema = z.object({
+  username: z.string().min(2).max(50),
+})
+
+function MyForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  })
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
 ```
 
 **Props:**
 | Prop | Tipo | Padrão | Descrição |
 |------|------|--------|-----------|
-| `dashboard` | `Dashboard | null` | - | Dashboard existente para edição. null para criação. |
-| `initialTab` | `DashboardFormTab` | - | Aba inicial (General ou Share). Default: General. |
-| `isSaving` | `boolean` | - | Desabilita o botão salvar e mostra spinner. |
-| `isQualitfy` | `boolean` | - | Dashboard padrão Qualitfy — bloqueia campos de configuração. |
-| `users` | `Array<{ id, name }>` | - | Lista para seletor de responsável. |
-| `groups / places / collaborators` | `Array<{ id, name }>` | - | Listas para aba de compartilhamento. |
-| `onSave` | `(values: DashboardFormValues) => void` | - | Chamado ao clicar Salvar com valores válidos. |
-| `onCancel` | `() => void` | - | Chamado ao clicar Cancelar. |
+| `Form` | `FormProvider props` | - | Wrapper que provê o contexto do formulário via React Hook Form |
+| `FormField.control` | `Control` | - | Objeto control do useForm para gerenciar o campo |
+| `FormField.name` | `string` | - | Nome do campo no schema do formulário |
+| `FormField.render` | `(field) => ReactNode` | - | Função de renderização do campo com acesso ao field object |
+| `FormItem` | `HTMLDivElement` | - | Container que agrupa label, controle, descrição e mensagem de erro |
+| `FormLabel` | `LabelProps` | - | Label associado ao campo do formulário |
+| `FormControl` | `SlotProps` | - | Wrapper que conecta o controle ao contexto do campo |
+| `FormDescription` | `HTMLParagraphElement` | - | Texto de ajuda exibido abaixo do controle |
+| `FormMessage` | `HTMLParagraphElement` | - | Exibe mensagens de erro de validação automaticamente |
 
 **Exemplos:**
 ```tsx
-<DashboardForm
-  dashboard={null} // null = criação
-  users={[
-    { id:
+<FormField
+  control={form.control}
+  name=
+```
+```tsx
+const formSchema = z.object({
+  username: z.string().min(3, {
+    message:
 ```
 
-> Fonte: `src\design-system\docs\components\dashboards\DashboardFormDoc.tsx`
+**Acessibilidade:**
+- Labels são automaticamente associados aos controles via aria-describedby
+- Mensagens de erro são anunciadas por leitores de tela
+- Suporta navegação por teclado nativa dos controles
+- Estados de erro são indicados visualmente e semanticamente
+- Usa React Hook Form para gerenciamento de estado de formulário
+- Integra com Zod para validação de schema
+
+> Fonte: `src/design-system/docs/components/FormDoc.tsx`
 
 ---
 
@@ -304,32 +343,32 @@ Grid de 8 colunas com posicionamento por col/row e dimensão por sizeX/sizeY. Su
 
 **Uso:**
 ```tsx
-import { DashboardGrid, getDefaultPanelSize, getMinPanelSize } from 'forlogic-core';
-
-<DashboardGrid
-  panels={[
-    { id: 'p1', col: 0, row: 0, sizeX: 4, sizeY: 2 },
-    { id: 'p2', col: 4, row: 0, sizeX: 4, sizeY: 2 },
-    { id: 'p3', col: 0, row: 2, sizeX: 8, sizeY: 2 },
-  ]}
-  columns={8}          // padrão: 8
-  cellHeight={160}     // padrão: 160px
-  cellGap={10}         // padrão: 10px
-  allowDragging={canEdit}
-  showGridLines={canEdit}
-  renderPanel={(panelId) => <MyPanelComponent id={panelId} />}
-  onLayoutChange={(updatedPanels) => saveLayout(updatedPanels)}
+import { DashboardGrid, getDefaultPanelSize, getMinPanelSize } from 'forlogic-core';
+
+<DashboardGrid
+  panels={[
+    { id: 'p1', col: 0, row: 0, sizeX: 4, sizeY: 2 },
+    { id: 'p2', col: 4, row: 0, sizeX: 4, sizeY: 2 },
+    { id: 'p3', col: 0, row: 2, sizeX: 8, sizeY: 2 },
+  ]}
+  columns={8}          // padrão: 8
+  cellHeight={160}     // padrão: 160px
+  cellGap={10}         // padrão: 10px
+  allowDragging={canEdit}
+  showGridLines={canEdit}
+  renderPanel={(panelId) => <MyPanelComponent id={panelId} />}
+  onLayoutChange={(updatedPanels) => saveLayout(updatedPanels)}
 />
 ```
 
 **Exemplos:**
 ```tsx
-<DashboardGrid
-  panels={[
+<DashboardGrid
+  panels={[
     { id:
 ```
 
-> Fonte: `src\design-system\docs\components\dashboards\DashboardGridDoc.tsx`
+> Fonte: `src/design-system/docs/components/dashboards/DashboardGridDoc.tsx`
 
 ---
 
@@ -339,37 +378,37 @@ Componente de roteamento que mapeia DashboardPanelType para o componente React c
 
 **Uso:**
 ```tsx
-import { DashboardPanelRenderer, PanelState, DashboardPanelType } from 'forlogic-core';
-
-// O renderer resolve automaticamente qual componente usar
-<DashboardPanelRenderer
-  config={{
-    id: 'p1',
-    title: 'Ocorrências por Mês',
-    typeId: DashboardPanelType.Column,
-    // ... demais campos de PanelConfig
-  }}
-  state={PanelState.Loaded}
-  cartesianData={[
-    { key: 'Jan', value: 42 },
-    { key: 'Fev', value: 58 },
-  ]}
-  cartesianSeries={[{ dataKey: 'value', name: 'Total' }]}
-/>
-
-// Para NumericPanel, use numericValue:
-<DashboardPanelRenderer
-  config={{ ...config, typeId: DashboardPanelType.Numeric }}
-  state={PanelState.Loaded}
-  numericValue={1247}
-/>
-
-// Para MatrixRisk, use matrixRule + matrixRisks:
-<DashboardPanelRenderer
-  config={{ ...config, typeId: DashboardPanelType.RiskMatrix }}
-  state={PanelState.Loaded}
-  matrixRule={rule}
-  matrixRisks={risks}
+import { DashboardPanelRenderer, PanelState, DashboardPanelType } from 'forlogic-core';
+
+// O renderer resolve automaticamente qual componente usar
+<DashboardPanelRenderer
+  config={{
+    id: 'p1',
+    title: 'Ocorrências por Mês',
+    typeId: DashboardPanelType.Column,
+    // ... demais campos de PanelConfig
+  }}
+  state={PanelState.Loaded}
+  cartesianData={[
+    { key: 'Jan', value: 42 },
+    { key: 'Fev', value: 58 },
+  ]}
+  cartesianSeries={[{ dataKey: 'value', name: 'Total' }]}
+/>
+
+// Para NumericPanel, use numericValue:
+<DashboardPanelRenderer
+  config={{ ...config, typeId: DashboardPanelType.Numeric }}
+  state={PanelState.Loaded}
+  numericValue={1247}
+/>
+
+// Para MatrixRisk, use matrixRule + matrixRisks:
+<DashboardPanelRenderer
+  config={{ ...config, typeId: DashboardPanelType.RiskMatrix }}
+  state={PanelState.Loaded}
+  matrixRule={rule}
+  matrixRisks={risks}
 />
 ```
 
@@ -379,7 +418,7 @@ import { DashboardPanelRenderer, PanelState, DashboardPanelType } from 'forlogic
 | `config` | `PanelConfig` | - | Configuração do painel — inclui typeId que determina qual componente renderizar. |
 | `state` | `PanelState` | - | Estado atual do painel (Loading, Loaded, Error, NoData, Unavailable). |
 
-> Fonte: `src\design-system\docs\components\dashboards\DashboardPanelRendererDoc.tsx`
+> Fonte: `src/design-system/docs/components/dashboards/DashboardPanelRendererDoc.tsx`
 
 ---
 
@@ -389,31 +428,31 @@ Os três painéis não-gráficos do módulo de dashboards: NumericPanel (valor n
 
 **Uso:**
 ```tsx
-import { NumericPanel, TextPanel, ListPanel, PanelState } from 'forlogic-core';
-
-// Painel Numérico
-<NumericPanel
-  config={panelConfig}
-  state={PanelState.Loaded}
-  value={1247}
-  label="Contagem"    // override do label automático
-  onClick={() => openPopover()}
-/>
-
-// Painel de Texto
-<TextPanel
-  config={{ ...panelConfig, textTypeString: '<h3>Título</h3><p>Conteúdo</p>' }}
-  state={PanelState.Loaded}
-/>
-
-// Painel de Lista
-<ListPanel
-  config={panelConfig}
-  state={PanelState.Loaded}
-  data={rows}
-  columns={columnDefinitions}
-  enableRowLinks={true}
-  onRowClick={(row) => openDetail(row)}
+import { NumericPanel, TextPanel, ListPanel, PanelState } from 'forlogic-core';
+
+// Painel Numérico
+<NumericPanel
+  config={panelConfig}
+  state={PanelState.Loaded}
+  value={1247}
+  label="Contagem"    // override do label automático
+  onClick={() => openPopover()}
+/>
+
+// Painel de Texto
+<TextPanel
+  config={{ ...panelConfig, textTypeString: '<h3>Título</h3><p>Conteúdo</p>' }}
+  state={PanelState.Loaded}
+/>
+
+// Painel de Lista
+<ListPanel
+  config={panelConfig}
+  state={PanelState.Loaded}
+  data={rows}
+  columns={columnDefinitions}
+  enableRowLinks={true}
+  onRowClick={(row) => openDetail(row)}
 />
 ```
 
@@ -427,29 +466,29 @@ import { NumericPanel, TextPanel, ListPanel, PanelState } from 'forlogic-core';
 
 **Exemplos:**
 ```tsx
-// Contagem simples
-<NumericPanel config={config} state={PanelState.Loaded} value={1247} />
-
+// Contagem simples
+<NumericPanel config={config} state={PanelState.Loaded} value={1247} />
+
 // Com formatação de moeda (detectado pelo campo
 ```
 ```tsx
-<TextPanel
-  config={{
-    ...config,
+<TextPanel
+  config={{
+    ...config,
     textTypeString:
 ```
 ```tsx
-<ListPanel
-  config={config}
-  state={PanelState.Loaded}
-  data={[
+<ListPanel
+  config={config}
+  state={PanelState.Loaded}
+  data={[
     { code:
 ```
 ```tsx
 OC-002
 ```
 
-> Fonte: `src\design-system\docs\components\dashboards\DashboardPanelsBasicDoc.tsx`
+> Fonte: `src/design-system/docs/components/dashboards/DashboardPanelsBasicDoc.tsx`
 
 ---
 
@@ -459,43 +498,43 @@ CartesianPanel é um componente unificado que renderiza 6 variantes de gráfico
 
 **Uso:**
 ```tsx
-import { CartesianPanel, PanelState, type CartesianSeries } from 'forlogic-core';
-
-// Uso básico — série única
-<CartesianPanel
-  config={panelConfig}
-  variant="column"   // 'bar' | 'column' | 'stacked-column' | 'area' | 'line' | 'evolution-line'
-  state={PanelState.Loaded}
-  data={[
-    { key: 'Jan', value: 42 },
-    { key: 'Fev', value: 58 },
-  ]}
-/>
-
-// Múltiplas séries
-<CartesianPanel
-  config={panelConfig}
-  variant="column"
-  state={PanelState.Loaded}
-  data={data}
-  series={[
-    { dataKey: 'opened', name: 'Abertas', color: '#4e79a7' },
-    { dataKey: 'closed', name: 'Fechadas', color: '#59a14f' },
-  ]}
-  categoryKey="month"         // chave do eixo X (default: 'key')
-  yAxisFormat="R$ {value}"    // formato do eixo Y
-  onPointClick={(data, index) => openDetail(data)}
+import { CartesianPanel, PanelState, type CartesianSeries } from 'forlogic-core';
+
+// Uso básico — série única
+<CartesianPanel
+  config={panelConfig}
+  variant="column"   // 'bar' | 'column' | 'stacked-column' | 'area' | 'line' | 'evolution-line'
+  state={PanelState.Loaded}
+  data={[
+    { key: 'Jan', value: 42 },
+    { key: 'Fev', value: 58 },
+  ]}
+/>
+
+// Múltiplas séries
+<CartesianPanel
+  config={panelConfig}
+  variant="column"
+  state={PanelState.Loaded}
+  data={data}
+  series={[
+    { dataKey: 'opened', name: 'Abertas', color: '#4e79a7' },
+    { dataKey: 'closed', name: 'Fechadas', color: '#59a14f' },
+  ]}
+  categoryKey="month"         // chave do eixo X (default: 'key')
+  yAxisFormat="R$ {value}"    // formato do eixo Y
+  onPointClick={(data, index) => openDetail(data)}
 />
 ```
 
 **Exemplos:**
 ```tsx
-<CartesianPanel
-  config={config}
+<CartesianPanel
+  config={config}
   variant=
 ```
 
-> Fonte: `src\design-system\docs\components\dashboards\DashboardPanelsCartesianDoc.tsx`
+> Fonte: `src/design-system/docs/components/dashboards/DashboardPanelsCartesianDoc.tsx`
 
 ---
 
@@ -505,43 +544,43 @@ Cinco painéis especializados: PiePanel (pizza com percentuais), ParetoPanel (ba
 
 **Uso:**
 ```tsx
-import {
-  PiePanel, ParetoPanel, BurndownPanel,
-  PerformancePanel, MatrixRiskPanel,
-  PanelState, MatrixViewType,
-} from 'forlogic-core';
-
-// Pie
-<PiePanel config={config} state={PanelState.Loaded} data={pieData} />
-
-// Pareto
-<ParetoPanel config={config} state={PanelState.Loaded} data={paretoData} />
-
-// Burndown
-<BurndownPanel config={config} state={PanelState.Loaded} data={burndownData} />
-
-// Performance
-<PerformancePanel config={config} state={PanelState.Loaded} data={performanceData} />
-
-// Matrix Risk
-<MatrixRiskPanel
-  config={config}
-  state={PanelState.Loaded}
-  rule={matrixRule}
-  risks={risks}
-  matrixViewType={MatrixViewType.Quantity}
+import {
+  PiePanel, ParetoPanel, BurndownPanel,
+  PerformancePanel, MatrixRiskPanel,
+  PanelState, MatrixViewType,
+} from 'forlogic-core';
+
+// Pie
+<PiePanel config={config} state={PanelState.Loaded} data={pieData} />
+
+// Pareto
+<ParetoPanel config={config} state={PanelState.Loaded} data={paretoData} />
+
+// Burndown
+<BurndownPanel config={config} state={PanelState.Loaded} data={burndownData} />
+
+// Performance
+<PerformancePanel config={config} state={PanelState.Loaded} data={performanceData} />
+
+// Matrix Risk
+<MatrixRiskPanel
+  config={config}
+  state={PanelState.Loaded}
+  rule={matrixRule}
+  risks={risks}
+  matrixViewType={MatrixViewType.Quantity}
 />
 ```
 
 **Exemplos:**
 ```tsx
-<PiePanel
-  config={config}
-  state={PanelState.Loaded}
-  data={[
+<PiePanel
+  config={config}
+  state={PanelState.Loaded}
+  data={[
     { key:
 ```
 
-> Fonte: `src\design-system\docs\components\dashboards\DashboardPanelsSpecialDoc.tsx`
+> Fonte: `src/design-system/docs/components/dashboards/DashboardPanelsSpecialDoc.tsx`
 
 ---