feat: Shift schedule page

lighthouserc.cjs

@@ -13,6 +13,7 @@ const config = {
         'http://localhost:3000/en/news/1',
         'http://localhost:3000/en/storage',
         'http://localhost:3000/en/storage/shopping-cart',
+        'http://localhost:3000/en/shift-schedule',
       ],
       startServerCommand: 'bun run start',
     },

messages/en.json

@@ -38,6 +38,7 @@
     "events": "Events",
     "storage": "Storage",
     "about": "About",
+    "shiftSchedule": "Shift Schedule",
     "changeLocale": "Change language",
     "toggleTheme": "Toggle theme",
     "light": "Light",
@@ -132,5 +133,28 @@
       "returnByDescription": "Select how long you would like to borrow the item for.",
       "submit": "Submit"
     }
+  },
+  "shiftSchedule": {
+    "title": "Shift Schedule",
+    "administratorMenu": {
+      "label": "Administrator Menu",
+      "open": "Open Administrator Menu",
+      "close": "Close Administrator Menu",
+      "clearShiftSchedule": "Clear shift schedule"
+    },
+    "scheduleTable": {
+      "time": "Time",
+      "day": "{day, select, monday {Monday} tuesday {Tuesday} wednesday {Wednesday} thursday {Thursday} other {Friday}}",
+      "scheduleCell": {
+        "onShift": "{count, plural, =0 {Closed} =1 {1 person on shift} other {# people on shift}}",
+        "scheduleCellDialog": {
+          "empty": "No-one on shift",
+          "registerSection": {
+            "recurring": "Recurring",
+            "register": "Register"
+          }
+        }
+      }
+    }
   }
 }

messages/no.json

@@ -38,6 +38,7 @@
     "events": "Hendelser",
     "storage": "Lager",
     "about": "Om oss",
+    "shiftSchedule": "Vaktliste",
     "changeLocale": "Bytt språk",
     "toggleTheme": "Bytt tema",
     "light": "Lys",
@@ -132,5 +133,28 @@
       "returnByDescription": "Velg hvor lenge du ønsker å låne gjenstanden(e)",
       "submit": "Send"
     }
+  },
+  "shiftSchedule": {
+    "title": "Vaktliste",
+    "administratorMenu": {
+      "label": "Administrator-meny",
+      "open": "Åpne Administrator-meny",
+      "close": "Lukk Administrator-meny",
+      "clearShiftSchedule": "Tøm vaktliste"
+    },
+    "scheduleTable": {
+      "time": "Tid",
+      "day": "{day, select, monday {Mandag} tuesday {Tirsdag} wednesday {Onsdag} thursday {Torsdag} other {Fredag}}",
+      "scheduleCell": {
+        "onShift": "{count, plural, =0 {Stengt} =1 {1 person på vakt} other {# personer på vakt}}",
+        "scheduleCellDialog": {
+          "empty": "Ingen på vakt",
+          "registerSection": {
+            "recurring": "Gjentagende",
+            "register": "Registrer"
+          }
+        }
+      }
+    }
   }
 }

package.json

@@ -22,6 +22,8 @@
     "@aws-sdk/client-s3": "^3.679.0",
     "@lucia-auth/adapter-drizzle": "^1.1.0",
     "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",

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

@@ -0,0 +1,23 @@
+import { getTranslations, setRequestLocale } from 'next-intl/server';
+
+type ShiftScheduleLayoutProps = {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+};
+
+export default async function ShiftScheduleLayout({
+  params,
+  children,
+}: ShiftScheduleLayoutProps) {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+  const t = await getTranslations('shiftSchedule');
+
+  return (
+    <>
+      <h1 className='mb-4 text-center'>{t('title')}</h1>
+      {children}
+    </>
+  );
+}

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

