@hed-hog/operations 0.0.328 → 0.0.329

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

@@ -1,868 +0,0 @@
-'use client';
-
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { EntityPicker } from '@/components/ui/entity-picker';
-import { Input } from '@/components/ui/input';
-import { InputMoney } from '@/components/ui/input-money';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Textarea } from '@/components/ui/textarea';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  AlertCircle,
-  Check,
-  DollarSign,
-  Pencil,
-  Plus,
-  Trash2,
-  X,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useCallback, useMemo, useState } from 'react';
-import {
-  type CollaboratorCost,
-  type CostType,
-  createCollaboratorCost,
-  createCostType,
-  deleteCollaboratorCost,
-  fetchCollaboratorCosts,
-  fetchCostTypes,
-  getOperationsErrorMessage,
-  updateCollaboratorCost,
-} from '../_lib/api';
-import { formatCurrency, formatDate } from '../_lib/utils/format';
-
-const RECURRENCE_VALUES = ['monthly', 'one_time', 'yearly'] as const;
-type Recurrence = (typeof RECURRENCE_VALUES)[number];
-
-/** Normalize to monthly equivalent for KPI computation. */
-function toMonthly(
-  amount: number,
-  recurrence: string,
-  depreciationMonths?: number | null
-): number {
-  switch (recurrence) {
-    case 'one_time':
-      return depreciationMonths && depreciationMonths > 0
-        ? amount / depreciationMonths
-        : 0;
-    case 'monthly':
-      return amount;
-    case 'yearly':
-      return amount / 12;
-    default:
-      return amount;
-  }
-}
-
-type CostFormState = {
-  costTypeId: number | null;
-  description: string;
-  amount: string | number;
-  recurrence: Recurrence;
-  startDate: string;
-  endDate: string;
-  allocatable: boolean;
-  depreciationMonths: string;
-  notes: string;
-};
-
-type FormErrors = Partial<
-  Record<keyof CostFormState, string> & { submit: string }
->;
-
-function emptyCostForm(): CostFormState {
-  return {
-    costTypeId: null,
-    description: '',
-    amount: '',
-    recurrence: 'monthly',
-    startDate: '',
-    endDate: '',
-    allocatable: true,
-    depreciationMonths: '',
-    notes: '',
-  };
-}
-
-function costToForm(cost: CollaboratorCost): CostFormState {
-  return {
-    costTypeId: cost.costTypeId,
-    description: cost.description ?? '',
-    amount: Number(cost.amount),
-    recurrence: cost.recurrence as Recurrence,
-    startDate: cost.startDate ?? cost.referenceDate ?? '',
-    endDate: cost.endDate ?? '',
-    allocatable: cost.allocatable ?? true,
-    depreciationMonths:
-      cost.depreciationMonths != null ? String(cost.depreciationMonths) : '',
-    notes: cost.notes ?? '',
-  };
-}
-
-function validateForm(
-  form: CostFormState,
-  t: (k: string) => string
-): FormErrors {
-  const errors: FormErrors = {};
-
-  if (!form.costTypeId) {
-    errors.costTypeId = t('validation.required');
-  }
-
-  const amt = parseFloat(
-    String(form.amount).replace(/\./g, '').replace(',', '.')
-  );
-  if (!form.amount || isNaN(amt) || amt <= 0) {
-    errors.amount = t('validation.greaterThanZero');
-  }
-
-  if (form.startDate && form.endDate && form.endDate <= form.startDate) {
-    errors.endDate = t('validation.endDateAfterStart');
-  }
-
-  if (form.recurrence === 'one_time' && form.depreciationMonths) {
-    const months = parseInt(form.depreciationMonths, 10);
-    if (isNaN(months) || months < 1) {
-      errors.depreciationMonths = t('validation.positiveInteger');
-    }
-  }
-
-  return errors;
-}
-
-type Props = {
-  collaboratorId: number;
-  disabled?: boolean;
-  remunerationValue?: number;
-  weeklyCapacity?: number;
-  onCostsChanged?: () => void;
-};
-
-export function CollaboratorCostsSection({
-  collaboratorId,
-  disabled = false,
-  weeklyCapacity,
-  onCostsChanged,
-}: Props) {
-  const t = useTranslations('operations.CollaboratorCostsSection');
-  const commonT = useTranslations('operations.Common');
-  const { request, showToastHandler, getSettingValue, currentLocaleCode } =
-    useApp();
-
-  const [isAdding, setIsAdding] = useState(false);
-  const [editingCostId, setEditingCostId] = useState<number | null>(null);
-  const [confirmDeleteId, setConfirmDeleteId] = useState<number | null>(null);
-  const [form, setForm] = useState<CostFormState>(emptyCostForm());
-  const [formErrors, setFormErrors] = useState<FormErrors>({});
-  const [saving, setSaving] = useState(false);
-  const [selectedCostType, setSelectedCostType] = useState<CostType | null>(
-    null
-  );
-
-  const {
-    data: costs = [],
-    isLoading,
-    error,
-    refetch,
-  } = useQuery<CollaboratorCost[]>({
-    queryKey: ['operations-collaborator-costs', collaboratorId],
-    queryFn: () => fetchCollaboratorCosts(request, collaboratorId),
-  });
-
-  // ─── Computed KPIs ─────────────────────────────────────────────────────────
-  const kpi = useMemo(() => {
-    const monthlyTotal = costs.reduce(
-      (sum, c) =>
-        sum + toMonthly(Number(c.amount), c.recurrence, c.depreciationMonths),
-      0
-    );
-    const allocatableTotal = costs.reduce(
-      (sum, c) =>
-        (c.allocatable ?? true)
-          ? sum +
-            toMonthly(Number(c.amount), c.recurrence, c.depreciationMonths)
-          : sum,
-      0
-    );
-    const nonAllocatableTotal = monthlyTotal - allocatableTotal;
-    const costPerHour =
-      weeklyCapacity && weeklyCapacity > 0
-        ? monthlyTotal / (weeklyCapacity * 4.33)
-        : null;
-
-    return { monthlyTotal, allocatableTotal, nonAllocatableTotal, costPerHour };
-  }, [costs, weeklyCapacity]);
-
-  const fmt = useCallback(
-    (value: number) =>
-      formatCurrency(value, getSettingValue, currentLocaleCode),
-    [getSettingValue, currentLocaleCode]
-  );
-
-  // ─── Form helpers ──────────────────────────────────────────────────────────
-  const setField = useCallback(
-    <K extends keyof CostFormState>(key: K, value: CostFormState[K]) => {
-      setForm((prev) => ({ ...prev, [key]: value }));
-      setFormErrors((prev) => {
-        if (!prev[key]) return prev;
-        const next = { ...prev };
-        delete next[key];
-        return next;
-      });
-    },
-    []
-  );
-
-  const openAdd = () => {
-    setEditingCostId(null);
-    setForm(emptyCostForm());
-    setFormErrors({});
-    setSelectedCostType(null);
-    setIsAdding(true);
-    setConfirmDeleteId(null);
-  };
-
-  const openEdit = (cost: CollaboratorCost) => {
-    setIsAdding(false);
-    setConfirmDeleteId(null);
-    setEditingCostId(cost.id);
-    setForm(costToForm(cost));
-    setFormErrors({});
-    // Reconstruct a minimal CostType so isDepreciable/isAllocatable defaults to unknown (show fields)
-    setSelectedCostType({
-      id: cost.costTypeId,
-      slug: cost.costTypeSlug,
-      name: cost.costTypeName,
-      isActive: true,
-    });
-  };
-
-  const closeForm = () => {
-    setIsAdding(false);
-    setEditingCostId(null);
-    setForm(emptyCostForm());
-    setFormErrors({});
-    setSelectedCostType(null);
-  };
-
-  // ─── Save / delete ─────────────────────────────────────────────────────────
-  const handleSave = async () => {
-    const errors = validateForm(form, (k) => t(k as Parameters<typeof t>[0]));
-    if (Object.keys(errors).length > 0) {
-      setFormErrors(errors);
-      return;
-    }
-
-    const numericAmount = parseFloat(
-      String(form.amount).replace(/\./g, '').replace(',', '.')
-    );
-
-    setSaving(true);
-    try {
-      const depMonths =
-        form.recurrence === 'one_time' && form.depreciationMonths
-          ? parseInt(form.depreciationMonths, 10)
-          : null;
-
-      const payload = {
-        costTypeId: form.costTypeId!,
-        amount: numericAmount,
-        recurrence: form.recurrence,
-        allocatable: form.allocatable,
-        // map startDate → referenceDate for current backend compat
-        referenceDate: form.startDate || null,
-        startDate: form.startDate || null,
-        endDate: form.endDate || null,
-        depreciationMonths: depMonths,
-        description: form.description || null,
-        notes: form.notes || null,
-      };
-
-      if (editingCostId !== null) {
-        await updateCollaboratorCost(
-          request,
-          collaboratorId,
-          editingCostId,
-          payload
-        );
-        showToastHandler?.('success', t('messages.updateSuccess'));
-      } else {
-        await createCollaboratorCost(request, collaboratorId, payload);
-        showToastHandler?.('success', t('messages.createSuccess'));
-      }
-
-      closeForm();
-      await refetch();
-      onCostsChanged?.();
-    } catch (err) {
-      showToastHandler?.(
-        'error',
-        getOperationsErrorMessage(err, t('messages.saveError'))
-      );
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleDelete = async (costId: number) => {
-    try {
-      await deleteCollaboratorCost(request, collaboratorId, costId);
-      showToastHandler?.('success', t('messages.deleteSuccess'));
-      setConfirmDeleteId(null);
-      await refetch();
-      onCostsChanged?.();
-    } catch (err) {
-      showToastHandler?.(
-        'error',
-        getOperationsErrorMessage(err, t('messages.deleteError'))
-      );
-    }
-  };
-
-  const getRecurrenceLabel = (value: string) => {
-    switch (value) {
-      case 'one_time':
-        return t('recurrence.one_time');
-      case 'monthly':
-        return t('recurrence.monthly');
-      case 'yearly':
-        return t('recurrence.yearly');
-      default:
-        return value;
-    }
-  };
-
-  const formatValidityRange = (cost: CollaboratorCost) => {
-    const start = cost.startDate ?? cost.referenceDate;
-    const end = cost.endDate;
-    if (start && end) {
-      return `${formatDate(start, getSettingValue, currentLocaleCode)} – ${formatDate(end, getSettingValue, currentLocaleCode)}`;
-    }
-    if (start) {
-      return formatDate(start, getSettingValue, currentLocaleCode);
-    }
-    return '—';
-  };
-
-  const isFormOpen = isAdding || editingCostId !== null;
-  const readOnly = disabled;
-
-  // ─── Render ────────────────────────────────────────────────────────────────
-  return (
-    <div className="space-y-3">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="space-y-0.5">
-          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-            {t('title')}
-          </h3>
-          <p className="text-[11px] text-muted-foreground/80">
-            {t('description')}
-          </p>
-        </div>
-        {!readOnly && !isFormOpen && (
-          <Button
-            variant="ghost"
-            size="sm"
-            className="gap-1.5 text-muted-foreground hover:text-foreground"
-            onClick={openAdd}
-            disabled={isLoading}
-          >
-            <Plus className="size-3.5" />
-            {t('actions.add')}
-          </Button>
-        )}
-      </div>
-
-      {/* KPI summary cards */}
-      {isLoading ? (
-        <div className="grid grid-cols-2 gap-2">
-          {Array.from({ length: 4 }).map((_, i) => (
-            <Skeleton key={i} className="h-16 w-full rounded-lg" />
-          ))}
-        </div>
-      ) : (
-        <div className="grid grid-cols-2 gap-2">
-          <Card className="py-0">
-            <CardContent className="flex items-center gap-2 px-3 py-2.5">
-              <DollarSign className="size-4 shrink-0 text-muted-foreground" />
-              <div className="min-w-0">
-                <p className="truncate text-[10px] text-muted-foreground">
-                  {t('summary.monthlyEstimate')}
-                </p>
-                <p className="truncate text-sm font-semibold tabular-nums">
-                  {fmt(kpi.monthlyTotal)}
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-          <Card className="py-0">
-            <CardContent className="flex items-center gap-2 px-3 py-2.5">
-              <Check className="size-4 shrink-0 text-green-500" />
-              <div className="min-w-0">
-                <p className="truncate text-[10px] text-muted-foreground">
-                  {t('summary.allocatable')}
-                </p>
-                <p className="truncate text-sm font-semibold tabular-nums">
-                  {fmt(kpi.allocatableTotal)}
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-          <Card className="py-0">
-            <CardContent className="flex items-center gap-2 px-3 py-2.5">
-              <X className="size-4 shrink-0 text-muted-foreground" />
-              <div className="min-w-0">
-                <p className="truncate text-[10px] text-muted-foreground">
-                  {t('summary.nonAllocatable')}
-                </p>
-                <p className="truncate text-sm font-semibold tabular-nums">
-                  {fmt(kpi.nonAllocatableTotal)}
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-          <Card className="py-0">
-            <CardContent className="flex items-center gap-2 px-3 py-2.5">
-              <DollarSign className="size-4 shrink-0 text-muted-foreground" />
-              <div className="min-w-0">
-                <p className="truncate text-[10px] text-muted-foreground">
-                  {t('summary.costPerHour')}
-                </p>
-                <p className="truncate text-sm font-semibold tabular-nums">
-                  {kpi.costPerHour != null
-                    ? fmt(kpi.costPerHour)
-                    : commonT('labels.notAvailable')}
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      )}
-
-      {/* Error state */}
-      {!isLoading && error ? (
-        <div className="flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2.5 text-sm text-destructive">
-          <AlertCircle className="size-4 shrink-0" />
-          {t('messages.loadError')}
-        </div>
-      ) : null}
-
-      {/* ── Inline form ──────────────────────────────────────────────────── */}
-      {isFormOpen && (
-        <Card className="border-primary/20 bg-card shadow-sm">
-          <CardContent className="p-4">
-            {/* Form title + close */}
-            <div className="mb-4 flex items-center justify-between">
-              <p className="text-sm font-semibold">
-                {editingCostId !== null ? t('actions.edit') : t('actions.add')}
-              </p>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="size-7"
-                onClick={closeForm}
-                disabled={saving}
-              >
-                <X className="size-3.5" />
-              </Button>
-            </div>
-
-            <div className="grid gap-2 sm:grid-cols-2">
-              {/* Cost type — full width */}
-              <div className="sm:col-span-2">
-                <Label className="mb-1 block text-xs">
-                  {t('fields.costType')}
-                  <span className="ml-0.5 text-destructive">*</span>
-                </Label>
-                <EntityPicker<CostType>
-                  placeholder={t('placeholders.costType')}
-                  value={form.costTypeId}
-                  onChange={(value, option) => {
-                    const costType = option ?? null;
-                    setField('costTypeId', value as number | null);
-                    setSelectedCostType(costType);
-                    if (costType) {
-                      if (costType.defaultRecurrence) {
-                        setField(
-                          'recurrence',
-                          costType.defaultRecurrence as Recurrence
-                        );
-                      }
-                      if (costType.isAllocatable != null) {
-                        setField(
-                          'allocatable',
-                          Boolean(costType.isAllocatable)
-                        );
-                      }
-                    }
-                  }}
-                  valueType="number"
-                  loadOptions={async ({ search, page, pageSize }) => {
-                    const items = await fetchCostTypes(request, {
-                      search,
-                      active: true,
-                      page,
-                      pageSize,
-                    });
-                    return { items, hasMore: false };
-                  }}
-                  getOptionValue={(o) => o.id}
-                  getOptionLabel={(o) => o.name}
-                  getOptionDescription={(o) => {
-                    const parts = [o.code, o.category].filter(Boolean);
-                    return parts.length > 0 ? parts.join(' · ') : undefined;
-                  }}
-                  showCreateButton
-                  createFields={[
-                    {
-                      name: 'name',
-                      label: t('fields.costTypeName'),
-                      placeholder: t('placeholders.costTypeName'),
-                      required: true,
-                    },
-                    {
-                      name: 'code',
-                      label: t('fields.costTypeCode'),
-                      placeholder: t('placeholders.costTypeCode'),
-                    },
-                    {
-                      name: 'category',
-                      label: t('fields.category'),
-                      placeholder: t('placeholders.category'),
-                    },
-                    {
-                      name: 'description',
-                      label: t('fields.costTypeDescription'),
-                      placeholder: t('placeholders.costTypeDescription'),
-                    },
-                  ]}
-                  onCreate={async (values) => {
-                    const created = await createCostType(request, {
-                      name: values.name as string,
-                      code: (values.code as string) || null,
-                      category: (values.category as string) || null,
-                      description: (values.description as string) || null,
-                    });
-                    return created ?? null;
-                  }}
-                  mapSearchToCreateValues={(search) => ({ name: search })}
-                  createActionLabel={t('actions.createCostType')}
-                />
-                {selectedCostType?.category ? (
-                  <p className="mt-1 text-[11px] text-muted-foreground">
-                    {t('fields.category')}: {selectedCostType.category}
-                  </p>
-                ) : null}
-                {formErrors.costTypeId ? (
-                  <p className="mt-1 text-[11px] text-destructive">
-                    {formErrors.costTypeId}
-                  </p>
-                ) : null}
-              </div>
-
-              {/* Description — full width */}
-              <div className="sm:col-span-2">
-                <Label className="mb-1 block text-xs">
-                  {t('fields.description')}
-                </Label>
-                <Input
-                  value={form.description}
-                  onChange={(e) => setField('description', e.target.value)}
-                  placeholder={t('placeholders.description')}
-                />
-              </div>
-
-              {/* Amount */}
-              <div>
-                <Label className="mb-1 block text-xs">
-                  {t('fields.amount')}
-                  <span className="ml-0.5 text-destructive">*</span>
-                </Label>
-                <InputMoney
-                  value={form.amount}
-                  onChange={(e) => setField('amount', e.target.value)}
-                  placeholder="0,00"
-                />
-                {formErrors.amount ? (
-                  <p className="mt-1 text-[11px] text-destructive">
-                    {formErrors.amount}
-                  </p>
-                ) : null}
-              </div>
-
-              {/* Recurrence */}
-              <div>
-                <Label className="mb-1 block text-xs">
-                  {t('fields.recurrence')}
-                </Label>
-                <Select
-                  value={form.recurrence}
-                  onValueChange={(v) => {
-                    setField('recurrence', v as Recurrence);
-                    if (v !== 'one_time') {
-                      setField('depreciationMonths', '');
-                    }
-                  }}
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {RECURRENCE_VALUES.map((r) => (
-                      <SelectItem key={r} value={r}>
-                        {getRecurrenceLabel(r)}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-
-              {/* Start date */}
-              <div>
-                <Label className="mb-1 block text-xs">
-                  {t('fields.startDate')}
-                </Label>
-                <input
-                  type="date"
-                  className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                  value={form.startDate}
-                  onChange={(e) => setField('startDate', e.target.value)}
-                />
-              </div>
-
-              {/* End date */}
-              <div>
-                <Label className="mb-1 block text-xs">
-                  {t('fields.endDate')}
-                </Label>
-                <input
-                  type="date"
-                  className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                  value={form.endDate}
-                  min={form.startDate || undefined}
-                  onChange={(e) => setField('endDate', e.target.value)}
-                />
-                {formErrors.endDate ? (
-                  <p className="mt-1 text-[11px] text-destructive">
-                    {formErrors.endDate}
-                  </p>
-                ) : null}
-              </div>
-
-              {/* Depreciation months — only for one_time and when type is depreciable */}
-              {form.recurrence === 'one_time' &&
-                selectedCostType?.isDepreciable !== false && (
-                  <div className="sm:col-span-2">
-                    <Label className="mb-1 block text-xs">
-                      {t('fields.depreciationMonths')}
-                    </Label>
-                    <Input
-                      type="number"
-                      min={1}
-                      step={1}
-                      value={form.depreciationMonths}
-                      onChange={(e) =>
-                        setField('depreciationMonths', e.target.value)
-                      }
-                      placeholder={t('placeholders.depreciationMonths')}
-                    />
-                    {formErrors.depreciationMonths ? (
-                      <p className="mt-1 text-[11px] text-destructive">
-                        {formErrors.depreciationMonths}
-                      </p>
-                    ) : null}
-                    <p className="mt-1 text-[11px] text-muted-foreground">
-                      {t('hints.depreciationMonths')}
-                    </p>
-                  </div>
-                )}
-
-              {/* Notes — full width */}
-              <div className="sm:col-span-2">
-                <Label className="mb-1 block text-xs">
-                  {t('fields.notes')}
-                </Label>
-                <Textarea
-                  rows={2}
-                  className="resize-none"
-                  value={form.notes}
-                  onChange={(e) => setField('notes', e.target.value)}
-                  placeholder={t('placeholders.notes')}
-                />
-              </div>
-            </div>
-
-            {/* Actions */}
-            <div className="mt-4 flex justify-end gap-2 border-t pt-3">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={closeForm}
-                disabled={saving}
-              >
-                <X className="mr-1 size-3.5" />
-                {commonT('actions.cancel')}
-              </Button>
-              <Button
-                size="sm"
-                onClick={() => void handleSave()}
-                disabled={saving || !form.costTypeId || !form.amount}
-              >
-                <Check className="mr-1 size-3.5" />
-                {saving ? t('actions.saving') : commonT('actions.save')}
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* ── Cost list ─────────────────────────────────────────────────────── */}
-      {isLoading ? (
-        <div className="space-y-1.5">
-          {Array.from({ length: 3 }).map((_, i) => (
-            <Skeleton key={i} className="h-11 w-full rounded-lg" />
-          ))}
-        </div>
-      ) : costs.length > 0 ? (
-        <div className="overflow-hidden rounded-lg border">
-          {costs.map((cost, idx) => (
-            <div
-              key={cost.id}
-              className={
-                'group flex items-start gap-2 px-3 py-2.5 transition-colors hover:bg-muted/30' +
-                (idx > 0 ? ' border-t' : '') +
-                (editingCostId === cost.id ? ' bg-primary/5' : '')
-              }
-            >
-              {/* Info */}
-              <div className="min-w-0 flex-1">
-                <p className="truncate text-sm font-medium leading-tight">
-                  {cost.costTypeName}
-                </p>
-                {cost.description ? (
-                  <p className="mt-0.5 truncate text-[11px] text-muted-foreground">
-                    {cost.description}
-                  </p>
-                ) : null}
-                <div className="mt-1 flex flex-wrap items-center gap-1">
-                  <Badge
-                    variant="secondary"
-                    className="h-4.5 px-1.5 text-[10px] font-normal"
-                  >
-                    {getRecurrenceLabel(cost.recurrence)}
-                  </Badge>
-                  {(cost.allocatable ?? true) && (
-                    <Badge
-                      variant="outline"
-                      className="h-4.5 border-green-500/40 px-1.5 text-[10px] font-normal text-green-600 dark:border-green-500/30 dark:text-green-400"
-                    >
-                      {t('table.allocatable')}
-                    </Badge>
-                  )}
-                  {cost.startDate || cost.referenceDate ? (
-                    <span className="text-[10px] text-muted-foreground">
-                      {formatValidityRange(cost)}
-                    </span>
-                  ) : null}
-                </div>
-              </div>
-
-              {/* Amount + actions */}
-              <div className="flex shrink-0 items-start gap-1">
-                <div className="text-right">
-                  <p className="text-sm font-semibold tabular-nums">
-                    {fmt(Number(cost.amount))}
-                  </p>
-                  {cost.recurrence === 'one_time' && cost.depreciationMonths ? (
-                    <p className="text-[10px] text-muted-foreground">
-                      /{cost.depreciationMonths}m
-                    </p>
-                  ) : null}
-                </div>
-                {!readOnly &&
-                  (confirmDeleteId === cost.id ? (
-                    <div className="flex items-center gap-0.5 pt-0.5">
-                      <Button
-                        variant="destructive"
-                        size="sm"
-                        className="h-6 px-2 text-[10px]"
-                        onClick={() => void handleDelete(cost.id)}
-                      >
-                        {commonT('actions.delete')}
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 px-2 text-[10px]"
-                        onClick={() => setConfirmDeleteId(null)}
-                      >
-                        {commonT('actions.cancel')}
-                      </Button>
-                    </div>
-                  ) : (
-                    <div className="flex items-center gap-0.5 pt-0.5 opacity-0 transition-opacity group-hover:opacity-100">
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="size-6"
-                        onClick={() => openEdit(cost)}
-                        disabled={isFormOpen}
-                      >
-                        <Pencil className="size-3" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="size-6 text-destructive hover:text-destructive"
-                        onClick={() => setConfirmDeleteId(cost.id)}
-                        disabled={isFormOpen}
-                      >
-                        <Trash2 className="size-3" />
-                      </Button>
-                    </div>
-                  ))}
-              </div>
-            </div>
-          ))}
-          {!readOnly && !isFormOpen && (
-            <button
-              type="button"
-              onClick={openAdd}
-              className="flex w-full items-center gap-1.5 border-t px-3 py-2 text-[11px] text-muted-foreground transition-colors hover:bg-muted/30 hover:text-foreground"
-            >
-              <Plus className="size-3" />
-              {t('actions.add')}
-            </button>
-          )}
-        </div>
-      ) : !isFormOpen && !error ? (
-        <div className="flex flex-col items-center gap-2 rounded-lg border border-dashed py-6 text-center">
-          <DollarSign className="size-8 text-muted-foreground/40" />
-          <p className="text-sm text-muted-foreground">{t('empty')}</p>
-          {!readOnly && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="gap-1.5"
-              onClick={openAdd}
-            >
-              <Plus className="size-3.5" />
-              {t('actions.add')}
-            </Button>
-          )}
-        </div>
-      ) : null}
-    </div>
-  );
-}