@hed-hog/operations 0.0.328 → 0.0.329

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/time-off/page.tsx

@@ -1,707 +0,0 @@
-'use client';
-
-import {
-  EmptyState,
-  Page,
-  PaginationFooter,
-  SearchBar,
-} from '@/components/entity-list';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { FormActions } from '@/components/ui/form-actions';
-import { Input } from '@/components/ui/input';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-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 { Eye, LayoutGrid, List, Palmtree, Plus } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
-import { OperationsHeader } from '../_components/operations-header';
-import { StatusBadge } from '../_components/status-badge';
-import { fetchOperations, mutateOperations } from '../_lib/api';
-import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
-import type {
-  OperationsTimeOffRequest,
-  PaginatedResponse,
-} from '../_lib/types';
-import {
-  formatDateRange,
-  formatEnumLabel,
-  getStatusBadgeClass,
-} from '../_lib/utils/format';
-import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
-
-type TimeOffFormState = {
-  requestType: string;
-  startDate: string;
-  endDate: string;
-  reason: string;
-};
-
-const emptyForm: TimeOffFormState = {
-  requestType: 'vacation',
-  startDate: '',
-  endDate: '',
-  reason: '',
-};
-
-function calculateTotalDays(startDate?: string, endDate?: string) {
-  if (!startDate || !endDate) return '';
-
-  const start = new Date(`${startDate}T00:00:00`);
-  const end = new Date(`${endDate}T00:00:00`);
-
-  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
-    return '';
-  }
-
-  const diffInMs = end.getTime() - start.getTime();
-  if (diffInMs < 0) return '';
-
-  return String(Math.floor(diffInMs / 86400000) + 1);
-}
-
-function formatDateLabel(value?: string | null) {
-  if (!value) return '—';
-
-  const normalizedValue = value.includes('T') ? value : `${value}T00:00:00`;
-  const date = new Date(normalizedValue);
-  if (Number.isNaN(date.getTime())) return value;
-
-  return new Intl.DateTimeFormat(undefined, {
-    day: '2-digit',
-    month: 'short',
-    year: 'numeric',
-  }).format(date);
-}
-
-export default function OperationsTimeOffPage() {
-  const t = useTranslations('operations.TimeOffPage');
-  const commonT = useTranslations('operations.Common');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
-  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 'table';
-    const saved = window.localStorage.getItem('operations-time-off-view-mode');
-    return saved === 'cards' ? 'cards' : 'table';
-  });
-  const [isSheetOpen, setIsSheetOpen] = useState(false);
-  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-  const [selectedRequest, setSelectedRequest] =
-    useState<OperationsTimeOffRequest | null>(null);
-  const [form, setForm] = useState<TimeOffFormState>(emptyForm);
-  const calculatedTotalDays = useMemo(
-    () => calculateTotalDays(form.startDate, form.endDate),
-    [form.endDate, form.startDate]
-  );
-
-  const getRequestTypeLabel = (value?: string | null) => {
-    if (!value) {
-      return '-';
-    }
-
-    const key = `options.requestTypes.${value}`;
-    return t.has(key) ? t(key) : formatEnumLabel(value);
-  };
-
-  const getStatusLabel = (value?: string | null) => {
-    if (!value) {
-      return '-';
-    }
-
-    const key = `options.statuses.${value}`;
-    return t.has(key) ? t(key) : formatEnumLabel(value);
-  };
-
-  const getStatusDescription = (value?: string | null) => {
-    if (!value) {
-      return null;
-    }
-
-    const key = `statusHelp.${value}`;
-    return t.has(key) ? t(key) : null;
-  };
-
-  const { data: requestsResponse, refetch } = useQuery<
-    PaginatedResponse<OperationsTimeOffRequest>
-  >({
-    queryKey: [
-      'operations-time-off',
-      currentLocaleCode,
-      search,
-      statusFilter,
-      page,
-      pageSize,
-    ],
-    enabled: access.isCollaborator,
-    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<OperationsTimeOffRequest>>(
-        request,
-        `/operations/time-off?${params.toString()}`
-      );
-    },
-    placeholderData: (previous) => previous,
-  });
-
-  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-time-off-view-mode', value);
-    }
-  };
-
-  const cards = [
-    {
-      key: 'submitted',
-      title: t('cards.submitted'),
-      description: t('cards.submittedDescription'),
-      value: requests.filter((item) => item.status === 'submitted').length,
-    },
-    {
-      key: 'approved',
-      title: t('cards.approved'),
-      description: t('cards.approvedDescription'),
-      value: requests.filter((item) => item.status === 'approved').length,
-    },
-    {
-      key: 'days',
-      title: t('cards.days'),
-      description: t('cards.daysDescription'),
-      value: requests.reduce(
-        (total, item) => total + Number(item.totalDays ?? 0),
-        0
-      ),
-    },
-  ];
-
-  const onSubmit = async () => {
-    if (!form.startDate || !form.endDate) {
-      showToastHandler?.('error', t('messages.requiredFields'));
-      return;
-    }
-
-    try {
-      await mutateOperations(request, '/operations/time-off', 'POST', {
-        requestType: form.requestType,
-        startDate: form.startDate,
-        endDate: form.endDate,
-        totalDays: parseNumberInput(calculatedTotalDays),
-        reason: trimToNull(form.reason),
-      });
-
-      showToastHandler?.('success', t('messages.saveSuccess'));
-      setIsSheetOpen(false);
-      setForm(emptyForm);
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.saveError'));
-    }
-  };
-
-  const openDetails = (requestItem: OperationsTimeOffRequest) => {
-    setSelectedRequest(requestItem);
-    setIsDetailsOpen(true);
-  };
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          access.isCollaborator ? (
-            <Button size="sm" onClick={() => setIsSheetOpen(true)}>
-              <Plus className="size-4" />
-              {commonT('actions.create')}
-            </Button>
-          ) : undefined
-        }
-      />
-
-      <KpiCardsGrid items={cards} columns={3} />
-
-      <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="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
-            {requests.map((requestItem) => (
-              <Card
-                key={requestItem.id}
-                className="overflow-hidden border-border/60 py-0 shadow-sm"
-              >
-                <CardContent className="space-y-3 p-4">
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="min-w-0">
-                      <div className="truncate font-semibold">
-                        {requestItem.collaboratorName}
-                      </div>
-                      <div className="truncate text-xs text-muted-foreground">
-                        {getRequestTypeLabel(requestItem.requestType)} &bull;{' '}
-                        {formatDateRange(
-                          requestItem.startDate,
-                          requestItem.endDate
-                        )}
-                      </div>
-                    </div>
-                    <StatusBadge
-                      label={getStatusLabel(requestItem.status)}
-                      className={getStatusBadgeClass(requestItem.status)}
-                    />
-                  </div>
-                  <div className="grid grid-cols-2 gap-2 text-sm text-muted-foreground">
-                    <div>
-                      <span className="font-medium text-foreground">
-                        {commonT('labels.days')}:
-                      </span>{' '}
-                      {requestItem.totalDays ?? 0}
-                    </div>
-                    <div>
-                      <span className="font-medium text-foreground">
-                        {commonT('labels.approver')}:
-                      </span>{' '}
-                      {requestItem.approverName ||
-                        commonT('labels.notAssigned')}
-                    </div>
-                  </div>
-                  {requestItem.reason ? (
-                    <p className="line-clamp-2 text-sm text-muted-foreground">
-                      {requestItem.reason}
-                    </p>
-                  ) : null}
-                  <div className="flex justify-end border-t border-border/60 pt-3">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="cursor-pointer"
-                      onClick={() => openDetails(requestItem)}
-                    >
-                      <Eye className="size-4" />
-                      {t('actions.viewDetails')}
-                    </Button>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        ) : (
-          <div className="overflow-x-auto rounded-md border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{commonT('labels.collaborator')}</TableHead>
-                  <TableHead>{commonT('labels.requestType')}</TableHead>
-                  <TableHead>{commonT('labels.timeline')}</TableHead>
-                  <TableHead>{commonT('labels.approver')}</TableHead>
-                  <TableHead>{commonT('labels.status')}</TableHead>
-                  <TableHead>{commonT('labels.reason')}</TableHead>
-                  <TableHead>{commonT('labels.notes')}</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>{requestItem.collaboratorName}</TableCell>
-                    <TableCell>
-                      {getRequestTypeLabel(requestItem.requestType)}
-                    </TableCell>
-                    <TableCell>
-                      <div>
-                        {formatDateRange(
-                          requestItem.startDate,
-                          requestItem.endDate
-                        )}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {requestItem.totalDays ?? 0} {commonT('labels.days')}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      {requestItem.approverName ||
-                        commonT('labels.notAssigned')}
-                    </TableCell>
-                    <TableCell>
-                      <div className="space-y-1">
-                        <StatusBadge
-                          label={getStatusLabel(requestItem.status)}
-                          className={getStatusBadgeClass(requestItem.status)}
-                        />
-                        {getStatusDescription(requestItem.status) ? (
-                          <p className="max-w-40 text-xs text-muted-foreground">
-                            {getStatusDescription(requestItem.status)}
-                          </p>
-                        ) : null}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      {requestItem.reason || commonT('labels.noNotes')}
-                    </TableCell>
-                    <TableCell>
-                      {requestItem.approverNote || commonT('labels.noNotes')}
-                    </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={<Palmtree className="size-12" />}
-          title={commonT('states.emptyTitle')}
-          description={t('emptyDescription')}
-          actionLabel={
-            access.isCollaborator
-              ? commonT('actions.create')
-              : commonT('actions.refresh')
-          }
-          onAction={
-            access.isCollaborator
-              ? () => setIsSheetOpen(true)
-              : () => void refetch()
-          }
-        />
-      )}
-
-      <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-xl">
-          <SheetHeader>
-            <SheetTitle>{t('sheet.title')}</SheetTitle>
-            <SheetDescription>{t('sheet.description')}</SheetDescription>
-          </SheetHeader>
-
-          <div className="mt-6 grid gap-4 px-4 pb-20">
-            <div className="rounded-lg border bg-muted/30 p-3 text-sm">
-              <div className="font-medium text-foreground">
-                {t('sheet.helperTitle')}
-              </div>
-              <p className="mt-1 text-muted-foreground">
-                {t('sheet.helperDescription')}
-              </p>
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium">
-                {commonT('labels.requestType')}
-              </label>
-              <Select
-                value={form.requestType}
-                onValueChange={(value) =>
-                  setForm((current) => ({ ...current, requestType: value }))
-                }
-              >
-                <SelectTrigger className="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="vacation">
-                    {getRequestTypeLabel('vacation')}
-                  </SelectItem>
-                  <SelectItem value="personal_time">
-                    {getRequestTypeLabel('personal_time')}
-                  </SelectItem>
-                  <SelectItem value="sick_leave">
-                    {getRequestTypeLabel('sick_leave')}
-                  </SelectItem>
-                  <SelectItem value="unpaid_leave">
-                    {getRequestTypeLabel('unpaid_leave')}
-                  </SelectItem>
-                  <SelectItem value="other">
-                    {getRequestTypeLabel('other')}
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="grid gap-4 md:grid-cols-2">
-              <div className="space-y-2">
-                <label className="text-sm font-medium">
-                  {commonT('labels.startDate')}
-                </label>
-                <Input
-                  type="date"
-                  value={form.startDate}
-                  onChange={(event) =>
-                    setForm((current) => ({
-                      ...current,
-                      startDate: event.target.value,
-                    }))
-                  }
-                />
-              </div>
-              <div className="space-y-2">
-                <label className="text-sm font-medium">
-                  {commonT('labels.endDate')}
-                </label>
-                <Input
-                  type="date"
-                  value={form.endDate}
-                  onChange={(event) =>
-                    setForm((current) => ({
-                      ...current,
-                      endDate: event.target.value,
-                    }))
-                  }
-                />
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium">
-                {commonT('labels.days')}
-              </label>
-              <Input
-                type="number"
-                step="0.5"
-                value={calculatedTotalDays}
-                readOnly
-                className="bg-muted/40"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium">
-                {commonT('labels.reason')}
-              </label>
-              <Textarea
-                rows={4}
-                placeholder={t('sheet.reasonPlaceholder')}
-                value={form.reason}
-                onChange={(event) =>
-                  setForm((current) => ({
-                    ...current,
-                    reason: event.target.value,
-                  }))
-                }
-              />
-            </div>
-          </div>
-
-          <FormActions
-            sheet
-            cancelLabel={commonT('actions.cancel')}
-            onCancel={() => setIsSheetOpen(false)}
-            onSubmit={() => void onSubmit()}
-            submitLabel={commonT('actions.save')}
-          />
-        </SheetContent>
-      </Sheet>
-
-      <Sheet open={isDetailsOpen} onOpenChange={setIsDetailsOpen}>
-        <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
-          <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="text-lg font-semibold">
-                  {selectedRequest.collaboratorName}
-                </div>
-                <div className="mt-1 text-sm text-muted-foreground">
-                  {getRequestTypeLabel(selectedRequest.requestType)}
-                </div>
-              </div>
-
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div>
-                  <div className="text-xs font-medium uppercase text-muted-foreground">
-                    {commonT('labels.startDate')}
-                  </div>
-                  <div className="mt-1 text-sm">
-                    {formatDateLabel(selectedRequest.startDate)}
-                  </div>
-                </div>
-                <div>
-                  <div className="text-xs font-medium uppercase text-muted-foreground">
-                    {commonT('labels.endDate')}
-                  </div>
-                  <div className="mt-1 text-sm">
-                    {formatDateLabel(selectedRequest.endDate)}
-                  </div>
-                </div>
-                <div>
-                  <div className="text-xs font-medium uppercase text-muted-foreground">
-                    {commonT('labels.days')}
-                  </div>
-                  <div className="mt-1 text-sm">
-                    {selectedRequest.totalDays ?? 0}
-                  </div>
-                </div>
-                <div>
-                  <div className="text-xs font-medium uppercase text-muted-foreground">
-                    {commonT('labels.status')}
-                  </div>
-                  <div className="mt-1">
-                    <StatusBadge
-                      label={getStatusLabel(selectedRequest.status)}
-                      className={getStatusBadgeClass(selectedRequest.status)}
-                    />
-                  </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="text-xs font-medium uppercase text-muted-foreground">
-                    {t('details.period')}
-                  </div>
-                  <div className="mt-1 text-sm">
-                    {formatDateRange(
-                      selectedRequest.startDate,
-                      selectedRequest.endDate
-                    )}
-                  </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>
-  );
-}