@hed-hog/operations 0.0.331 → 0.0.332

package/hedhog/data/menu.yaml

@@ -134,6 +134,25 @@
       - where:
           slug: admin-operations-director
 
+- menu_id:
+    where:
+      slug: /operations
+  icon: calendar-range
+  url: /operations/tasks-gantt
+  name:
+    en: Tasks Gantt
+    pt: Gantt de Tarefas
+  slug: /operations/tasks-gantt
+  order: 118
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-operations-supervisor
+      - where:
+          slug: admin-operations-director
+
 - menu_id:
     where:
       slug: /operations
@@ -143,7 +162,7 @@
     en: Approvals
     pt: Aprovações
   slug: /operations/approvals
-  order: 118
+  order: 119
   relations:
     role:
       - where:
@@ -162,7 +181,7 @@
     en: Time Off
     pt: Folgas
   slug: /operations/time-off
-  order: 119
+  order: 120
   relations:
     role:
       - where:
@@ -183,7 +202,7 @@
     en: Schedule Adjustments
     pt: Ajustes de Jornada
   slug: /operations/schedule-adjustments
-  order: 120
+  order: 121
   relations:
     role:
       - where:
@@ -204,7 +223,7 @@
     en: Departments
     pt: Departamentos
   slug: /operations/departments
-  order: 121
+  order: 122
   relations:
     role:
       - where:
@@ -221,7 +240,7 @@
     en: Collaborator Types
     pt: Tipos de Vinculo
   slug: /operations/collaborator-types
-  order: 122
+  order: 123
   relations:
     role:
       - where:
@@ -237,7 +256,7 @@
     en: Reports
     pt: Relatórios
   slug: /operations/reports
-  order: 123
+  order: 124
   relations:
     role:
       - where:
@@ -256,7 +275,7 @@
     en: Projects
     pt: Projetos
   slug: /operations/reports/projects
-  order: 124
+  order: 125
   relations:
     role:
       - where:
@@ -275,7 +294,7 @@
     en: Collaborators
     pt: Colaboradores
   slug: /operations/reports/collaborators
-  order: 125
+  order: 126
   relations:
     role:
       - where:

package/hedhog/data/route.yaml

@@ -101,6 +101,78 @@
       - where:
           slug: admin-operations-director
 
+- url: /operations/collaborators/:id/payment-history
+  method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-operations-director
+
+- url: /operations/collaborators/:id/payment-history
+  method: POST
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-operations-director
+
+- url: /operations/collaborators/:id/payment-history/:paymentId
+  method: PATCH
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-operations-director
+
+- url: /operations/collaborators/:id/payment-history/:paymentId
+  method: DELETE
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-operations-director
+
+- url: /operations/collaborators/:id/invoices
+  method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-operations-director
+
+- url: /operations/collaborators/:id/invoices
+  method: POST
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-operations-director
+
+- url: /operations/collaborators/:id/invoices/:invoiceId
+  method: PATCH
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-operations-director
+
+- url: /operations/collaborators/:id/invoices/:invoiceId
+  method: DELETE
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-operations-director
+
 - url: /operations/collaborators/:id
   method: GET
   relations:

package/hedhog/frontend/app/_components/collaborator-form-screen.tsx.ejs

@@ -111,6 +111,8 @@ import {
   trimToNull,
 } from '../_lib/utils/forms';
 import { CollaboratorCostsSection } from './collaborator-costs-section';
+import { CollaboratorInvoicesTab } from './collaborator-invoices-tab';
+import { CollaboratorPaymentHistoryTab } from './collaborator-payment-history-tab';
 import { CollaboratorTasksTab } from './collaborator-tasks-tab';
 import { CollaboratorTimesheetsTab } from './collaborator-timesheets-tab';
 import { DepartmentPicker } from './department-picker';
@@ -2143,9 +2145,7 @@ export function CollaboratorFormScreen({
 
   const formContent = isSheetMode ? (
     <Tabs defaultValue="details" className="w-full">
-      <TabsList
-        className={`mx-4 mb-2 grid w-[calc(100%-2rem)] ${!isCreateMode && !isHourlyType ? 'grid-cols-7' : isCreateMode && isHourlyType ? 'grid-cols-5' : 'grid-cols-6'}`}
-      >
+      <TabsList className="mx-4 mb-2 flex w-[calc(100%-2rem)] flex-wrap gap-0.5 h-auto">
         <TabsTrigger value="details">{t('tabs.details')}</TabsTrigger>
         <TabsTrigger value="costs">{t('tabs.costs')}</TabsTrigger>
         {!isHourlyType ? (
@@ -2159,6 +2159,14 @@ export function CollaboratorFormScreen({
         {!isCreateMode ? (
           <TabsTrigger value="salary">{t('tabs.salary')}</TabsTrigger>
         ) : null}
+        {!isCreateMode ? (
+          <TabsTrigger value="paymentHistory">
+            {t('tabs.paymentHistory')}
+          </TabsTrigger>
+        ) : null}
+        {!isCreateMode ? (
+          <TabsTrigger value="invoices">{t('tabs.invoices')}</TabsTrigger>
+        ) : null}
       </TabsList>
       <TabsContent value="details" className="mt-0 space-y-4 px-4 pt-2">
         {profileContent}
@@ -2376,6 +2384,34 @@ export function CollaboratorFormScreen({
           )}
         </TabsContent>
       ) : null}
+      {!isCreateMode ? (
+        <TabsContent value="paymentHistory" className="mt-0 px-4 pt-2">
+          {collaborator ? (
+            <CollaboratorPaymentHistoryTab
+              collaboratorId={collaborator.id}
+              disabled={!access.isDirector}
+            />
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              {t('sections.costsSaveBefore')}
+            </p>
+          )}
+        </TabsContent>
+      ) : null}
+      {!isCreateMode ? (
+        <TabsContent value="invoices" className="mt-0 px-4 pt-2">
+          {collaborator ? (
+            <CollaboratorInvoicesTab
+              collaboratorId={collaborator.id}
+              disabled={!access.isDirector}
+            />
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              {t('sections.costsSaveBefore')}
+            </p>
+          )}
+        </TabsContent>
+      ) : null}
     </Tabs>
   ) : (
     <div className="space-y-4 px-4">

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

@@ -0,0 +1,443 @@
+'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>
+  );
+}