@hed-hog/operations 0.0.327 → 0.0.329

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

@@ -1,1368 +0,0 @@
-'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>
-  );
-}