@hed-hog/operations 0.0.318 → 0.0.319

package/hedhog/frontend/app/_components/collaborator-costs-section.tsx.ejs

@@ -0,0 +1,884 @@
+'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 { Switch } from '@/components/ui/switch';
+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;
+  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: 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>
+                )}
+
+              {/* Allocatable toggle — full width */}
+              <div className="flex items-center gap-3 sm:col-span-2">
+                <Switch
+                  id="cost-allocatable"
+                  checked={form.allocatable}
+                  onCheckedChange={(v) => setField('allocatable', v)}
+                />
+                <Label
+                  htmlFor="cost-allocatable"
+                  className="cursor-pointer text-xs"
+                >
+                  {t('fields.allocatable')}
+                </Label>
+              </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>
+  );
+}