@hed-hog/operations 0.0.296 → 0.0.298

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

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