@hed-hog/operations 0.0.327 → 0.0.329

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

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