@hed-hog/operations 0.0.322 → 0.0.326

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

@@ -0,0 +1,876 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProjectCostsSection = ProjectCostsSection;
+const alert_dialog_1 = require("@/components/ui/alert-dialog");
+const badge_1 = require("@/components/ui/badge");
+const button_1 = require("@/components/ui/button");
+const chart_1 = require("@/components/ui/chart");
+const input_1 = require("@/components/ui/input");
+const label_1 = require("@/components/ui/label");
+const select_1 = require("@/components/ui/select");
+const sheet_1 = require("@/components/ui/sheet");
+const skeleton_1 = require("@/components/ui/skeleton");
+const table_1 = require("@/components/ui/table");
+const textarea_1 = require("@/components/ui/textarea");
+const utils_1 = require("@/lib/utils");
+const next_app_provider_1 = require("@hed-hog/next-app-provider");
+const react_query_1 = require("@tanstack/react-query");
+const lucide_react_1 = require("lucide-react");
+const next_intl_1 = require("next-intl");
+const link_1 = __importDefault(require("next/link"));
+const react_1 = require("react");
+const recharts_1 = require("recharts");
+const api_1 = require("../_lib/api");
+const format_1 = require("../_lib/utils/format");
+const CALCULATION_TYPE_OPTIONS = [
+    'fixed',
+    'unit',
+    'hourly',
+    'monthly',
+    'percentage',
+];
+const RECURRENCE_TYPE_OPTIONS = [
+    'none',
+    'daily',
+    'weekly',
+    'monthly',
+    'yearly',
+];
+const STATUS_OPTIONS = [
+    'planned',
+    'approved',
+    'realized',
+    'cancelled',
+];
+function emptyCostForm() {
+    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) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    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: (_a = cost.description) !== null && _a !== void 0 ? _a : '',
+        amount: String((_b = cost.amount) !== null && _b !== void 0 ? _b : ''),
+        currency: (_c = cost.currency) !== null && _c !== void 0 ? _c : 'BRL',
+        quantity: String((_d = cost.quantity) !== null && _d !== void 0 ? _d : 1),
+        unit_amount: cost.unit_amount != null ? String(cost.unit_amount) : '',
+        cost_date: (_e = cost.cost_date) !== null && _e !== void 0 ? _e : '',
+        period_start: (_f = cost.period_start) !== null && _f !== void 0 ? _f : '',
+        period_end: (_g = cost.period_end) !== null && _g !== void 0 ? _g : '',
+        calculation_type: (_h = cost.calculation_type) !== null && _h !== void 0 ? _h : 'fixed',
+        recurrence_type: (_j = cost.recurrence_type) !== null && _j !== void 0 ? _j : 'none',
+        is_billable: (_k = cost.is_billable) !== null && _k !== void 0 ? _k : false,
+        is_reimbursable: (_l = cost.is_reimbursable) !== null && _l !== void 0 ? _l : false,
+        notes: (_m = cost.notes) !== null && _m !== void 0 ? _m : '',
+        status: (_o = cost.status) !== null && _o !== void 0 ? _o : 'planned',
+    };
+}
+function ProjectCostsSection({ projectId }) {
+    var _a, _b, _c, _d, _e, _f;
+    const t = (0, next_intl_1.useTranslations)('operations.ProjectCostsSection');
+    const commonT = (0, next_intl_1.useTranslations)('operations.Common');
+    const { request, showToastHandler, getSettingValue, currentLocaleCode } = (0, next_app_provider_1.useApp)();
+    const queryClient = (0, react_query_1.useQueryClient)();
+    const [isSheetOpen, setIsSheetOpen] = (0, react_1.useState)(false);
+    const [editingCost, setEditingCost] = (0, react_1.useState)(null);
+    const [form, setForm] = (0, react_1.useState)(emptyCostForm());
+    const [isSaving, setIsSaving] = (0, react_1.useState)(false);
+    const [deleteTarget, setDeleteTarget] = (0, react_1.useState)(null);
+    const [isDeleting, setIsDeleting] = (0, react_1.useState)(false);
+    const { data: summaryRaw, isLoading, refetch, } = (0, next_app_provider_1.useQuery)({
+        queryKey: ['operations-project-costs-summary', projectId],
+        queryFn: () => (0, api_1.getProjectCostsSummary)(request, projectId),
+    });
+    const summary = summaryRaw !== null && summaryRaw !== void 0 ? summaryRaw : null;
+    const { data: fullSummary, isLoading: summaryLoading } = (0, next_app_provider_1.useQuery)({
+        queryKey: ['operations-project-cost-summary', projectId],
+        queryFn: () => (0, api_1.getFullProjectCostSummary)(request, projectId),
+    });
+    const { data: costTypesRaw } = (0, next_app_provider_1.useQuery)({
+        queryKey: ['operations-project-cost-types-all'],
+        queryFn: () => (0, api_1.listProjectCostTypes)(request, { pageSize: '500' }),
+    });
+    // May come back as paginated or flat array.
+    const costTypes = Array.isArray(costTypesRaw)
+        ? costTypesRaw
+        : ((_a = costTypesRaw === null || costTypesRaw === void 0 ? void 0 : costTypesRaw.data) !== null && _a !== void 0 ? _a : []);
+    // Group cost types by category for the Select.
+    const costTypesByCategory = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        const map = new Map();
+        for (const ct of costTypes) {
+            const key = (_a = ct.category_id) !== null && _a !== void 0 ? _a : null;
+            if (!map.has(key)) {
+                map.set(key, { category: (_b = ct.category) !== null && _b !== void 0 ? _b : 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) => ['unit', 'hourly', 'monthly'].includes(calcType);
+    const updateForm = (field, value) => {
+        setForm((current) => {
+            const next = Object.assign(Object.assign({}, 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) => {
+        const ct = costTypes.find((t) => String(t.id) === typeId);
+        setForm((current) => {
+            const next = Object.assign(Object.assign({}, 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) => {
+        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 === null || showToastHandler === void 0 ? void 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 (0, api_1.updateProjectCost)(request, projectId, editingCost.id, payload);
+                showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('success', t('messages.updateSuccess'));
+            }
+            else {
+                await (0, api_1.createProjectCost)(request, projectId, payload);
+                showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('success', t('messages.createSuccess'));
+            }
+            setIsSheetOpen(false);
+            setEditingCost(null);
+            setForm(emptyCostForm());
+            await refetch();
+            await queryClient.invalidateQueries({
+                queryKey: ['operations-project-cost-summary', projectId],
+            });
+        }
+        catch (_a) {
+            showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('error', t('messages.saveError'));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    const confirmDelete = async () => {
+        if (!deleteTarget)
+            return;
+        setIsDeleting(true);
+        try {
+            await (0, api_1.deleteProjectCost)(request, projectId, deleteTarget.id);
+            showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('success', t('messages.deleteSuccess'));
+            setDeleteTarget(null);
+            await refetch();
+        }
+        catch (_a) {
+            showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('error', t('messages.deleteError'));
+        }
+        finally {
+            setIsDeleting(false);
+        }
+    };
+    const recurrenceTypeLabel = (value) => {
+        var _a;
+        const map = {
+            none: t('recurrenceType.none'),
+            daily: t('recurrenceType.daily'),
+            weekly: t('recurrenceType.weekly'),
+            monthly: t('recurrenceType.monthly'),
+            yearly: t('recurrenceType.yearly'),
+        };
+        return (_a = map[value]) !== null && _a !== void 0 ? _a : value;
+    };
+    const calculationTypeLabel = (value) => {
+        var _a;
+        const map = {
+            fixed: t('calculationType.fixed'),
+            unit: t('calculationType.unit'),
+            hourly: t('calculationType.hourly'),
+            monthly: t('calculationType.monthly'),
+            percentage: t('calculationType.percentage'),
+        };
+        return (_a = map[value]) !== null && _a !== void 0 ? _a : value;
+    };
+    const statusLabel = (value) => {
+        var _a;
+        const map = {
+            planned: t('status.planned'),
+            approved: t('status.approved'),
+            realized: t('status.realized'),
+            cancelled: t('status.cancelled'),
+        };
+        return (_a = map[value]) !== null && _a !== void 0 ? _a : value;
+    };
+    const statusBadgeClass = (value) => {
+        var _a;
+        const map = {
+            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 (_a = map[value]) !== null && _a !== void 0 ? _a : '';
+    };
+    const costChartConfig = {
+        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 = (_b = summary === null || summary === void 0 ? void 0 : summary.grand_total) !== null && _b !== void 0 ? _b : 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">
+            <lucide_react_1.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">
+                  {(0, format_1.formatCurrency)(grandTotal, getSettingValue, currentLocaleCode)}
+                </span>
+              </p>) : null}
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <link_1.default href={`/operations/projects/${projectId}/costs-report`}>
+            <button_1.Button variant="outline" size="sm" className="gap-1.5">
+              {t('actions.viewReport')}
+            </button_1.Button>
+          </link_1.default>
+          <button_1.Button size="sm" onClick={openCreateSheet} className="gap-1.5">
+            <lucide_react_1.Plus className="size-3.5"/>
+            {t('actions.add')}
+          </button_1.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">
+                <lucide_react_1.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">
+                {(0, format_1.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">
+                <lucide_react_1.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">
+                {(0, format_1.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">
+                <lucide_react_1.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">
+                {(0, format_1.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">
+                <lucide_react_1.PiggyBank className={(0, utils_1.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={(0, utils_1.cn)('text-sm font-semibold tabular-nums', fullSummary.remaining_budget < 0 ? 'text-destructive' : '')}>
+                {(0, format_1.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">
+                <lucide_react_1.Percent className={(0, utils_1.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={(0, utils_1.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">
+                <lucide_react_1.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">
+                {(0, format_1.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">
+                  <chart_1.ChartContainer className="h-40 w-40 shrink-0" config={costChartConfig}>
+                    <recharts_1.PieChart>
+                      <chart_1.ChartTooltip content={<chart_1.ChartTooltipContent />}/>
+                      <recharts_1.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) => (<recharts_1.Cell key={`cell-cat-${i}`} fill={entry.category_color ||
+                        `hsl(${(i * 47) % 360} 70% 50%)`}/>))}
+                      </recharts_1.Pie>
+                    </recharts_1.PieChart>
+                  </chart_1.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">
+                          {(0, format_1.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>) : (<chart_1.ChartContainer className="h-40 w-full" config={costChartConfig}>
+                  <recharts_1.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 }}>
+                    <recharts_1.CartesianGrid horizontal={false} strokeDasharray="3 3"/>
+                    <recharts_1.YAxis type="category" dataKey="name" tickLine={false} axisLine={false} width={80} tick={{ fontSize: 11 }}/>
+                    <recharts_1.XAxis type="number" tickLine={false} axisLine={false} tickFormatter={(v) => Intl.NumberFormat('pt-BR', {
+                    notation: 'compact',
+                    maximumFractionDigits: 1,
+                }).format(Number(v))}/>
+                    <chart_1.ChartTooltip content={<chart_1.ChartTooltipContent />}/>
+                    <recharts_1.Bar dataKey="total" fill="hsl(201 96% 32%)" radius={4}/>
+                  </recharts_1.BarChart>
+                </chart_1.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>) : (<chart_1.ChartContainer className="h-40 w-full" config={costChartConfig}>
+                  <recharts_1.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>
+                    <recharts_1.CartesianGrid vertical={false} strokeDasharray="3 3"/>
+                    <recharts_1.XAxis dataKey="month" tickLine={false} axisLine={false} tick={{ fontSize: 11 }}/>
+                    <recharts_1.YAxis tickLine={false} axisLine={false} width={40} tickFormatter={(v) => Intl.NumberFormat('pt-BR', {
+                    notation: 'compact',
+                    maximumFractionDigits: 1,
+                }).format(Number(v))}/>
+                    <chart_1.ChartTooltip content={<chart_1.ChartTooltipContent />}/>
+                    <recharts_1.Area type="monotone" dataKey="total" stroke="hsl(201 96% 32%)" strokeWidth={2} fill="url(#costMonthGradient)"/>
+                  </recharts_1.AreaChart>
+                </chart_1.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>
+              <chart_1.ChartContainer className="h-40 w-full" config={costChartConfig}>
+                <recharts_1.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 }}>
+                  <recharts_1.CartesianGrid vertical={false} strokeDasharray="3 3"/>
+                  <recharts_1.XAxis dataKey="name" tickLine={false} axisLine={false} tick={{ fontSize: 11 }}/>
+                  <recharts_1.YAxis tickLine={false} axisLine={false} width={40} tickFormatter={(v) => Intl.NumberFormat('pt-BR', {
+                notation: 'compact',
+                maximumFractionDigits: 1,
+            }).format(Number(v))}/>
+                  <chart_1.ChartTooltip content={<chart_1.ChartTooltipContent />}/>
+                  <recharts_1.Bar dataKey="value" radius={4}>
+                    {[
+                'hsl(215 16% 47%)',
+                'hsl(166 72% 28%)',
+                'hsl(201 96% 32%)',
+            ].map((color, i) => (<recharts_1.Cell key={`cell-status-${i}`} fill={color}/>))}
+                  </recharts_1.Bar>
+                </recharts_1.BarChart>
+              </chart_1.ChartContainer>
+            </div>
+          </div>
+        </div>) : null}
+
+      {/* Content */}
+      {isLoading ? (<div className="space-y-2">
+          <skeleton_1.Skeleton className="h-8 w-full"/>
+          <skeleton_1.Skeleton className="h-8 w-full"/>
+          <skeleton_1.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">
+            <lucide_react_1.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) => {
+                var _a, _b, _c, _d, _e;
+                return (<div key={(_b = (_a = group.category) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : `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">
+                  {((_c = group.category) === null || _c === void 0 ? void 0 : _c.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">
+                    {(_e = (_d = group.category) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : t('uncategorized')}
+                  </span>
+                  <badge_1.Badge variant="secondary" className="text-[10px]">
+                    {group.count}
+                  </badge_1.Badge>
+                </div>
+                <span className="text-xs font-medium text-muted-foreground">
+                  {(0, format_1.formatCurrency)(group.total_amount, getSettingValue, currentLocaleCode)}
+                </span>
+              </div>
+
+              {/* Costs table */}
+              <table_1.Table>
+                <table_1.TableHeader>
+                  <table_1.TableRow>
+                    <table_1.TableHead>{t('columns.description')}</table_1.TableHead>
+                    <table_1.TableHead className="hidden sm:table-cell">
+                      {t('columns.type')}
+                    </table_1.TableHead>
+                    <table_1.TableHead className="hidden md:table-cell">
+                      {t('columns.calculationType')}
+                    </table_1.TableHead>
+                    <table_1.TableHead className="text-right">
+                      {t('columns.quantityAmount')}
+                    </table_1.TableHead>
+                    <table_1.TableHead className="text-right hidden sm:table-cell">
+                      {t('columns.total')}
+                    </table_1.TableHead>
+                    <table_1.TableHead>{t('columns.status')}</table_1.TableHead>
+                    <table_1.TableHead className="text-right">
+                      {commonT('labels.actions')}
+                    </table_1.TableHead>
+                  </table_1.TableRow>
+                </table_1.TableHeader>
+                <table_1.TableBody>
+                  {group.items.map((cost) => {
+                        var _a, _b, _c;
+                        const total = Number(cost.amount) * Number((_a = cost.quantity) !== null && _a !== void 0 ? _a : 1);
+                        return (<table_1.TableRow key={cost.id} className="cursor-pointer" onClick={() => openEditSheet(cost)}>
+                        <table_1.TableCell>
+                          <div>
+                            <span className="font-medium">
+                              {cost.description || ((_b = cost.cost_type) === null || _b === void 0 ? void 0 : _b.name) || '-'}
+                            </span>
+                            {cost.cost_date ? (<p className="mt-0.5 text-xs text-muted-foreground">
+                                {(0, format_1.formatDate)(cost.cost_date, getSettingValue, currentLocaleCode)}
+                              </p>) : null}
+                          </div>
+                        </table_1.TableCell>
+                        <table_1.TableCell className="hidden sm:table-cell">
+                          {cost.cost_type ? (<badge_1.Badge variant="outline" className="text-[10px]">
+                              {cost.cost_type.name}
+                            </badge_1.Badge>) : (<span className="text-muted-foreground">-</span>)}
+                        </table_1.TableCell>
+                        <table_1.TableCell className="hidden md:table-cell">
+                          <badge_1.Badge variant="secondary" className="text-[10px]">
+                            {calculationTypeLabel(cost.calculation_type)}
+                          </badge_1.Badge>
+                        </table_1.TableCell>
+                        <table_1.TableCell className="text-right tabular-nums">
+                          <span className="text-xs text-muted-foreground">
+                            {Number((_c = cost.quantity) !== null && _c !== void 0 ? _c : 1)} ×{' '}
+                            {(0, format_1.formatCurrency)(Number(cost.amount), getSettingValue, currentLocaleCode)}
+                          </span>
+                        </table_1.TableCell>
+                        <table_1.TableCell className="hidden text-right tabular-nums sm:table-cell">
+                          <span className="font-medium">
+                            {(0, format_1.formatCurrency)(total, getSettingValue, currentLocaleCode)}
+                          </span>
+                        </table_1.TableCell>
+                        <table_1.TableCell>
+                          <badge_1.Badge variant="secondary" className={statusBadgeClass(cost.status)}>
+                            {statusLabel(cost.status)}
+                          </badge_1.Badge>
+                        </table_1.TableCell>
+                        <table_1.TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
+                          <div className="flex justify-end gap-1">
+                            <button_1.Button variant="ghost" size="icon" className="size-7" onClick={() => openEditSheet(cost)}>
+                              <lucide_react_1.Pencil className="size-3"/>
+                            </button_1.Button>
+                            <button_1.Button variant="ghost" size="icon" className="size-7 text-destructive hover:text-destructive" onClick={() => setDeleteTarget(cost)}>
+                              <lucide_react_1.Trash2 className="size-3"/>
+                            </button_1.Button>
+                          </div>
+                        </table_1.TableCell>
+                      </table_1.TableRow>);
+                    })}
+                </table_1.TableBody>
+              </table_1.Table>
+            </div>);
+            })}
+        </div>)}
+
+      {/* Create / Edit Sheet */}
+      <sheet_1.Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+        <sheet_1.SheetContent className="flex w-full flex-col overflow-hidden sm:max-w-lg">
+          <sheet_1.SheetHeader>
+            <sheet_1.SheetTitle>
+              {editingCost ? t('sheet.editTitle') : t('sheet.createTitle')}
+            </sheet_1.SheetTitle>
+            <sheet_1.SheetDescription>{t('sheet.description')}</sheet_1.SheetDescription>
+          </sheet_1.SheetHeader>
+
+          <div className="flex-1 space-y-4 overflow-y-auto px-4 py-4">
+            {/* Cost type */}
+            <div className="space-y-1.5">
+              <label_1.Label htmlFor="pc-type">{t('fields.costType')}</label_1.Label>
+              <select_1.Select value={form.cost_type_id} onValueChange={handleCostTypeChange}>
+                <select_1.SelectTrigger id="pc-type" className="w-full">
+                  <select_1.SelectValue placeholder={t('fields.costTypePlaceholder')}/>
+                </select_1.SelectTrigger>
+                <select_1.SelectContent>
+                  <select_1.SelectItem value="none">
+                    {t('fields.costTypeNone')}
+                  </select_1.SelectItem>
+                  {costTypesByCategory.map((group, gIndex) => {
+            var _a, _b;
+            return (<select_1.SelectGroup key={(_b = (_a = group.category) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : `g-${gIndex}`}>
+                      {group.category ? (<select_1.SelectLabel>{group.category.name}</select_1.SelectLabel>) : null}
+                      {group.types.map((ct) => (<select_1.SelectItem key={ct.id} value={String(ct.id)}>
+                          {ct.name}
+                        </select_1.SelectItem>))}
+                    </select_1.SelectGroup>);
+        })}
+                </select_1.SelectContent>
+              </select_1.Select>
+            </div>
+
+            {/* Category (auto-filled from type, or manual) */}
+            <div className="space-y-1.5">
+              <label_1.Label htmlFor="pc-category">
+                {(_c = t('fields.category')) !== null && _c !== void 0 ? _c : 'Categoria'}
+              </label_1.Label>
+              <select_1.Select value={form.category_id} onValueChange={(v) => updateForm('category_id', v)}>
+                <select_1.SelectTrigger id="pc-category" className="w-full">
+                  <select_1.SelectValue placeholder={(_d = t('fields.categoryPlaceholder')) !== null && _d !== void 0 ? _d : 'Selecione uma categoria (opcional)'}/>
+                </select_1.SelectTrigger>
+                <select_1.SelectContent>
+                  <select_1.SelectItem value="none">
+                    {t('fields.costTypeNone')}
+                  </select_1.SelectItem>
+                  {costTypesByCategory
+            .filter((g) => g.category !== null)
+            .map((g) => (<select_1.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>
+                      </select_1.SelectItem>))}
+                </select_1.SelectContent>
+              </select_1.Select>
+              {form.cost_type_id !== 'none' && form.category_id !== 'none' && (<p className="text-xs text-muted-foreground">
+                  {(_e = t('fields.categoryAutoFilled')) !== null && _e !== void 0 ? _e : 'Preenchido automaticamente pelo tipo selecionado'}
+                </p>)}
+            </div>
+
+            {/* Description */}
+            <div className="space-y-1.5">
+              <label_1.Label htmlFor="pc-description">{t('fields.description')}</label_1.Label>
+              <input_1.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_1.Label htmlFor="pc-calc-type-top">
+                {t('fields.calculationType')}
+              </label_1.Label>
+              <select_1.Select value={form.calculation_type} onValueChange={(v) => updateForm('calculation_type', v)}>
+                <select_1.SelectTrigger id="pc-calc-type-top" className="w-full">
+                  <select_1.SelectValue />
+                </select_1.SelectTrigger>
+                <select_1.SelectContent>
+                  {CALCULATION_TYPE_OPTIONS.map((ct) => (<select_1.SelectItem key={ct} value={ct}>
+                      {calculationTypeLabel(ct)}
+                    </select_1.SelectItem>))}
+                </select_1.SelectContent>
+              </select_1.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_1.Label htmlFor="pc-quantity">{t('fields.quantity')}</label_1.Label>
+                  <input_1.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_1.Label htmlFor="pc-unit-amount">
+                    {t('fields.unitAmount')}
+                  </label_1.Label>
+                  <input_1.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_1.Label htmlFor="pc-amount">
+                  {t('fields.amount')}{' '}
+                  <span className="text-destructive">*</span>
+                </label_1.Label>
+                <input_1.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">
+                    {(_f = t('fields.amountCalculated')) !== null && _f !== void 0 ? _f : 'Calculado automaticamente: quantidade × valor unitário'}
+                  </p>)}
+              </div>
+              <div className="space-y-1.5">
+                <label_1.Label htmlFor="pc-currency">{t('fields.currency')}</label_1.Label>
+                <input_1.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_1.Label htmlFor="pc-recurrence-type">
+                {t('fields.recurrenceType')}
+              </label_1.Label>
+              <select_1.Select value={form.recurrence_type} onValueChange={(v) => updateForm('recurrence_type', v)}>
+                <select_1.SelectTrigger id="pc-recurrence-type" className="w-full">
+                  <select_1.SelectValue />
+                </select_1.SelectTrigger>
+                <select_1.SelectContent>
+                  {RECURRENCE_TYPE_OPTIONS.map((r) => (<select_1.SelectItem key={r} value={r}>
+                      {recurrenceTypeLabel(r)}
+                    </select_1.SelectItem>))}
+                </select_1.SelectContent>
+              </select_1.Select>
+            </div>
+
+            {/* Status */}
+            <div className="space-y-1.5">
+              <label_1.Label htmlFor="pc-status">{t('fields.status')}</label_1.Label>
+              <select_1.Select value={form.status} onValueChange={(v) => updateForm('status', v)}>
+                <select_1.SelectTrigger id="pc-status" className="w-full">
+                  <select_1.SelectValue />
+                </select_1.SelectTrigger>
+                <select_1.SelectContent>
+                  {STATUS_OPTIONS.map((s) => (<select_1.SelectItem key={s} value={s}>
+                      {statusLabel(s)}
+                    </select_1.SelectItem>))}
+                </select_1.SelectContent>
+              </select_1.Select>
+            </div>
+
+            {/* Dates */}
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <label_1.Label htmlFor="pc-cost-date">{t('fields.costDate')}</label_1.Label>
+                <input_1.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_1.Label htmlFor="pc-period-start">
+                  {t('fields.periodStart')}
+                </label_1.Label>
+                <input_1.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_1.Label htmlFor="pc-period-end">{t('fields.periodEnd')}</label_1.Label>
+                <input_1.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_1.Label htmlFor="pc-is-billable">{t('fields.isBillable')}</label_1.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_1.Label htmlFor="pc-is-reimbursable">
+                  {t('fields.isReimbursable')}
+                </label_1.Label>
+              </div>
+            </div>
+
+            {/* Notes */}
+            <div className="space-y-1.5">
+              <label_1.Label htmlFor="pc-notes">{t('fields.notes')}</label_1.Label>
+              <textarea_1.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_1.Button variant="outline" onClick={() => setIsSheetOpen(false)} disabled={isSaving}>
+              {commonT('actions.cancel')}
+            </button_1.Button>
+            <button_1.Button onClick={saveCost} disabled={isSaving}>
+              {isSaving ? t('messages.saving') : commonT('actions.save')}
+            </button_1.Button>
+          </div>
+        </sheet_1.SheetContent>
+      </sheet_1.Sheet>
+
+      {/* Delete Confirmation */}
+      <alert_dialog_1.AlertDialog open={deleteTarget !== null} onOpenChange={(open) => {
+            if (!open)
+                setDeleteTarget(null);
+        }}>
+        <alert_dialog_1.AlertDialogContent>
+          <alert_dialog_1.AlertDialogHeader>
+            <alert_dialog_1.AlertDialogTitle>{t('deleteDialog.title')}</alert_dialog_1.AlertDialogTitle>
+            <alert_dialog_1.AlertDialogDescription>
+              {t('deleteDialog.description')}
+            </alert_dialog_1.AlertDialogDescription>
+          </alert_dialog_1.AlertDialogHeader>
+          <alert_dialog_1.AlertDialogFooter>
+            <alert_dialog_1.AlertDialogCancel disabled={isDeleting}>
+              {commonT('actions.cancel')}
+            </alert_dialog_1.AlertDialogCancel>
+            <alert_dialog_1.AlertDialogAction onClick={confirmDelete} disabled={isDeleting} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+              {isDeleting ? t('messages.deleting') : commonT('actions.delete')}
+            </alert_dialog_1.AlertDialogAction>
+          </alert_dialog_1.AlertDialogFooter>
+        </alert_dialog_1.AlertDialogContent>
+      </alert_dialog_1.AlertDialog>
+    </div>);
+}
+//# sourceMappingURL=project-costs-section.js.map