@hed-hog/operations 0.0.306 → 0.0.310

package/hedhog/frontend/app/schedule-adjustments/page.tsx.ejs

@@ -1,6 +1,11 @@
 'use client';
 
-import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { FormActions } from '@/components/ui/form-actions';
@@ -21,9 +26,26 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { CalendarRange, Clock, Plus, User } from 'lucide-react';
+import {
+  CalendarRange,
+  Clock,
+  Eye,
+  LayoutGrid,
+  List,
+  Plus,
+  User,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useMemo, useState } from 'react';
 import { OperationsHeader } from '../_components/operations-header';
@@ -33,6 +55,7 @@ import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import type {
   OperationsScheduleAdjustmentDay,
   OperationsScheduleAdjustmentRequest,
+  PaginatedResponse,
 } from '../_lib/types';
 import {
   formatDateRange,
@@ -211,7 +234,19 @@ export default function OperationsScheduleAdjustmentsPage() {
   const access = useOperationsAccess();
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [viewMode, setViewMode] = useState<'table' | 'cards'>(() => {
+    if (typeof window === 'undefined') return 'cards';
+    const saved = window.localStorage.getItem(
+      'operations-schedule-adjustments-view-mode'
+    );
+    return saved === 'table' ? 'table' : 'cards';
+  });
   const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+  const [selectedRequest, setSelectedRequest] =
+    useState<OperationsScheduleAdjustmentRequest | null>(null);
   const [form, setForm] = useState<ScheduleFormState>(emptyForm);
 
   const getRequestScopeLabel = (value?: string | null) => {
@@ -241,41 +276,44 @@ export default function OperationsScheduleAdjustmentsPage() {
     return t.has(key) ? t(key) : null;
   };
 
-  const { data: requests = [], refetch } = useQuery<
-    OperationsScheduleAdjustmentRequest[]
+  const { data: requestsResponse, refetch } = useQuery<
+    PaginatedResponse<OperationsScheduleAdjustmentRequest>
   >({
-    queryKey: ['operations-schedule-adjustments', currentLocaleCode],
+    queryKey: [
+      'operations-schedule-adjustments',
+      currentLocaleCode,
+      search,
+      statusFilter,
+      page,
+      pageSize,
+    ],
     enabled: access.isCollaborator,
-    queryFn: () =>
-      fetchOperations<OperationsScheduleAdjustmentRequest[]>(
-        request,
-        '/operations/schedule-adjustments'
-      ),
+    queryFn: () => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+      });
+      if (search.trim()) params.set('search', search.trim());
+      if (statusFilter !== 'all') params.set('status', statusFilter);
+      return fetchOperations<
+        PaginatedResponse<OperationsScheduleAdjustmentRequest>
+      >(request, `/operations/schedule-adjustments?${params.toString()}`);
+    },
+    placeholderData: (previous) => previous,
   });
 
