@hed-hog/operations 0.0.301 → 0.0.303

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

@@ -2,7 +2,6 @@
 
 import { EmptyState, Page, SearchBar } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
   Sheet,
@@ -51,10 +50,13 @@ export default function OperationsDepartmentsPage() {
   const { request, showToastHandler, currentLocaleCode } = useApp();
   const access = useOperationsAccess();
   const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive'>('all');
+  const [statusFilter, setStatusFilter] = useState<
+    'all' | 'active' | 'inactive'
+  >('all');
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
-  const [editingDepartment, setEditingDepartment] = useState<OperationsDepartment | null>(null);
+  const [editingDepartment, setEditingDepartment] =
+    useState<OperationsDepartment | null>(null);
   const [form, setForm] = useState<DepartmentFormState>(EMPTY_FORM_STATE);
 
   const {
@@ -65,7 +67,10 @@ export default function OperationsDepartmentsPage() {
     queryKey: ['operations-departments-list', currentLocaleCode],
     enabled: access.isDirector,
     queryFn: () =>
-      fetchOperations<OperationsDepartment[]>(request, '/operations/departments'),
+      fetchOperations<OperationsDepartment[]>(
+        request,
+        '/operations/departments'
+      ),
   });
 
   const filteredDepartments = useMemo(
@@ -210,7 +215,9 @@ export default function OperationsDepartmentsPage() {
           current={t('breadcrumb')}
           actions={
             <Button variant="outline" size="sm" asChild>
-              <Link href="/operations/collaborators">{commonT('actions.back')}</Link>
+              <Link href="/operations/collaborators">
+                {commonT('actions.back')}
+              </Link>
             </Button>
           }
         />
@@ -237,7 +244,9 @@ export default function OperationsDepartmentsPage() {
         actions={
           <div className="flex flex-wrap gap-2">
             <Button variant="outline" size="sm" asChild>
-              <Link href="/operations/collaborators">{commonT('actions.back')}</Link>
+              <Link href="/operations/collaborators">
+                {commonT('actions.back')}
+              </Link>
             </Button>
             <Button size="sm" onClick={openCreateSheet}>
               {commonT('actions.create')}
@@ -260,7 +269,9 @@ export default function OperationsDepartmentsPage() {
               type: 'select',
               value: statusFilter,
               onChange: (value) =>
-                setStatusFilter((value as 'all' | 'active' | 'inactive') ?? 'all'),
+                setStatusFilter(
+                  (value as 'all' | 'active' | 'inactive') ?? 'all'
+                ),
               placeholder: commonT('labels.status'),
               options: [
                 { value: 'all', label: commonT('filters.allStatuses') },
@@ -273,70 +284,70 @@ export default function OperationsDepartmentsPage() {
       </div>
 
       {isLoading ? (
-        <Card className="py-0">
-          <CardContent className="p-6 text-sm text-muted-foreground">
-            {commonT('actions.refresh')}...
-          </CardContent>
-        </Card>
+        <div className="rounded-md border px-4 py-6 text-sm text-muted-foreground">
+          {commonT('actions.refresh')}...
+        </div>
       ) : filteredDepartments.length > 0 ? (
-        <Card className="py-0">
-          <CardContent className="p-0">
-            <div className="overflow-x-auto rounded-md border">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t('columns.name')}</TableHead>
-                    <TableHead>{t('columns.code')}</TableHead>
-                    <TableHead>{t('columns.description')}</TableHead>
-                    <TableHead>{t('columns.collaborators')}</TableHead>
-                    <TableHead>{commonT('labels.status')}</TableHead>
-                    <TableHead className="text-right">{commonT('labels.actions')}</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filteredDepartments.map((department) => (
-                    <TableRow key={department.id}>
-                      <TableCell className="font-medium">{department.name}</TableCell>
-                      <TableCell>{department.code || '—'}</TableCell>
-                      <TableCell className="max-w-md text-sm text-muted-foreground">
-                        {department.description || commonT('labels.notAvailable')}
-                      </TableCell>
-                      <TableCell>{Number(department.collaboratorCount ?? 0)}</TableCell>
-                      <TableCell>
-                        <StatusBadge
-                          label={formatEnumLabel(department.status)}
-                          className={getStatusBadgeClass(department.status)}
-                        />
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex justify-end gap-2">
-                          <Button
-                            variant="outline"
-                            size="icon"
-                            className="cursor-pointer"
-                            onClick={() => openEditSheet(department)}
-                          >
-                            <Pencil className="size-4" />
-                          </Button>
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="cursor-pointer"
-                            onClick={() => void toggleStatus(department)}
-                          >
-                            {department.status === 'inactive'
-                              ? commonT('actions.activate')
-                              : commonT('actions.deactivate')}
-                          </Button>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          </CardContent>
-        </Card>
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('columns.name')}</TableHead>
+                <TableHead>{t('columns.code')}</TableHead>
+                <TableHead>{t('columns.description')}</TableHead>
+                <TableHead>{t('columns.collaborators')}</TableHead>
+                <TableHead>{commonT('labels.status')}</TableHead>
+                <TableHead className="text-right">
+                  {commonT('labels.actions')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredDepartments.map((department) => (
+                <TableRow key={department.id}>
+                  <TableCell className="font-medium">
+                    {department.name}
+                  </TableCell>
+                  <TableCell>{department.code || '—'}</TableCell>
+                  <TableCell className="max-w-md text-sm text-muted-foreground">
+                    {department.description || commonT('labels.notAvailable')}
+                  </TableCell>
+                  <TableCell>
+                    {Number(department.collaboratorCount ?? 0)}
+                  </TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      label={formatEnumLabel(department.status)}
+                      className={getStatusBadgeClass(department.status)}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="cursor-pointer"
+                        onClick={() => openEditSheet(department)}
+                      >
+                        <Pencil className="size-4" />
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="cursor-pointer"
+                        onClick={() => void toggleStatus(department)}
+                      >
+                        {department.status === 'inactive'
+                          ? commonT('actions.activate')
+                          : commonT('actions.deactivate')}
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
       ) : (
         <EmptyState
           icon={<Building2 className="size-12" />}
@@ -351,7 +362,9 @@ export default function OperationsDepartmentsPage() {
         <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
           <SheetHeader>
             <SheetTitle>
-              {editingDepartment ? t('sheet.editTitle') : t('sheet.createTitle')}
+              {editingDepartment
+                ? t('sheet.editTitle')
+                : t('sheet.createTitle')}
             </SheetTitle>
             <SheetDescription>{t('sheet.description')}</SheetDescription>
           </SheetHeader>
@@ -390,20 +403,28 @@ export default function OperationsDepartmentsPage() {
             </div>
 
             <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="department-description">
+              <label
+                className="text-sm font-medium"
+                htmlFor="department-description"
+              >
                 {t('form.description')}
               </label>
               <textarea
                 id="department-description"
                 value={form.description}
-                onChange={(event) => updateForm('description', event.target.value)}
+                onChange={(event) =>
+                  updateForm('description', event.target.value)
+                }
                 className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                 placeholder={t('form.description')}
               />
             </div>
 
             <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="department-status">
+              <label
+                className="text-sm font-medium"
+                htmlFor="department-status"
+              >
                 {t('form.status')}
               </label>
               <select

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

@@ -1,343 +1,5 @@
-'use client';
+import { redirect } from 'next/navigation';
 
-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 {
-  Building2,
-  CheckCircle2,
-  ClipboardList,
-  FolderKanban,
-  Hourglass,
-  PlaneTakeoff,
-  RefreshCcw,
-  Users,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-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 {
-  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 flex-wrap gap-2">
-            <Button variant="outline" size="sm" onClick={() => void refetch()}>
-              <RefreshCcw className="size-4" />
-              {commonT('actions.refresh')}
-            </Button>
-            {access.isDirector ? (
-              <Button variant="outline" size="sm" asChild>
-                <Link href="/operations/departments">
-                  <Building2 className="size-4" />
-                  {commonT('actions.manageDepartments')}
-                </Link>
-              </Button>
-            ) : null}
-            <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>
-  );
+export default function OperationsPage() {
+  redirect('/operations/projects');
 }