@hed-hog/operations 0.0.332 → 0.0.338

package/hedhog/frontend/app/_components/collaborator-invoices-tab.tsx.ejs

@@ -1,443 +0,0 @@
-'use client';
-
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Textarea } from '@/components/ui/textarea';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { FileTextIcon, Pencil, Plus, Trash2, X } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-import {
-  type CollaboratorInvoice,
-  createCollaboratorInvoice,
-  deleteCollaboratorInvoice,
-  fetchCollaboratorInvoices,
-  updateCollaboratorInvoice,
-} from '../_lib/api';
-import { formatCurrency, formatDate } from '../_lib/utils/format';
-
-const INVOICE_STATUSES = ['pending', 'paid', 'cancelled', 'overdue'] as const;
-type InvoiceStatus = (typeof INVOICE_STATUSES)[number];
-
-const STATUS_VARIANT: Record<
-  InvoiceStatus,
-  'default' | 'secondary' | 'destructive' | 'outline'
-> = {
-  pending: 'secondary',
-  paid: 'default',
-  cancelled: 'outline',
-  overdue: 'destructive',
-};
-
-type FormState = {
-  invoiceNumber: string;
-  amount: string;
-  issueDate: string;
-  dueDate: string;
-  status: InvoiceStatus;
-  description: string;
-};
-
-function emptyForm(): FormState {
-  return {
-    invoiceNumber: '',
-    amount: '',
-    issueDate: '',
-    dueDate: '',
-    status: 'pending',
-    description: '',
-  };
-}
-
-function invoiceToForm(inv: CollaboratorInvoice): FormState {
-  return {
-    invoiceNumber: inv.invoiceNumber ?? '',
-    amount: inv.amount ? Number(inv.amount).toFixed(2).replace('.', ',') : '',
-    issueDate: inv.issueDate ? inv.issueDate.slice(0, 10) : '',
-    dueDate: inv.dueDate ? inv.dueDate.slice(0, 10) : '',
-    status: (inv.status as InvoiceStatus) ?? 'pending',
-    description: inv.description ?? '',
-  };
-}
-
-type Props = {
-  collaboratorId: number;
-  disabled?: boolean;
-};
-
-export function CollaboratorInvoicesTab({
-  collaboratorId,
-  disabled = false,
-}: Props) {
-  const t = useTranslations('operations.CollaboratorFormPage');
-  const commonT = useTranslations('operations.Common');
-  const { request, showToastHandler, getSettingValue, currentLocaleCode } =
-    useApp();
-
-  const [isAdding, setIsAdding] = useState(false);
-  const [editingId, setEditingId] = useState<number | null>(null);
-  const [confirmDeleteId, setConfirmDeleteId] = useState<number | null>(null);
-  const [form, setForm] = useState<FormState>(emptyForm());
-  const [saving, setSaving] = useState(false);
-
-  const {
-    data: invoices = [],
-    isLoading,
-    refetch,
-  } = useQuery<CollaboratorInvoice[]>({
-    queryKey: [
-      'operations-collaborator-invoices',
-      currentLocaleCode,
-      collaboratorId,
-    ],
-    staleTime: 0,
-    refetchOnMount: 'always',
-    queryFn: () => fetchCollaboratorInvoices(request, collaboratorId),
-  });
-
-  function openAdd() {
-    setEditingId(null);
-    setForm(emptyForm());
-    setIsAdding(true);
-  }
-
-  function openEdit(inv: CollaboratorInvoice) {
-    setIsAdding(false);
-    setForm(invoiceToForm(inv));
-    setEditingId(inv.id);
-  }
-
-  function cancelForm() {
-    setIsAdding(false);
-    setEditingId(null);
-    setForm(emptyForm());
-  }
-
-  async function handleSave() {
-    const amount = parseFloat(form.amount.replace(',', '.'));
-    if (!form.issueDate || isNaN(amount) || amount <= 0) return;
-
-    setSaving(true);
-    try {
-      const data = {
-        invoiceNumber: form.invoiceNumber || null,
-        amount,
-        issueDate: form.issueDate,
-        dueDate: form.dueDate || null,
-        status: form.status,
-        description: form.description || null,
-      };
-
-      if (editingId !== null) {
-        await updateCollaboratorInvoice(
-          request,
-          collaboratorId,
-          editingId,
-          data
-        );
-      } else {
-        await createCollaboratorInvoice(request, collaboratorId, data);
-      }
-
-      showToastHandler?.('success', t('messages.saveSuccess'));
-      cancelForm();
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.saveError'));
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  async function handleDelete(invoiceId: number) {
-    setSaving(true);
-    try {
-      await deleteCollaboratorInvoice(request, collaboratorId, invoiceId);
-      showToastHandler?.('success', t('messages.deleteSuccess'));
-      setConfirmDeleteId(null);
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.deleteError'));
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  const statusLabel = (s: string) => {
-    const key =
-      `invoices.status${s.charAt(0).toUpperCase() + s.slice(1)}` as Parameters<
-        typeof t
-      >[0];
-    try {
-      return t(key);
-    } catch {
-      return s;
-    }
-  };
-
-  const showForm = isAdding || editingId !== null;
-
-  return (
-    <div className="space-y-4">
-      {!disabled && (
-        <div className="flex justify-end">
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={openAdd}
-            disabled={showForm}
-          >
-            <Plus className="mr-1 size-4" />
-            {t('invoices.add')}
-          </Button>
-        </div>
-      )}
-
-      {showForm && (
-        <div className="rounded-md border bg-muted/30 p-4">
-          <p className="mb-3 text-sm font-medium">
-            {editingId !== null ? t('invoices.editTitle') : t('invoices.add')}
-          </p>
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-            <div className="space-y-1">
-              <Label className="text-xs">{t('invoices.invoiceNumber')}</Label>
-              <Input
-                value={form.invoiceNumber}
-                onChange={(e) =>
-                  setForm((f) => ({ ...f, invoiceNumber: e.target.value }))
-                }
-              />
-            </div>
-            <div className="space-y-1">
-              <Label className="text-xs">{t('invoices.amount')} *</Label>
-              <Input
-                type="text"
-                inputMode="numeric"
-                placeholder="0,00"
-                value={form.amount}
-                onChange={(e) => {
-                  const digits = e.target.value.replace(/\D/g, '');
-                  if (!digits) {
-                    setForm((f) => ({ ...f, amount: '' }));
-                    return;
-                  }
-                  const cents = parseInt(digits, 10);
-                  const formatted = (cents / 100).toFixed(2).replace('.', ',');
-                  setForm((f) => ({ ...f, amount: formatted }));
-                }}
-              />
-            </div>
-            <div className="space-y-1">
-              <Label className="text-xs">{t('invoices.issueDate')} *</Label>
-              <Input
-                type="date"
-                value={form.issueDate}
-                onChange={(e) =>
-                  setForm((f) => ({ ...f, issueDate: e.target.value }))
-                }
-              />
-            </div>
-            <div className="space-y-1">
-              <Label className="text-xs">{t('invoices.dueDate')}</Label>
-              <Input
-                type="date"
-                value={form.dueDate}
-                onChange={(e) =>
-                  setForm((f) => ({ ...f, dueDate: e.target.value }))
-                }
-              />
-            </div>
-            <div className="space-y-1 col-span-2">
-              <Label className="text-xs">{t('invoices.status')}</Label>
-              <Select
-                value={form.status}
-                onValueChange={(v) =>
-                  setForm((f) => ({ ...f, status: v as InvoiceStatus }))
-                }
-              >
-                <SelectTrigger className="w-full cursor-pointer">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {INVOICE_STATUSES.map((s) => (
-                    <SelectItem key={s} value={s} className="cursor-pointer">
-                      {statusLabel(s)}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-1 sm:col-span-2">
-              <Label className="text-xs">{t('invoices.description')}</Label>
-              <Textarea
-                rows={2}
-                value={form.description}
-                onChange={(e) =>
-                  setForm((f) => ({ ...f, description: e.target.value }))
-                }
-              />
-            </div>
-          </div>
-          <div className="mt-3 flex justify-end gap-2">
-            <Button
-              size="sm"
-              variant="ghost"
-              onClick={cancelForm}
-              disabled={saving}
-            >
-              <X className="mr-1 size-4" />
-              {commonT('actions.cancel')}
-            </Button>
-            <Button size="sm" onClick={handleSave} disabled={saving}>
-              {commonT('actions.save')}
-            </Button>
-          </div>
-        </div>
-      )}
-
-      {isLoading ? (
-        <p className="text-sm text-muted-foreground">{t('loading')}</p>
-      ) : invoices.length === 0 && !showForm ? (
-        <div className="flex flex-col items-center gap-3 py-10 text-center">
-          <FileTextIcon className="size-10 text-muted-foreground/40" />
-          <p className="text-sm text-muted-foreground">
-            {t('tabs.invoicesEmpty')}
-          </p>
-        </div>
-      ) : invoices.length > 0 ? (
-        <div className="overflow-x-auto rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{t('invoices.invoiceNumber')}</TableHead>
-                <TableHead>{t('invoices.amount')}</TableHead>
-                <TableHead>{t('invoices.issueDate')}</TableHead>
-                <TableHead>{t('invoices.dueDate')}</TableHead>
-                <TableHead>{t('invoices.status')}</TableHead>
-                <TableHead>{t('invoices.description')}</TableHead>
-                {!disabled && (
-                  <TableHead className="w-20 text-right"></TableHead>
-                )}
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {invoices.map((invoice) => (
-                <TableRow key={invoice.id}>
-                  <TableCell className="font-medium">
-                    {invoice.invoiceNumber ?? '—'}
-                  </TableCell>
-                  <TableCell>
-                    {formatCurrency(
-                      Number(invoice.amount),
-                      getSettingValue,
-                      currentLocaleCode
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    {invoice.issueDate
-                      ? formatDate(
-                          invoice.issueDate,
-                          getSettingValue,
-                          currentLocaleCode
-                        )
-                      : '—'}
-                  </TableCell>
-                  <TableCell>
-                    {invoice.dueDate
-                      ? formatDate(
-                          invoice.dueDate,
-                          getSettingValue,
-                          currentLocaleCode
-                        )
-                      : '—'}
-                  </TableCell>
-                  <TableCell>
-                    {invoice.status ? (
-                      <Badge
-                        variant={
-                          STATUS_VARIANT[invoice.status as InvoiceStatus] ??
-                          'secondary'
-                        }
-                      >
-                        {statusLabel(invoice.status)}
-                      </Badge>
-                    ) : (
-                      '—'
-                    )}
-                  </TableCell>
-                  <TableCell className="text-muted-foreground">
-                    {invoice.description ?? '—'}
-                  </TableCell>
-                  {!disabled && (
-                    <TableCell className="text-right">
-                      {confirmDeleteId === invoice.id ? (
-                        <div className="flex items-center justify-end gap-1">
-                          <span className="text-xs text-muted-foreground">
-                            {t('invoices.deleteConfirm')}
-                          </span>
-                          <Button
-                            size="sm"
-                            variant="destructive"
-                            className="h-7 px-2 text-xs cursor-pointer"
-                            disabled={saving}
-                            onClick={() => handleDelete(invoice.id)}
-                          >
-                            {commonT('actions.delete')}
-                          </Button>
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            className="h-7 px-2 text-xs cursor-pointer"
-                            onClick={() => setConfirmDeleteId(null)}
-                          >
-                            <X className="size-3" />
-                          </Button>
-                        </div>
-                      ) : (
-                        <div className="flex items-center justify-end gap-1">
-                          <Button
-                            size="icon"
-                            variant="ghost"
-                            className="size-7 cursor-pointer"
-                            onClick={() => openEdit(invoice)}
-                          >
-                            <Pencil className="size-3.5" />
-                          </Button>
-                          <Button
-                            size="icon"
-                            variant="ghost"
-                            className="size-7 cursor-pointer text-destructive hover:text-destructive"
-                            onClick={() => setConfirmDeleteId(invoice.id)}
-                          >
-                            <Trash2 className="size-3.5" />
-                          </Button>
-                        </div>
-                      )}
-                    </TableCell>
-                  )}
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      ) : null}
-    </div>
-  );
-}