@hed-hog/operations 0.0.325 → 0.0.326

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

@@ -41,6 +41,14 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 import {
@@ -62,6 +70,16 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip as RechartsTooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
 import { PersonPicker } from '../../contact/_components/person-picker';
 import {
   fetchOperations,
@@ -80,6 +98,7 @@ import type {
   PaginatedResponse,
 } from '../_lib/types';
 import {
+  formatCurrency,
   formatDate,
   formatEnumLabel,
   formatHours,
@@ -229,6 +248,8 @@ const EQUITY_ENABLED_TYPE_SLUGS = new Set([
   'parceiro',
 ]);
 
+const HOURLY_RATE_SLUGS = new Set(['pj', 'freelancer']);
+
 type CollaboratorFormState = {
   userId: string;
   personId: string;
@@ -244,6 +265,9 @@ type CollaboratorFormState = {
   leftAt: string;
   supervisorCollaboratorId: string;
   compensationAmount: string;
+  hourlyRate: string;
+  compensationEffectiveDate: string;
+  compensationNotes: string;
   contractId: string;
   notes: string;
   equityParticipation: {
@@ -289,6 +313,9 @@ function buildEmptyForm(): CollaboratorFormState {
     leftAt: '',
     supervisorCollaboratorId: 'none',
     compensationAmount: '',
+    hourlyRate: '',
+    compensationEffectiveDate: '',
+    compensationNotes: '',
     contractId: '',
     notes: '',
     equityParticipation: {
@@ -362,6 +389,12 @@ function toFormState(
             collaborator.relatedContracts?.[0]?.budgetAmount !== undefined
           ? String(collaborator.relatedContracts[0].budgetAmount)
           : '',
+    hourlyRate:
+      collaborator.hourlyRate !== null && collaborator.hourlyRate !== undefined
+        ? String(collaborator.hourlyRate)
+        : '',
+    compensationEffectiveDate: '',
+    compensationNotes: '',
     contractId: collaborator.relatedContracts?.[0]?.id
       ? String(collaborator.relatedContracts[0].id)
       : '',
@@ -561,7 +594,8 @@ export function CollaboratorFormScreen({
   const t = useTranslations('operations.CollaboratorFormPage');
   const commonT = useTranslations('operations.Common');
   const detailsT = useTranslations('operations.CollaboratorDetailsPage');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
   const access = useOperationsAccess();
   const router = useRouter();
   const [form, setForm] = useState<CollaboratorFormState>(buildEmptyForm());
@@ -706,6 +740,34 @@ export function CollaboratorFormScreen({
     placeholderData: (previous) => previous ?? [],
   });
 
+  type CompensationHistoryEntry = {
+    id: number;
+    collaboratorId: number;
+    amount: string;
+    effectiveDate: string | null;
+    actorUserId: number | null;
+    actorName: string | null;
+    notes: string | null;
+    createdAt: string;
+  };
+
+  const {
+    data: compensationHistory = [],
+    refetch: refetchCompensationHistory,
+  } = useQuery<CompensationHistoryEntry[]>({
+    queryKey: [
+      'operations-collaborator-compensation-history',
+      currentLocaleCode,
+      collaboratorId,
+    ],
+    enabled: !isCreateMode && access.isDirector,
+    queryFn: () =>
+      fetchOperations<CompensationHistoryEntry[]>(
+        request,
+        `/operations/collaborators/${collaboratorId}/compensation-history`
+      ),
+  });
+
   const { data: documentTypes = [] } = useQuery<DocumentTypeOption[]>({
     queryKey: ['contact-person-document-types', currentLocaleCode],
     enabled: personSheetOpen,
@@ -826,6 +888,10 @@ export function CollaboratorFormScreen({
       EQUITY_ENABLED_TYPE_SLUGS.has(selectedCollaboratorType.slug)
     );
 
+  const isHourlyType = HOURLY_RATE_SLUGS.has(
+    selectedCollaboratorType?.slug ?? ''
+  );
+
   const getCollaboratorTypeLabel = (
     value?: string | null,
     fallbackName?: string | null
@@ -1017,7 +1083,10 @@ export function CollaboratorFormScreen({
   const onSubmit = async () => {
     const userId = parseNumberInput(form.userId);
     const personId = parseNumberInput(form.personId);
-    const compensationAmount = parseNumberInput(form.compensationAmount);
+    const compensationAmount = isHourlyType
+      ? null
+      : parseNumberInput(form.compensationAmount);
+    const hourlyRate = isHourlyType ? parseNumberInput(form.hourlyRate) : null;
 
     if (!personId) {
       showToastHandler?.('error', t('messages.personRequired'));
@@ -1052,6 +1121,9 @@ export function CollaboratorFormScreen({
           : parseNumberInput(form.supervisorCollaboratorId),
       compensationAmount:
         compensationAmount !== null ? compensationAmount : null,
+      hourlyRate: hourlyRate !== null ? hourlyRate : null,
+      compensationEffectiveDate: trimToNull(form.compensationEffectiveDate),
+      compensationNotes: trimToNull(form.compensationNotes),
       contractId: parseNumberInput(form.contractId),
       notes: trimToNull(form.notes),
       equityParticipation: shouldShowEquitySection
@@ -1092,10 +1164,16 @@ export function CollaboratorFormScreen({
             payload
           );
 
-      setForm(toFormState(response));
+      setForm((prev) => ({
+        ...toFormState(response),
+        compensationEffectiveDate: '',
+        compensationNotes: '',
+        weeklySchedule: prev.weeklySchedule,
+      }));
 
       await Promise.all([
         collaboratorId ? refetchCollaborator() : Promise.resolve(),
+        collaboratorId ? refetchCompensationHistory() : Promise.resolve(),
         refetchCollaboratorTypes(),
         refetchDepartments(),
         refetchCollaborators(),
@@ -1590,21 +1668,70 @@ export function CollaboratorFormScreen({
                 }
               />
             </div>
+            {isHourlyType ? (
+              <div className="space-y-2">
+                <label className="text-sm font-medium">
+                  {t('fields.hourlyRate')}
+                </label>
+                <InputMoney
+                  step="0.01"
+                  value={form.hourlyRate === '' ? '' : Number(form.hourlyRate)}
+                  onValueChange={(value) =>
+                    setForm((current) => ({
+                      ...current,
+                      hourlyRate: value !== null ? String(value) : '',
+                    }))
+                  }
+                />
+              </div>
+            ) : (
+              <div className="space-y-2">
+                <label className="text-sm font-medium">
+                  {t('fields.compensationAmount')}
+                </label>
+                <InputMoney
+                  step="0.01"
+                  value={
+                    form.compensationAmount === ''
+                      ? ''
+                      : Number(form.compensationAmount)
+                  }
+                  onValueChange={(value) =>
+                    setForm((current) => ({
+                      ...current,
+                      compensationAmount: value !== null ? String(value) : '',
+                    }))
+                  }
+                />
+              </div>
+            )}
             <div className="space-y-2">
               <label className="text-sm font-medium">
-                {t('fields.compensationAmount')}
+                {t('fields.compensationEffectiveDate')}
               </label>
-              <InputMoney
-                step="0.01"
-                value={
-                  form.compensationAmount === ''
-                    ? ''
-                    : Number(form.compensationAmount)
+              <Input
+                type="date"
+                value={form.compensationEffectiveDate}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    compensationEffectiveDate: event.target.value,
+                  }))
                 }
-                onValueChange={(value) =>
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                {t('fields.compensationNotes')}
+              </label>
+              <Textarea
+                rows={2}
+                value={form.compensationNotes}
+                placeholder={t('placeholders.compensationNotes')}
+                onChange={(event) =>
                   setForm((current) => ({
                     ...current,
-                    compensationAmount: value !== null ? String(value) : '',
+                    compensationNotes: event.target.value,
                   }))
                 }
               />
@@ -1780,21 +1907,70 @@ export function CollaboratorFormScreen({
             }
           />
         </div>
+        {isHourlyType ? (
+          <div className="space-y-2">
+            <label className="text-sm font-medium">
+              {t('fields.hourlyRate')}
+            </label>
+            <InputMoney
+              step="0.01"
+              value={form.hourlyRate === '' ? '' : Number(form.hourlyRate)}
+              onValueChange={(value) =>
+                setForm((current) => ({
+                  ...current,
+                  hourlyRate: value !== null ? String(value) : '',
+                }))
+              }
+            />
+          </div>
+        ) : (
+          <div className="space-y-2">
+            <label className="text-sm font-medium">
+              {t('fields.compensationAmount')}
+            </label>
+            <InputMoney
+              step="0.01"
+              value={
+                form.compensationAmount === ''
+                  ? ''
+                  : Number(form.compensationAmount)
+              }
+              onValueChange={(value) =>
+                setForm((current) => ({
+                  ...current,
+                  compensationAmount: value !== null ? String(value) : '',
+                }))
+              }
+            />
+          </div>
+        )}
         <div className="space-y-2">
           <label className="text-sm font-medium">
-            {t('fields.compensationAmount')}
+            {t('fields.compensationEffectiveDate')}
           </label>
-          <InputMoney
-            step="0.01"
-            value={
-              form.compensationAmount === ''
-                ? ''
-                : Number(form.compensationAmount)
+          <Input
+            type="date"
+            value={form.compensationEffectiveDate}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                compensationEffectiveDate: event.target.value,
+              }))
             }
-            onValueChange={(value) =>
+          />
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-medium">
+            {t('fields.compensationNotes')}
+          </label>
+          <Textarea
+            rows={2}
+            value={form.compensationNotes}
+            placeholder={t('placeholders.compensationNotes')}
+            onChange={(event) =>
               setForm((current) => ({
                 ...current,
-                compensationAmount: value !== null ? String(value) : '',
+                compensationNotes: event.target.value,
               }))
             }
           />
@@ -1952,6 +2128,58 @@ export function CollaboratorFormScreen({
     </div>
   );
 
+  const salaryChartData = useMemo(() => {
+    if (!compensationHistory.length) return [];
+
+    const sorted = [...compensationHistory].sort(
+      (a, b) =>
+        new Date(a.effectiveDate ?? a.createdAt).getTime() -
+        new Date(b.effectiveDate ?? b.createdAt).getTime()
+    );
+
+    const historicalPoints = sorted.map((entry) => ({
+      date: (entry.effectiveDate ?? entry.createdAt).slice(0, 10),
+      valor: Number(entry.amount),
+      projecao: null as number | null,
+    }));
+
+    const lastEntry = sorted[sorted.length - 1];
+    if (!lastEntry) return [];
+    const lastAmount = Number(lastEntry.amount);
+    const prevEntry = sorted.length > 1 ? sorted[sorted.length - 2] : null;
+    const growthRate =
+      prevEntry && Number(prevEntry.amount) > 0
+        ? (lastAmount - Number(prevEntry.amount)) / Number(prevEntry.amount)
+        : 0;
+
+    const projectionPoints: { date: string; valor: null; projecao: number }[] =
+      [];
+    const baseDate = new Date(
+      (lastEntry.effectiveDate ?? lastEntry.createdAt).slice(0, 10) +
+        'T00:00:00'
+    );
+
+    for (let i = 1; i <= 12; i++) {
+      const d = new Date(baseDate);
+      d.setMonth(d.getMonth() + i);
+      projectionPoints.push({
+        date: d.toISOString().slice(0, 10),
+        valor: null,
+        projecao:
+          Math.round(lastAmount * Math.pow(1 + growthRate, i / 12) * 100) / 100,
+      });
+    }
+
+    return [
+      ...historicalPoints,
+      {
+        ...historicalPoints[historicalPoints.length - 1],
+        projecao: lastAmount,
+      },
+      ...projectionPoints,
+    ];
+  }, [compensationHistory]);
+
   const costsSection = (
     <Accordion
       type="single"
@@ -1986,13 +2214,22 @@ export function CollaboratorFormScreen({
 
   const formContent = isSheetMode ? (
     <Tabs defaultValue="details" className="w-full">
-      <TabsList className="mx-4 mb-2 grid w-[calc(100%-2rem)] grid-cols-6">
+      <TabsList
+        className={`mx-4 mb-2 grid w-[calc(100%-2rem)] ${!isCreateMode && !isHourlyType ? 'grid-cols-7' : isCreateMode && isHourlyType ? 'grid-cols-5' : 'grid-cols-6'}`}
+      >
         <TabsTrigger value="details">{t('tabs.details')}</TabsTrigger>
         <TabsTrigger value="costs">{t('tabs.costs')}</TabsTrigger>
-        <TabsTrigger value="schedule">{t('tabs.defaultSchedule')}</TabsTrigger>
+        {!isHourlyType ? (
+          <TabsTrigger value="schedule">
+            {t('tabs.defaultSchedule')}
+          </TabsTrigger>
+        ) : null}
         <TabsTrigger value="projects">{t('tabs.projects')}</TabsTrigger>
         <TabsTrigger value="tasks">{t('tabs.tasks')}</TabsTrigger>
         <TabsTrigger value="timesheets">{t('tabs.timesheets')}</TabsTrigger>
+        {!isCreateMode ? (
+          <TabsTrigger value="salary">{t('tabs.salary')}</TabsTrigger>
+        ) : null}
       </TabsList>
       <TabsContent value="details" className="mt-0 space-y-4 px-4 pt-2">
         {profileContent}
@@ -2060,6 +2297,156 @@ export function CollaboratorFormScreen({
           />
         )}
       </TabsContent>
+      {!isCreateMode ? (
+        <TabsContent value="salary" className="mt-0 px-4 pt-2 space-y-6">
+          {access.isDirector ? (
+            <>
+              <div>
+                <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-3">
+                  {isHourlyType
+                    ? t('chart.hourlyHistory')
+                    : t('chart.salaryHistory')}
+                </h3>
+                {salaryChartData.length > 0 ? (
+                  <ResponsiveContainer width="100%" height={260}>
+                    <LineChart
+                      data={salaryChartData}
+                      margin={{ top: 8, right: 16, left: 8, bottom: 8 }}
+                    >
+                      <CartesianGrid
+                        strokeDasharray="3 3"
+                        className="stroke-muted"
+                      />
+                      <XAxis
+                        dataKey="date"
+                        tick={{ fontSize: 11 }}
+                        tickFormatter={(v: string) => {
+                          const [year, month] = v.split('-');
+                          return `${month}/${year?.slice(2)}`;
+                        }}
+                      />
+                      <YAxis
+                        tick={{ fontSize: 11 }}
+                        tickFormatter={(v: number) =>
+                          formatCurrency(v, getSettingValue, currentLocaleCode)
+                        }
+                        width={90}
+                      />
+                      <RechartsTooltip
+                        formatter={(value: number) => [
+                          formatCurrency(
+                            value,
+                            getSettingValue,
+                            currentLocaleCode
+                          ),
+                        ]}
+                        labelFormatter={(label: string) => label}
+                      />
+                      <Legend />
+                      <Line
+                        type="monotone"
+                        dataKey="valor"
+                        name={t('chart.actual')}
+                        stroke="hsl(var(--primary))"
+                        strokeWidth={2}
+                        dot={{ r: 4 }}
+                        activeDot={{ r: 6 }}
+                        isAnimationActive
+                        animationDuration={800}
+                        connectNulls={false}
+                      />
+                      <Line
+                        type="monotone"
+                        dataKey="projecao"
+                        name={t('chart.projection')}
+                        stroke="hsl(var(--muted-foreground))"
+                        strokeWidth={2}
+                        strokeDasharray="5 5"
+                        dot={false}
+                        isAnimationActive
+                        animationDuration={800}
+                        connectNulls={false}
+                      />
+                    </LineChart>
+                  </ResponsiveContainer>
+                ) : (
+                  <p className="text-sm text-muted-foreground">
+                    {detailsT('noCompensationHistory')}
+                  </p>
+                )}
+              </div>
+              <div>
+                {compensationHistory.length > 0 ? (
+                  <div className="overflow-x-auto rounded-md border">
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>
+                            {detailsT('compensationHistory.amount')}
+                          </TableHead>
+                          <TableHead>
+                            {detailsT('compensationHistory.effectiveDate')}
+                          </TableHead>
+                          <TableHead>
+                            {detailsT('compensationHistory.recordedAt')}
+                          </TableHead>
+                          <TableHead>
+                            {detailsT('compensationHistory.changedBy')}
+                          </TableHead>
+                          <TableHead>
+                            {detailsT('compensationHistory.notes')}
+                          </TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {compensationHistory.map((entry) => (
+                          <TableRow key={entry.id}>
+                            <TableCell className="font-medium">
+                              {formatCurrency(
+                                Number(entry.amount),
+                                getSettingValue,
+                                currentLocaleCode
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              {entry.effectiveDate
+                                ? formatDate(
+                                    entry.effectiveDate,
+                                    getSettingValue,
+                                    currentLocaleCode
+                                  )
+                                : '—'}
+                            </TableCell>
+                            <TableCell>
+                              {formatDate(
+                                entry.createdAt,
+                                getSettingValue,
+                                currentLocaleCode
+                              )}
+                            </TableCell>
+                            <TableCell>{entry.actorName ?? '—'}</TableCell>
+                            <TableCell className="text-muted-foreground">
+                              {entry.notes ?? '—'}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                ) : (
+                  <p className="text-sm text-muted-foreground">
+                    {detailsT('noCompensationHistory')}
+                  </p>
+                )}
+              </div>
+            </>
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              {t('noDirectorAccess')}
+            </p>
+          )}
+        </TabsContent>
+      ) : null}
     </Tabs>
   ) : (
     <div className="space-y-4 px-4">