@hed-hog/operations 0.0.322 → 0.0.325

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/project-costs-section.tsx

@@ -0,0 +1,1368 @@
+'use client';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  CheckCircle2,
+  DollarSign,
+  Pencil,
+  Percent,
+  PiggyBank,
+  Plus,
+  Receipt,
+  Trash2,
+  TrendingUp,
+  Wallet,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useMemo, useState } from 'react';
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Pie,
+  PieChart,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import {
+  createProjectCost,
+  deleteProjectCost,
+  getFullProjectCostSummary,
+  getProjectCostsSummary,
+  listProjectCostTypes,
+  updateProjectCost,
+} from '../_lib/api';
+import type {
+  FullCostSummary,
+  PaginatedResponse,
+  ProjectCost,
+  ProjectCostCategory,
+  ProjectCostSummary,
+  ProjectCostType,
+} from '../_lib/types';
+import { formatCurrency, formatDate } from '../_lib/utils/format';
+
+const CALCULATION_TYPE_OPTIONS = [
+  'fixed',
+  'unit',
+  'hourly',
+  'monthly',
+  'percentage',
+] as const;
+
+const RECURRENCE_TYPE_OPTIONS = [
+  'none',
+  'daily',
+  'weekly',
+  'monthly',
+  'yearly',
+] as const;
+
+const STATUS_OPTIONS = [
+  'planned',
+  'approved',
+  'realized',
+  'cancelled',
+] as const;
+
+type CostFormState = {
+  cost_type_id: string;
+  category_id: string;
+  description: string;
+  amount: string;
+  currency: string;
+  quantity: string;
+  unit_amount: string;
+  cost_date: string;
+  period_start: string;
+  period_end: string;
+  calculation_type: string;
+  recurrence_type: string;
+  is_billable: boolean;
+  is_reimbursable: boolean;
+  notes: string;
+  status: string;
+};
+
+function emptyCostForm(): CostFormState {
+  return {
+    cost_type_id: 'none',
+    category_id: 'none',
+    description: '',
+    amount: '',
+    currency: 'BRL',
+    quantity: '1',
+    unit_amount: '',
+    cost_date: '',
+    period_start: '',
+    period_end: '',
+    calculation_type: 'fixed',
+    recurrence_type: 'none',
+    is_billable: false,
+    is_reimbursable: false,
+    notes: '',
+    status: 'planned',
+  };
+}
+
+function costToForm(cost: ProjectCost): CostFormState {
+  return {
+    cost_type_id: cost.cost_type_id ? String(cost.cost_type_id) : 'none',
+    category_id: cost.category_id ? String(cost.category_id) : 'none',
+    description: cost.description ?? '',
+    amount: String(cost.amount ?? ''),
+    currency: cost.currency ?? 'BRL',
+    quantity: String(cost.quantity ?? 1),
+    unit_amount: cost.unit_amount != null ? String(cost.unit_amount) : '',
+    cost_date: cost.cost_date ?? '',
+    period_start: cost.period_start ?? '',
+    period_end: cost.period_end ?? '',
+    calculation_type: cost.calculation_type ?? 'fixed',
+    recurrence_type: cost.recurrence_type ?? 'none',
+    is_billable: cost.is_billable ?? false,
+    is_reimbursable: cost.is_reimbursable ?? false,
+    notes: cost.notes ?? '',
+    status: cost.status ?? 'planned',
+  };
+}
+
+type Props = {
+  projectId: number;
+};
+
+export function ProjectCostsSection({ projectId }: Props) {
+  const t = useTranslations('operations.ProjectCostsSection');
+  const commonT = useTranslations('operations.Common');
+  const { request, showToastHandler, getSettingValue, currentLocaleCode } =
+    useApp();
+
+  const queryClient = useQueryClient();
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [editingCost, setEditingCost] = useState<ProjectCost | null>(null);
+  const [form, setForm] = useState<CostFormState>(emptyCostForm());
+  const [isSaving, setIsSaving] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<ProjectCost | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const {
+    data: summaryRaw,
+    isLoading,
+    refetch,
+  } = useQuery<ProjectCostSummary>({
+    queryKey: ['operations-project-costs-summary', projectId],
+    queryFn: () =>
+      getProjectCostsSummary(request, projectId) as Promise<ProjectCostSummary>,
+  });
+
+  const summary: ProjectCostSummary | null = summaryRaw ?? null;
+
+  const { data: fullSummary, isLoading: summaryLoading } = useQuery({
+    queryKey: ['operations-project-cost-summary', projectId],
+    queryFn: () =>
+      getFullProjectCostSummary(request, projectId) as Promise<FullCostSummary>,
+  });
+
+  const { data: costTypesRaw } = useQuery<ProjectCostType[]>({
+    queryKey: ['operations-project-cost-types-all'],
+    queryFn: () =>
+      listProjectCostTypes(request, { pageSize: '500' }) as Promise<
+        ProjectCostType[]
+      >,
+  });
+
+  // May come back as paginated or flat array.
+  const costTypes: ProjectCostType[] = Array.isArray(costTypesRaw)
+    ? costTypesRaw
+    : ((costTypesRaw as PaginatedResponse<ProjectCostType> | undefined)?.data ??
+      []);
+
+  // Group cost types by category for the Select.
+  const costTypesByCategory = useMemo(() => {
+    const map = new Map<
+      number | null,
+      { category: ProjectCostCategory | null; types: ProjectCostType[] }
+    >();
+    for (const ct of costTypes) {
+      const key = ct.category_id ?? null;
+      if (!map.has(key)) {
+        map.set(key, { category: ct.category ?? null, types: [] });
+      }
+      map.get(key)!.types.push(ct);
+    }
+    return Array.from(map.values());
+  }, [costTypes]);
+
+  // Auto-calculate amount when calculation_type is unit/hourly/monthly
+  const isCalculatedType = (calcType: string) =>
+    ['unit', 'hourly', 'monthly'].includes(calcType);
+
+  const updateForm = <K extends keyof CostFormState>(
+    field: K,
+    value: CostFormState[K]
+  ) => {
+    setForm((current) => {
+      const next = { ...current, [field]: value };
+      // Auto-calculate amount
+      if (
+        (field === 'quantity' ||
+          field === 'unit_amount' ||
+          field === 'calculation_type') &&
+        isCalculatedType(next.calculation_type)
+      ) {
+        const qty = parseFloat(next.quantity) || 0;
+        const ua = parseFloat(next.unit_amount) || 0;
+        if (qty > 0 && ua > 0) {
+          next.amount = (qty * ua).toFixed(2);
+        }
+      }
+      return next;
+    });
+  };
+
+  // When cost_type changes: auto-fill category and default_calculation_type
+  const handleCostTypeChange = (typeId: string) => {
+    const ct = costTypes.find((t) => String(t.id) === typeId);
+    setForm((current) => {
+      const next: CostFormState = {
+        ...current,
+        cost_type_id: typeId,
+      };
+      if (ct) {
+        if (ct.category_id) next.category_id = String(ct.category_id);
+        if (ct.default_calculation_type) {
+          next.calculation_type = ct.default_calculation_type;
+        }
+      }
+      return next;
+    });
+  };
+
+  const openCreateSheet = () => {
+    setEditingCost(null);
+    setForm(emptyCostForm());
+    setIsSheetOpen(true);
+  };
+
+  const openEditSheet = (cost: ProjectCost) => {
+    setEditingCost(cost);
+    setForm(costToForm(cost));
+    setIsSheetOpen(true);
+  };
+
+  const saveCost = async () => {
+    const amountNum = parseFloat(
+      String(form.amount).replace(/\./g, '').replace(',', '.')
+    );
+    if (!form.amount || isNaN(amountNum) || amountNum <= 0) {
+      showToastHandler?.('error', t('validation.amountRequired'));
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const payload = {
+        cost_type_id:
+          form.cost_type_id !== 'none' ? Number(form.cost_type_id) : null,
+        category_id:
+          form.category_id !== 'none' ? Number(form.category_id) : null,
+        description: form.description.trim() || null,
+        amount: amountNum,
+        currency: form.currency.trim() || 'BRL',
+        quantity: parseFloat(form.quantity) || 1,
+        unit_amount: form.unit_amount ? parseFloat(form.unit_amount) : null,
+        cost_date: form.cost_date || null,
+        period_start: form.period_start || null,
+        period_end: form.period_end || null,
+        calculation_type: form.calculation_type,
+        recurrence_type: form.recurrence_type,
+        is_billable: form.is_billable,
+        is_reimbursable: form.is_reimbursable,
+        notes: form.notes.trim() || null,
+        status: form.status,
+      };
+
+      if (editingCost) {
+        await updateProjectCost(request, projectId, editingCost.id, payload);
+        showToastHandler?.('success', t('messages.updateSuccess'));
+      } else {
+        await createProjectCost(request, projectId, payload);
+        showToastHandler?.('success', t('messages.createSuccess'));
+      }
+
+      setIsSheetOpen(false);
+      setEditingCost(null);
+      setForm(emptyCostForm());
+      await refetch();
+      await queryClient.invalidateQueries({
+        queryKey: ['operations-project-cost-summary', projectId],
+      });
+    } catch {
+      showToastHandler?.('error', t('messages.saveError'));
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const confirmDelete = async () => {
+    if (!deleteTarget) return;
+    setIsDeleting(true);
+    try {
+      await deleteProjectCost(request, projectId, deleteTarget.id);
+      showToastHandler?.('success', t('messages.deleteSuccess'));
+      setDeleteTarget(null);
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.deleteError'));
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const recurrenceTypeLabel = (value: string) => {
+    const map: Record<string, string> = {
+      none: t('recurrenceType.none'),
+      daily: t('recurrenceType.daily'),
+      weekly: t('recurrenceType.weekly'),
+      monthly: t('recurrenceType.monthly'),
+      yearly: t('recurrenceType.yearly'),
+    };
+    return map[value] ?? value;
+  };
+
+  const calculationTypeLabel = (value: string) => {
+    const map: Record<string, string> = {
+      fixed: t('calculationType.fixed'),
+      unit: t('calculationType.unit'),
+      hourly: t('calculationType.hourly'),
+      monthly: t('calculationType.monthly'),
+      percentage: t('calculationType.percentage'),
+    };
+    return map[value] ?? value;
+  };
+
+  const statusLabel = (value: string) => {
+    const map: Record<string, string> = {
+      planned: t('status.planned'),
+      approved: t('status.approved'),
+      realized: t('status.realized'),
+      cancelled: t('status.cancelled'),
+    };
+    return map[value] ?? value;
+  };
+
+  const statusBadgeClass = (value: string) => {
+    const map: Record<string, string> = {
+      approved: 'bg-emerald-500/15 text-emerald-700',
+      realized: 'bg-blue-500/15 text-blue-700',
+      cancelled: 'bg-red-500/15 text-red-700',
+      planned: 'bg-amber-500/15 text-amber-700',
+    };
+    return map[value] ?? '';
+  };
+
+  const costChartConfig: ChartConfig = {
+    total: { label: 'Total', color: 'hsl(201 96% 32%)' },
+    value: { label: 'Valor', color: 'hsl(201 96% 32%)' },
+    planned: { label: t('status.planned'), color: 'hsl(215 16% 47%)' },
+    approved: { label: t('status.approved'), color: 'hsl(166 72% 28%)' },
+    realized: { label: t('status.realized'), color: 'hsl(201 96% 32%)' },
+  };
+
+  const grandTotal = summary?.grand_total ?? 0;
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <div className="flex size-8 items-center justify-center rounded-xl bg-primary/10 text-primary">
+            <DollarSign className="size-4" />
+          </div>
+          <div>
+            <h3 className="text-sm font-semibold">{t('title')}</h3>
+            {grandTotal > 0 ? (
+              <p className="text-xs text-muted-foreground">
+                {t('grandTotal')}:{' '}
+                <span className="font-medium text-foreground">
+                  {formatCurrency(
+                    grandTotal,
+                    getSettingValue,
+                    currentLocaleCode
+                  )}
+                </span>
+              </p>
+            ) : null}
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Link href={`/operations/projects/${projectId}/costs-report`}>
+            <Button variant="outline" size="sm" className="gap-1.5">
+              {t('actions.viewReport')}
+            </Button>
+          </Link>
+          <Button size="sm" onClick={openCreateSheet} className="gap-1.5">
+            <Plus className="size-3.5" />
+            {t('actions.add')}
+          </Button>
+        </div>
+      </div>
+
+      {/* Financial Summary Cards & Charts */}
+      {summaryLoading ? (
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="animate-pulse bg-muted rounded-lg h-24" />
+          ))}
+        </div>
+      ) : fullSummary ? (
+        <div className="space-y-4">
+          {/* Summary Cards */}
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+            <div className="rounded-xl border bg-card p-3">
+              <div className="mb-1 flex items-center gap-2">
+                <Wallet className="size-4 text-muted-foreground" />
+                <span className="text-xs text-muted-foreground">
+                  {t('summary.budgetAmount')}
+                </span>
+              </div>
+              <p className="text-sm font-semibold tabular-nums">
+                {formatCurrency(
+                  fullSummary.budget_amount,
+                  getSettingValue,
+                  currentLocaleCode
+                )}
+              </p>
+            </div>
+            <div className="rounded-xl border bg-card p-3">
+              <div className="mb-1 flex items-center gap-2">
+                <Receipt className="size-4 text-muted-foreground" />
+                <span className="text-xs text-muted-foreground">
+                  {t('summary.extraCostTotal')}
+                </span>
+              </div>
+              <p className="text-sm font-semibold tabular-nums">
+                {formatCurrency(
+                  fullSummary.extra_cost_total,
+                  getSettingValue,
+                  currentLocaleCode
+                )}
+              </p>
+            </div>
+            <div className="rounded-xl border bg-card p-3">
+              <div className="mb-1 flex items-center gap-2">
+                <TrendingUp className="size-4 text-muted-foreground" />
+                <span className="text-xs text-muted-foreground">
+                  {t('summary.totalProjectCost')}
+                </span>
+              </div>
+              <p className="text-sm font-semibold tabular-nums">
+                {formatCurrency(
+                  fullSummary.total_project_cost,
+                  getSettingValue,
+                  currentLocaleCode
+                )}
+              </p>
+            </div>
+            <div className="rounded-xl border bg-card p-3">
+              <div className="mb-1 flex items-center gap-2">
+                <PiggyBank
+                  className={cn(
+                    'size-4',
+                    fullSummary.remaining_budget < 0
+                      ? 'text-destructive'
+                      : 'text-muted-foreground'
+                  )}
+                />
+                <span className="text-xs text-muted-foreground">
+                  {t('summary.remainingBudget')}
+                </span>
+              </div>
+              <p
+                className={cn(
+                  'text-sm font-semibold tabular-nums',
+                  fullSummary.remaining_budget < 0 ? 'text-destructive' : ''
+                )}
+              >
+                {formatCurrency(
+                  fullSummary.remaining_budget,
+                  getSettingValue,
+                  currentLocaleCode
+                )}
+              </p>
+            </div>
+            <div className="rounded-xl border bg-card p-3">
+              <div className="mb-1 flex items-center gap-2">
+                <Percent
+                  className={cn(
+                    'size-4',
+                    fullSummary.budget_usage_percent > 80
+                      ? 'text-amber-500'
+                      : 'text-muted-foreground'
+                  )}
+                />
+                <span className="text-xs text-muted-foreground">
+                  {t('summary.budgetUsagePercent')}
+                </span>
+              </div>
+              <p
+                className={cn(
+                  'text-sm font-semibold tabular-nums',
+                  fullSummary.budget_usage_percent > 80 ? 'text-amber-600' : ''
+                )}
+              >
+                {fullSummary.budget_usage_percent.toFixed(2)}%
+              </p>
+            </div>
+            <div className="rounded-xl border bg-card p-3">
+              <div className="mb-1 flex items-center gap-2">
+                <CheckCircle2 className="size-4 text-muted-foreground" />
+                <span className="text-xs text-muted-foreground">
+                  {t('summary.realizedTotal')}
+                </span>
+              </div>
+              <p className="text-sm font-semibold tabular-nums">
+                {formatCurrency(
+                  fullSummary.realized_total,
+                  getSettingValue,
+                  currentLocaleCode
+                )}
+              </p>
+            </div>
+          </div>
+
+          {/* Charts Grid */}
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            {/* Chart 1: Custo por Categoria (PieChart) */}
+            <div className="rounded-xl border bg-card p-4">
+              <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {t('summary.costByCategory')}
+              </h4>
+              {fullSummary.cost_by_category.length === 0 ? (
+                <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
+                  {t('summary.noData')}
+                </div>
+              ) : (
+                <div className="flex items-start gap-4">
+                  <ChartContainer
+                    className="h-40 w-40 shrink-0"
+                    config={costChartConfig}
+                  >
+                    <PieChart>
+                      <ChartTooltip content={<ChartTooltipContent />} />
+                      <Pie
+                        data={fullSummary.cost_by_category}
+                        dataKey="total"
+                        nameKey="category_name"
+                        cx="50%"
+                        cy="50%"
+                        outerRadius={68}
+                        innerRadius={32}
+                      >
+                        {fullSummary.cost_by_category.map((entry, i) => (
+                          <Cell
+                            key={`cell-cat-${i}`}
+                            fill={
+                              entry.category_color ||
+                              `hsl(${(i * 47) % 360} 70% 50%)`
+                            }
+                          />
+                        ))}
+                      </Pie>
+                    </PieChart>
+                  </ChartContainer>
+                  <div className="flex-1 space-y-1.5 overflow-hidden">
+                    {fullSummary.cost_by_category.map((entry, i) => (
+                      <div key={i} className="flex min-w-0 items-center gap-2">
+                        <span
+                          className="inline-block size-2.5 shrink-0 rounded-full"
+                          style={{
+                            backgroundColor:
+                              entry.category_color ||
+                              `hsl(${(i * 47) % 360} 70% 50%)`,
+                          }}
+                        />
+                        <span className="truncate text-xs text-muted-foreground">
+                          {entry.category_name}
+                        </span>
+                        <span className="ml-auto shrink-0 text-xs font-medium tabular-nums">
+                          {formatCurrency(
+                            entry.total,
+                            getSettingValue,
+                            currentLocaleCode
+                          )}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Chart 2: Custo por Tipo (BarChart horizontal) */}
+            <div className="rounded-xl border bg-card p-4">
+              <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {t('summary.costByType')}
+              </h4>
+              {fullSummary.cost_by_type.length === 0 ? (
+                <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
+                  {t('summary.noData')}
+                </div>
+              ) : (
+                <ChartContainer
+                  className="h-40 w-full"
+                  config={costChartConfig}
+                >
+                  <BarChart
+                    layout="vertical"
+                    data={fullSummary.cost_by_type.slice(0, 5).map((ct) => ({
+                      name: ct.cost_type_name,
+                      total: ct.total,
+                    }))}
+                    margin={{ left: 8, right: 8, top: 0, bottom: 0 }}
+                  >
+                    <CartesianGrid horizontal={false} strokeDasharray="3 3" />
+                    <YAxis
+                      type="category"
+                      dataKey="name"
+                      tickLine={false}
+                      axisLine={false}
+                      width={80}
+                      tick={{ fontSize: 11 }}
+                    />
+                    <XAxis
+                      type="number"
+                      tickLine={false}
+                      axisLine={false}
+                      tickFormatter={(v) =>
+                        Intl.NumberFormat('pt-BR', {
+                          notation: 'compact',
+                          maximumFractionDigits: 1,
+                        }).format(Number(v))
+                      }
+                    />
+                    <ChartTooltip content={<ChartTooltipContent />} />
+                    <Bar dataKey="total" fill="hsl(201 96% 32%)" radius={4} />
+                  </BarChart>
+                </ChartContainer>
+              )}
+            </div>
+
+            {/* Chart 3: Evolução Mensal (AreaChart) */}
+            <div className="rounded-xl border bg-card p-4">
+              <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {t('summary.costByMonth')}
+              </h4>
+              {fullSummary.cost_by_month.length === 0 ? (
+                <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
+                  {t('summary.noData')}
+                </div>
+              ) : (
+                <ChartContainer
+                  className="h-40 w-full"
+                  config={costChartConfig}
+                >
+                  <AreaChart
+                    data={fullSummary.cost_by_month}
+                    margin={{ left: 8, right: 8, top: 0, bottom: 0 }}
+                  >
+                    <defs>
+                      <linearGradient
+                        id="costMonthGradient"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
+                        <stop
+                          offset="5%"
+                          stopColor="hsl(201 96% 32%)"
+                          stopOpacity={0.3}
+                        />
+                        <stop
+                          offset="95%"
+                          stopColor="hsl(201 96% 32%)"
+                          stopOpacity={0}
+                        />
+                      </linearGradient>
+                    </defs>
+                    <CartesianGrid vertical={false} strokeDasharray="3 3" />
+                    <XAxis
+                      dataKey="month"
+                      tickLine={false}
+                      axisLine={false}
+                      tick={{ fontSize: 11 }}
+                    />
+                    <YAxis
+                      tickLine={false}
+                      axisLine={false}
+                      width={40}
+                      tickFormatter={(v) =>
+                        Intl.NumberFormat('pt-BR', {
+                          notation: 'compact',
+                          maximumFractionDigits: 1,
+                        }).format(Number(v))
+                      }
+                    />
+                    <ChartTooltip content={<ChartTooltipContent />} />
+                    <Area
+                      type="monotone"
+                      dataKey="total"
+                      stroke="hsl(201 96% 32%)"
+                      strokeWidth={2}
+                      fill="url(#costMonthGradient)"
+                    />
+                  </AreaChart>
+                </ChartContainer>
+              )}
+            </div>
+
+            {/* Chart 4: Planejado × Aprovado × Realizado */}
+            <div className="rounded-xl border bg-card p-4">
+              <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {t('summary.statusBreakdown')}
+              </h4>
+              <ChartContainer className="h-40 w-full" config={costChartConfig}>
+                <BarChart
+                  data={[
+                    {
+                      name: t('status.planned'),
+                      value: fullSummary.planned_total,
+                    },
+                    {
+                      name: t('status.approved'),
+                      value: fullSummary.approved_total,
+                    },
+                    {
+                      name: t('status.realized'),
+                      value: fullSummary.realized_total,
+                    },
+                  ]}
+                  margin={{ left: 8, right: 8, top: 0, bottom: 0 }}
+                >
+                  <CartesianGrid vertical={false} strokeDasharray="3 3" />
+                  <XAxis
+                    dataKey="name"
+                    tickLine={false}
+                    axisLine={false}
+                    tick={{ fontSize: 11 }}
+                  />
+                  <YAxis
+                    tickLine={false}
+                    axisLine={false}
+                    width={40}
+                    tickFormatter={(v) =>
+                      Intl.NumberFormat('pt-BR', {
+                        notation: 'compact',
+                        maximumFractionDigits: 1,
+                      }).format(Number(v))
+                    }
+                  />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <Bar dataKey="value" radius={4}>
+                    {[
+                      'hsl(215 16% 47%)',
+                      'hsl(166 72% 28%)',
+                      'hsl(201 96% 32%)',
+                    ].map((color, i) => (
+                      <Cell key={`cell-status-${i}`} fill={color} />
+                    ))}
+                  </Bar>
+                </BarChart>
+              </ChartContainer>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {/* Content */}
+      {isLoading ? (
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-8 w-3/4" />
+        </div>
+      ) : !summary || summary.categories.length === 0 ? (
+        <div className="flex min-h-40 flex-col items-center justify-center rounded-2xl border border-dashed bg-background p-6 text-center">
+          <div className="flex size-10 items-center justify-center rounded-xl bg-muted text-muted-foreground">
+            <DollarSign className="size-5" />
+          </div>
+          <p className="mt-2 text-sm font-medium">{t('empty')}</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {t('emptyDescription')}
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {summary.categories.map((group, index) => (
+            <div
+              key={group.category?.id ?? `uncategorized-${index}`}
+              className="overflow-hidden rounded-xl border bg-card"
+            >
+              {/* Category subheader */}
+              <div className="flex items-center justify-between gap-2 border-b bg-muted/30 px-4 py-2">
+                <div className="flex items-center gap-2">
+                  {group.category?.color ? (
+                    <span
+                      className="inline-block size-2.5 rounded-full"
+                      style={{ backgroundColor: group.category.color }}
+                    />
+                  ) : null}
+                  <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                    {group.category?.name ?? t('uncategorized')}
+                  </span>
+                  <Badge variant="secondary" className="text-[10px]">
+                    {group.count}
+                  </Badge>
+                </div>
+                <span className="text-xs font-medium text-muted-foreground">
+                  {formatCurrency(
+                    group.total_amount,
+                    getSettingValue,
+                    currentLocaleCode
+                  )}
+                </span>
+              </div>
+
+              {/* Costs table */}
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('columns.description')}</TableHead>
+                    <TableHead className="hidden sm:table-cell">
+                      {t('columns.type')}
+                    </TableHead>
+                    <TableHead className="hidden md:table-cell">
+                      {t('columns.calculationType')}
+                    </TableHead>
+                    <TableHead className="text-right">
+                      {t('columns.quantityAmount')}
+                    </TableHead>
+                    <TableHead className="text-right hidden sm:table-cell">
+                      {t('columns.total')}
+                    </TableHead>
+                    <TableHead>{t('columns.status')}</TableHead>
+                    <TableHead className="text-right">
+                      {commonT('labels.actions')}
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {group.items.map((cost) => {
+                    const total =
+                      Number(cost.amount) * Number(cost.quantity ?? 1);
+                    return (
+                      <TableRow
+                        key={cost.id}
+                        className="cursor-pointer"
+                        onClick={() => openEditSheet(cost)}
+                      >
+                        <TableCell>
+                          <div>
+                            <span className="font-medium">
+                              {cost.description || cost.cost_type?.name || '-'}
+                            </span>
+                            {cost.cost_date ? (
+                              <p className="mt-0.5 text-xs text-muted-foreground">
+                                {formatDate(
+                                  cost.cost_date,
+                                  getSettingValue,
+                                  currentLocaleCode
+                                )}
+                              </p>
+                            ) : null}
+                          </div>
+                        </TableCell>
+                        <TableCell className="hidden sm:table-cell">
+                          {cost.cost_type ? (
+                            <Badge variant="outline" className="text-[10px]">
+                              {cost.cost_type.name}
+                            </Badge>
+                          ) : (
+                            <span className="text-muted-foreground">-</span>
+                          )}
+                        </TableCell>
+                        <TableCell className="hidden md:table-cell">
+                          <Badge variant="secondary" className="text-[10px]">
+                            {calculationTypeLabel(cost.calculation_type)}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-right tabular-nums">
+                          <span className="text-xs text-muted-foreground">
+                            {Number(cost.quantity ?? 1)} ×{' '}
+                            {formatCurrency(
+                              Number(cost.amount),
+                              getSettingValue,
+                              currentLocaleCode
+                            )}
+                          </span>
+                        </TableCell>
+                        <TableCell className="hidden text-right tabular-nums sm:table-cell">
+                          <span className="font-medium">
+                            {formatCurrency(
+                              total,
+                              getSettingValue,
+                              currentLocaleCode
+                            )}
+                          </span>
+                        </TableCell>
+                        <TableCell>
+                          <Badge
+                            variant="secondary"
+                            className={statusBadgeClass(cost.status)}
+                          >
+                            {statusLabel(cost.status)}
+                          </Badge>
+                        </TableCell>
+                        <TableCell
+                          className="text-right"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <div className="flex justify-end gap-1">
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="size-7"
+                              onClick={() => openEditSheet(cost)}
+                            >
+                              <Pencil className="size-3" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="size-7 text-destructive hover:text-destructive"
+                              onClick={() => setDeleteTarget(cost)}
+                            >
+                              <Trash2 className="size-3" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Create / Edit Sheet */}
+      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+        <SheetContent className="flex w-full flex-col overflow-hidden sm:max-w-lg">
+          <SheetHeader>
+            <SheetTitle>
+              {editingCost ? t('sheet.editTitle') : t('sheet.createTitle')}
+            </SheetTitle>
+            <SheetDescription>{t('sheet.description')}</SheetDescription>
+          </SheetHeader>
+
+          <div className="flex-1 space-y-4 overflow-y-auto px-4 py-4">
+            {/* Cost type */}
+            <div className="space-y-1.5">
+              <Label htmlFor="pc-type">{t('fields.costType')}</Label>
+              <Select
+                value={form.cost_type_id}
+                onValueChange={handleCostTypeChange}
+              >
+                <SelectTrigger id="pc-type" className="w-full">
+                  <SelectValue placeholder={t('fields.costTypePlaceholder')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">
+                    {t('fields.costTypeNone')}
+                  </SelectItem>
+                  {costTypesByCategory.map((group, gIndex) => (
+                    <SelectGroup key={group.category?.id ?? `g-${gIndex}`}>
+                      {group.category ? (
+                        <SelectLabel>{group.category.name}</SelectLabel>
+                      ) : null}
+                      {group.types.map((ct) => (
+                        <SelectItem key={ct.id} value={String(ct.id)}>
+                          {ct.name}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Category (auto-filled from type, or manual) */}
+            <div className="space-y-1.5">
+              <Label htmlFor="pc-category">
+                {t('fields.category') ?? 'Categoria'}
+              </Label>
+              <Select
+                value={form.category_id}
+                onValueChange={(v) => updateForm('category_id', v)}
+              >
+                <SelectTrigger id="pc-category" className="w-full">
+                  <SelectValue
+                    placeholder={
+                      t('fields.categoryPlaceholder') ??
+                      'Selecione uma categoria (opcional)'
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">
+                    {t('fields.costTypeNone')}
+                  </SelectItem>
+                  {costTypesByCategory
+                    .filter((g) => g.category !== null)
+                    .map((g) => (
+                      <SelectItem
+                        key={g.category!.id}
+                        value={String(g.category!.id)}
+                      >
+                        <div className="flex items-center gap-2">
+                          {g.category!.color ? (
+                            <span
+                              className="inline-block size-2.5 rounded-full shrink-0"
+                              style={{ backgroundColor: g.category!.color }}
+                            />
+                          ) : null}
+                          {g.category!.name}
+                        </div>
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+              {form.cost_type_id !== 'none' && form.category_id !== 'none' && (
+                <p className="text-xs text-muted-foreground">
+                  {t('fields.categoryAutoFilled') ??
+                    'Preenchido automaticamente pelo tipo selecionado'}
+                </p>
+              )}
+            </div>
+
+            {/* Description */}
+            <div className="space-y-1.5">
+              <Label htmlFor="pc-description">{t('fields.description')}</Label>
+              <Input
+                id="pc-description"
+                value={form.description}
+                onChange={(e) => updateForm('description', e.target.value)}
+                placeholder={t('fields.descriptionPlaceholder')}
+              />
+            </div>
+
+            {/* Calculation type */}
+            <div className="space-y-1.5">
+              <Label htmlFor="pc-calc-type-top">
+                {t('fields.calculationType')}
+              </Label>
+              <Select
+                value={form.calculation_type}
+                onValueChange={(v) => updateForm('calculation_type', v)}
+              >
+                <SelectTrigger id="pc-calc-type-top" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {CALCULATION_TYPE_OPTIONS.map((ct) => (
+                    <SelectItem key={ct} value={ct}>
+                      {calculationTypeLabel(ct)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Quantity + Unit Amount (only when calculated type) */}
+            {isCalculatedType(form.calculation_type) && (
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1.5">
+                  <Label htmlFor="pc-quantity">{t('fields.quantity')}</Label>
+                  <Input
+                    id="pc-quantity"
+                    type="number"
+                    min="0.0001"
+                    step="0.0001"
+                    value={form.quantity}
+                    onChange={(e) => updateForm('quantity', e.target.value)}
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label htmlFor="pc-unit-amount">
+                    {t('fields.unitAmount')}
+                  </Label>
+                  <Input
+                    id="pc-unit-amount"
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    value={form.unit_amount}
+                    onChange={(e) => updateForm('unit_amount', e.target.value)}
+                    placeholder="0,00"
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Amount + Currency */}
+            <div className="grid grid-cols-3 gap-3">
+              <div className="col-span-2 space-y-1.5">
+                <Label htmlFor="pc-amount">
+                  {t('fields.amount')}{' '}
+                  <span className="text-destructive">*</span>
+                </Label>
+                <Input
+                  id="pc-amount"
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={form.amount}
+                  onChange={(e) => updateForm('amount', e.target.value)}
+                  placeholder="0,00"
+                  readOnly={
+                    isCalculatedType(form.calculation_type) &&
+                    !!form.unit_amount &&
+                    !!form.quantity
+                  }
+                  className={
+                    isCalculatedType(form.calculation_type) &&
+                    !!form.unit_amount &&
+                    !!form.quantity
+                      ? 'bg-muted text-muted-foreground'
+                      : ''
+                  }
+                />
+                {isCalculatedType(form.calculation_type) && (
+                  <p className="text-xs text-muted-foreground">
+                    {t('fields.amountCalculated') ??
+                      'Calculado automaticamente: quantidade × valor unitário'}
+                  </p>
+                )}
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="pc-currency">{t('fields.currency')}</Label>
+                <Input
+                  id="pc-currency"
+                  value={form.currency}
+                  maxLength={3}
+                  onChange={(e) =>
+                    updateForm('currency', e.target.value.toUpperCase())
+                  }
+                />
+              </div>
+            </div>
+
+            {/* Recurrence Type */}
+            <div className="space-y-1.5">
+              <Label htmlFor="pc-recurrence-type">
+                {t('fields.recurrenceType')}
+              </Label>
+              <Select
+                value={form.recurrence_type}
+                onValueChange={(v) => updateForm('recurrence_type', v)}
+              >
+                <SelectTrigger id="pc-recurrence-type" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {RECURRENCE_TYPE_OPTIONS.map((r) => (
+                    <SelectItem key={r} value={r}>
+                      {recurrenceTypeLabel(r)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Status */}
+            <div className="space-y-1.5">
+              <Label htmlFor="pc-status">{t('fields.status')}</Label>
+              <Select
+                value={form.status}
+                onValueChange={(v) => updateForm('status', v)}
+              >
+                <SelectTrigger id="pc-status" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {STATUS_OPTIONS.map((s) => (
+                    <SelectItem key={s} value={s}>
+                      {statusLabel(s)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Dates */}
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label htmlFor="pc-cost-date">{t('fields.costDate')}</Label>
+                <Input
+                  id="pc-cost-date"
+                  type="date"
+                  value={form.cost_date}
+                  onChange={(e) => updateForm('cost_date', e.target.value)}
+                />
+              </div>
+              <div />
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label htmlFor="pc-period-start">
+                  {t('fields.periodStart')}
+                </Label>
+                <Input
+                  id="pc-period-start"
+                  type="date"
+                  value={form.period_start}
+                  onChange={(e) => updateForm('period_start', e.target.value)}
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="pc-period-end">{t('fields.periodEnd')}</Label>
+                <Input
+                  id="pc-period-end"
+                  type="date"
+                  value={form.period_end}
+                  onChange={(e) => updateForm('period_end', e.target.value)}
+                />
+              </div>
+            </div>
+
+            {/* Flags */}
+            <div className="flex gap-6">
+              <div className="flex items-center gap-2">
+                <input
+                  id="pc-is-billable"
+                  type="checkbox"
+                  checked={form.is_billable}
+                  onChange={(e) => updateForm('is_billable', e.target.checked)}
+                  className="size-4"
+                />
+                <Label htmlFor="pc-is-billable">{t('fields.isBillable')}</Label>
+              </div>
+              <div className="flex items-center gap-2">
+                <input
+                  id="pc-is-reimbursable"
+                  type="checkbox"
+                  checked={form.is_reimbursable}
+                  onChange={(e) =>
+                    updateForm('is_reimbursable', e.target.checked)
+                  }
+                  className="size-4"
+                />
+                <Label htmlFor="pc-is-reimbursable">
+                  {t('fields.isReimbursable')}
+                </Label>
+              </div>
+            </div>
+
+            {/* Notes */}
+            <div className="space-y-1.5">
+              <Label htmlFor="pc-notes">{t('fields.notes')}</Label>
+              <Textarea
+                id="pc-notes"
+                value={form.notes}
+                onChange={(e) => updateForm('notes', e.target.value)}
+                placeholder={t('fields.notesPlaceholder')}
+                rows={3}
+              />
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2 border-t p-4">
+            <Button
+              variant="outline"
+              onClick={() => setIsSheetOpen(false)}
+              disabled={isSaving}
+            >
+              {commonT('actions.cancel')}
+            </Button>
+            <Button onClick={saveCost} disabled={isSaving}>
+              {isSaving ? t('messages.saving') : commonT('actions.save')}
+            </Button>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      {/* Delete Confirmation */}
+      <AlertDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('deleteDialog.title')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('deleteDialog.description')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>
+              {commonT('actions.cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDelete}
+              disabled={isDeleting}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {isDeleting ? t('messages.deleting') : commonT('actions.delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}