feat: Shift schedule page

messages/en.json

@@ -29,6 +29,7 @@
     "events": "Events",
     "storage": "Storage",
     "about": "About",
+    "shiftSchedule": "Shift Schedule",
     "changeLocale": "Change language",
     "toggleTheme": "Toggle theme",
     "light": "Light",
@@ -123,5 +124,34 @@
       "returnByDescription": "Select how long you would like to borrow the item for.",
       "submit": "Submit"
     }
+  },
+  "shiftSchedule": {
+    "title": "Shift Schedule",
+    "administratorMenu": {
+      "administratorMenu": "Administrator Menu",
+      "clearShiftSchedule": "Clear shift schedule"
+    },
+    "scheduleTable": {
+      "time": "Time",
+      "monday": "Monday",
+      "tuesday": "Tuesday",
+      "wednesday": "Wednesday",
+      "thursday": "Thursday",
+      "friday": "Friday",
+      "scheduleCellContent": {
+        "empty": "Closed",
+        "member": "person",
+        "members": "people",
+        "present": "on shift"
+      },
+      "scheduleCellDialog": {
+        "onShift": "On shift",
+        "empty": "No-one on shift",
+        "registerSection": {
+          "recurring": "Recurring",
+          "register": "Register"
+        }
+      }
+    }
   }
 }

messages/no.json

@@ -29,6 +29,7 @@
     "events": "Hendelser",
     "storage": "Lager",
     "about": "Om oss",
+    "shiftSchedule": "Vaktliste",
     "changeLocale": "Bytt språk",
     "toggleTheme": "Bytt tema",
     "light": "Lys",
@@ -123,5 +124,34 @@
       "returnByDescription": "Velg hvor lenge du ønsker å låne gjenstanden(e)",
       "submit": "Send"
     }
+  },
+  "shiftSchedule": {
+    "title": "Vaktliste",
+    "administratorMenu": {
+      "administratorMenu": "Administrator-meny",
+      "clearShiftSchedule": "Tøm vaktliste"
+    },
+    "scheduleTable": {
+      "time": "Tid",
+      "monday": "Mandag",
+      "tuesday": "Tirsdag",
+      "wednesday": "Onsdag",
+      "thursday": "Torsdag",
+      "friday": "Fredag",
+      "scheduleCellContent": {
+        "empty": "Lukket",
+        "member": "person",
+        "members": "personer",
+        "present": "på vakt"
+      },
+      "scheduleCellDialog": {
+        "onShift": "På vakt",
+        "empty": "Ingen på vakt",
+        "registerSection": {
+          "recurring": "Gjentagende",
+          "register": "Registrer"
+        }
+      }
+    }
   }
 }

package.json

@@ -23,6 +23,7 @@
     "@hookform/resolvers": "^3.9.0",
     "@lucia-auth/adapter-drizzle": "^1.1.0",
     "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",

src/app/[locale]/(default)/shift-schedule/layout.tsx

@@ -0,0 +1,22 @@
+import { useTranslations } from "next-intl";
+import { unstable_setRequestLocale } from "next-intl/server";
+
+type ShiftScheduleHeaderProps = {
+  children: React.ReactNode,
+  params: { locale: string }
+};
+
+export default function ShiftScheduleHeaderLayout({
+  children,
+  params: { locale },
+}: ShiftScheduleHeaderProps) {
+  unstable_setRequestLocale(locale);
+  const t = useTranslations('shiftSchedule');
+
+  return (
+    <>
+      <h1 className='relative mb-8 text-center'>{t('title')}</h1>
+      {children}
+    </>
+  );
+}

src/app/[locale]/(default)/shift-schedule/loading.tsx

@@ -0,0 +1,9 @@
+import { ScheduleTableSkeleton } from "@/components/shift-schedule/ScheduleTableSkeleton";
+
+export default function ShiftScheduleSkeleton() {
+  return (
+    <>
+      <ScheduleTableSkeleton />
+    </>
+  );
+}

src/app/[locale]/(default)/shift-schedule/page.tsx

