@hed-hog/operations 0.0.318 → 0.0.321

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

@@ -36,6 +36,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
+  CalendarDays,
   CalendarOff,
   Check,
   ClipboardCheck,
@@ -48,7 +49,11 @@ import {
   X,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import {
+  OperationsCalendarView,
+  type OperationsCalendarItem,
+} from '../_components/operations-calendar-view';
 import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
 import { fetchOperations } from '../_lib/api';
@@ -56,7 +61,6 @@ import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import type { OperationsApproval, PaginatedResponse } from '../_lib/types';
 import {
   formatDate,
-  formatDateRange,
   formatDateTime,
   formatEnumLabel,
   formatHours,
@@ -217,13 +221,25 @@ export default function OperationsApprovalsPage() {
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [targetFilter, setTargetFilter] = useState('all');
+  const [dateFrom, setDateFrom] = useState('');
+  const [dateTo, setDateTo] = useState('');
+  const [calendarYear, setCalendarYear] = useState(() =>
+    new Date().getFullYear()
+  );
+  const [calendarMonth, setCalendarMonth] = useState(
+    () => new Date().getMonth() + 1
+  );
   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-approvals-view-mode');
-    return saved === 'cards' ? 'cards' : 'table';
-  });
+  const [viewMode, setViewMode] = useState<'table' | 'cards' | 'calendar'>(
+    () => {
+      if (typeof window === 'undefined') return 'table';
+      const saved = window.localStorage.getItem(
+        'operations-approvals-view-mode'
+      );
+      return saved === 'cards' || saved === 'calendar' ? saved : 'table';
+    }
+  );
   const [decisionNote, setDecisionNote] = useState('');
   const [pendingDecision, setPendingDecision] =
     useState<PendingDecision | null>(null);
@@ -297,19 +313,16 @@ export default function OperationsApprovalsPage() {
   const getTargetLabel = (approval: OperationsApproval) => {
     switch (approval.targetType) {
       case 'timesheet':
-        return `${getTargetTypeLabel('timesheet')} ${formatDateRange(
-          approval.timesheetWeekStartDate,
-          approval.timesheetWeekEndDate
+        return `${getTargetTypeLabel('timesheet')} ${formatDate(
+          approval.timesheetWeekStartDate
         )}`;
       case 'time_off_request':
-        return `${getTimeOffTypeLabel(approval.timeOffType)} ${formatDateRange(
-          approval.timeOffStartDate,
-          approval.timeOffEndDate
+        return `${getTimeOffTypeLabel(approval.timeOffType)} ${formatDate(
+          approval.timeOffStartDate
         )}`;
       case 'schedule_adjustment_request':
-        return `${getScheduleScopeLabel(approval.scheduleRequestScope)} ${formatDateRange(
-          approval.scheduleStartDate,
-          approval.scheduleEndDate
+        return `${getScheduleScopeLabel(approval.scheduleRequestScope)} ${formatDate(
+          approval.scheduleStartDate
         )}`;
       default:
         return getTargetTypeLabel(approval.targetType);
@@ -325,6 +338,8 @@ export default function OperationsApprovalsPage() {
       search,
       statusFilter,
       targetFilter,
+      dateFrom,
+      dateTo,
       page,
       pageSize,
     ],
@@ -337,6 +352,43 @@ export default function OperationsApprovalsPage() {
       if (search.trim()) params.set('search', search.trim());
       if (statusFilter !== 'all') params.set('status', statusFilter);
       if (targetFilter !== 'all') params.set('targetType', targetFilter);
+      if (dateFrom) params.set('dateFrom', dateFrom);
+      if (dateTo) params.set('dateTo', dateTo);
+      return fetchOperations<PaginatedResponse<OperationsApproval>>(
+        request,
+        `/operations/approvals?${params.toString()}`
+      );
+    },
+    placeholderData: (previous) => previous,
+  });
+
+  const calendarDateFrom = `${String(calendarYear)}-${String(calendarMonth).padStart(2, '0')}-01`;
+  const calendarDateTo = (() => {
+    const lastDay = new Date(calendarYear, calendarMonth, 0).getDate();
+    return `${String(calendarYear)}-${String(calendarMonth).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`;
+  })();
+
+  const { data: calendarApprovalsResponse } = useQuery<
+    PaginatedResponse<OperationsApproval>
+  >({
+    queryKey: [
+      'operations-approvals-calendar',
+      currentLocaleCode,
+      search,
+      statusFilter,
+      calendarYear,
+      calendarMonth,
+    ],
+    enabled: access.isSupervisor && viewMode === 'calendar',
+    queryFn: () => {
+      const params = new URLSearchParams({
+        sortField: 'submittedAt',
+        sortOrder: 'desc',
+        dateFrom: calendarDateFrom,
+        dateTo: calendarDateTo,
+      });
+      if (search.trim()) params.set('search', search.trim());
+      if (statusFilter !== 'all') params.set('status', statusFilter);
       return fetchOperations<PaginatedResponse<OperationsApproval>>(
         request,
         `/operations/approvals?${params.toString()}`
@@ -346,10 +398,56 @@ export default function OperationsApprovalsPage() {
   });
 
   const approvals = approvalsResponse?.data ?? [];
+  const calendarApprovals = calendarApprovalsResponse?.data ?? [];
+
+  const buildCalendarItem = (approval: OperationsApproval) => ({
+    id: `approval-${approval.id}`,
+    date:
+      approval.targetType === 'timesheet'
+        ? String(approval.timesheetWeekStartDate ?? '').match(
+            /(\d{4}-\d{2}-\d{2})/
+          )?.[1] ||
+          approval.submittedAt?.slice(0, 10) ||
+          ''
+        : approval.targetType === 'time_off_request'
+          ? String(approval.timeOffStartDate ?? '').match(
+              /(\d{4}-\d{2}-\d{2})/
+            )?.[1] ||
+            approval.submittedAt?.slice(0, 10) ||
+            ''
+          : String(approval.scheduleStartDate ?? '').match(
+              /(\d{4}-\d{2}-\d{2})/
+            )?.[1] ||
+            approval.submittedAt?.slice(0, 10) ||
+            '',
+    title: approval.requesterName,
+    subtitle: getTargetLabel(approval),
+    kind: approval.targetType,
+    meta:
+      approval.status === 'pending'
+        ? formatDateTime(approval.submittedAt)
+        : formatDateTime(approval.decidedAt),
+    statusLabel: getStatusLabel(approval.status),
+    badgeClassName: getStatusBadgeClass(approval.status),
+  });
+
+  const calendarItems = useMemo<OperationsCalendarItem[]>(
+    () =>
+      (viewMode === 'calendar' ? calendarApprovals : approvals).map(
+        buildCalendarItem
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [approvals, calendarApprovals, viewMode]
+  );
+
+  const calendarApprovalById = useMemo(
+    () => new Map(calendarApprovals.map((a) => [`approval-${a.id}`, a])),
+    [calendarApprovals]
+  );
 
   const handleViewModeChange = (value: string) => {
-    if (value !== 'table' && value !== 'cards') return;
-    setViewMode(value as 'table' | 'cards');
+    if (value !== 'table' && value !== 'cards' && value !== 'calendar') return;
+    setViewMode(value as 'table' | 'cards' | 'calendar');
     if (typeof window !== 'undefined') {
       window.localStorage.setItem('operations-approvals-view-mode', value);
     }
@@ -513,6 +611,26 @@ export default function OperationsApprovalsPage() {
                   },
                 ],
               },
+              {
+                id: 'dateFrom',
+                type: 'date',
+                value: dateFrom,
+                onChange: (value) => {
+                  setDateFrom(value);
+                  setPage(1);
+                },
+                label: commonT('filters.dateFrom'),
+              },
+              {
+                id: 'dateTo',
+                type: 'date',
+                value: dateTo,
+                onChange: (value) => {
+                  setDateTo(value);
+                  setPage(1);
+                },
+                label: commonT('filters.dateTo'),
+              },
             ]}
           />
         </div>
@@ -536,12 +654,37 @@ export default function OperationsApprovalsPage() {
               <LayoutGrid className="h-4 w-4" />
               <span className="hidden sm:inline">{t('viewModeCards')}</span>
             </ToggleGroupItem>
+            <ToggleGroupItem value="calendar" className="gap-1.5 px-2.5">
+              <CalendarDays className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeCalendar')}</span>
+            </ToggleGroupItem>
           </ToggleGroup>
         </div>
       </div>
 
-      {approvals.length > 0 ? (
-        viewMode === 'cards' ? (
+      {(viewMode === 'calendar' ? true : approvals.length > 0) ? (
+        viewMode === 'calendar' ? (
+          <OperationsCalendarView
+            locale={currentLocaleCode}
+            items={calendarItems.filter((item) => item.date)}
+            emptyLabel={t('emptyDescription')}
+            actionLabel={t('actions.viewDetails')}
+            onMonthChange={(year, month) => {
+              setCalendarYear(year);
+              setCalendarMonth(month);
+            }}
+            onDateSelect={(_date, items) => {
+              const approval = calendarApprovalById.get(String(items[0]?.id));
+              if (approval) void openDetails(approval);
+            }}
+            onOpenItem={(item) => {
+              const approval = calendarApprovalById.get(String(item.id));
+              if (approval) {
+                void openDetails(approval);
+              }
+            }}
+          />
+        ) : viewMode === 'cards' ? (
           <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
             {approvals.map((approval) => (
               <Card
@@ -792,19 +935,20 @@ export default function OperationsApprovalsPage() {
                       </span>
                       <span className="text-sm text-muted-foreground">
                         {selectedApproval.targetType === 'timesheet'
-                          ? formatDateRange(
-                              selectedApproval.timesheetWeekStartDate,
-                              selectedApproval.timesheetWeekEndDate
-                            )
+                          ? formatDate(selectedApproval.timesheetWeekStartDate)
                           : selectedApproval.targetType === 'time_off_request'
-                            ? formatDateRange(
-                                selectedApproval.timeOffStartDate,
-                                selectedApproval.timeOffEndDate
-                              )
-                            : formatDateRange(
-                                selectedApproval.scheduleStartDate,
-                                selectedApproval.scheduleEndDate
-                              )}
+                            ? [
+                                formatDate(selectedApproval.timeOffStartDate),
+                                formatDate(selectedApproval.timeOffEndDate),
+                              ]
+                                .filter(Boolean)
+                                .join(' – ')
+                            : [
+                                formatDate(selectedApproval.scheduleStartDate),
+                                formatDate(selectedApproval.scheduleEndDate),
+                              ]
+                                .filter(Boolean)
+                                .join(' – ')}
                       </span>
                     </div>
                   </div>
@@ -863,10 +1007,7 @@ export default function OperationsApprovalsPage() {
                         {t('details.period')}
                       </div>
                       <div className="mt-1 text-sm">
-                        {formatDateRange(
-                          selectedApproval.timesheetWeekStartDate,
-                          selectedApproval.timesheetWeekEndDate
-                        )}
+                        {formatDate(selectedApproval.timesheetWeekStartDate)}
                       </div>
                     </div>
                     <div>
@@ -949,15 +1090,17 @@ export default function OperationsApprovalsPage() {
 
               {selectedApproval.targetType === 'time_off_request' ? (
                 <div className="grid gap-4 sm:grid-cols-2">
-                  <div>
+                  <div className="sm:col-span-2">
                     <div className="text-xs font-medium uppercase text-muted-foreground">
                       {t('details.period')}
                     </div>
                     <div className="mt-1 text-sm">
-                      {formatDateRange(
-                        selectedApproval.timeOffStartDate,
-                        selectedApproval.timeOffEndDate
-                      )}
+                      {[
+                        formatDate(selectedApproval.timeOffStartDate),
+                        formatDate(selectedApproval.timeOffEndDate),
+                      ]
+                        .filter(Boolean)
+                        .join(' – ') || '—'}
                     </div>
                   </div>
                   <div>
@@ -983,15 +1126,17 @@ export default function OperationsApprovalsPage() {
               {selectedApproval.targetType === 'schedule_adjustment_request' ? (
                 <>
                   <div className="grid gap-4 sm:grid-cols-2">
-                    <div>
+                    <div className="sm:col-span-2">
                       <div className="text-xs font-medium uppercase text-muted-foreground">
                         {t('details.period')}
                       </div>
                       <div className="mt-1 text-sm">
-                        {formatDateRange(
-                          selectedApproval.scheduleStartDate,
-                          selectedApproval.scheduleEndDate
-                        )}
+                        {[
+                          formatDate(selectedApproval.scheduleStartDate),
+                          formatDate(selectedApproval.scheduleEndDate),
+                        ]
+                          .filter(Boolean)
+                          .join(' – ') || '—'}
                       </div>
                     </div>
                     <div>

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

@@ -26,17 +26,26 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   CalendarDays,
   FileText,
+  Info,
   LayoutGrid,
   List,
   Pencil,
   Power,
+  TrendingUp,
   UserCheck,
   UserRound,
   Users,
+  Wallet,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
@@ -264,39 +273,140 @@ export default function OperationsCollaboratorsPage() {
   const collaborators = collaboratorsResponse?.data ?? [];
   const filteredRows = collaborators;
 
-  const statsCards = useMemo(
-    () => [
+  const statsCards = useMemo(() => {
+    const withTooltip = (description: string, tooltip: string) => (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="inline-flex cursor-default items-center gap-1">
+              {description}
+              <Info className="h-3 w-3 shrink-0 text-muted-foreground/60" />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="max-w-64 text-xs">
+            {tooltip}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+
+    return [
       {
         key: 'total',
         title: t('cards.total'),
-        description: t('cards.totalDescription'),
+        description: withTooltip(
+          t('cards.totalDescription'),
+          t('cards.totalTooltip')
+        ),
         value: collaboratorStats?.total ?? 0,
         icon: Users,
       },
       {
         key: 'active',
         title: t('cards.active'),
-        description: t('cards.activeDescription'),
+        description: withTooltip(
+          t('cards.activeDescription'),
+          t('cards.activeTooltip')
+        ),
         value: collaboratorStats?.active ?? 0,
         icon: UserCheck,
       },
       {
         key: 'onLeave',
         title: t('cards.onLeave'),
-        description: t('cards.onLeaveDescription'),
+        description: withTooltip(
+          t('cards.onLeaveDescription'),
+          t('cards.onLeaveTooltip')
+        ),
         value: collaboratorStats?.onLeave ?? 0,
         icon: CalendarDays,
       },
       {
         key: 'withContracts',
         title: t('cards.withContracts'),
-        description: t('cards.withContractsDescription'),
+        description: withTooltip(
+          t('cards.withContractsDescription'),
+          t('cards.withContractsTooltip')
+        ),
         value: collaboratorStats?.withContracts ?? 0,
         icon: FileText,
       },
-    ],
-    [collaboratorStats, t]
-  );
+      {
+        key: 'totalSalary',
+        title: t('cards.totalSalary'),
+        description: withTooltip(
+          t('cards.totalSalaryDescription'),
+          t('cards.totalSalaryTooltip')
+        ),
+        value: formatCurrency(
+          collaboratorStats?.totalSalary ?? 0,
+          getSettingValue,
+          currentLocaleCode
+        ),
+        icon: Wallet,
+        accentClassName: 'from-emerald-500/20 via-green-500/10 to-transparent',
+        iconContainerClassName:
+          'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400',
+      },
+      {
+        key: 'totalCosts',
+        title: t('cards.totalCosts'),
+        description: withTooltip(
+          t('cards.totalCostsDescription'),
+          t('cards.totalCostsTooltip')
+        ),
+        value: formatCurrency(
+          collaboratorStats?.totalCosts ?? 0,
+          getSettingValue,
+          currentLocaleCode
+        ),
+        icon: TrendingUp,
+        accentClassName: 'from-amber-500/20 via-yellow-500/10 to-transparent',
+        iconContainerClassName:
+          'bg-amber-500/10 text-amber-700 dark:text-amber-400',
+      },
+      {
+        key: 'avgSalaryPlusCosts',
+        title: t('cards.avgSalaryPlusCosts'),
+        description: withTooltip(
+          t('cards.avgSalaryPlusCostsDescription'),
+          t('cards.avgSalaryPlusCostsTooltip')
+        ),
+        value: formatCurrency(
+          collaboratorStats?.avgSalaryPlusCosts ?? 0,
+          getSettingValue,
+          currentLocaleCode
+        ),
+        icon: Wallet,
+        accentClassName: 'from-violet-500/20 via-purple-500/10 to-transparent',
+        iconContainerClassName:
+          'bg-violet-500/10 text-violet-700 dark:text-violet-400',
+      },
+      {
+        key: 'avgSalaryPlusCostsPerCollaborator',
+        title: t('cards.avgSalaryPlusCostsPerCollaborator'),
+        description: withTooltip(
+          t('cards.avgSalaryPlusCostsPerCollaboratorDescription'),
+          t('cards.avgSalaryPlusCostsPerCollaboratorTooltip')
+        ),
+        value: formatCurrency(
+          collaboratorStats?.avgSalaryPlusCostsPerCollaborator ?? 0,
+          getSettingValue,
+          currentLocaleCode
+        ),
+        icon: TrendingUp,
+        accentClassName: 'from-rose-500/20 via-pink-500/10 to-transparent',
+        iconContainerClassName:
+          'bg-rose-500/10 text-rose-700 dark:text-rose-400',
+      },
+    ];
+  }, [
+    collaboratorStats,
+    t,
+    formatCurrency,
+    getSettingValue,
+    currentLocaleCode,
+  ]);
 
   const handleViewModeChange = (value: string) => {
     if (value !== 'table' && value !== 'cards') {
@@ -533,7 +643,7 @@ export default function OperationsCollaboratorsPage() {
                     </div>
                   ) : null}
 
-                  <div className="flex flex-wrap justify-end gap-2 border-t border-border/60 pt-3">
+                  <div className="flex items-center justify-end gap-1.5 border-t border-border/60 pt-3">
                     {access.isDirector ? (
                       <Button
                         variant="outline"
@@ -564,16 +674,15 @@ export default function OperationsCollaboratorsPage() {
                     {access.isDirector ? (
                       <Button
                         variant="outline"
-                        size="sm"
-                        className="gap-1.5 px-2 sm:px-3"
+                        size="icon"
                         onClick={() => void toggleStatus(collaborator)}
+                        title={
+                          collaborator.status === 'inactive'
+                            ? commonT('actions.activate')
+                            : commonT('actions.deactivate')
+                        }
                       >
                         <Power className="size-4" />
-                        <span className="hidden sm:inline">
-                          {collaborator.status === 'inactive'
-                            ? commonT('actions.activate')
-                            : commonT('actions.deactivate')}
-                        </span>
                       </Button>
                     ) : null}
                   </div>
@@ -718,7 +827,7 @@ export default function OperationsCollaboratorsPage() {
                       )}
                     </TableCell>
                     <TableCell>
-                      <div className="flex flex-wrap justify-end gap-1.5 sm:gap-2">
+                      <div className="flex items-center justify-end gap-1.5">
                         {access.isDirector ? (
                           <Button
                             variant="outline"
@@ -749,16 +858,15 @@ export default function OperationsCollaboratorsPage() {
                         {access.isDirector ? (
                           <Button
                             variant="outline"
-                            size="sm"
-                            className="gap-1.5 px-2 sm:px-3"
+                            size="icon"
                             onClick={() => void toggleStatus(collaborator)}
+                            title={
+                              collaborator.status === 'inactive'
+                                ? commonT('actions.activate')
+                                : commonT('actions.deactivate')
+                            }
                           >
                             <Power className="size-4" />
-                            <span className="hidden sm:inline">
-                              {collaborator.status === 'inactive'
-                                ? commonT('actions.activate')
-                                : commonT('actions.deactivate')}
-                            </span>
                           </Button>
                         ) : null}
                       </div>

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

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