@hed-hog/operations 0.0.3 → 0.0.286

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

@@ -1,126 +1,126 @@
-'use client';
-
-import { Page } from '@/components/entity-list';
-import { Input } from '@/components/ui/input';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
-import { OperationsHeader } from '../_components/operations-header';
-import { SectionCard } from '../_components/section-card';
-import { StatusBadge } from '../_components/status-badge';
-import { TimesheetEntryDialog } from '../_components/timesheet-entry-dialog';
-import { useOperationsData } from '../_lib/hooks/use-operations-data';
-import { formatDate, formatHours } from '../_lib/utils/format';
-import { getApprovalBadgeClasses, getApprovalLabel } from '../_lib/utils/status';
-
-export default function TimesheetsPage() {
-  const t = useTranslations('operations.TimesheetsPage');
-  const { timesheets, users, projects, tasks, dailyTotals } =
-    useOperationsData();
-  const [search, setSearch] = useState('');
-
-  const filteredTimesheets = useMemo(
-    () =>
-      timesheets.filter((entry) => {
-        const user = users.find((item) => item.id === entry.userId);
-        const project = projects.find((item) => item.id === entry.projectId);
-        const task = tasks.find((item) => item.id === entry.taskId);
-
-        return `${user?.name} ${project?.name} ${task?.title} ${entry.description}`
-          .toLowerCase()
-          .includes(search.toLowerCase());
-      }),
-    [timesheets, users, projects, tasks, search]
-  );
-
-  const weeklyTotal = filteredTimesheets.reduce(
-    (sum, entry) => sum + entry.hours,
-    0
-  );
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          <TimesheetEntryDialog users={users} projects={projects} tasks={tasks} />
-        }
-      />
-
-      <div className="grid gap-4 md:grid-cols-3">
-        <SectionCard title={t('summary.totalHours')}>
-          <p className="text-3xl font-semibold">{formatHours(weeklyTotal)}</p>
-        </SectionCard>
-        <SectionCard title={t('summary.dailyTotals')}>
-          <div className="space-y-2 text-sm">
-            {Object.entries(dailyTotals).map(([date, total]) => (
-              <div key={date} className="flex items-center justify-between">
-                <span>{formatDate(date)}</span>
-                <span>{formatHours(total)}</span>
-              </div>
-            ))}
-          </div>
-        </SectionCard>
-        <SectionCard title={t('summary.weeklyTotal')}>
-          <p className="text-3xl font-semibold">{formatHours(weeklyTotal)}</p>
-        </SectionCard>
-      </div>
-
-      <SectionCard title={t('gridTitle')} description={t('gridDescription')}>
-        <div className="mb-4">
-          <Input
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            placeholder={t('searchPlaceholder')}
-          />
-        </div>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('columns.date')}</TableHead>
-              <TableHead>{t('columns.user')}</TableHead>
-              <TableHead>{t('columns.project')}</TableHead>
-              <TableHead>{t('columns.task')}</TableHead>
-              <TableHead>{t('columns.hours')}</TableHead>
-              <TableHead>{t('columns.description')}</TableHead>
-              <TableHead>{t('columns.status')}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredTimesheets.map((entry) => {
-              const user = users.find((item) => item.id === entry.userId);
-              const project = projects.find((item) => item.id === entry.projectId);
-              const task = tasks.find((item) => item.id === entry.taskId);
-
-              return (
-                <TableRow key={entry.id}>
-                  <TableCell>{formatDate(entry.date)}</TableCell>
-                  <TableCell>{user?.name}</TableCell>
-                  <TableCell>{project?.name}</TableCell>
-                  <TableCell>{task?.title}</TableCell>
-                  <TableCell>{formatHours(entry.hours)}</TableCell>
-                  <TableCell>{entry.description}</TableCell>
-                  <TableCell>
-                    <StatusBadge
-                      label={getApprovalLabel(entry.status)}
-                      className={getApprovalBadgeClasses(entry.status)}
-                    />
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </SectionCard>
-    </Page>
-  );
-}
+'use client';
+
+import { Page } from '@/components/entity-list';
+import { Input } from '@/components/ui/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { OperationsHeader } from '../_components/operations-header';
+import { SectionCard } from '../_components/section-card';
+import { StatusBadge } from '../_components/status-badge';
+import { TimesheetEntryDialog } from '../_components/timesheet-entry-dialog';
+import { useOperationsData } from '../_lib/hooks/use-operations-data';
+import { formatDate, formatHours } from '../_lib/utils/format';
+import { getApprovalBadgeClasses, getApprovalLabel } from '../_lib/utils/status';
+
+export default function TimesheetsPage() {
+  const t = useTranslations('operations.TimesheetsPage');
+  const { timesheets, users, projects, tasks, dailyTotals } =
+    useOperationsData();
+  const [search, setSearch] = useState('');
+
+  const filteredTimesheets = useMemo(
+    () =>
+      timesheets.filter((entry) => {
+        const user = users.find((item) => item.id === entry.userId);
+        const project = projects.find((item) => item.id === entry.projectId);
+        const task = tasks.find((item) => item.id === entry.taskId);
+
+        return `${user?.name} ${project?.name} ${task?.title} ${entry.description}`
+          .toLowerCase()
+          .includes(search.toLowerCase());
+      }),
+    [timesheets, users, projects, tasks, search]
+  );
+
+  const weeklyTotal = filteredTimesheets.reduce(
+    (sum, entry) => sum + entry.hours,
+    0
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <TimesheetEntryDialog users={users} projects={projects} tasks={tasks} />
+        }
+      />
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <SectionCard title={t('summary.totalHours')}>
+          <p className="text-3xl font-semibold">{formatHours(weeklyTotal)}</p>
+        </SectionCard>
+        <SectionCard title={t('summary.dailyTotals')}>
+          <div className="space-y-2 text-sm">
+            {Object.entries(dailyTotals).map(([date, total]) => (
+              <div key={date} className="flex items-center justify-between">
+                <span>{formatDate(date)}</span>
+                <span>{formatHours(total)}</span>
+              </div>
+            ))}
+          </div>
+        </SectionCard>
+        <SectionCard title={t('summary.weeklyTotal')}>
+          <p className="text-3xl font-semibold">{formatHours(weeklyTotal)}</p>
+        </SectionCard>
+      </div>
+
+      <SectionCard title={t('gridTitle')} description={t('gridDescription')}>
+        <div className="mb-4">
+          <Input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={t('searchPlaceholder')}
+          />
+        </div>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('columns.date')}</TableHead>
+              <TableHead>{t('columns.user')}</TableHead>
+              <TableHead>{t('columns.project')}</TableHead>
+              <TableHead>{t('columns.task')}</TableHead>
+              <TableHead>{t('columns.hours')}</TableHead>
+              <TableHead>{t('columns.description')}</TableHead>
+              <TableHead>{t('columns.status')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredTimesheets.map((entry) => {
+              const user = users.find((item) => item.id === entry.userId);
+              const project = projects.find((item) => item.id === entry.projectId);
+              const task = tasks.find((item) => item.id === entry.taskId);
+
+              return (
+                <TableRow key={entry.id}>
+                  <TableCell>{formatDate(entry.date)}</TableCell>
+                  <TableCell>{user?.name}</TableCell>
+                  <TableCell>{project?.name}</TableCell>
+                  <TableCell>{task?.title}</TableCell>
+                  <TableCell>{formatHours(entry.hours)}</TableCell>
+                  <TableCell>{entry.description}</TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      label={getApprovalLabel(entry.status)}
+                      className={getApprovalBadgeClasses(entry.status)}
+                    />
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </SectionCard>
+    </Page>
+  );
+}