Add a dependency on the volunteer-manager-timeline project

README.md

@@ -26,6 +26,18 @@ we use the excellent [ts-sql-query](https://ts-sql-query.readthedocs.io/en/stabl
 
 ## Building and deploying
 
+### Checking out the repository
+We depend on a private `volunteer-manager-timeline` component, availability of which is restricted;
+talk to one of the maintainers of this repository if you need access.
+
+Assuming you have access, you will need to generate a
+[Personal Access Token](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line)
+and run the following `git` command, either globally or local to this repository:
+
+```
+$ git config --global url."https://{{PAT}}@github.com/".insteadOf ssh://[email protected]/
+```
+
 ### Building a developer environment
 Developing the AnimeCon Volunteer Manager follows NextJS' best practices. The following commands are
 enabled and actively supported:

app/admin/system/debug/page.tsx

@@ -10,6 +10,8 @@ import TableContainer from '@mui/material/TableContainer';
 import TableRow from '@mui/material/TableRow';
 import Table from '@mui/material/Table';
 
+import { AvailabilityTimeline } from 'volunteer-manager-timeline/src/AvailabilityTimeline';
+
 import { Privilege } from '@lib/auth/Privileges';
 import { requireAuthenticationContext } from '@lib/auth/AuthenticationContext';
 
@@ -28,19 +30,24 @@ export default async function DebugPage() {
     debugValues['Headers'] = [ ...headers() ];
 
     return (
-        <TableContainer component={Paper} sx={{ p: 2, mt: 2 }}>
-            <Table size="small">
-                { Object.entries(debugValues).map(([ key, value ], index) =>
-                    <TableRow key={index}>
-                        <TableCell width="15%">
-                            <strong>{key}</strong>
-                        </TableCell>
-                        <TableCell sx={{ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }}>
-                            { JSON.stringify(value, undefined, /* space= */ 4) }
-                        </TableCell>
-                    </TableRow> )}
-            </Table>
-        </TableContainer>
+        <>
+            <TableContainer component={Paper} sx={{ p: 2, mt: 2 }}>
+                <Table size="small">
+                    { Object.entries(debugValues).map(([ key, value ], index) =>
+                        <TableRow key={index}>
+                            <TableCell width="15%">
+                                <strong>{key}</strong>
+                            </TableCell>
+                            <TableCell sx={{ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }}>
+                                { JSON.stringify(value, undefined, /* space= */ 4) }
+                            </TableCell>
+                        </TableRow> )}
+                </Table>
+            </TableContainer>
+            <Paper sx={{ p: 2 }}>
+                <AvailabilityTimeline />
+            </Paper>
+        </>
     );
 }
 

package.json

@@ -64,6 +64,7 @@
     "simple-sha256": "^1.1.0",
     "ts-sql-query": "^1.57.0",
     "uuid": "^9.0.1",
+    "volunteer-manager-timeline": "github:beverloo/volunteer-manager-timeline#ec92bcd",
     "zod": "^3.22.4"
   },
   "devDependencies": {