added vendor runsheets

src/app/runsheet/page.tsx

@@ -1,10 +1,9 @@
 import { SignOutButton } from "@clerk/nextjs";
-import FetchData from "@components/parts/fetchRunsheet";
+import FetchData from "@components/parts/fetchGuestRunsheet";
 
 export default async function Runsheet ()
 {
 
-
 	return (
 		<>
 			<h2 id="runsheet">Runsheets</h2>

src/app/runsheet/vendor/[vendor]/page.tsx

@@ -0,0 +1,18 @@
+import { SignOutButton } from "@clerk/nextjs";
+import FetchData from "@components/parts/fetchRunsheet";
+
+export default async function Runsheet (props)
+{
+	const { vendor } = props.params
+
+	return (
+		<>
+			<h2 id="runsheet">Runsheets</h2>
+			<p>You can print these off for easy reference.</p>
+			<FetchData vendor={vendor} />
+			<span className="signout">
+				<SignOutButton>Log Out</SignOutButton>
+			</span>
+		</>
+	)
+}

src/components/parts/fetchGuestRunsheet/index.tsx

@@ -0,0 +1,59 @@
+import { Client } from '@notionhq/client'
+import { currentUser } from '@clerk/nextjs';
+import type { NotionGuest } from "@ts/people";
+import type { User } from "@clerk/nextjs/server";
+import { TrackEvent } from "@parts/fathom";
+import GuestRunsheets from "@parts/guestRunsheets";
+import { NotionRunsheetEvent, NotionStakeholder } from '@ts/runsheet';
+
+const FetchData = async () =>
+{
+	const { emailAddresses } = await currentUser() as User;
+	const notion = new Client({
+		auth: process.env.NOTION_API_KEY
+	})
+	const data = await notion.databases.query({
+		database_id: process.env.GUEST_DB ?? '',
+		filter: {
+			property: 'GokD',
+			email: {
+				equals: emailAddresses[0].emailAddress.toLowerCase()
+			}
+		}
+	})
+	const guest = data.results?.[0] as unknown as NotionGuest
+	const runsheetEvents: any = await notion.databases.query({
+		database_id: process.env.RUNSHEET_DB ?? '',
+		filter: {
+			property: 'Guests',
+			rollup: {
+				any: {
+					relation: {
+						contains: guest.id
+					}
+				}
+			}
+		}
+	})
+	const stakeholders = await notion.databases.query({
+		database_id: process.env.STAKEHOLDER_DB ?? '',
+		filter: {
+			property: 'Invitations',
+			relation: {
+				contains: guest.id
+			}
+		}
+	})
+
+	return (
+		<>
+			{emailAddresses[0].emailAddress.toLowerCase() && <TrackEvent name="Signed In" />}
+			<GuestRunsheets
+				runsheetEvents={runsheetEvents?.results as any as NotionRunsheetEvent[]}
+				stakeholders={stakeholders?.results as any as NotionStakeholder[]}
+			/>
+		</>
+	)
+}
+
+export default FetchData

src/components/parts/fetchRunsheet/index.tsx

@@ -1,56 +1,43 @@
 import { Client } from '@notionhq/client'
 import { currentUser } from '@clerk/nextjs';
-import type { NotionGuest } from "@ts/people";
 import type { User } from "@clerk/nextjs/server";
 import { TrackEvent } from "@parts/fathom";
-import GuestRunsheets from "@parts/guestRunsheets";
-import { NotionRunsheetEvent, NotionStakeholder } from '@ts/runsheet';
+import { NotionRunsheetEvent } from '@ts/runsheet';
+import VendorRunsheets from '@parts/vendorRunsheet';
 
-const FetchData = async () =>
+const FetchData = async (props) =>
 {
 	const { emailAddresses } = await currentUser() as User;
 	const notion = new Client({
 		auth: process.env.NOTION_API_KEY
 	})
-	const data = await notion.databases.query({
-		database_id: process.env.GUEST_DB ?? '',
-		filter: {
-			property: 'GokD',
-			email: {
-				equals: emailAddresses[0].emailAddress.toLowerCase()
+	let filter = undefined
+
+	if (props.vendor && props.vendor !== 'all')
+	{
+		filter = {
+			property: 'Vendor Slugs',
+			formula: {
+				string: {
+					contains: props.vendor
+				}
 			}
 		}
-	})
-	const guest = data.results?.[0] as unknown as NotionGuest
+	}
+
 	const runsheetEvents: any = await notion.databases.query({
 		database_id: process.env.RUNSHEET_DB ?? '',
-		filter: {
-			property: 'Guests',
-			rollup: {
-				any: {
-					relation: {
-						contains: guest.id
-					}
-				}
-			}
-		}
-	})
-	const stakeholders = await notion.databases.query({
-		database_id: process.env.STAKEHOLDER_DB ?? '',
-		filter: {
-			property: 'Invitations',
-			relation: {
-				contains: guest.id
-			}
-		}
+		filter
 	})
 
+	console.log({ ...runsheetEvents })
+
 	return (
 		<>
 			{emailAddresses[0].emailAddress.toLowerCase() && <TrackEvent name="Signed In" />}
-			<GuestRunsheets
+			<VendorRunsheets
 				runsheetEvents={runsheetEvents?.results as any as NotionRunsheetEvent[]}
-				stakeholders={stakeholders?.results as any as NotionStakeholder[]}
+				vendor={props.vendor?.replaceAll('_', ' ')}
 			/>
 		</>
 	)

src/components/parts/guestRunsheets/index.tsx

@@ -14,8 +14,6 @@ const GuestRunsheets = (props: GuestRunsheetsProps) =>
 
 	runsheetEvents.forEach(event =>
 	{
-		console.log({ ...event })
-
 		events[event.id] = {
 			name: event.properties.Name.title[0].plain_text,
 			tags: event.properties.Tags.multi_select.map(tag => tag.name),

src/components/parts/runsheet/index.tsx

@@ -44,6 +44,9 @@ const Runsheet = (props: RunsheetProps) =>
 						<h4 className={styles.day}>{day}</h4>
 						<table className={styles.timetable}>
 							<thead>
+								<tr className="spacing">
+									<th colspan="5"></th>
+								</tr>
 								<tr>
 									<th>Start</th>
 									<th>End</th>

src/components/parts/runsheet/styles.module.css

@@ -41,15 +41,21 @@
 		font-family: $font_headings;
 		background: $green;
 		color: $white;
+
+		& :global(.spacing) {
+			display: none;
+		}
 	}
 
 	& td, & th {
 		padding: 0.7em;
 	}
 
-	& tr {
-		&:nth-child(2n) {
-			background: $green_light;
-		} 
+	& tbody {
+		& tr {
+			&:nth-child(2n) {
+				background: $green_light;
+			} 
+		}
 	}
 }

src/components/parts/vendorRunsheet/index.tsx

@@ -0,0 +1,38 @@
+import { NotionRunsheetEvent, RunsheetEvent, NotionStakeholder, VendorRunsheetEvent } from "@ts/runsheet"
+import Runsheet from "@parts/runsheet"
+import { parseISO } from "date-fns"
+
+type VendorRunsheetsProps = {
+	runsheetEvents: NotionRunsheetEvent[]
+	vendor: string | null
+}
+
+const VendorRunsheets = (props: VendorRunsheetsProps) =>
+{
+	const { runsheetEvents = [] } = props
+	const events: Record<string, VendorRunsheetEvent> = {}
+
+	runsheetEvents.forEach(event =>
+	{
+		events[event.id] = {
+			name: event.properties.Name.title[0].plain_text,
+			tags: event.properties.Tags.multi_select.map(tag => tag.name),
+			start: parseISO(event.properties.Date.date.start),
+			end: event.properties.Date.date.end ? parseISO(event.properties.Date.date.end) : null,
+			notes: event.properties.Notes.rich_text.map(note => note.plain_text).join('\n'),
+			vendors: event.properties['Vendor Slugs'].formula.string?.split(',')
+		}
+	})
+
+	return (
+		<Runsheet
+			stakeholder={{
+				name: props.vendor ?? "Runsheet",
+				events: Object.values(events).sort((a, b) => a.start.getTime() - b.start.getTime())
+			}}
+		/>
+	)
+}
+
+export default VendorRunsheets
+

src/styles/global/print.css

@@ -1,6 +1,6 @@
 @page {
 	size: A5;
-	margin: 0;
+	margin: 0 0 50px 0;
 }
 
 body {
@@ -36,15 +36,28 @@ article[class*="runsheet"] {
 
 			& span[class*="person_name"] {
 				display: block;
+				margin-bottom: 0;
 			}
 
 			& .frame {
 				display: block;
 			}
 		}
 
-		&:has(+ section[data-page="true"]) {
-			padding-bottom: var(--page_margins);
+		& h4 {
+			margin-bottom: calc(-50px + 0.5em);
+		}
+
+		& thead {
+			& .spacing {
+				height: 50px;
+				background: $white;
+				display: block;
+
+				& th {
+					padding: 0;
+				}
+			}
 		}
 	}
 

src/types/runsheet.d.ts

@@ -34,6 +34,11 @@ export type NotionRunsheetEvent = {
 				plain_text: string
 			}[]
 		}
+		'Vendor Slugs': {
+			formula: {
+				string: string
+			}
+		}
 	}
 }
 
@@ -45,6 +50,10 @@ export type RunsheetEvent = {
 	notes: string;
 }
 
+export type VendorRunsheetEvent = RunsheetEvent & {
+	vendors: string[]
+}
+
 export type NotionStakeholder = {
 	id: string
 	properties: {