@hed-hog/operations 0.0.296 → 0.0.298

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

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