-  const filteredRows = useMemo(
-    () =>
-      requests.filter((item) => {
-        const matchesSearch = !search.trim()
-          ? true
-          : [
-              item.collaboratorName,
-              item.approverName,
-              item.reason,
-              item.requestScope,
-            ]
-              .filter(Boolean)
-              .some((value) =>
-                String(value)
-                  .toLowerCase()
-                  .includes(search.trim().toLowerCase())
-              );
-        const matchesStatus =
-          statusFilter === 'all' ? true : item.status === statusFilter;
-        return matchesSearch && matchesStatus;
-      }),
-    [requests, search, statusFilter]
-  );
+  const requests = requestsResponse?.data ?? [];
+
+  const handleViewModeChange = (value: string) => {
+    if (value !== 'table' && value !== 'cards') return;
+    setViewMode(value as 'table' | 'cards');
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(
+        'operations-schedule-adjustments-view-mode',
+        value
+      );
+    }
+  };
 
   const cards = [
     {
@@ -370,6 +408,11 @@ export default function OperationsScheduleAdjustmentsPage() {
     }
   };
 
+  const openDetails = (requestItem: OperationsScheduleAdjustmentRequest) => {
+    setSelectedRequest(requestItem);
+    setIsDetailsOpen(true);
+  };
+
   return (
     <Page>
       <OperationsHeader
@@ -386,130 +429,239 @@ export default function OperationsScheduleAdjustmentsPage() {
         }
       />
 
-      <SearchBar
-        searchQuery={search}
-        onSearchChange={setSearch}
-        onSearch={() => undefined}
-        placeholder={t('searchPlaceholder')}
-        controls={[
-          {
-            id: 'status',
-            type: 'select',
-            value: statusFilter,
-            onChange: setStatusFilter,
-            placeholder: commonT('labels.status'),
-            options: [
-              { value: 'all', label: commonT('filters.allStatuses') },
-              { value: 'submitted', label: getStatusLabel('submitted') },
-              { value: 'approved', label: getStatusLabel('approved') },
-              { value: 'rejected', label: getStatusLabel('rejected') },
-            ],
-          },
-        ]}
-      />
-
       <KpiCardsGrid items={cards} columns={3} />
 
-      {filteredRows.length > 0 ? (
-        <div className="space-y-3">
-          {filteredRows.map((requestItem) => (
-            <div
-              key={requestItem.id}
-              className="rounded-lg border bg-card shadow-sm"
-            >
-              {/* Card header */}
-              <div className="flex flex-wrap items-start justify-between gap-3 border-b px-4 py-3">
-                <div className="space-y-1">
-                  <div className="flex items-center gap-2">
-                    <User className="size-4 shrink-0 text-muted-foreground" />
-                    <span className="font-semibold">
-                      {requestItem.collaboratorName}
-                    </span>
-                    <Badge variant="outline" className="text-xs">
-                      {getRequestScopeLabel(requestItem.requestScope)}
-                    </Badge>
+      <div className="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={search}
+            onSearchChange={(value) => {
+              setSearch(value);
+              setPage(1);
+            }}
+            showSearchButton={false}
+            debounceMs={500}
+            placeholder={t('searchPlaceholder')}
+            controls={[
+              {
+                id: 'status',
+                type: 'select',
+                value: statusFilter,
+                onChange: (value) => {
+                  setStatusFilter(value);
+                  setPage(1);
+                },
+                placeholder: commonT('labels.status'),
+                options: [
+                  { value: 'all', label: commonT('filters.allStatuses') },
+                  { value: 'submitted', label: getStatusLabel('submitted') },
+                  { value: 'approved', label: getStatusLabel('approved') },
+                  { value: 'rejected', label: getStatusLabel('rejected') },
+                ],
+              },
+            ]}
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3 xl:justify-end">
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('viewMode')}
+          </span>
+          <ToggleGroup
+            type="single"
+            value={viewMode}
+            onValueChange={handleViewModeChange}
+            variant="outline"
+            size="sm"
+          >
+            <ToggleGroupItem value="table" className="gap-1.5 px-2.5">
+              <List className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeTable')}</span>
+            </ToggleGroupItem>
+            <ToggleGroupItem value="cards" className="gap-1.5 px-2.5">
+              <LayoutGrid className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeCards')}</span>
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
+
+      {requests.length > 0 ? (
+        viewMode === 'cards' ? (
+          <div className="space-y-3">
+            {requests.map((requestItem) => (
+              <div
+                key={requestItem.id}
+                className="rounded-lg border bg-card shadow-sm"
+              >
+                {/* Card header */}
+                <div className="flex flex-wrap items-start justify-between gap-3 border-b px-4 py-3">
+                  <div className="space-y-1">
+                    <div className="flex items-center gap-2">
+                      <User className="size-4 shrink-0 text-muted-foreground" />
+                      <span className="font-semibold">
+                        {requestItem.collaboratorName}
+                      </span>
+                      <Badge variant="outline" className="text-xs">
+                        {getRequestScopeLabel(requestItem.requestScope)}
+                      </Badge>
+                    </div>
+                    <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                      <CalendarRange className="size-3.5 shrink-0" />
+                      <span>
+                        {formatDateRange(
+                          requestItem.effectiveStartDate,
+                          requestItem.effectiveEndDate
+                        )}
+                      </span>
+                    </div>
                   </div>
-                  <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
-                    <CalendarRange className="size-3.5 shrink-0" />
-                    <span>
-                      {formatDateRange(
-                        requestItem.effectiveStartDate,
-                        requestItem.effectiveEndDate
-                      )}
-                    </span>
+                  <div className="flex flex-col items-end gap-1">
+                    <StatusBadge
+                      label={getStatusLabel(requestItem.status)}
+                      className={getStatusBadgeClass(requestItem.status)}
+                    />
+                    {getStatusDescription(requestItem.status) ? (
+                      <p className="text-xs text-muted-foreground">
+                        {getStatusDescription(requestItem.status)}
+                      </p>
+                    ) : null}
                   </div>
                 </div>
-                <div className="flex flex-col items-end gap-1">
-                  <StatusBadge
-                    label={getStatusLabel(requestItem.status)}
-                    className={getStatusBadgeClass(requestItem.status)}
-                  />
-                  {getStatusDescription(requestItem.status) ? (
-                    <p className="text-xs text-muted-foreground">
-                      {getStatusDescription(requestItem.status)}
-                    </p>
-                  ) : null}
-                </div>
-              </div>
 
-              {/* Schedule comparison */}
-              <div className="grid gap-px bg-border sm:grid-cols-2">
-                <div className="bg-card px-4 py-3">
-                  <p className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                    {t('table.currentSchedule')}
-                  </p>
-                  <SchedulePanel
-                    days={requestItem.currentSchedule ?? []}
-                    locale={currentLocaleCode}
-                    emptyLabel={commonT('labels.notAssigned')}
-                  />
-                </div>
-                <div className="bg-card px-4 py-3">
-                  <p className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                    {t('table.requestedSchedule')}
-                  </p>
-                  <SchedulePanel
-                    days={
-                      (requestItem.days ??
-                        []) as OperationsScheduleAdjustmentDay[]
-                    }
-                    locale={currentLocaleCode}
-                    emptyLabel={commonT('labels.notAssigned')}
-                  />
+                {/* Schedule comparison */}
+                <div className="grid gap-px bg-border sm:grid-cols-2">
+                  <div className="bg-card px-4 py-3">
+                    <p className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                      {t('table.currentSchedule')}
+                    </p>
+                    <SchedulePanel
+                      days={requestItem.currentSchedule ?? []}
+                      locale={currentLocaleCode}
+                      emptyLabel={commonT('labels.notAssigned')}
+                    />
+                  </div>
+                  <div className="bg-card px-4 py-3">
+                    <p className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                      {t('table.requestedSchedule')}
+                    </p>
+                    <SchedulePanel
+                      days={
+                        (requestItem.days ??
+                          []) as OperationsScheduleAdjustmentDay[]
+                      }
+                      locale={currentLocaleCode}
+                      emptyLabel={commonT('labels.notAssigned')}
+                    />
+                  </div>
                 </div>
-              </div>
 
-              {/* Card footer */}
-              <div className="flex flex-wrap items-start justify-between gap-3 border-t bg-muted/20 px-4 py-2.5 text-sm">
-                <div className="flex items-center gap-1.5 text-muted-foreground">
-                  <Clock className="size-3.5 shrink-0" />
-                  <span className="font-medium">
-                    {commonT('labels.approver')}:
-                  </span>
-                  <span>
-                    {requestItem.approverName || commonT('labels.notAssigned')}
-                  </span>
-                </div>
-                {requestItem.approverNote ? (
-                  <div className="text-xs text-muted-foreground">
-                    <span className="font-medium">
-                      {commonT('labels.notes')}:
-                    </span>{' '}
-                    {requestItem.approverNote}
-                  </div>
-                ) : null}
-                {requestItem.reason ? (
-                  <div className="text-xs text-muted-foreground">
-                    <span className="font-medium">
-                      {commonT('labels.reason')}:
-                    </span>{' '}
-                    {requestItem.reason}
+                {/* Card footer */}
+                <div className="flex flex-wrap items-start justify-between gap-3 border-t bg-muted/20 px-4 py-2.5 text-sm">
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-1.5 text-muted-foreground">
+                      <Clock className="size-3.5 shrink-0" />
+                      <span className="font-medium">
+                        {commonT('labels.approver')}:
+                      </span>
+                      <span>
+                        {requestItem.approverName ||
+                          commonT('labels.notAssigned')}
+                      </span>
+                    </div>
+                    <div>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="cursor-pointer"
+                        onClick={() => openDetails(requestItem)}
+                      >
+                        <Eye className="size-4" />
+                        {t('actions.viewDetails')}
+                      </Button>
+                    </div>
                   </div>
-                ) : null}
+                  {requestItem.approverNote ? (
+                    <div className="text-xs text-muted-foreground">
+                      <span className="font-medium">
+                        {commonT('labels.notes')}:
+                      </span>{' '}
+                      {requestItem.approverNote}
+                    </div>
+                  ) : null}
+                  {requestItem.reason ? (
+                    <div className="text-xs text-muted-foreground">
+                      <span className="font-medium">
+                        {commonT('labels.reason')}:
+                      </span>{' '}
+                      {requestItem.reason}
+                    </div>
+                  ) : null}
+                </div>
               </div>
-            </div>
-          ))}
-        </div>
+            ))}
+          </div>
+        ) : (
+          <div className="overflow-x-auto rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{commonT('labels.collaborator')}</TableHead>
+                  <TableHead>{t('table.scope')}</TableHead>
+                  <TableHead>{commonT('labels.timeline')}</TableHead>
+                  <TableHead>{commonT('labels.approver')}</TableHead>
+                  <TableHead>{commonT('labels.status')}</TableHead>
+                  <TableHead className="text-right">
+                    {commonT('labels.actions')}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {requests.map((requestItem) => (
+                  <TableRow key={requestItem.id} className="hover:bg-muted/30">
+                    <TableCell className="font-medium">
+                      {requestItem.collaboratorName}
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="outline" className="text-xs">
+                        {getRequestScopeLabel(requestItem.requestScope)}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      {formatDateRange(
+                        requestItem.effectiveStartDate,
+                        requestItem.effectiveEndDate
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      {requestItem.approverName ||
+                        commonT('labels.notAssigned')}
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge
+                        label={getStatusLabel(requestItem.status)}
+                        className={getStatusBadgeClass(requestItem.status)}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex justify-end">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="cursor-pointer"
+                          onClick={() => openDetails(requestItem)}
+                        >
+                          <Eye className="size-4" />
+                          {t('actions.viewDetails')}
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )
       ) : (
         <EmptyState
           icon={<CalendarRange className="size-12" />}
@@ -528,6 +680,18 @@ export default function OperationsScheduleAdjustmentsPage() {
         />
       )}
 
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={requestsResponse?.total ?? 0}
+        pageSizeOptions={[12, 24, 48]}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(1);
+        }}
+      />
+
       <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
         <SheetContent className="w-full overflow-y-auto sm:max-w-3xl">
           <SheetHeader>
@@ -722,6 +886,107 @@ export default function OperationsScheduleAdjustmentsPage() {
           />
         </SheetContent>
       </Sheet>
+
+      <Sheet open={isDetailsOpen} onOpenChange={setIsDetailsOpen}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-3xl">
+          <SheetHeader>
+            <SheetTitle>{t('details.title')}</SheetTitle>
+            <SheetDescription>{t('details.description')}</SheetDescription>
+          </SheetHeader>
+
+          {selectedRequest ? (
+            <div className="mt-6 space-y-5 px-4 pb-8">
+              <div className="rounded-lg border bg-muted/20 p-4">
+                <div className="flex flex-wrap items-start justify-between gap-3">
+                  <div>
+                    <div className="text-lg font-semibold">
+                      {selectedRequest.collaboratorName}
+                    </div>
+                    <div className="mt-1 text-sm text-muted-foreground">
+                      {getRequestScopeLabel(selectedRequest.requestScope)}
+                    </div>
+                  </div>
+                  <StatusBadge
+                    label={getStatusLabel(selectedRequest.status)}
+                    className={getStatusBadgeClass(selectedRequest.status)}
+                  />
+                </div>
+              </div>
+
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div>
+                  <div className="text-xs font-medium uppercase text-muted-foreground">
+                    {commonT('labels.timeline')}
+                  </div>
+                  <div className="mt-1 text-sm">
+                    {formatDateRange(
+                      selectedRequest.effectiveStartDate,
+                      selectedRequest.effectiveEndDate
+                    )}
+                  </div>
+                </div>
+                <div>
+                  <div className="text-xs font-medium uppercase text-muted-foreground">
+                    {commonT('labels.approver')}
+                  </div>
+                  <div className="mt-1 text-sm">
+                    {selectedRequest.approverName ||
+                      commonT('labels.notAssigned')}
+                  </div>
+                </div>
+              </div>
+
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div>
+                  <div className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                    {t('table.currentSchedule')}
+                  </div>
+                  <div className="rounded-lg border p-3">
+                    <SchedulePanel
+                      days={selectedRequest.currentSchedule ?? []}
+                      locale={currentLocaleCode}
+                      emptyLabel={commonT('labels.notAssigned')}
+                    />
+                  </div>
+                </div>
+                <div>
+                  <div className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                    {t('table.requestedSchedule')}
+                  </div>
+                  <div className="rounded-lg border p-3">
+                    <SchedulePanel
+                      days={
+                        (selectedRequest.days ??
+                          []) as OperationsScheduleAdjustmentDay[]
+                      }
+                      locale={currentLocaleCode}
+                      emptyLabel={commonT('labels.notAssigned')}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <div className="text-xs font-medium uppercase text-muted-foreground">
+                  {commonT('labels.reason')}
+                </div>
+                <div className="mt-1 rounded-lg border p-3 text-sm">
+                  {selectedRequest.reason || commonT('labels.noNotes')}
+                </div>
+              </div>
+
+              <div>
+                <div className="text-xs font-medium uppercase text-muted-foreground">
+                  {commonT('labels.notes')}
+                </div>
+                <div className="mt-1 rounded-lg border p-3 text-sm">
+                  {selectedRequest.approverNote || commonT('labels.noNotes')}
+                </div>
+              </div>
+            </div>
+          ) : null}
+        </SheetContent>
+      </Sheet>
     </Page>
   );
 }