@@ -0,0 +1,126 @@
+import { Skeleton } from '@/components/ui/Skeleton';
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/Table';
+import { useFormatter, useTranslations } from 'next-intl';
+
+export default function ShiftScheduleLayout() {
+  const t = useTranslations('shiftSchedule.scheduleTable');
+  const format = useFormatter();
+
+  const days = [
+    'monday',
+    'tuesday',
+    'wednesday',
+    'thursday',
+    'friday',
+  ] as const;
+  const timeslots = ['first', 'second', 'third', 'fourth'] as const;
+
+  function getDateTimeRange(timeslot: string) {
+    let firstDate: Date;
+    let secondDate: Date;
+
+    switch (timeslot) {
+      case timeslots[0]:
+        firstDate = new Date(0, 0, 0, 10, 15, 0, 0);
+        secondDate = new Date(0, 0, 0, 12, 7, 0, 0);
+        break;
+
+      case timeslots[1]:
+        firstDate = new Date(0, 0, 0, 12, 7, 0, 0);
+        secondDate = new Date(0, 0, 0, 14, 7, 0, 0);
+        break;
+
+      case timeslots[2]:
+        firstDate = new Date(0, 0, 0, 14, 7, 0, 0);
+        secondDate = new Date(0, 0, 0, 16, 7, 0, 0);
+        break;
+
+      case timeslots[3]:
+        firstDate = new Date(0, 0, 0, 16, 7, 0, 0);
+        secondDate = new Date(0, 0, 0, 18, 0, 0, 0);
+        break;
+
+      default:
+        firstDate = new Date();
+        secondDate = new Date();
+    }
+
+    return format.dateTimeRange(firstDate, secondDate, {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    });
+  }
+
+  return (
+    <>
+      {/* Table shown on small screens */}
+      <div className='sm:hidden'>
+        {days.map((day, index) => (
+          <Table key={day} className={index === 0 ? '' : 'mt-8'}>
+            <TableHeader>
+              <TableRow>
+                <TableHead className='w-2/5'>{t('time')}</TableHead>
+                <TableHead className='w-3/5 border-x'>
+                  {t('day', { day: day })}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {timeslots.map((timeslot) => (
+                <TableRow key={timeslot}>
+                  <TableCell className='border-y'>
+                    {getDateTimeRange(timeslot)}
+                  </TableCell>
+                  <TableCell key={day} className='h-20 min-w-52 border p-1.5'>
+                    <Skeleton className='size-full' />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        ))}
+        <Table>
+          <TableCaption>[skill icons legend]</TableCaption>
+        </Table>
+      </div>
+
+      {/* Table shown on all other screens */}
+      <Table className='hidden sm:table'>
+        <TableHeader>
+          <TableRow>
+            <TableHead className='w-1/6'>{t('time')}</TableHead>
+            {days.map((day) => (
+              <TableHead key={day} className='w-1/6 border-x'>
+                {t('day', { day: day })}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {timeslots.map((timeslot) => (
+            <TableRow key={timeslot}>
+              <TableCell className='min-w-32 border-y'>
+                {getDateTimeRange(timeslot)}
+              </TableCell>
+              {days.map((day) => (
+                <TableCell key={day} className='h-20 min-w-52 border p-1.5'>
+                  <Skeleton className='size-full' />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableCaption className='h-12'>[skill icons legend]</TableCaption>
+      </Table>
+    </>
+  );
+}

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

@@ -0,0 +1,42 @@
+import { AdministratorMenu } from '@/components/shift-schedule/AdministratorMenu';
+import { ScheduleTable } from '@/components/shift-schedule/ScheduleTable';
+import { shiftScheduleMockData } from '@/mock-data/shiftSchedule';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'layout' });
+
+  return {
+    title: t('shiftSchedule'),
+  };
+}
+
+export default async function ShiftSchedulePage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+  const t = await getTranslations('shiftSchedule');
+
+  return (
+    <>
+      <AdministratorMenu
+        t={{
+          label: t('administratorMenu.label'),
+          open: t('administratorMenu.open'),
+          close: t('administratorMenu.close'),
+          clearShiftSchedule: t('administratorMenu.clearShiftSchedule'),
+        }}
+      />
+      <ScheduleTable week={shiftScheduleMockData} />
+    </>
+  );
+}

src/components/shift-schedule/AdministratorMenu.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/Collapsible';
+import { ChevronDownIcon, ChevronUpIcon, Trash2Icon } from 'lucide-react';
+import { useState } from 'react';
+
+type AdministratorMenuProps = {
+  t: {
+    label: string;
+    open: string;
+    close: string;
+    clearShiftSchedule: string;
+  };
+};
+
+function AdministratorMenu({ t }: AdministratorMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className='mx-auto xs:mx-8 my-8 rounded border p-3'
+    >
+      <div className='mx-1 flex justify-between'>
+        <span className='my-auto font-semibold text-xl'>{t.label}</span>
+        <CollapsibleTrigger asChild>
+          <Button variant='ghost'>
+            {isOpen ? (
+              <ChevronUpIcon aria-label={t.close} className='size-4' />
+            ) : (
+              <ChevronDownIcon aria-label={t.open} className='size-4' />
+            )}
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <CollapsibleContent className='mt-2'>
+        <Button variant='link' className='flex gap-3 text-destructive'>
+          <Trash2Icon />
+          <span>{t.clearShiftSchedule}</span>
+        </Button>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export { AdministratorMenu };

src/components/shift-schedule/RegisterSection.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@/components/ui/Button';
+import { Checkbox } from '@/components/ui/Checkbox';
+import { Label } from '@/components/ui/Label';
+import { cx } from '@/lib/utils';
+import { useTranslations } from 'next-intl';
+
+function RegisterSection({ className }: { className?: string }) {
+  const t = useTranslations(
+    'shiftSchedule.scheduleTable.scheduleCell.scheduleCellDialog.registerSection',
+  );
+
+  return (
+    <div className={cx(className, 'space-y-3')}>
+      <section className='flex gap-2'>
+        <Label htmlFor='recurring'>{t('recurring')}: </Label>
+        <Checkbox id='recurring' />
+      </section>
+      <Button className='float-right'>{t('register')}</Button>
+    </div>
+  );
+}
+
+export { RegisterSection };