@hed-hog/operations 0.0.303 → 0.0.304

package/hedhog/frontend/app/time-off/page.tsx.ejs

@@ -2,6 +2,7 @@
 
 import { EmptyState, Page, SearchBar } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
+import { FormActions } from '@/components/ui/form-actions';
 import { Input } from '@/components/ui/input';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
@@ -29,19 +30,19 @@ import {
 import { Textarea } from '@/components/ui/textarea';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { Palmtree, Plus } from 'lucide-react';
-import { useMemo, useState } from '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 } from '../_lib/types';
-import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
 import {
   formatDateRange,
   formatEnumLabel,
   getStatusBadgeClass,
 } from '../_lib/utils/format';
+import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
 
 type TimeOffFormState = {
   requestType: string;
@@ -59,50 +60,71 @@ const emptyForm: TimeOffFormState = {
   reason: '',
 };
 
-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 [isSheetOpen, setIsSheetOpen] = useState(false);
-  const [form, setForm] = useState<TimeOffFormState>(emptyForm);
-
-  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);
-  };
+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 [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [form, setForm] = useState<TimeOffFormState>(emptyForm);
 
-  const { data: requests = [], refetch } = useQuery<OperationsTimeOffRequest[]>({
-    queryKey: ['operations-time-off', currentLocaleCode],
-    enabled: access.isCollaborator,
-    queryFn: () =>
-      fetchOperations<OperationsTimeOffRequest[]>(request, '/operations/time-off'),
-  });
+  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: requests = [], refetch } = useQuery<OperationsTimeOffRequest[]>(
+    {
+      queryKey: ['operations-time-off', currentLocaleCode],
+      enabled: access.isCollaborator,
+      queryFn: () =>
+        fetchOperations<OperationsTimeOffRequest[]>(
+          request,
+          '/operations/time-off'
+        ),
+    }
+  );
 
   const filteredRows = useMemo(
     () =>
       requests.filter((item) => {
         const matchesSearch = !search.trim()
           ? true
-          : [item.collaboratorName, item.approverName, item.reason, item.requestType]
+          : [
+              item.collaboratorName,
+              item.approverName,
+              item.reason,
+              item.requestType,
+            ]
               .filter(Boolean)
               .some((value) =>
-                String(value).toLowerCase().includes(search.trim().toLowerCase())
+                String(value)
+                  .toLowerCase()
+                  .includes(search.trim().toLowerCase())
               );
         const matchesStatus =
           statusFilter === 'all' ? true : item.status === statusFilter;
@@ -115,16 +137,19 @@ export default function OperationsTimeOffPage() {
     {
       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
@@ -172,6 +197,8 @@ export default function OperationsTimeOffPage() {
         }
       />
 
+      <KpiCardsGrid items={cards} columns={3} />
+
       <SearchBar
         searchQuery={search}
         onSearchChange={setSearch}
@@ -184,18 +211,16 @@ export default function OperationsTimeOffPage() {
             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') },
-            ],
+            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="overflow-x-auto rounded-md border">
           <Table>
@@ -212,12 +237,17 @@ export default function OperationsTimeOffPage() {
             </TableHeader>
             <TableBody>
               {filteredRows.map((requestItem) => (
-                <TableRow key={requestItem.id}>
+                <TableRow key={requestItem.id} className="hover:bg-muted/30">
                   <TableCell>{requestItem.collaboratorName}</TableCell>
-                  <TableCell>{getRequestTypeLabel(requestItem.requestType)}</TableCell>
+                  <TableCell>
+                    {getRequestTypeLabel(requestItem.requestType)}
+                  </TableCell>
                   <TableCell>
                     <div>
-                      {formatDateRange(requestItem.startDate, requestItem.endDate)}
+                      {formatDateRange(
+                        requestItem.startDate,
+                        requestItem.endDate
+                      )}
                     </div>
                     <div className="text-xs text-muted-foreground">
                       {requestItem.totalDays ?? 0} {commonT('labels.days')}
@@ -227,10 +257,17 @@ export default function OperationsTimeOffPage() {
                     {requestItem.approverName || commonT('labels.notAssigned')}
                   </TableCell>
                   <TableCell>
-                    <StatusBadge
-                      label={getStatusLabel(requestItem.status)}
-                      className={getStatusBadgeClass(requestItem.status)}
-                    />
+                    <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')}
@@ -248,8 +285,16 @@ export default function OperationsTimeOffPage() {
           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()}
+          actionLabel={
+            access.isCollaborator
+              ? commonT('actions.create')
+              : commonT('actions.refresh')
+          }
+          onAction={
+            access.isCollaborator
+              ? () => setIsSheetOpen(true)
+              : () => void refetch()
+          }
         />
       )}
 
@@ -260,39 +305,54 @@ export default function OperationsTimeOffPage() {
             <SheetDescription>{t('sheet.description')}</SheetDescription>
           </SheetHeader>
 
-          <div className="mt-6 grid gap-4">
+          <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>
+              <label className="text-sm font-medium">
+                {commonT('labels.requestType')}
+              </label>
               <Select
                 value={form.requestType}
                 onValueChange={(value) =>
                   setForm((current) => ({ ...current, requestType: value }))
                 }
               >
-                <SelectTrigger>
-                  <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>
+                <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>
+                <label className="text-sm font-medium">
+                  {commonT('labels.startDate')}
+                </label>
                 <Input
                   type="date"
                   value={form.startDate}
@@ -305,7 +365,9 @@ export default function OperationsTimeOffPage() {
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium">{commonT('labels.endDate')}</label>
+                <label className="text-sm font-medium">
+                  {commonT('labels.endDate')}
+                </label>
                 <Input
                   type="date"
                   value={form.endDate}
@@ -320,7 +382,9 @@ export default function OperationsTimeOffPage() {
             </div>
 
             <div className="space-y-2">
-              <label className="text-sm font-medium">{commonT('labels.days')}</label>
+              <label className="text-sm font-medium">
+                {commonT('labels.days')}
+              </label>
               <Input
                 type="number"
                 step="0.5"
@@ -335,18 +399,30 @@ export default function OperationsTimeOffPage() {
             </div>
 
             <div className="space-y-2">
-              <label className="text-sm font-medium">{commonT('labels.reason')}</label>
+              <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 }))
+                  setForm((current) => ({
+                    ...current,
+                    reason: event.target.value,
+                  }))
                 }
               />
             </div>
-
-            <Button onClick={() => void onSubmit()}>{commonT('actions.save')}</Button>
           </div>
+
+          <FormActions
+            sheet
+            cancelLabel={commonT('actions.cancel')}
+            onCancel={() => setIsSheetOpen(false)}
+            onSubmit={() => void onSubmit()}
+            submitLabel={commonT('actions.save')}
+          />
         </SheetContent>
       </Sheet>
     </Page>