@hed-hog/operations 0.0.327 → 0.0.329

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

@@ -1,876 +0,0 @@
-"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