@hed-hog/operations 0.0.294 → 0.0.296

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

@@ -1,177 +1,319 @@
-'use client';
-
-import { Page } from '@/components/entity-list';
-import { KpiCard } from '@/components/ui/kpi-card';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { Activity, BadgeDollarSign, Clock3, FolderKanban, Users } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  Line,
-  LineChart,
-  Pie,
-  PieChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-import { OperationsHeader } from './_components/operations-header';
-import { SectionCard } from './_components/section-card';
-import { StatusBadge } from './_components/status-badge';
-import { useOperationsData } from './_lib/hooks/use-operations-data';
-import { formatCurrency, formatHours } from './_lib/utils/format';
-import { getApprovalBadgeClasses, getApprovalLabel } from './_lib/utils/status';
-
-const chartColors = ['#0f766e', '#1d4ed8', '#f97316', '#be123c', '#7c3aed'];
-
-export default function OperationsDashboardPage() {
-  const t = useTranslations('operations.DashboardPage');
-  const {
-    dashboardMetrics,
-    hoursByProject,
-    hoursByUser,
-    approvalStatusData,
-    weeklyTrendData,
-    recentTimesheets,
-    users,
-    projects,
-    tasks,
-  } = useOperationsData();
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-      />
-
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
-        <KpiCard
-          title={t('cards.activeProjects')}
-          value={dashboardMetrics.totalActiveProjects}
-          icon={FolderKanban}
-        />
-        <KpiCard
-          title={t('cards.loggedHours')}
-          value={formatHours(dashboardMetrics.hoursLoggedThisMonth)}
-          icon={Clock3}
-        />
-        <KpiCard
-          title={t('cards.pendingHours')}
-          value={formatHours(dashboardMetrics.hoursPendingApproval)}
-          icon={Activity}
-        />
-        <KpiCard
-          title={t('cards.revenue')}
-          value={formatCurrency(dashboardMetrics.revenue)}
-          icon={BadgeDollarSign}
-        />
-        <KpiCard
-          title={t('cards.utilization')}
-          value={`${dashboardMetrics.utilization.toFixed(0)}%`}
-          icon={Users}
-        />
-      </div>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <SectionCard title={t('charts.hoursByProject')} description={t('charts.hoursByProjectDescription')}>
-          <ResponsiveContainer width="100%" height={280}>
-            <BarChart data={hoursByProject}>
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis dataKey="name" tick={{ fontSize: 11 }} interval={0} angle={-15} textAnchor="end" height={55} />
-              <YAxis />
-              <Tooltip />
-              <Bar dataKey="hours" radius={[6, 6, 0, 0]}>
-                {hoursByProject.map((item, index) => (
-                  <Cell key={item.name} fill={chartColors[index % chartColors.length]} />
-                ))}
-              </Bar>
-            </BarChart>
-          </ResponsiveContainer>
-        </SectionCard>
-
-        <SectionCard title={t('charts.hoursByUser')} description={t('charts.hoursByUserDescription')}>
-          <ResponsiveContainer width="100%" height={280}>
-            <BarChart data={hoursByUser}>
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis dataKey="name" />
-              <YAxis />
-              <Tooltip />
-              <Bar dataKey="hours" radius={[6, 6, 0, 0]}>
-                {hoursByUser.map((item, index) => (
-                  <Cell key={item.name} fill={chartColors[index % chartColors.length]} />
-                ))}
-              </Bar>
-            </BarChart>
-          </ResponsiveContainer>
-        </SectionCard>
-
-        <SectionCard title={t('charts.approvalStatus')} description={t('charts.approvalStatusDescription')}>
-          <ResponsiveContainer width="100%" height={280}>
-            <PieChart>
-              <Pie data={approvalStatusData} dataKey="value" nameKey="name" outerRadius={110}>
-                {approvalStatusData.map((item, index) => (
-                  <Cell key={item.name} fill={chartColors[index % chartColors.length]} />
-                ))}
-              </Pie>
-              <Tooltip />
-            </PieChart>
-          </ResponsiveContainer>
-        </SectionCard>
-
-        <SectionCard title={t('charts.weeklyTrend')} description={t('charts.weeklyTrendDescription')}>
-          <ResponsiveContainer width="100%" height={280}>
-            <LineChart data={weeklyTrendData}>
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis dataKey="week" />
-              <YAxis />
-              <Tooltip />
-              <Line dataKey="hours" type="monotone" stroke="#1d4ed8" strokeWidth={3} />
-            </LineChart>
-          </ResponsiveContainer>
-        </SectionCard>
-      </div>
-
-      <SectionCard title={t('recentTable.title')} description={t('recentTable.description')}>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('recentTable.user')}</TableHead>
-              <TableHead>{t('recentTable.project')}</TableHead>
-              <TableHead>{t('recentTable.task')}</TableHead>
-              <TableHead>{t('recentTable.hours')}</TableHead>
-              <TableHead>{t('recentTable.status')}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {recentTimesheets.map((entry) => {
-              const user = users.find((item) => item.id === entry.userId);
-              const project = projects.find((item) => item.id === entry.projectId);
-              const task = tasks.find((item) => item.id === entry.taskId);
-
-              return (
-                <TableRow key={entry.id}>
-                  <TableCell>{user?.name}</TableCell>
-                  <TableCell>{project?.name}</TableCell>
-                  <TableCell>{task?.title}</TableCell>
-                  <TableCell>{formatHours(entry.hours)}</TableCell>
-                  <TableCell>
-                    <StatusBadge
-                      label={getApprovalLabel(entry.status)}
-                      className={getApprovalBadgeClasses(entry.status)}
-                    />
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </SectionCard>
-    </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>
+  );
+}

package/hedhog/frontend/app/projects/[id]/edit/page.tsx.ejs

@@ -0,0 +1,11 @@
+import { ProjectFormScreen } from '../../../_components/project-form-screen';
+
+export default async function OperationsProjectEditPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  return <ProjectFormScreen projectId={Number(id)} />;
+}