Feature/multi tenant base

app/components/listboxes.tsx

@@ -8,27 +8,27 @@ const listboxButtonClassName =
 const listBoxOptionsClassname =
 	'z-50 absolute mt-1 max-h-60 w-full overflow-auto rounded-md py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm border-input border border-1'
 
-interface HorseData {
+interface AnimalData {
 	id: string
 	name: string
 }
 
-interface HorseListboxProps {
-	horses: HorseData[]
+interface AnimalListboxProps {
+	animals: AnimalData[]
 	name: string
-	defaultValues?: HorseData[]
+	defaultValues?: AnimalData[]
 	error: boolean
 }
 
-export function HorseListbox({
-	horses,
+export function AnimalListbox({
+	animals,
 	name,
 	defaultValues = [],
 	error,
-}: HorseListboxProps) {
-	const initialValues = horses.filter(horse => {
+}: AnimalListboxProps) {
+	const initialValues = animals.filter(animal => {
 		for (const value of defaultValues) {
-			if (value.id == horse.id) {
+			if (value.id == animal.id) {
 				return true
 			}
 		}
@@ -51,7 +51,7 @@ export function HorseListbox({
 						aria-invalid={error ? true : undefined}
 					>
 						<span className="block truncate">
-							{selected.map(horse => horse.name).join(', ')}
+							{selected.map(animal => animal.name).join(', ')}
 						</span>
 						<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
 							<Icon className="text-body-md" name="caret-sort" />
@@ -65,22 +65,22 @@ export function HorseListbox({
 					leaveTo="opacity-0"
 				>
 					<Listbox.Options className={listBoxOptionsClassname}>
-						{horses.map((horse, horseIdx) => (
+						{animals.map((animal, animalIdx) => (
 							<Listbox.Option
-								key={horseIdx}
+								key={animalIdx}
 								className={({ active }) =>
 									`relative cursor-default select-none py-2 pl-10 pr-4
 									${active ? 'bg-teal-600 text-white' : 'bg-background text-primary'}`
 								}
-								value={horse}
+								value={animal}
 							>
 								{({ selected, active }) => (
 									<>
 										<span
-											className={`block truncate 
+											className={`block truncate
 											${selected ? 'font-semibold' : 'font-normal'}`}
 										>
-											{horse.name}
+											{animal.name}
 										</span>
 										{selected ? (
 											<span

app/components/sidebar.tsx

@@ -0,0 +1,98 @@
+import { useRef } from 'react'
+import { Form, Link, NavLink } from '@remix-run/react'
+import { Cat } from 'lucide-react'
+import { Icon } from '~/components/ui/icon.tsx'
+import { ThemeSwitch } from '~/routes/resources+/theme/index.tsx'
+import { useUser } from '~/utils/user.ts'
+import { getUserImgSrc } from '~/utils/misc.ts'
+
+export function Sidebar({
+	userPreference,
+}: {
+	userPreference: 'light' | 'dark' | null
+}) {
+	const user = useUser()
+	const formRef = useRef<HTMLFormElement>(null)
+	const userIsAdmin = user?.roles.find(r => r.name === 'admin')
+
+	const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+		`flex items-center gap-3 rounded-md px-3 py-2 text-body-sm font-medium transition-colors ${
+			isActive
+				? 'bg-sidebar-active text-sidebar-active-foreground'
+				: 'text-sidebar-foreground hover:bg-sidebar-border'
+		}`
+
+	return (
+		<aside className="fixed inset-y-0 left-0 z-40 flex w-60 flex-col border-r border-sidebar-border bg-sidebar">
+			{/* Logo */}
+			<div className="flex h-16 shrink-0 items-center border-b border-sidebar-border px-5">
+				<Link to="/" className="flex items-center gap-2">
+					<span className="text-h6 font-bold text-sidebar-active">The Barn</span>
+				</Link>
+			</div>
+
+			{/* Navigation */}
+			<nav className="flex flex-1 flex-col gap-1 overflow-y-auto px-3 py-4">
+				<NavLink to="/calendar" className={navLinkClass}>
+					<Icon name="calendar" className="h-4 w-4 shrink-0" />
+					Calendar
+				</NavLink>
+
+				{userIsAdmin ? (
+					<>
+						<p className="mt-5 px-3 pb-1 text-body-2xs font-semibold uppercase tracking-wider text-muted-foreground">
+							Admin
+						</p>
+						<NavLink to="/admin/users" className={navLinkClass}>
+							<Icon name="person" className="h-4 w-4 shrink-0" />
+							Users
+						</NavLink>
+						<NavLink to="/admin/animals" className={navLinkClass}>
+							<Cat className="h-4 w-4 shrink-0" />
+							Animals
+						</NavLink>
+						<NavLink to="/admin/email" className={navLinkClass}>
+							<Icon name="email" className="h-4 w-4 shrink-0" />
+							Email
+						</NavLink>
+					</>
+				) : null}
+			</nav>
+
+			{/* Footer: theme toggle + user */}
+			<div className="shrink-0 border-t border-sidebar-border p-3">
+				<div className="mb-2 flex items-center justify-between px-2">
+					<span className="text-body-2xs text-muted-foreground">Theme</span>
+					<ThemeSwitch userPreference={userPreference} />
+				</div>
+				<div className="flex items-center gap-3 rounded-md px-2 py-2">
+					<img
+						className="h-8 w-8 shrink-0 rounded-full object-cover"
+						alt={user.name ?? user.username}
+						src={getUserImgSrc(user.imageId)}
+					/>
+					<div className="flex min-w-0 flex-1 flex-col">
+						<span className="truncate text-body-xs font-semibold text-sidebar-foreground">
+							{user.name ?? user.username}
+						</span>
+						<Link
+							to={`/users/${user.username}`}
+							className="truncate text-body-2xs text-muted-foreground hover:underline"
+						>
+							View profile
+						</Link>
+					</div>
+					<Form action="/logout" method="POST" ref={formRef}>
+						<button
+							type="submit"
+							className="rounded p-1 text-muted-foreground hover:text-sidebar-foreground"
+							aria-label="Logout"
+						>
+							<Icon name="exit" className="h-4 w-4" />
+						</button>
+					</Form>
+				</div>
+			</div>
+		</aside>
+	)
+}

app/components/ui/data_table.tsx

@@ -20,11 +20,15 @@ import { Button } from '~/components/ui/button.tsx'
 interface DataTableProps<TData, TValue> {
 	columns: ColumnDef<TData, TValue>[]
 	data: TData[]
+	emptyMessage?: string
+	emptyDescription?: string
 }
 
 export function DataTable<TData, TValue>({
 	columns,
 	data,
+	emptyMessage = 'No results found',
+	emptyDescription,
 }: DataTableProps<TData, TValue>) {
 	const table = useReactTable({
 		data,
@@ -80,11 +84,18 @@ export function DataTable<TData, TValue>({
 							))
 						) : (
 							<TableRow>
-								<TableCell
-									colSpan={columns.length}
-									className="h-24 text-center"
-								>
-									No results.
+								<TableCell colSpan={columns.length}>
+									<div className="flex flex-col items-center justify-center py-16 text-center">
+										<div className="mb-3 text-4xl text-muted-foreground/40">—</div>
+										<p className="text-body-sm font-medium text-muted-foreground">
+											{emptyMessage}
+										</p>
+										{emptyDescription && (
+											<p className="mt-1 text-body-xs text-muted-foreground/70">
+												{emptyDescription}
+											</p>
+										)}
+									</div>
 								</TableCell>
 							</TableRow>
 						)}

app/data.ts

@@ -1,39 +1,39 @@
 import { Prisma } from '@prisma/client'
 
 export const siteName = 'The Barn Volunteer Portal'
-export const siteEmailAddress = 'hello@email.trottrack.org'
+export const siteEmailAddress = 'hello@thebarnaz.com'
 export const siteEmailAddressWithName =
-	siteName + ' <hello@email.trottrack.org>'
-export const siteBaseUrl = 'https://thebarn.trottrack.org'
+	siteName + ' <hello@thebarnaz.com>'
+export const siteBaseUrl = 'https://thebarnaz.com'
 
 export const volunteerTypes = [
 	{
 		displayName: 'cleaning crew',
 		field: 'cleaningCrew',
 		reqField: 'cleaningCrewReq',
 		description:
-			'Cleaning crew volunteers help clean all pastures and stalls in the barn, check automatic waterers, sweep the feed room and tack room, and handle other miscellaneous cleaning jobs. No prior experience with horses is required.',
+			'Cleaning crew volunteers help maintain the facility, check waterers, sweep common areas, and handle other miscellaneous cleaning tasks. No prior experience with animals is required.',
 	},
 	{
 		displayName: 'side walkers',
 		field: 'sideWalkers',
 		reqField: 'sideWalkersReq',
 		description:
-			'Side walkers walk alongside students helping to support them during lessons.No prior experience with horses needed. Must be able to walk on uneven surfaces.',
+			'Side walkers walk alongside participants helping to support them during sessions. No prior experience with animals needed. Must be able to walk on uneven surfaces.',
 	},
 	{
 		displayName: 'lesson assistants',
 		field: 'lessonAssistants',
 		reqField: 'lessonAssistantsReq',
 		description:
-			'Lesson assistants should have 1+ years of experience with horses. They must be able to groom and tack horses, and to communicate effectively with both students and instructors.',
+			'Lesson assistants should have 1+ years of experience with the animals. They assist instructors and communicate effectively with both participants and staff.',
 	},
 	{
-		displayName: 'horse leaders',
-		field: 'horseLeaders',
-		reqField: 'horseLeadersReq',
+		displayName: 'animal handlers',
+		field: 'animalHandlers',
+		reqField: 'animalHandlersReq',
 		description:
-			'Leads horses during lessons. Should have 1+ years of experiences with horses, and must be able to walk on uneven surfaces.',
+			'Animal handlers guide and manage animals during sessions. Should have 1+ years of experience with animals, and must be able to walk on uneven surfaces.',
 	},
 ] as const
 
@@ -49,7 +49,7 @@ export interface UserData {
 	yearsOfExperience: number | null
 }
 
-export interface HorseData {
+export interface AnimalData {
 	id: string
 	name: string
 	imageId: string | null
@@ -60,9 +60,9 @@ export interface HorseData {
 	cooldownEndDate: Date | null
 }
 
-export interface HorseAssignment {
+export interface AnimalAssignment {
 	userId: string
-	horseId: string
+	animalId: string
 }
 
 export interface CalEvent {
@@ -72,28 +72,28 @@ export interface CalEvent {
 	end: Date
 
 	instructors: UserData[]
-	horses: HorseData[]
+	animals: AnimalData[]
 
 	cleaningCrewReq: number
 	lessonAssistantsReq: number
-	horseLeadersReq: number
+	animalHandlersReq: number
 	sideWalkersReq: number
 
 	cleaningCrew: UserData[]
 	lessonAssistants: UserData[]
-	horseLeaders: UserData[]
+	animalHandlers: UserData[]
 	sideWalkers: UserData[]
 }
 
 const EventWithAllRelations = Prisma.validator<Prisma.EventArgs>()({
 	include: {
-		horses: true,
+		animals: true,
 		instructors: true,
 		cleaningCrew: true,
 		lessonAssistants: true,
-		horseLeaders: true,
+		animalHandlers: true,
 		sideWalkers: true,
-		horseAssignments: true,
+		animalAssignments: true,
 	},
 })
 
@@ -102,11 +102,11 @@ export type EventWithAllRelations = Prisma.EventGetPayload<
 >
 const EventWithVolunteers = Prisma.validator<Prisma.EventArgs>()({
 	include: {
-		horses: true,
+		animals: true,
 		instructors: true,
 		cleaningCrew: true,
 		lessonAssistants: true,
-		horseLeaders: true,
+		animalHandlers: true,
 		sideWalkers: true,
 	},
 })