@hed-hog/operations 0.0.295 → 0.0.296

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

@@ -0,0 +1,339 @@
+'use client';
+
+import { EmptyState, Page } from '@/components/entity-list';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Users } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { OperationsHeader } from '../_components/operations-header';
+import { StatusBadge } from '../_components/status-badge';
+import { fetchOperations } from '../_lib/api';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type { OperationsTeamOverview } from '../_lib/types';
+import {
+  formatDateRange,
+  formatEnumLabel,
+  formatHours,
+  getStatusBadgeClass,
+} from '../_lib/utils/format';
+
+export default function OperationsTeamPage() {
+  const t = useTranslations('operations.TeamPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+
+  const { data: team, refetch } = useQuery<OperationsTeamOverview>({
+    queryKey: ['operations-team-page', currentLocaleCode],
+    enabled: access.isSupervisor,
+    queryFn: () => fetchOperations<OperationsTeamOverview>(request, '/operations/team'),
+  });
+
+  if (!access.isSupervisor && !access.isLoading) {
+    return (
+      <Page>
+        <OperationsHeader
+          title={t('title')}
+          description={t('description')}
+          current={t('breadcrumb')}
+        />
+        <EmptyState
+          icon={<Users className="size-12" />}
+          title={commonT('states.noAccessTitle')}
+          description={t('noAccessDescription')}
+          actionLabel={commonT('actions.refresh')}
+          onAction={() => void refetch()}
+        />
+      </Page>
+    );
+  }
+
+  const items = [
+    {
+      key: 'members',
+      title: t('cards.members'),
+      value: team?.teamMembers.length ?? 0,
+    },
+    {
+      key: 'projects',
+      title: t('cards.projects'),
+      value: team?.projectCount ?? 0,
+    },
+    {
+      key: 'approvals',
+      title: t('cards.pendingApprovals'),
+      value: team?.pendingApprovals ?? 0,
+    },
+    {
+      key: 'timeOff',
+      title: t('cards.timeOff'),
+      value: team?.pendingItems?.timeOffRequests ?? 0,
+    },
+    {
+      key: 'schedule',
+      title: t('cards.scheduleAdjustments'),
+      value: team?.pendingItems?.scheduleAdjustmentRequests ?? 0,
+    },
+    {
+      key: 'timesheets',
+      title: t('cards.timesheets'),
+      value: team?.pendingItems?.timesheets ?? 0,
+    },
+  ];
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+      />
+
+      <KpiCardsGrid items={items} columns={4} />
+
+      {team?.teamMembers?.length ? (
+        <div className="space-y-6">
+          <div className="overflow-x-auto rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{commonT('labels.collaborator')}</TableHead>
+                  <TableHead>{commonT('labels.department')}</TableHead>
+                  <TableHead>{commonT('labels.status')}</TableHead>
+                  <TableHead>{commonT('labels.activeAssignments')}</TableHead>
+                  <TableHead>{commonT('labels.pendingApprovals')}</TableHead>
+                  <TableHead>{t('sections.requests')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {team.teamMembers.map((member) => (
+                  <TableRow key={member.id}>
+                    <TableCell>
+                      <div className="font-medium">{member.displayName}</div>
+                      <div className="text-xs text-muted-foreground">
+                        {[member.code, formatEnumLabel(member.collaboratorType)]
+                          .filter(Boolean)
+                          .join(' • ')}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      {[member.department, member.title]
+                        .filter(Boolean)
+                        .join(' • ') || commonT('labels.notAvailable')}
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge
+                        label={formatEnumLabel(member.status)}
+                        className={getStatusBadgeClass(member.status)}
+                      />
+                    </TableCell>
+                    <TableCell>{member.activeAssignments ?? 0}</TableCell>
+                    <TableCell>{member.pendingApprovals ?? 0}</TableCell>
+                    <TableCell>
+                      <div className="text-sm">
+                        {t('labels.timeOffRequestsCount', {
+                          count: member.pendingTimeOffRequests ?? 0,
+                        })}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {t('labels.scheduleRequestsCount', {
+                          count: member.pendingScheduleAdjustmentRequests ?? 0,
+                        })}
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          <div className="grid gap-6 xl:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle>{t('sections.pendingApprovals')}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {team.pendingApprovalQueue.length ? (
+                  <div className="space-y-3">
+                    {team.pendingApprovalQueue.map((approval) => (
+                      <div key={approval.id} className="rounded-lg border p-3">
+                        <div className="flex items-center justify-between gap-3">
+                          <div>
+                            <div className="font-medium">{approval.requesterName}</div>
+                            <div className="text-xs text-muted-foreground">
+                              {formatEnumLabel(approval.targetType)}
+                            </div>
+                          </div>
+                          <StatusBadge
+                            label={formatEnumLabel(approval.status)}
+                            className={getStatusBadgeClass(approval.status)}
+                          />
+                        </div>
+                        <div className="mt-2 text-sm text-muted-foreground">
+                          {approval.targetType === 'timesheet'
+                            ? [
+                                formatDateRange(
+                                  approval.timesheetWeekStartDate,
+                                  approval.timesheetWeekEndDate
+                                ),
+                                approval.timesheetProjectNames,
+                                formatHours(approval.timesheetTotalHours),
+                              ]
+                                .filter(Boolean)
+                                .join(' • ')
+                            : approval.targetType === 'time_off_request'
+                              ? [
+                                  formatEnumLabel(approval.timeOffType),
+                                  formatDateRange(
+                                    approval.timeOffStartDate,
+                                    approval.timeOffEndDate
+                                  ),
+                                ]
+                                  .filter(Boolean)
+                                  .join(' • ')
+                              : [
+                                  formatEnumLabel(approval.scheduleRequestScope),
+                                  formatDateRange(
+                                    approval.scheduleStartDate,
+                                    approval.scheduleEndDate
+                                  ),
+                                ]
+                                  .filter(Boolean)
+                                  .join(' • ')}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-sm text-muted-foreground">
+                    {t('states.noPendingApprovals')}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>{t('sections.projects')}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {team.teamProjects.length ? (
+                  <div className="space-y-3">
+                    {team.teamProjects.map((project) => (
+                      <div key={project.id} className="rounded-lg border p-3">
+                        <div className="flex items-center justify-between gap-3">
+                          <div>
+                            <div className="font-medium">{project.name}</div>
+                            <div className="text-xs text-muted-foreground">
+                              {[project.code, project.clientName]
+                                .filter(Boolean)
+                                .join(' • ')}
+                            </div>
+                          </div>
+                          <StatusBadge
+                            label={formatEnumLabel(project.status)}
+                            className={getStatusBadgeClass(project.status)}
+                          />
+                        </div>
+                        <div className="mt-2 text-sm text-muted-foreground">
+                          {t('labels.projectSummary', {
+                            teamSize: project.teamSize,
+                            pendingTimesheets: project.pendingTimesheets,
+                          })}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-sm text-muted-foreground">
+                    {t('states.noProjects')}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="grid gap-6 xl:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle>{t('sections.timeOff')}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {team.pendingTimeOffRequests.length ? (
+                  <div className="space-y-3">
+                    {team.pendingTimeOffRequests.map((requestItem) => (
+                      <div key={requestItem.id} className="rounded-lg border p-3">
+                        <div className="font-medium">{requestItem.collaboratorName}</div>
+                        <div className="text-sm text-muted-foreground">
+                          {[
+                            formatEnumLabel(requestItem.requestType),
+                            formatDateRange(requestItem.startDate, requestItem.endDate),
+                          ]
+                            .filter(Boolean)
+                            .join(' • ')}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-sm text-muted-foreground">
+                    {t('states.noTimeOff')}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>{t('sections.scheduleAdjustments')}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {team.pendingScheduleAdjustmentRequests.length ? (
+                  <div className="space-y-3">
+                    {team.pendingScheduleAdjustmentRequests.map((requestItem) => (
+                      <div key={requestItem.id} className="rounded-lg border p-3">
+                        <div className="font-medium">{requestItem.collaboratorName}</div>
+                        <div className="text-sm text-muted-foreground">
+                          {[
+                            formatEnumLabel(requestItem.requestScope),
+                            formatDateRange(
+                              requestItem.effectiveStartDate,
+                              requestItem.effectiveEndDate
+                            ),
+                          ]
+                            .filter(Boolean)
+                            .join(' • ')}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-sm text-muted-foreground">
+                    {t('states.noScheduleAdjustments')}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      ) : (
+        <EmptyState
+          icon={<Users className="size-12" />}
+          title={commonT('states.emptyTitle')}
+          description={t('emptyDescription')}
+          actionLabel={commonT('actions.refresh')}
+          onAction={() => void refetch()}
+        />
+      )}
+    </Page>
+  );
+}

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

@@ -0,0 +1,328 @@
+'use client';
+
+import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+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 { 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 { 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';
+
+type TimeOffFormState = {
+  requestType: string;
+  startDate: string;
+  endDate: string;
+  totalDays: string;
+  reason: string;
+};
+
+const emptyForm: TimeOffFormState = {
+  requestType: 'vacation',
+  startDate: '',
+  endDate: '',
+  totalDays: '',
+  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 { 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]
+              .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 cards = [
+    {
+      key: 'submitted',
+      title: t('cards.submitted'),
+      value: requests.filter((item) => item.status === 'submitted').length,
+    },
+    {
+      key: 'approved',
+      title: t('cards.approved'),
+      value: requests.filter((item) => item.status === 'approved').length,
+    },
+    {
+      key: 'days',
+      title: t('cards.days'),
+      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(form.totalDays),
+        reason: trimToNull(form.reason),
+      });
+
+      showToastHandler?.('success', t('messages.saveSuccess'));
+      setIsSheetOpen(false);
+      setForm(emptyForm);
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.saveError'));
+    }
+  };
+
+  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
+        }
+      />
+
+      <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: formatEnumLabel('submitted') },
+              { value: 'approved', label: formatEnumLabel('approved') },
+              { value: 'rejected', label: formatEnumLabel('rejected') },
+            ],
+          },
+        ]}
+      />
+
+      <KpiCardsGrid items={cards} columns={3} />
+
+      {filteredRows.length > 0 ? (
+        <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>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredRows.map((requestItem) => (
+                <TableRow key={requestItem.id}>
+                  <TableCell>{requestItem.collaboratorName}</TableCell>
+                  <TableCell>{formatEnumLabel(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>
+                    <StatusBadge
+                      label={formatEnumLabel(requestItem.status)}
+                      className={getStatusBadgeClass(requestItem.status)}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    {requestItem.reason || commonT('labels.noNotes')}
+                  </TableCell>
+                  <TableCell>
+                    {requestItem.approverNote || commonT('labels.noNotes')}
+                  </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()}
+        />
+      )}
+
+      <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">
+            <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>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="vacation">Vacation</SelectItem>
+                  <SelectItem value="personal_time">Personal Time</SelectItem>
+                  <SelectItem value="sick_leave">Sick Leave</SelectItem>
+                  <SelectItem value="unpaid_leave">Unpaid Leave</SelectItem>
+                  <SelectItem value="other">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={form.totalDays}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    totalDays: event.target.value,
+                  }))
+                }
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{commonT('labels.reason')}</label>
+              <Textarea
+                rows={4}
+                value={form.reason}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, reason: event.target.value }))
+                }
+              />
+            </div>
+
+            <Button onClick={() => void onSubmit()}>{commonT('actions.save')}</Button>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </Page>
+  );
+}