@hed-hog/operations 0.0.331 → 0.0.332

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

@@ -0,0 +1,429 @@
+'use client';
+
+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 { BanknoteIcon, Pencil, Plus, Trash2, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import {
+  type CollaboratorPayment,
+  createCollaboratorPayment,
+  deleteCollaboratorPayment,
+  fetchCollaboratorPayments,
+  updateCollaboratorPayment,
+} from '../_lib/api';
+import { formatCurrency, formatDate } from '../_lib/utils/format';
+
+const PAYMENT_METHODS = ['bank_transfer', 'pix', 'check', 'other'] as const;
+type PaymentMethod = (typeof PAYMENT_METHODS)[number];
+
+type FormState = {
+  amount: string;
+  paymentDate: string;
+  referenceMonth: string;
+  paymentMethod: PaymentMethod;
+  notes: string;
+};
+
+function emptyForm(): FormState {
+  return {
+    amount: '',
+    paymentDate: '',
+    referenceMonth: '',
+    paymentMethod: 'pix',
+    notes: '',
+  };
+}
+
+function paymentToForm(p: CollaboratorPayment): FormState {
+  return {
+    amount: p.amount ? Number(p.amount).toFixed(2).replace('.', ',') : '',
+    paymentDate: p.paymentDate ? p.paymentDate.slice(0, 10) : '',
+    referenceMonth: p.referenceMonth
+      ? p.referenceMonth.split('-').reverse().join('/')
+      : '',
+    paymentMethod: (p.paymentMethod as PaymentMethod) ?? 'pix',
+    notes: p.notes ?? '',
+  };
+}
+
+type Props = {
+  collaboratorId: number;
+  disabled?: boolean;
+};
+
+export function CollaboratorPaymentHistoryTab({
+  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: payments = [],
+    isLoading,
+    refetch,
+  } = useQuery<CollaboratorPayment[]>({
+    queryKey: [
+      'operations-collaborator-payment-history',
+      currentLocaleCode,
+      collaboratorId,
+    ],
+    staleTime: 0,
+    refetchOnMount: 'always',
+    queryFn: () => fetchCollaboratorPayments(request, collaboratorId),
+  });
+
+  function openAdd() {
+    setEditingId(null);
+    setForm(emptyForm());
+    setIsAdding(true);
+  }
+
+  function openEdit(p: CollaboratorPayment) {
+    setIsAdding(false);
+    setForm(paymentToForm(p));
+    setEditingId(p.id);
+  }
+
+  function cancelForm() {
+    setIsAdding(false);
+    setEditingId(null);
+    setForm(emptyForm());
+  }
+
+  async function handleSave() {
+    const amount = parseFloat(form.amount.replace(',', '.'));
+    if (!form.paymentDate || isNaN(amount) || amount <= 0) return;
+
+    setSaving(true);
+    try {
+      const rawMonth = form.referenceMonth;
+      const referenceMonth =
+        rawMonth && rawMonth.length === 7
+          ? rawMonth.split('/').reverse().join('-')
+          : rawMonth || null;
+
+      const data = {
+        amount,
+        paymentDate: form.paymentDate,
+        referenceMonth,
+        paymentMethod: form.paymentMethod,
+        notes: form.notes || null,
+      };
+
+      if (editingId !== null) {
+        await updateCollaboratorPayment(
+          request,
+          collaboratorId,
+          editingId,
+          data
+        );
+      } else {
+        await createCollaboratorPayment(request, collaboratorId, data);
+      }
+
+      showToastHandler?.('success', t('messages.saveSuccess'));
+      cancelForm();
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.saveError'));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDelete(paymentId: number) {
+    setSaving(true);
+    try {
+      await deleteCollaboratorPayment(request, collaboratorId, paymentId);
+      showToastHandler?.('success', t('messages.deleteSuccess'));
+      setConfirmDeleteId(null);
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.deleteError'));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const methodLabel = (m: string) => {
+    const key =
+      `paymentHistory.method${m.charAt(0).toUpperCase() + m.slice(1).replace(/_([a-z])/g, (_, c: string) => c.toUpperCase())}` as Parameters<
+        typeof t
+      >[0];
+    try {
+      return t(key);
+    } catch {
+      return m;
+    }
+  };
+
+  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('paymentHistory.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('paymentHistory.editTitle')
+              : t('paymentHistory.add')}
+          </p>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div className="space-y-1">
+              <Label className="text-xs">{t('paymentHistory.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('paymentHistory.paymentDate')} *
+              </Label>
+              <Input
+                type="date"
+                value={form.paymentDate}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, paymentDate: e.target.value }))
+                }
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">
+                {t('paymentHistory.referenceMonth')}
+              </Label>
+              <Input
+                type="text"
+                inputMode="numeric"
+                placeholder="MM/AAAA"
+                maxLength={7}
+                value={form.referenceMonth}
+                onChange={(e) => {
+                  const digits = e.target.value.replace(/\D/g, '');
+                  const masked =
+                    digits.length > 2
+                      ? digits.slice(0, 2) + '/' + digits.slice(2, 6)
+                      : digits;
+                  setForm((f) => ({ ...f, referenceMonth: masked }));
+                }}
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">
+                {t('paymentHistory.paymentMethod')}
+              </Label>
+              <Select
+                value={form.paymentMethod}
+                onValueChange={(v) =>
+                  setForm((f) => ({
+                    ...f,
+                    paymentMethod: v as PaymentMethod,
+                  }))
+                }
+              >
+                <SelectTrigger className="w-full cursor-pointer">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {PAYMENT_METHODS.map((m) => (
+                    <SelectItem key={m} value={m} className="cursor-pointer">
+                      {methodLabel(m)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1 sm:col-span-2">
+              <Label className="text-xs">{t('paymentHistory.notes')}</Label>
+              <Textarea
+                rows={2}
+                value={form.notes}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, notes: 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>
+      ) : payments.length === 0 && !showForm ? (
+        <div className="flex flex-col items-center gap-3 py-10 text-center">
+          <BanknoteIcon className="size-10 text-muted-foreground/40" />
+          <p className="text-sm text-muted-foreground">
+            {t('tabs.paymentHistoryEmpty')}
+          </p>
+        </div>
+      ) : payments.length > 0 ? (
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('paymentHistory.amount')}</TableHead>
+                <TableHead>{t('paymentHistory.paymentDate')}</TableHead>
+                <TableHead>{t('paymentHistory.referenceMonth')}</TableHead>
+                <TableHead>{t('paymentHistory.paymentMethod')}</TableHead>
+                <TableHead>{t('paymentHistory.notes')}</TableHead>
+                {!disabled && (
+                  <TableHead className="w-20 text-right"></TableHead>
+                )}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {payments.map((entry) => (
+                <TableRow key={entry.id}>
+                  <TableCell className="font-medium">
+                    {formatCurrency(
+                      Number(entry.amount),
+                      getSettingValue,
+                      currentLocaleCode
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {entry.paymentDate
+                      ? formatDate(
+                          entry.paymentDate,
+                          getSettingValue,
+                          currentLocaleCode
+                        )
+                      : '—'}
+                  </TableCell>
+                  <TableCell>
+                    {entry.referenceMonth
+                      ? entry.referenceMonth.split('-').reverse().join('/')
+                      : '—'}
+                  </TableCell>
+                  <TableCell>
+                    {entry.paymentMethod
+                      ? methodLabel(entry.paymentMethod)
+                      : '—'}
+                  </TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {entry.notes ?? '—'}
+                  </TableCell>
+                  {!disabled && (
+                    <TableCell className="text-right">
+                      {confirmDeleteId === entry.id ? (
+                        <div className="flex items-center justify-end gap-1">
+                          <span className="text-xs text-muted-foreground">
+                            {t('paymentHistory.deleteConfirm')}
+                          </span>
+                          <Button
+                            size="sm"
+                            variant="destructive"
+                            className="h-7 px-2 text-xs cursor-pointer"
+                            disabled={saving}
+                            onClick={() => handleDelete(entry.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(entry)}
+                          >
+                            <Pencil className="size-3.5" />
+                          </Button>
+                          <Button
+                            size="icon"
+                            variant="ghost"
+                            className="size-7 cursor-pointer text-destructive hover:text-destructive"
+                            onClick={() => setConfirmDeleteId(entry.id)}
+                          >
+                            <Trash2 className="size-3.5" />
+                          </Button>
+                        </div>
+                      )}
+                    </TableCell>
+                  )}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/hedhog/frontend/app/_components/my-project-summary-screen.tsx.ejs

@@ -1,42 +1,42 @@
 'use client';
 
 import { EmptyState, Page } from '@/components/entity-list';
+import { RichTextEditor } from '@/components/rich-text-editor';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Progress } from '@/components/ui/progress';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import {
-  Table,
-  TableBody,
-  TableCell,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Progress } from '@/components/ui/progress';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
   TableHead,
   TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { RichTextEditor } from '@/components/rich-text-editor';
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import {
   closestCenter,
   DndContext,
@@ -67,13 +67,13 @@ import {
   Timer,
   Trash2,
 } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useCallback, useMemo, useState } from 'react';
-import { fetchOperations, mutateOperations } from '../_lib/api';
-import { useMentionItems } from '../_lib/hooks/use-mention-items';
-import type {
-  OperationsMyProjectSummary,
-  OperationsTaskOption,
+import { useTranslations } from 'next-intl';
+import { useCallback, useMemo, useState } from 'react';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useMentionItems } from '../_lib/hooks/use-mention-items';
+import type {
+  OperationsMyProjectSummary,
+  OperationsTaskOption,
   PaginatedResponse,
 } from '../_lib/types';
 import {
@@ -84,13 +84,13 @@ import {
 import { OperationsHeader } from './operations-header';
 import { SectionCard } from './section-card';
 import { StatusBadge } from './status-badge';
-import {
-  TaskDetailSheet,
-  TaskCommentsSection,
-  type TaskDetailSheetData,
-} from './task-detail-sheet';
-import { TaskFileAttachments } from './task-file-attachments';
-import { TimesheetEntryCreateSheet } from './timesheet-entry-create-sheet';
+import {
+  TaskCommentsSection,
+  TaskDetailSheet,
+  type TaskDetailSheetData,
+} from './task-detail-sheet';
+import { TaskFileAttachments } from './task-file-attachments';
+import { TimesheetEntryCreateSheet } from './timesheet-entry-create-sheet';
 
 type BoardColumnId = 'todo' | 'doing' | 'review' | 'done';
 
@@ -106,12 +106,12 @@ type BoardTask = {
   assigneeCollaboratorId: number | null;
   assigneeName: string | null;
   assigneeUserPhotoId: number | null;
-  assigneePersonAvatarId: number | null;
-  commentCount: number;
-  fileCount: number;
-  doingStartedAt: string | null;
-  totalDoingMinutes: number;
-};
+  assigneePersonAvatarId: number | null;
+  commentCount: number;
+  fileCount: number;
+  doingStartedAt: string | null;
+  totalDoingMinutes: number;
+};
 
 type TaskFormState = {
   name: string;
@@ -171,26 +171,26 @@ function parseTaskId(value: UniqueIdentifier | null | undefined) {
   return match ? Number(match[1]) : null;
 }
 
-function parseColumnId(
-  value: UniqueIdentifier | null | undefined
-): BoardColumnId | null {
-  if (!value) return null;
-  const match = String(value).match(/^col-(.+)$/);
-  const id = match?.[1];
-  return KANBAN_COLUMNS.some((c) => c.id === id) ? (id as BoardColumnId) : null;
-}
-
-function normalizeDateInputValue(value?: string | null) {
-  if (!value) return '';
-  const match = String(value)
-    .trim()
-    .match(/^\d{4}-\d{2}-\d{2}/);
-  return match?.[0] ?? '';
-}
-
-function apiTaskToBoardTask(
-  row: OperationsMyProjectSummary['tasks'][number] | OperationsTaskOption
-): BoardTask {
+function parseColumnId(
+  value: UniqueIdentifier | null | undefined
+): BoardColumnId | null {
+  if (!value) return null;
+  const match = String(value).match(/^col-(.+)$/);
+  const id = match?.[1];
+  return KANBAN_COLUMNS.some((c) => c.id === id) ? (id as BoardColumnId) : null;
+}
+
+function normalizeDateInputValue(value?: string | null) {
+  if (!value) return '';
+  const match = String(value)
+    .trim()
+    .match(/^\d{4}-\d{2}-\d{2}/);
+  return match?.[0] ?? '';
+}
+
+function apiTaskToBoardTask(
+  row: OperationsMyProjectSummary['tasks'][number] | OperationsTaskOption
+): BoardTask {
   const status = KANBAN_COLUMNS.some((c) => c.id === row.status)
     ? (row.status as BoardColumnId)
     : 'todo';
@@ -377,12 +377,12 @@ function DroppableColumn({
 
 export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
   const t = useTranslations('operations.ProjectDetailsPage');
-  const commonT = useTranslations('operations.Common');
-  const formT = useTranslations('operations.ProjectFormPage');
-  const { request, currentLocaleCode, getSettingValue } = useApp();
-  const mentionItems = useMentionItems(request);
-
-  const getProjectStatusLabel = (value?: string | null) => {
+  const commonT = useTranslations('operations.Common');
+  const formT = useTranslations('operations.ProjectFormPage');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const mentionItems = useMentionItems(request);
+
+  const getProjectStatusLabel = (value?: string | null) => {
     if (!value) return commonT('labels.notAvailable');
     try {
       return formT(`options.statuses.${value}`);
@@ -569,10 +569,10 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
     setActiveDragTask(task ?? null);
   };
 
-  const openCreateTaskForm = useCallback(
-    (defaultStatus: BoardColumnId = 'todo') => {
-      setEditingTaskId(null);
-      setTaskFormData({
+  const openCreateTaskForm = useCallback(
+    (defaultStatus: BoardColumnId = 'todo') => {
+      setEditingTaskId(null);
+      setTaskFormData({
         ...EMPTY_TASK_FORM,
         status: defaultStatus,
         assigneeCollaboratorId:
@@ -834,7 +834,7 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
                 {(isOver) => (
                   <div
                     className={[
-                      'flex min-h-128 flex-col overflow-hidden rounded-3xl border bg-linear-to-b p-3 transition-all',
+                      'flex min-h-48 max-h-160 flex-col rounded-3xl border bg-linear-to-b p-3 transition-all',
                       getColumnClassName(column.id),
                       isOver
                         ? 'border-primary shadow-lg ring-2 ring-primary/15'
@@ -870,7 +870,7 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
                       </div>
                     </div>
 
-                    <div className="flex flex-1 flex-col gap-2">
+                    <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto pb-1 pr-0.5">
                       <AnimatePresence initial={false}>
                         {taskColumns[column.id].map((task) => {
                           const tags = getTaskTags(task);
@@ -1309,11 +1309,10 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
         }}
       />
 
-
-      <Sheet
-        open={taskFormOpen}
-        onOpenChange={(open) => {
-          if (!open) {
+      <Sheet
+        open={taskFormOpen}
+        onOpenChange={(open) => {
+          if (!open) {
             setTaskFormOpen(false);
             setEditingTaskId(null);
           }