@hed-hog/operations 0.0.332 → 0.0.338

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

@@ -0,0 +1,476 @@
+'use client';
+
+import { EmptyState, Page } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Pencil, UserRound } from 'lucide-react';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import { OperationsHeader } from './operations-header';
+import { SectionCard } from './section-card';
+import { StatusBadge } from './status-badge';
+import { fetchOperations } from '../_lib/api';
+import type { OperationsCollaboratorDetails } from '../_lib/types';
+import {
+  formatCurrency,
+  formatDate,
+  formatDateRange,
+  formatEnumLabel,
+  formatHours,
+  getStatusBadgeClass,
+  summarizeScheduleDays,
+} from '../_lib/utils/format';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+
+export function CollaboratorDetailsScreen({
+  collaboratorId,
+}: {
+  collaboratorId: number;
+}) {
+  const t = useTranslations('operations.CollaboratorDetailsPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const access = useOperationsAccess();
+
+  const { data: collaborator, refetch } =
+    useQuery<OperationsCollaboratorDetails>({
+      queryKey: [
+        'operations-collaborator-details',
+        currentLocaleCode,
+        collaboratorId,
+      ],
+      queryFn: () =>
+        fetchOperations<OperationsCollaboratorDetails>(
+          request,
+          `/operations/collaborators/${collaboratorId}`
+        ),
+    });
+
+  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 = [] } =
+    useQuery<CompensationHistoryEntry[]>({
+      queryKey: [
+        'operations-collaborator-compensation-history',
+        currentLocaleCode,
+        collaboratorId,
+      ],
+      enabled: access.isDirector,
+      queryFn: () =>
+        fetchOperations<CompensationHistoryEntry[]>(
+          request,
+          `/operations/collaborators/${collaboratorId}/compensation-history`
+        ),
+    });
+
+  if (!collaborator) {
+    return (
+      <Page>
+        <OperationsHeader
+          title={t('title')}
+          description={t('description')}
+          current={t('breadcrumb')}
+        />
+        <EmptyState
+          icon={<UserRound className="size-12" />}
+          title={commonT('states.emptyTitle')}
+          description={t('notFound')}
+          actionLabel={commonT('actions.refresh')}
+          onAction={() => void refetch()}
+        />
+      </Page>
+    );
+  }
+
+  const summaryCards = [
+    {
+      key: 'timesheets',
+      title: t('cards.timesheets'),
+      value: collaborator.timesheetSummary.totalTimesheets,
+      description: t('cards.timesheetsDescription', {
+        pending: collaborator.timesheetSummary.pendingTimesheets,
+      }),
+    },
+    {
+      key: 'hours',
+      title: t('cards.loggedHours'),
+      value: formatHours(collaborator.timesheetSummary.totalHours),
+      description: t('cards.loggedHoursDescription'),
+    },
+    {
+      key: 'timeOff',
+      title: t('cards.timeOff'),
+      value: collaborator.timeOffSummary.totalRequests,
+      description: t('cards.timeOffDescription', {
+        pending: collaborator.timeOffSummary.pendingRequests,
+      }),
+    },
+    {
+      key: 'assignments',
+      title: t('cards.assignments'),
+      value: collaborator.assignedProjects.length,
+      description: t('cards.assignmentsDescription'),
+    },
+  ];
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={collaborator.displayName}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          access.isDirector ? (
+            <Button size="sm" asChild>
+              <Link href={`/operations/collaborators/${collaborator.id}/edit`}>
+                <Pencil className="size-4" />
+                {commonT('actions.edit')}
+              </Link>
+            </Button>
+          ) : undefined
+        }
+      />
+
+      <div className="grid gap-4 xl:grid-cols-4">
+        <SectionCard title={t('sections.profile')} className="xl:col-span-2">
+          <dl className="grid gap-3 md:grid-cols-2 text-sm">
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.collaborator')}
+              </dt>
+              <dd className="font-medium">{collaborator.displayName}</dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.collaboratorType')}
+              </dt>
+              <dd className="font-medium">
+                {collaborator.collaboratorTypeName ||
+                  formatEnumLabel(
+                    collaborator.collaboratorTypeSlug ??
+                      collaborator.collaboratorType
+                  )}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.department')}
+              </dt>
+              <dd className="font-medium">
+                {collaborator.department || commonT('labels.notAvailable')}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.title')}
+              </dt>
+              <dd className="font-medium">
+                {collaborator.title || commonT('labels.notAvailable')}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.supervisor')}
+              </dt>
+              <dd className="font-medium">
+                {collaborator.supervisorName || commonT('labels.notAssigned')}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.weeklyCapacity')}
+              </dt>
+              <dd className="font-medium">
+                {formatHours(collaborator.weeklyCapacityHours)}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.startDate')}
+              </dt>
+              <dd className="font-medium">
+                {formatDate(collaborator.joinedAt)}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.status')}
+              </dt>
+              <dd className="font-medium">
+                <StatusBadge
+                  label={formatEnumLabel(collaborator.status)}
+                  className={getStatusBadgeClass(collaborator.status)}
+                />
+              </dd>
+            </div>
+            {collaborator.equityParticipation ? (
+              <>
+                <div>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.equityParticipation')}
+                  </dt>
+                  <dd className="font-medium">
+                    {formatEnumLabel(
+                      collaborator.equityParticipation.participationType
+                    )}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.votingPower')}
+                  </dt>
+                  <dd className="font-medium">
+                    {collaborator.equityParticipation.votingPower != null
+                      ? `${collaborator.equityParticipation.votingPower}%`
+                      : commonT('labels.notAvailable')}
+                  </dd>
+                </div>
+              </>
+            ) : null}
+          </dl>
+        </SectionCard>
+
+        <SectionCard
+          title={t('sections.primaryContract')}
+          className="xl:col-span-2"
+        >
+          {collaborator.relatedContracts.length > 0 ? (
+            <div className="space-y-3">
+              {collaborator.relatedContracts.slice(0, 2).map((contract) => (
+                <div
+                  key={contract.id}
+                  className="flex items-center justify-between rounded-lg border px-4 py-3"
+                >
+                  <div>
+                    <div className="font-medium">
+                      {contract.name || contract.code}
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                      {contract.code} •{' '}
+                      {formatEnumLabel(contract.contractCategory)}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <StatusBadge
+                      label={formatEnumLabel(contract.status)}
+                      className={getStatusBadgeClass(contract.status)}
+                    />
+                    <Button variant="outline" size="sm" asChild>
+                      <Link href={`/operations/contracts?edit=${contract.id}`}>
+                        {commonT('actions.openContract')}
+                      </Link>
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">{t('noContracts')}</p>
+          )}
+        </SectionCard>
+      </div>
+
+      <KpiCardsGrid items={summaryCards} />
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <SectionCard
+          title={t('sections.projects')}
+          description={t('sections.projectsDescription')}
+        >
+          {collaborator.assignedProjects.length > 0 ? (
+            <div className="overflow-x-auto rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{commonT('labels.project')}</TableHead>
+                    <TableHead>{commonT('labels.role')}</TableHead>
+                    <TableHead>{commonT('labels.timeline')}</TableHead>
+                    <TableHead>{commonT('labels.status')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {collaborator.assignedProjects.map((project) => (
+                    <TableRow key={project.id}>
+                      <TableCell>
+                        <div className="font-medium">{project.name}</div>
+                        <div className="text-xs text-muted-foreground">
+                          {project.code}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        {project.roleLabel || commonT('labels.notAssigned')}
+                      </TableCell>
+                      <TableCell>
+                        {formatDateRange(project.startDate, project.endDate)}
+                      </TableCell>
+                      <TableCell>
+                        <StatusBadge
+                          label={formatEnumLabel(project.status)}
+                          className={getStatusBadgeClass(project.status)}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">{t('noProjects')}</p>
+          )}
+        </SectionCard>
+
+        <SectionCard
+          title={t('sections.schedule')}
+          description={t('sections.scheduleDescription')}
+        >
+          <p className="text-sm">
+            {summarizeScheduleDays(
+              collaborator.weeklySchedule,
+              currentLocaleCode
+            )}
+          </p>
+        </SectionCard>
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <SectionCard
+          title={t('sections.timeOff')}
+          description={t('sections.timeOffDescription')}
+        >
+          <dl className="grid gap-3 md:grid-cols-3 text-sm">
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.total')}
+              </dt>
+              <dd className="font-medium">
+                {collaborator.timeOffSummary.totalRequests}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.pending')}
+              </dt>
+              <dd className="font-medium">
+                {collaborator.timeOffSummary.pendingRequests}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.approved')}
+              </dt>
+              <dd className="font-medium">
+                {collaborator.timeOffSummary.approvedRequests}
+              </dd>
+            </div>
+          </dl>
+        </SectionCard>
+
+        <SectionCard
+          title={t('sections.scheduleAdjustments')}
+          description={t('sections.scheduleAdjustmentsDescription')}
+        >
+          {collaborator.scheduleAdjustmentRequests.length > 0 ? (
+            <div className="space-y-2">
+              {collaborator.scheduleAdjustmentRequests.map((request) => (
+                <div
+                  key={request.id}
+                  className="flex items-center justify-between rounded-lg border px-4 py-3 text-sm"
+                >
+                  <div>
+                    <div className="font-medium">
+                      {formatEnumLabel(request.requestScope)}
+                    </div>
+                    <div className="text-muted-foreground">
+                      {formatDateRange(
+                        request.effectiveStartDate,
+                        request.effectiveEndDate
+                      )}
+                    </div>
+                  </div>
+                  <StatusBadge
+                    label={formatEnumLabel(request.status)}
+                    className={getStatusBadgeClass(request.status)}
+                  />
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              {t('noScheduleAdjustments')}
+            </p>
+          )}
+        </SectionCard>
+      </div>
+
+      {access.isDirector && (
+        <SectionCard
+          title={t('sections.compensationHistory')}
+          description={t('sections.compensationHistoryDescription')}
+        >
+          {compensationHistory.length > 0 ? (
+            <div className="overflow-x-auto rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('compensationHistory.amount')}</TableHead>
+                    <TableHead>{t('compensationHistory.effectiveDate')}</TableHead>
+                    <TableHead>{t('compensationHistory.recordedAt')}</TableHead>
+                    <TableHead>{t('compensationHistory.changedBy')}</TableHead>
+                    <TableHead>{t('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)
+                          : '—'}
+                      </TableCell>
+                      <TableCell>{formatDate(entry.createdAt)}</TableCell>
+                      <TableCell>
+                        {entry.actorName ?? '—'}
+                      </TableCell>
+                      <TableCell className="text-muted-foreground">
+                        {entry.notes ?? '—'}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              {t('noCompensationHistory')}
+            </p>
+          )}
+        </SectionCard>
+      )}
+    </Page>
+  );
+}

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

@@ -111,8 +111,6 @@ 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';
@@ -2145,7 +2143,9 @@ export function CollaboratorFormScreen({
 
   const formContent = isSheetMode ? (
     <Tabs defaultValue="details" className="w-full">
-      <TabsList className="mx-4 mb-2 flex w-[calc(100%-2rem)] flex-wrap gap-0.5 h-auto">
+      <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>
         {!isHourlyType ? (
@@ -2159,14 +2159,6 @@ 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}
@@ -2384,34 +2376,6 @@ 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">