@hed-hog/operations 0.0.297 → 0.0.298

package/hedhog/frontend/app/page.tsx.ejs

@@ -1,319 +1,319 @@
-'use client';
-
-import { EmptyState, Page } from '@/components/entity-list';
-import { Button } from '@/components/ui/button';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import { Skeleton } from '@/components/ui/skeleton';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  CheckCircle2,
-  ClipboardList,
-  FolderKanban,
-  Hourglass,
-  PlaneTakeoff,
-  RefreshCcw,
-  Users,
-} from 'lucide-react';
-import Link from 'next/link';
-import { useTranslations } from 'next-intl';
-import { OperationsHeader } from './_components/operations-header';
-import { SectionCard } from './_components/section-card';
-import { StatusBadge } from './_components/status-badge';
-import { fetchOperations } from './_lib/api';
-import { useOperationsAccess } from './_lib/hooks/use-operations-access';
-import type { OperationsDashboard, OperationsTeamOverview } from './_lib/types';
-import {
-  formatDate,
-  formatDateRange,
-  formatEnumLabel,
-  formatHours,
-  getStatusBadgeClass,
-} from './_lib/utils/format';
-
-export default function OperationsDashboardPage() {
-  const t = useTranslations('operations.DashboardPage');
-  const commonT = useTranslations('operations.Common');
-  const { request, currentLocaleCode } = useApp();
-  const access = useOperationsAccess();
-
-  const {
-    data: dashboard,
-    isLoading,
-    refetch,
-  } = useQuery<OperationsDashboard>({
-    queryKey: ['operations-dashboard', currentLocaleCode],
-    queryFn: () => fetchOperations<OperationsDashboard>(request, '/operations/dashboard'),
-  });
-
-  const { data: team } = useQuery<OperationsTeamOverview>({
-    queryKey: ['operations-team-overview', currentLocaleCode],
-    enabled: access.isSupervisor,
-    queryFn: () => fetchOperations<OperationsTeamOverview>(request, '/operations/team'),
-  });
-
-  const cards = dashboard
-    ? [
-        {
-          key: 'projects',
-          title: t('cards.projects'),
-          value: dashboard.cards.projectsTotal,
-          description: t('cards.projectsDescription', {
-            active: dashboard.cards.activeProjects,
-          }),
-          icon: FolderKanban,
-        },
-        {
-          key: 'timesheets',
-          title: t('cards.timesheets'),
-          value: dashboard.cards.visibleTimesheets,
-          description: t('cards.timesheetsDescription', {
-            pending: dashboard.cards.pendingTimesheets,
-          }),
-          icon: ClipboardList,
-        },
-        {
-          key: 'timeOff',
-          title: t('cards.timeOff'),
-          value: dashboard.cards.timeOffRequests,
-          description: t('cards.timeOffDescription'),
-          icon: PlaneTakeoff,
-        },
-        {
-          key: 'approvals',
-          title: t('cards.approvals'),
-          value: dashboard.cards.pendingApprovals,
-          description: t('cards.approvalsDescription'),
-          icon: Hourglass,
-        },
-      ]
-    : [];
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm" onClick={() => void refetch()}>
-              <RefreshCcw className="size-4" />
-              {commonT('actions.refresh')}
-            </Button>
-            <Button asChild size="sm">
-              <Link href="/operations/timesheets">{t('actions.openTimesheets')}</Link>
-            </Button>
-          </div>
-        }
-      />
-
-      {isLoading || access.isLoading ? (
-        <div className="space-y-4">
-          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-            {Array.from({ length: 4 }).map((_, index) => (
-              <Skeleton key={index} className="h-32 w-full" />
-            ))}
-          </div>
-          <div className="grid gap-4 xl:grid-cols-3">
-            <Skeleton className="h-64 w-full xl:col-span-2" />
-            <Skeleton className="h-64 w-full" />
-          </div>
-        </div>
-      ) : dashboard ? (
-        <>
-          <KpiCardsGrid items={cards} />
-
-          <div className="grid gap-4 xl:grid-cols-3">
-            <SectionCard
-              title={t('scope.title')}
-              description={t('scope.description')}
-              className="xl:col-span-1"
-            >
-              <dl className="space-y-3 text-sm">
-                <div className="flex items-center justify-between gap-4">
-                  <dt className="text-muted-foreground">{t('scope.roleScope')}</dt>
-                  <dd className="font-medium">
-                    {formatEnumLabel(dashboard.actor.roleScope)}
-                  </dd>
-                </div>
-                <div className="flex items-center justify-between gap-4">
-                  <dt className="text-muted-foreground">{t('scope.collaborator')}</dt>
-                  <dd className="font-medium">
-                    {dashboard.actor.collaboratorName ?? commonT('labels.notAvailable')}
-                  </dd>
-                </div>
-                <div className="flex items-center justify-between gap-4">
-                  <dt className="text-muted-foreground">{t('scope.teamSize')}</dt>
-                  <dd className="font-medium">{dashboard.actor.teamSize}</dd>
-                </div>
-              </dl>
-            </SectionCard>
-
-            <SectionCard
-              title={t('recentTimesheets.title')}
-              description={t('recentTimesheets.description')}
-              className="xl:col-span-2"
-            >
-              {dashboard.recentTimesheets.length === 0 ? (
-                <EmptyState
-                  icon={<ClipboardList className="size-12" />}
-                  title={commonT('states.emptyTitle')}
-                  description={t('recentTimesheets.empty')}
-                  actionLabel={t('actions.openTimesheets')}
-                  onAction={() => {
-                    window.location.href = '/operations/timesheets';
-                  }}
-                />
-              ) : (
-                <div className="overflow-x-auto rounded-md border">
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead>{commonT('labels.collaborator')}</TableHead>
-                        <TableHead>{commonT('labels.week')}</TableHead>
-                        <TableHead>{commonT('labels.totalHours')}</TableHead>
-                        <TableHead>{commonT('labels.status')}</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {dashboard.recentTimesheets.map((item) => (
-                        <TableRow key={item.id}>
-                          <TableCell className="font-medium">
-                            {item.collaboratorName}
-                          </TableCell>
-                          <TableCell>
-                            {formatDateRange(item.weekStartDate, item.weekEndDate)}
-                          </TableCell>
-                          <TableCell>{formatHours(item.totalHours)}</TableCell>
-                          <TableCell>
-                            <StatusBadge
-                              label={formatEnumLabel(item.status)}
-                              className={getStatusBadgeClass(item.status)}
-                            />
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </div>
-              )}
-            </SectionCard>
-          </div>
-
-          <div className="grid gap-4 xl:grid-cols-2">
-            <SectionCard
-              title={t('nextSteps.title')}
-              description={t('nextSteps.description')}
-            >
-              <div className="space-y-3 text-sm">
-                <div className="flex items-start gap-3">
-                  <CheckCircle2 className="mt-0.5 size-4 text-emerald-600" />
-                  <p>{t('nextSteps.submitTimesheet')}</p>
-                </div>
-                <div className="flex items-start gap-3">
-                  <CheckCircle2 className="mt-0.5 size-4 text-emerald-600" />
-                  <p>{t('nextSteps.requestTimeOff')}</p>
-                </div>
-                <div className="flex items-start gap-3">
-                  <CheckCircle2 className="mt-0.5 size-4 text-emerald-600" />
-                  <p>{t('nextSteps.adjustSchedule')}</p>
-                </div>
-              </div>
-            </SectionCard>
-
-            <SectionCard
-              title={t('team.title')}
-              description={t('team.description')}
-            >
-              {access.isSupervisor && team ? (
-                <>
-                  <div className="mb-4 grid gap-3 md:grid-cols-3">
-                    <div className="rounded-lg border p-4">
-                      <div className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                        {t('team.members')}
-                      </div>
-                      <div className="mt-2 text-2xl font-semibold">
-                        {team.teamMembers.length}
-                      </div>
-                    </div>
-                    <div className="rounded-lg border p-4">
-                      <div className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                        {t('team.projects')}
-                      </div>
-                      <div className="mt-2 text-2xl font-semibold">
-                        {team.projectCount}
-                      </div>
-                    </div>
-                    <div className="rounded-lg border p-4">
-                      <div className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                        {t('team.pendingApprovals')}
-                      </div>
-                      <div className="mt-2 text-2xl font-semibold">
-                        {team.pendingApprovals}
-                      </div>
-                    </div>
-                  </div>
-
-                  {team.teamMembers.length > 0 ? (
-                    <div className="space-y-3">
-                      {team.teamMembers.slice(0, 4).map((member) => (
-                        <div
-                          key={member.id}
-                          className="flex items-center justify-between rounded-lg border px-4 py-3 text-sm"
-                        >
-                          <div>
-                            <div className="font-medium">{member.displayName}</div>
-                            <div className="text-muted-foreground">
-                              {[member.department, member.title]
-                                .filter(Boolean)
-                                .join(' • ') || commonT('labels.notAvailable')}
-                            </div>
-                          </div>
-                          <div className="text-right">
-                            <div className="font-medium">
-                              {member.activeAssignments ?? 0}{' '}
-                              {t('team.assignments')}
-                            </div>
-                            <div className="text-muted-foreground">
-                              {member.pendingApprovals ?? 0}{' '}
-                              {t('team.awaitingReview')}
-                            </div>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  ) : (
-                    <p className="text-sm text-muted-foreground">
-                      {t('team.empty')}
-                    </p>
-                  )}
-                </>
-              ) : (
-                <div className="flex items-start gap-3 rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
-                  <Users className="mt-0.5 size-4" />
-                  <p>{t('team.collaboratorMessage')}</p>
-                </div>
-              )}
-            </SectionCard>
-          </div>
-        </>
-      ) : (
-        <EmptyState
-          icon={<FolderKanban className="size-12" />}
-          title={commonT('states.emptyTitle')}
-          description={commonT('states.emptyDescription')}
-          actionLabel={commonT('actions.refresh')}
-          onAction={() => void refetch()}
-        />
-      )}
-    </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 { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  CheckCircle2,
+  ClipboardList,
+  FolderKanban,
+  Hourglass,
+  PlaneTakeoff,
+  RefreshCcw,
+  Users,
+} from 'lucide-react';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import { OperationsHeader } from './_components/operations-header';
+import { SectionCard } from './_components/section-card';
+import { StatusBadge } from './_components/status-badge';
+import { fetchOperations } from './_lib/api';
+import { useOperationsAccess } from './_lib/hooks/use-operations-access';
+import type { OperationsDashboard, OperationsTeamOverview } from './_lib/types';
+import {
+  formatDate,
+  formatDateRange,
+  formatEnumLabel,
+  formatHours,
+  getStatusBadgeClass,
+} from './_lib/utils/format';
+
+export default function OperationsDashboardPage() {
+  const t = useTranslations('operations.DashboardPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+
+  const {
+    data: dashboard,
+    isLoading,
+    refetch,
+  } = useQuery<OperationsDashboard>({
+    queryKey: ['operations-dashboard', currentLocaleCode],
+    queryFn: () => fetchOperations<OperationsDashboard>(request, '/operations/dashboard'),
+  });
+
+  const { data: team } = useQuery<OperationsTeamOverview>({
+    queryKey: ['operations-team-overview', currentLocaleCode],
+    enabled: access.isSupervisor,
+    queryFn: () => fetchOperations<OperationsTeamOverview>(request, '/operations/team'),
+  });
+
+  const cards = dashboard
+    ? [
+        {
+          key: 'projects',
+          title: t('cards.projects'),
+          value: dashboard.cards.projectsTotal,
+          description: t('cards.projectsDescription', {
+            active: dashboard.cards.activeProjects,
+          }),
+          icon: FolderKanban,
+        },
+        {
+          key: 'timesheets',
+          title: t('cards.timesheets'),
+          value: dashboard.cards.visibleTimesheets,
+          description: t('cards.timesheetsDescription', {
+            pending: dashboard.cards.pendingTimesheets,
+          }),
+          icon: ClipboardList,
+        },
+        {
+          key: 'timeOff',
+          title: t('cards.timeOff'),
+          value: dashboard.cards.timeOffRequests,
+          description: t('cards.timeOffDescription'),
+          icon: PlaneTakeoff,
+        },
+        {
+          key: 'approvals',
+          title: t('cards.approvals'),
+          value: dashboard.cards.pendingApprovals,
+          description: t('cards.approvalsDescription'),
+          icon: Hourglass,
+        },
+      ]
+    : [];
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={() => void refetch()}>
+              <RefreshCcw className="size-4" />
+              {commonT('actions.refresh')}
+            </Button>
+            <Button asChild size="sm">
+              <Link href="/operations/timesheets">{t('actions.openTimesheets')}</Link>
+            </Button>
+          </div>
+        }
+      />
+
+      {isLoading || access.isLoading ? (
+        <div className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+            {Array.from({ length: 4 }).map((_, index) => (
+              <Skeleton key={index} className="h-32 w-full" />
+            ))}
+          </div>
+          <div className="grid gap-4 xl:grid-cols-3">
+            <Skeleton className="h-64 w-full xl:col-span-2" />
+            <Skeleton className="h-64 w-full" />
+          </div>
+        </div>
+      ) : dashboard ? (
+        <>
+          <KpiCardsGrid items={cards} />
+
+          <div className="grid gap-4 xl:grid-cols-3">
+            <SectionCard
+              title={t('scope.title')}
+              description={t('scope.description')}
+              className="xl:col-span-1"
+            >
+              <dl className="space-y-3 text-sm">
+                <div className="flex items-center justify-between gap-4">
+                  <dt className="text-muted-foreground">{t('scope.roleScope')}</dt>
+                  <dd className="font-medium">
+                    {formatEnumLabel(dashboard.actor.roleScope)}
+                  </dd>
+                </div>
+                <div className="flex items-center justify-between gap-4">
+                  <dt className="text-muted-foreground">{t('scope.collaborator')}</dt>
+                  <dd className="font-medium">
+                    {dashboard.actor.collaboratorName ?? commonT('labels.notAvailable')}
+                  </dd>
+                </div>
+                <div className="flex items-center justify-between gap-4">
+                  <dt className="text-muted-foreground">{t('scope.teamSize')}</dt>
+                  <dd className="font-medium">{dashboard.actor.teamSize}</dd>
+                </div>
+              </dl>
+            </SectionCard>
+
+            <SectionCard
+              title={t('recentTimesheets.title')}
+              description={t('recentTimesheets.description')}
+              className="xl:col-span-2"
+            >
+              {dashboard.recentTimesheets.length === 0 ? (
+                <EmptyState
+                  icon={<ClipboardList className="size-12" />}
+                  title={commonT('states.emptyTitle')}
+                  description={t('recentTimesheets.empty')}
+                  actionLabel={t('actions.openTimesheets')}
+                  onAction={() => {
+                    window.location.href = '/operations/timesheets';
+                  }}
+                />
+              ) : (
+                <div className="overflow-x-auto rounded-md border">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>{commonT('labels.collaborator')}</TableHead>
+                        <TableHead>{commonT('labels.week')}</TableHead>
+                        <TableHead>{commonT('labels.totalHours')}</TableHead>
+                        <TableHead>{commonT('labels.status')}</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {dashboard.recentTimesheets.map((item) => (
+                        <TableRow key={item.id}>
+                          <TableCell className="font-medium">
+                            {item.collaboratorName}
+                          </TableCell>
+                          <TableCell>
+                            {formatDateRange(item.weekStartDate, item.weekEndDate)}
+                          </TableCell>
+                          <TableCell>{formatHours(item.totalHours)}</TableCell>
+                          <TableCell>
+                            <StatusBadge
+                              label={formatEnumLabel(item.status)}
+                              className={getStatusBadgeClass(item.status)}
+                            />
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </SectionCard>
+          </div>
+
+          <div className="grid gap-4 xl:grid-cols-2">
+            <SectionCard
+              title={t('nextSteps.title')}
+              description={t('nextSteps.description')}
+            >
+              <div className="space-y-3 text-sm">
+                <div className="flex items-start gap-3">
+                  <CheckCircle2 className="mt-0.5 size-4 text-emerald-600" />
+                  <p>{t('nextSteps.submitTimesheet')}</p>
+                </div>
+                <div className="flex items-start gap-3">
+                  <CheckCircle2 className="mt-0.5 size-4 text-emerald-600" />
+                  <p>{t('nextSteps.requestTimeOff')}</p>
+                </div>
+                <div className="flex items-start gap-3">
+                  <CheckCircle2 className="mt-0.5 size-4 text-emerald-600" />
+                  <p>{t('nextSteps.adjustSchedule')}</p>
+                </div>
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              title={t('team.title')}
+              description={t('team.description')}
+            >
+              {access.isSupervisor && team ? (
+                <>
+                  <div className="mb-4 grid gap-3 md:grid-cols-3">
+                    <div className="rounded-lg border p-4">
+                      <div className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
+                        {t('team.members')}
+                      </div>
+                      <div className="mt-2 text-2xl font-semibold">
+                        {team.teamMembers.length}
+                      </div>
+                    </div>
+                    <div className="rounded-lg border p-4">
+                      <div className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
+                        {t('team.projects')}
+                      </div>
+                      <div className="mt-2 text-2xl font-semibold">
+                        {team.projectCount}
+                      </div>
+                    </div>
+                    <div className="rounded-lg border p-4">
+                      <div className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
+                        {t('team.pendingApprovals')}
+                      </div>
+                      <div className="mt-2 text-2xl font-semibold">
+                        {team.pendingApprovals}
+                      </div>
+                    </div>
+                  </div>
+
+                  {team.teamMembers.length > 0 ? (
+                    <div className="space-y-3">
+                      {team.teamMembers.slice(0, 4).map((member) => (
+                        <div
+                          key={member.id}
+                          className="flex items-center justify-between rounded-lg border px-4 py-3 text-sm"
+                        >
+                          <div>
+                            <div className="font-medium">{member.displayName}</div>
+                            <div className="text-muted-foreground">
+                              {[member.department, member.title]
+                                .filter(Boolean)
+                                .join(' • ') || commonT('labels.notAvailable')}
+                            </div>
+                          </div>
+                          <div className="text-right">
+                            <div className="font-medium">
+                              {member.activeAssignments ?? 0}{' '}
+                              {t('team.assignments')}
+                            </div>
+                            <div className="text-muted-foreground">
+                              {member.pendingApprovals ?? 0}{' '}
+                              {t('team.awaitingReview')}
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">
+                      {t('team.empty')}
+                    </p>
+                  )}
+                </>
+              ) : (
+                <div className="flex items-start gap-3 rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
+                  <Users className="mt-0.5 size-4" />
+                  <p>{t('team.collaboratorMessage')}</p>
+                </div>
+              )}
+            </SectionCard>
+          </div>
+        </>
+      ) : (
+        <EmptyState
+          icon={<FolderKanban className="size-12" />}
+          title={commonT('states.emptyTitle')}
+          description={commonT('states.emptyDescription')}
+          actionLabel={commonT('actions.refresh')}
+          onAction={() => void refetch()}
+        />
+      )}
+    </Page>
+  );
+}