@@ -0,0 +1,31 @@
+import { ScheduleTable } from '@/components/shift-schedule/ScheduleTable';
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { shiftScheduleMochData } from '@/mock-data/shiftSchedule';
+import { AdministratorMenu } from '@/components/shift-schedule/AdministratorMenu';
+
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: 'layout' });
+
+  return {
+    title: t('shiftSchedule'),
+  };
+}
+
+export default function ShiftSchedulePage({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  unstable_setRequestLocale(locale);
+
+  return (
+    <>
+      <AdministratorMenu />
+      <ScheduleTable week={shiftScheduleMochData} />
+    </>
+  );
+}

src/components/shift-schedule/AdministratorMenu.tsx

@@ -0,0 +1,24 @@
+import { Button } from '@/components/ui/Button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
+import { Trash2Icon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+function AdministratorMenu() {
+  const t = useTranslations('shiftSchedule.administratorMenu');
+
+  return (
+    <Card className='m-8'>
+      <CardHeader>
+        <CardTitle>{t('administratorMenu')}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button variant='link' className='flex flex-row space-x-3 space-y-0'>
+          <Trash2Icon />
+          <p>{t('clearShiftSchedule')}</p>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+
+export { AdministratorMenu };

src/components/shift-schedule/RegisterSection.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@/components/ui/Button';
+import { Checkbox } from '@/components/ui/Checkbox';
+import { Label } from '@/components/ui/Label';
+import { useTranslations } from 'next-intl';
+
+function RegisterSection({ className }: { className?: string }) {
+  const t = useTranslations(
+    'shiftSchedule.scheduleTable.scheduleCellDialog.registerSection',
+  );
+
+  return (
+    <section className={className}>
+      <section className='flex flex-row space-x-2'>
+        <Label htmlFor='recurring'>{t('recurring')}: </Label>
+        <Checkbox id='recurring' />
+      </section>
+      <Button>{t('register')}</Button>
+    </section>
+  );
+}
+
+export { RegisterSection };

src/components/shift-schedule/ScheduleCell.tsx

@@ -0,0 +1,20 @@
+import { ScheduleCellContent } from '@/components/shift-schedule/ScheduleCellContent';
+import { ScheduleCellDialog } from '@/components/shift-schedule/ScheduleCellDialog';
+import type { ScheduleCellProps } from '@/components/shift-schedule/ScheduleTable';
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/Dialog';
+import React from 'react';
+
+function ScheduleCell({ members }: ScheduleCellProps) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <ScheduleCellContent members={members} />
+      </DialogTrigger>
+      <DialogContent className='w-1/3 min-w-80 p-3'>
+        <ScheduleCellDialog members={members} />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { ScheduleCell };

src/components/shift-schedule/ScheduleCellContent.tsx

@@ -0,0 +1,70 @@
+import type { ScheduleCellProps } from '@/components/shift-schedule/ScheduleTable';
+import { TableCell } from '@/components/ui/Table';
+import { cx } from '@/lib/utils';
+import { UserIcon, UsersIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import type React from 'react';
+
+function ScheduleCellContent({ members }: ScheduleCellProps) {
+  const t = useTranslations('shiftSchedule.scheduleTable.scheduleCellContent');
+
+  const colorStyle =
+    members.length === 0
+      ? 'bg-accent/50 hover:bg-accent dark:bg-accent/40 dark:hover:bg-accent/60 text-accent-foreground'
+      : 'bg-foreground/20 hover:bg-foreground/25';
+
+  let memberCountIcon: React.ReactNode;
+  const memberCountIconStyle = 'w-7 h-7';
+  let memberCount: React.ReactNode;
+  const memberCountStyle = 'flex align-bottom space-x-1 space-y-0';
+  let skillIcons: React.ReactNode;
+
+  // Set member count icon, member count, and skill icons based on amount of members present
+  if (members.length === 0) {
+    // Empty shift
+    memberCount = <p className='leading-none'>{t('empty')}</p>;
+  } else {
+    // At least 1 person on shift
+    skillIcons = (
+      <section className='leading-none'>[skill icons total]</section>
+    );
+
+    if (members.length === 1) {
+      // 1 person on shit
+      memberCountIcon = <UserIcon className={memberCountIconStyle} />;
+      memberCount = (
+        <div className={memberCountStyle}>
+          <p className='leading-none'>
+            1 {t('member')} {t('present')}
+          </p>
+        </div>
+      );
+    } else {
+      // 2 or more people on shift
+      memberCountIcon = <UsersIcon className={memberCountIconStyle} />;
+      memberCount = (
+        <div className={memberCountStyle}>
+          <p className='leading-none'>
+            {members.length} {t('members')} {t('present')}
+          </p>
+        </div>
+      );
+    }
+  }
+
+  return (
+    <TableCell className='h-20 min-w-52 flex-1 border p-1.5'>
+      <div
+        className={cx(colorStyle, 'flex size-full space-x-2 rounded-md p-3')}
+      >
+        {memberCountIcon}
+        <section className='flex flex-1 flex-col space-y-3'>
+          {memberCount}
+          {skillIcons}
+        </section>
+      </div>
+    </TableCell>
+  );
+}
+
+export { ScheduleCellContent };

src/components/shift-schedule/ScheduleCellDialog.tsx

@@ -0,0 +1,41 @@
+import { RegisterSection } from '@/components/shift-schedule/RegisterSection';
+import type { ScheduleCellProps } from '@/components/shift-schedule/ScheduleTable';
+import { DialogHeader, DialogTitle } from '@/components/ui/Dialog';
+import { useTranslations } from 'next-intl';
+
+function ScheduleCellDialog({ members }: ScheduleCellProps) {
+  const t = useTranslations('shiftSchedule.scheduleTable.scheduleCellDialog');
+
+  let membersDisplay: React.ReactNode;
+
+  if (members.length === 0) {
+    membersDisplay = <p className='leading-none'>{t('empty')}</p>;
+  } else {
+    membersDisplay = (
+      <>
+        {members.map((member) => (
+          <section key={member.name} className=''>
+            <p>{member.name}</p>
+            <section className='ml-5'>[skill icons]</section>
+          </section>
+        ))}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle className='font-semibold text-3xl'>
+          {t('onShift')}
+        </DialogTitle>
+      </DialogHeader>
+      <section className='flex justify-between space-x-8 px-2 pb-1'>
+        <section className='flex flex-1 flex-col'>{membersDisplay}</section>
+        <RegisterSection className='mt-auto flex w-fit flex-col space-y-3' />
+      </section>
+    </>
+  );
+}
+
+export { ScheduleCellDialog };

src/components/shift-schedule/ScheduleCellSkeleton.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from '@/components/ui/Skeleton';
+import { TableCell } from '@/components/ui/Table';
+import type React from 'react';
+
+function ScheduleCellSkeleton() {
+  return (
+    <TableCell className='h-20 min-w-52 flex-1 border p-1.5'>
+      <Skeleton className='size-full' />
+    </TableCell>
+  );
+}
+
+export { ScheduleCellSkeleton };