@hed-hog/operations 0.0.295 → 0.0.296

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

@@ -0,0 +1,291 @@
+'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 { FileText, FolderKanban, Pencil } 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 { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type { OperationsProjectDetails } from '../_lib/types';
+import {
+  formatCurrency,
+  formatDate,
+  formatDateRange,
+  formatEnumLabel,
+  formatHours,
+  formatPercent,
+  getStatusBadgeClass,
+} from '../_lib/utils/format';
+
+export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
+  const t = useTranslations('operations.ProjectDetailsPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+
+  const { data: project, refetch } = useQuery<OperationsProjectDetails>({
+    queryKey: ['operations-project-details', currentLocaleCode, projectId],
+    queryFn: () =>
+      fetchOperations<OperationsProjectDetails>(request, `/operations/projects/${projectId}`),
+  });
+
+  if (!project) {
+    return (
+      <Page>
+        <OperationsHeader
+          title={t('title')}
+          description={t('description')}
+          current={t('breadcrumb')}
+        />
+        <EmptyState
+          icon={<FolderKanban className="size-12" />}
+          title={commonT('states.emptyTitle')}
+          description={t('notFound')}
+          actionLabel={commonT('actions.refresh')}
+          onAction={() => void refetch()}
+        />
+      </Page>
+    );
+  }
+
+  const cards = [
+    {
+      key: 'teamSize',
+      title: t('cards.teamSize'),
+      value: project.teamSize ?? 0,
+      description: t('cards.teamSizeDescription'),
+    },
+    {
+      key: 'timesheets',
+      title: t('cards.timesheets'),
+      value: project.timesheetSummary.totalTimesheets,
+      description: t('cards.timesheetsDescription', {
+        pending: project.timesheetSummary.pendingTimesheets,
+      }),
+    },
+    {
+      key: 'hours',
+      title: t('cards.loggedHours'),
+      value: formatHours(project.timesheetSummary.totalHours),
+      description: t('cards.loggedHoursDescription'),
+    },
+    {
+      key: 'allocation',
+      title: t('cards.allocation'),
+      value: formatPercent(project.operationalIndicators.averageAllocation),
+      description: t('cards.allocationDescription'),
+    },
+  ];
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={project.name}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          access.isDirector ? (
+            <div className="flex gap-2">
+              {project.contractId ? (
+                <Button variant="outline" size="sm" asChild>
+                  <Link href={`/operations/contracts?edit=${project.contractId}`}>
+                    <FileText className="size-4" />
+                    {commonT('actions.openContract')}
+                  </Link>
+                </Button>
+              ) : null}
+              <Button size="sm" asChild>
+                <Link href={`/operations/projects/${project.id}/edit`}>
+                  <Pencil className="size-4" />
+                  {commonT('actions.edit')}
+                </Link>
+              </Button>
+            </div>
+          ) : undefined
+        }
+      />
+
+      <div className="grid gap-4 xl:grid-cols-4">
+        <SectionCard title={t('sections.overview')} className="xl:col-span-2">
+          <dl className="grid gap-3 text-sm md:grid-cols-2">
+            <div>
+              <dt className="text-muted-foreground">{commonT('labels.project')}</dt>
+              <dd className="font-medium">{project.name}</dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">{commonT('labels.client')}</dt>
+              <dd className="font-medium">
+                {project.clientName || commonT('labels.notAvailable')}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">{commonT('labels.manager')}</dt>
+              <dd className="font-medium">
+                {project.managerName || commonT('labels.notAssigned')}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">{commonT('labels.status')}</dt>
+              <dd className="font-medium">
+                <StatusBadge
+                  label={formatEnumLabel(project.status)}
+                  className={getStatusBadgeClass(project.status)}
+                />
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">{commonT('labels.startDate')}</dt>
+              <dd className="font-medium">{formatDate(project.startDate)}</dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">{commonT('labels.endDate')}</dt>
+              <dd className="font-medium">{formatDate(project.endDate)}</dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">{commonT('labels.budget')}</dt>
+              <dd className="font-medium">
+                {project.budgetAmount
+                  ? formatCurrency(project.budgetAmount)
+                  : commonT('labels.notAvailable')}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">{commonT('labels.progress')}</dt>
+              <dd className="font-medium">{formatPercent(project.progressPercent)}</dd>
+            </div>
+          </dl>
+          {project.summary ? (
+            <p className="mt-4 text-sm text-muted-foreground">{project.summary}</p>
+          ) : null}
+        </SectionCard>
+
+        <SectionCard title={t('sections.contract')} className="xl:col-span-2">
+          {project.relatedContract ? (
+            <div className="space-y-3">
+              <div className="flex items-center justify-between rounded-lg border px-4 py-3">
+                <div>
+                  <div className="font-medium">{project.relatedContract.name}</div>
+                  <div className="text-sm text-muted-foreground">
+                    {project.relatedContract.code} •{' '}
+                    {formatEnumLabel(project.relatedContract.contractCategory)}
+                  </div>
+                </div>
+                <StatusBadge
+                  label={formatEnumLabel(project.relatedContract.status)}
+                  className={getStatusBadgeClass(project.relatedContract.status)}
+                />
+              </div>
+              <dl className="grid gap-3 text-sm md:grid-cols-2">
+                <div>
+                  <dt className="text-muted-foreground">{commonT('labels.billingModel')}</dt>
+                  <dd className="font-medium">
+                    {formatEnumLabel(project.relatedContract.billingModel)}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-muted-foreground">{commonT('labels.timeline')}</dt>
+                  <dd className="font-medium">
+                    {formatDateRange(
+                      project.relatedContract.startDate,
+                      project.relatedContract.endDate
+                    )}
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">{t('noContract')}</p>
+          )}
+        </SectionCard>
+      </div>
+
+      <KpiCardsGrid items={cards} />
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <SectionCard title={t('sections.team')} description={t('sections.teamDescription')}>
+          {project.assignments.length > 0 ? (
+            <div className="overflow-x-auto rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{commonT('labels.collaborator')}</TableHead>
+                    <TableHead>{commonT('labels.role')}</TableHead>
+                    <TableHead>{commonT('labels.weeklyCapacity')}</TableHead>
+                    <TableHead>{commonT('labels.status')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {project.assignments.map((assignment) => (
+                    <TableRow key={assignment.id}>
+                      <TableCell>{assignment.collaboratorName}</TableCell>
+                      <TableCell>
+                        {assignment.roleLabel || commonT('labels.notAssigned')}
+                      </TableCell>
+                      <TableCell>
+                        {assignment.weeklyHours
+                          ? formatHours(assignment.weeklyHours)
+                          : commonT('labels.notAvailable')}
+                      </TableCell>
+                      <TableCell>
+                        <StatusBadge
+                          label={formatEnumLabel(assignment.status)}
+                          className={getStatusBadgeClass(assignment.status)}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">{t('noAssignments')}</p>
+          )}
+        </SectionCard>
+
+        <SectionCard
+          title={t('sections.indicators')}
+          description={t('sections.indicatorsDescription')}
+        >
+          <dl className="grid gap-3 text-sm md:grid-cols-2">
+            <div>
+              <dt className="text-muted-foreground">{t('indicators.activeAssignments')}</dt>
+              <dd className="font-medium">{project.operationalIndicators.activeAssignments}</dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">{t('indicators.billableAssignments')}</dt>
+              <dd className="font-medium">
+                {project.operationalIndicators.billableAssignments}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">{t('indicators.averageAllocation')}</dt>
+              <dd className="font-medium">
+                {formatPercent(project.operationalIndicators.averageAllocation)}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">{t('indicators.totalWeeklyHours')}</dt>
+              <dd className="font-medium">
+                {formatHours(project.operationalIndicators.totalWeeklyHours)}
+              </dd>
+            </div>
+          </dl>
+        </SectionCard>
+      </div>
+    </Page>
+  );
+}