@hed-hog/operations 0.0.3 → 0.0.285

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

@@ -1,186 +1,186 @@
-'use client';
-
-import { Page } from '@/components/entity-list';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useParams } from 'next/navigation';
-import { KanbanBoard } from '../../_components/kanban-board';
-import { OperationsHeader } from '../../_components/operations-header';
-import { SectionCard } from '../../_components/section-card';
-import { StatusBadge } from '../../_components/status-badge';
-import { useOperationsData } from '../../_lib/hooks/use-operations-data';
-import {
-  formatCurrency,
-  formatDate,
-  formatHours,
-} from '../../_lib/utils/format';
-import { getProjectTeam } from '../../_lib/utils/metrics';
-import {
-  getApprovalBadgeClasses,
-  getApprovalLabel,
-  getProjectBadgeClasses,
-  getProjectStatusLabel,
-} from '../../_lib/utils/status';
-
-export default function ProjectDetailsPage() {
-  const params = useParams<{ id: string }>();
-  const { projects, contracts, users, tasks, timesheets } = useOperationsData();
-  const project = projects.find((item) => item.id === params.id);
-
-  if (!project) {
-    return <Page>Project not found.</Page>;
-  }
-
-  const contract = contracts.find((item) => item.id === project.contractId);
-  const team = getProjectTeam(project.id);
-  const projectTasks = tasks.filter((task) => task.projectId === project.id);
-  const projectTimesheets = timesheets.filter(
-    (entry) => entry.projectId === project.id
-  );
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={project.name}
-        description={project.description}
-        current="Project Details"
-      />
-
-      <Tabs defaultValue="overview" className="space-y-4">
-        <TabsList>
-          <TabsTrigger value="overview">Overview</TabsTrigger>
-          <TabsTrigger value="team">Team</TabsTrigger>
-          <TabsTrigger value="tasks">Tasks</TabsTrigger>
-          <TabsTrigger value="timesheets">Timesheets</TabsTrigger>
-          <TabsTrigger value="costs">Costs</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="overview">
-          <SectionCard title="Project Overview">
-            <div className="grid gap-4 text-sm md:grid-cols-2">
-              <p>
-                <span className="font-medium">Status:</span>{' '}
-                <StatusBadge
-                  label={getProjectStatusLabel(project.status)}
-                  className={getProjectBadgeClasses(project.status)}
-                />
-              </p>
-              <p>
-                <span className="font-medium">Progress:</span> {project.progress}%
-              </p>
-              <p>
-                <span className="font-medium">Client:</span> {project.client}
-              </p>
-              <p>
-                <span className="font-medium">Contract:</span> {contract?.name}
-              </p>
-              <p className="md:col-span-2">
-                <span className="font-medium">Description:</span>{' '}
-                {project.description}
-              </p>
-            </div>
-          </SectionCard>
-        </TabsContent>
-
-        <TabsContent value="team">
-          <SectionCard title="Team Allocation">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Member</TableHead>
-                  <TableHead>Role</TableHead>
-                  <TableHead>Hour Rate</TableHead>
-                  <TableHead>Allocation %</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {team.map((member) => (
-                  <TableRow key={member.id}>
-                    <TableCell>{member.name}</TableCell>
-                    <TableCell>{member.role}</TableCell>
-                    <TableCell>{formatCurrency(member.hourlyRate)}</TableCell>
-                    <TableCell>{member.utilizationTarget}%</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </SectionCard>
-        </TabsContent>
-
-        <TabsContent value="tasks">
-          <SectionCard title="Kanban Preview">
-            <KanbanBoard tasks={projectTasks} users={users} />
-          </SectionCard>
-        </TabsContent>
-
-        <TabsContent value="timesheets">
-          <SectionCard title="Project Timesheets">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Date</TableHead>
-                  <TableHead>User</TableHead>
-                  <TableHead>Hours</TableHead>
-                  <TableHead>Description</TableHead>
-                  <TableHead>Status</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {projectTimesheets.map((entry) => {
-                  const user = users.find((item) => item.id === entry.userId);
-
-                  return (
-                    <TableRow key={entry.id}>
-                      <TableCell>{formatDate(entry.date)}</TableCell>
-                      <TableCell>{user?.name}</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>
-        </TabsContent>
-
-        <TabsContent value="costs">
-          <SectionCard title="Costs (Mock)">
-            <div className="grid gap-3 md:grid-cols-3">
-              <div className="rounded-lg border p-4">
-                <p className="text-sm text-muted-foreground">Budget</p>
-                <p className="text-xl font-semibold">
-                  {formatCurrency(project.budget)}
-                </p>
-              </div>
-              <div className="rounded-lg border p-4">
-                <p className="text-sm text-muted-foreground">Logged Hours</p>
-                <p className="text-xl font-semibold">
-                  {formatHours(project.hoursLogged)}
-                </p>
-              </div>
-              <div className="rounded-lg border p-4">
-                <p className="text-sm text-muted-foreground">Projected End</p>
-                <p className="text-xl font-semibold">
-                  {formatDate(project.endDate)}
-                </p>
-              </div>
-            </div>
-          </SectionCard>
-        </TabsContent>
-      </Tabs>
-    </Page>
-  );
-}
+'use client';
+
+import { Page } from '@/components/entity-list';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useParams } from 'next/navigation';
+import { KanbanBoard } from '../../_components/kanban-board';
+import { OperationsHeader } from '../../_components/operations-header';
+import { SectionCard } from '../../_components/section-card';
+import { StatusBadge } from '../../_components/status-badge';
+import { useOperationsData } from '../../_lib/hooks/use-operations-data';
+import {
+  formatCurrency,
+  formatDate,
+  formatHours,
+} from '../../_lib/utils/format';
+import { getProjectTeam } from '../../_lib/utils/metrics';
+import {
+  getApprovalBadgeClasses,
+  getApprovalLabel,
+  getProjectBadgeClasses,
+  getProjectStatusLabel,
+} from '../../_lib/utils/status';
+
+export default function ProjectDetailsPage() {
+  const params = useParams<{ id: string }>();
+  const { projects, contracts, users, tasks, timesheets } = useOperationsData();
+  const project = projects.find((item) => item.id === params.id);
+
+  if (!project) {
+    return <Page>Project not found.</Page>;
+  }
+
+  const contract = contracts.find((item) => item.id === project.contractId);
+  const team = getProjectTeam(project.id);
+  const projectTasks = tasks.filter((task) => task.projectId === project.id);
+  const projectTimesheets = timesheets.filter(
+    (entry) => entry.projectId === project.id
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={project.name}
+        description={project.description}
+        current="Project Details"
+      />
+
+      <Tabs defaultValue="overview" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="team">Team</TabsTrigger>
+          <TabsTrigger value="tasks">Tasks</TabsTrigger>
+          <TabsTrigger value="timesheets">Timesheets</TabsTrigger>
+          <TabsTrigger value="costs">Costs</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview">
+          <SectionCard title="Project Overview">
+            <div className="grid gap-4 text-sm md:grid-cols-2">
+              <p>
+                <span className="font-medium">Status:</span>{' '}
+                <StatusBadge
+                  label={getProjectStatusLabel(project.status)}
+                  className={getProjectBadgeClasses(project.status)}
+                />
+              </p>
+              <p>
+                <span className="font-medium">Progress:</span> {project.progress}%
+              </p>
+              <p>
+                <span className="font-medium">Client:</span> {project.client}
+              </p>
+              <p>
+                <span className="font-medium">Contract:</span> {contract?.name}
+              </p>
+              <p className="md:col-span-2">
+                <span className="font-medium">Description:</span>{' '}
+                {project.description}
+              </p>
+            </div>
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value="team">
+          <SectionCard title="Team Allocation">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Member</TableHead>
+                  <TableHead>Role</TableHead>
+                  <TableHead>Hour Rate</TableHead>
+                  <TableHead>Allocation %</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {team.map((member) => (
+                  <TableRow key={member.id}>
+                    <TableCell>{member.name}</TableCell>
+                    <TableCell>{member.role}</TableCell>
+                    <TableCell>{formatCurrency(member.hourlyRate)}</TableCell>
+                    <TableCell>{member.utilizationTarget}%</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value="tasks">
+          <SectionCard title="Kanban Preview">
+            <KanbanBoard tasks={projectTasks} users={users} />
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value="timesheets">
+          <SectionCard title="Project Timesheets">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Date</TableHead>
+                  <TableHead>User</TableHead>
+                  <TableHead>Hours</TableHead>
+                  <TableHead>Description</TableHead>
+                  <TableHead>Status</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {projectTimesheets.map((entry) => {
+                  const user = users.find((item) => item.id === entry.userId);
+
+                  return (
+                    <TableRow key={entry.id}>
+                      <TableCell>{formatDate(entry.date)}</TableCell>
+                      <TableCell>{user?.name}</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>
+        </TabsContent>
+
+        <TabsContent value="costs">
+          <SectionCard title="Costs (Mock)">
+            <div className="grid gap-3 md:grid-cols-3">
+              <div className="rounded-lg border p-4">
+                <p className="text-sm text-muted-foreground">Budget</p>
+                <p className="text-xl font-semibold">
+                  {formatCurrency(project.budget)}
+                </p>
+              </div>
+              <div className="rounded-lg border p-4">
+                <p className="text-sm text-muted-foreground">Logged Hours</p>
+                <p className="text-xl font-semibold">
+                  {formatHours(project.hoursLogged)}
+                </p>
+              </div>
+              <div className="rounded-lg border p-4">
+                <p className="text-sm text-muted-foreground">Projected End</p>
+                <p className="text-xl font-semibold">
+                  {formatDate(project.endDate)}
+                </p>
+              </div>
+            </div>
+          </SectionCard>
+        </TabsContent>
+      </Tabs>
+    </Page>
+  );
+}

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

@@ -1,111 +1,111 @@
-'use client';
-
-import { Page } from '@/components/entity-list';
-import { Input } from '@/components/ui/input';
-import { Progress } from '@/components/ui/progress';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useMemo, useState } from 'react';
-import { OperationsHeader } from '../_components/operations-header';
-import { SectionCard } from '../_components/section-card';
-import { StatusBadge } from '../_components/status-badge';
-import { useOperationsData } from '../_lib/hooks/use-operations-data';
-import { formatDate, formatHours } from '../_lib/utils/format';
-import {
-  getProjectBadgeClasses,
-  getProjectStatusLabel,
-} from '../_lib/utils/status';
-
-export default function ProjectsPage() {
-  const t = useTranslations('operations.ProjectsPage');
-  const { projects, users } = useOperationsData();
-  const [search, setSearch] = useState('');
-
-  const filteredProjects = useMemo(
-    () =>
-      projects.filter((project) =>
-        `${project.name} ${project.client}`
-          .toLowerCase()
-          .includes(search.toLowerCase())
-      ),
-    [projects, search]
-  );
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-      />
-
-      <SectionCard title={t('gridTitle')} description={t('gridDescription')}>
-        <div className="mb-4">
-          <Input
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            placeholder={t('searchPlaceholder')}
-          />
-        </div>
-        <div className="grid gap-4 xl:grid-cols-2">
-          {filteredProjects.map((project) => {
-            const memberNames = users
-              .filter((user) => project.teamMemberIds.includes(user.id))
-              .map((user) => user.name)
-              .join(', ');
-
-            return (
-              <Link
-                key={project.id}
-                href={`/operations/projects/${project.id}`}
-                className="rounded-xl border p-5 transition hover:border-primary/40 hover:shadow-md"
-              >
-                <div className="space-y-4">
-                  <div className="flex items-start justify-between gap-4">
-                    <div>
-                      <p className="text-lg font-semibold">{project.name}</p>
-                      <p className="text-sm text-muted-foreground">
-                        {project.client}
-                      </p>
-                    </div>
-                    <StatusBadge
-                      label={getProjectStatusLabel(project.status)}
-                      className={getProjectBadgeClasses(project.status)}
-                    />
-                  </div>
-
-                  <div>
-                    <div className="mb-2 flex items-center justify-between text-sm">
-                      <span>{t('progress')}</span>
-                      <span>{project.progress}%</span>
-                    </div>
-                    <Progress value={project.progress} />
-                  </div>
-
-                  <div className="grid gap-3 text-sm sm:grid-cols-2">
-                    <p>
-                      <span className="font-medium">{t('teamMembers')}:</span>{' '}
-                      {memberNames}
-                    </p>
-                    <p>
-                      <span className="font-medium">{t('hoursLogged')}:</span>{' '}
-                      {formatHours(project.hoursLogged)}
-                    </p>
-                    <p>
-                      <span className="font-medium">{t('startDate')}:</span>{' '}
-                      {formatDate(project.startDate)}
-                    </p>
-                    <p>
-                      <span className="font-medium">{t('endDate')}:</span>{' '}
-                      {formatDate(project.endDate)}
-                    </p>
-                  </div>
-                </div>
-              </Link>
-            );
-          })}
-        </div>
-      </SectionCard>
-    </Page>
-  );
-}
+'use client';
+
+import { Page } from '@/components/entity-list';
+import { Input } from '@/components/ui/input';
+import { Progress } from '@/components/ui/progress';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useMemo, useState } from 'react';
+import { OperationsHeader } from '../_components/operations-header';
+import { SectionCard } from '../_components/section-card';
+import { StatusBadge } from '../_components/status-badge';
+import { useOperationsData } from '../_lib/hooks/use-operations-data';
+import { formatDate, formatHours } from '../_lib/utils/format';
+import {
+  getProjectBadgeClasses,
+  getProjectStatusLabel,
+} from '../_lib/utils/status';
+
+export default function ProjectsPage() {
+  const t = useTranslations('operations.ProjectsPage');
+  const { projects, users } = useOperationsData();
+  const [search, setSearch] = useState('');
+
+  const filteredProjects = useMemo(
+    () =>
+      projects.filter((project) =>
+        `${project.name} ${project.client}`
+          .toLowerCase()
+          .includes(search.toLowerCase())
+      ),
+    [projects, search]
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+      />
+
+      <SectionCard title={t('gridTitle')} description={t('gridDescription')}>
+        <div className="mb-4">
+          <Input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={t('searchPlaceholder')}
+          />
+        </div>
+        <div className="grid gap-4 xl:grid-cols-2">
+          {filteredProjects.map((project) => {
+            const memberNames = users
+              .filter((user) => project.teamMemberIds.includes(user.id))
+              .map((user) => user.name)
+              .join(', ');
+
+            return (
+              <Link
+                key={project.id}
+                href={`/operations/projects/${project.id}`}
+                className="rounded-xl border p-5 transition hover:border-primary/40 hover:shadow-md"
+              >
+                <div className="space-y-4">
+                  <div className="flex items-start justify-between gap-4">
+                    <div>
+                      <p className="text-lg font-semibold">{project.name}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {project.client}
+                      </p>
+                    </div>
+                    <StatusBadge
+                      label={getProjectStatusLabel(project.status)}
+                      className={getProjectBadgeClasses(project.status)}
+                    />
+                  </div>
+
+                  <div>
+                    <div className="mb-2 flex items-center justify-between text-sm">
+                      <span>{t('progress')}</span>
+                      <span>{project.progress}%</span>
+                    </div>
+                    <Progress value={project.progress} />
+                  </div>
+
+                  <div className="grid gap-3 text-sm sm:grid-cols-2">
+                    <p>
+                      <span className="font-medium">{t('teamMembers')}:</span>{' '}
+                      {memberNames}
+                    </p>
+                    <p>
+                      <span className="font-medium">{t('hoursLogged')}:</span>{' '}
+                      {formatHours(project.hoursLogged)}
+                    </p>
+                    <p>
+                      <span className="font-medium">{t('startDate')}:</span>{' '}
+                      {formatDate(project.startDate)}
+                    </p>
+                    <p>
+                      <span className="font-medium">{t('endDate')}:</span>{' '}
+                      {formatDate(project.endDate)}
+                    </p>
+                  </div>
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      </SectionCard>
+    </Page>
+  );
+}