@hed-hog/operations 0.0.294 → 0.0.296

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

@@ -0,0 +1,310 @@
+'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 {
+  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 } = useApp();
+  const access = useOperationsAccess();
+
+  const { data: collaborator, refetch } = useQuery<OperationsCollaboratorDetails>({
+    queryKey: ['operations-collaborator-details', currentLocaleCode, collaboratorId],
+    queryFn: () =>
+      fetchOperations<OperationsCollaboratorDetails>(
+        request,
+        `/operations/collaborators/${collaboratorId}`
+      ),
+  });
+
+  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">
+                {formatEnumLabel(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>
+          </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}</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)}
+          </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>
+    </Page>
+  );
+}