A complete end-to-end booking flow and staff portal dashboard for dental clinics, integrated with Supabase.
This skill provides a complete, reusable end-to-end flow for a dental clinic:
Both components write to and read from the same Supabase appointments table.
resources/SUPABASE_SETUP.md to create your Supabase project, set up the database table with policies, and get your API keys.lucide-react for icons and motion/react (or framer-motion) for animations. If you haven't already, install them:
npm install lucide-react framer-motion @supabase/supabase-js
resources directory into your project:
StaffPortal.tsx -> src/components/StaffPortal.tsxBooking.tsx -> src/components/Booking.tsxSUPABASE_URL and SUPABASE_ANON_KEY variables at the top of StaffPortal.tsx with your actual project values. The Booking.tsx component automatically imports the Supabase client from StaffPortal.tsx.<BookingPage onBack={() => handleGoBack()} /> in your app where you want the clinic's booking flow to appear.
brand prop to override the default system logo and name.
<BookingPage
onBack={() => handleGoBack()}
brand={{ logoSrc: "/custom-logo.svg", brandNameNode: <>My <span>Clinic</span></> }}
/>
<StaffPage onClose={() => handleClose()} /> for your admin route. It will automatically handle session checking, show the <StaffLogin />, and transition to the <StaffDashboard /> once authenticated.
brand prop to style the login gate and dashboard header.
<StaffPage
onClose={() => handleClose()}
brand={{ logoSrc: "/custom-logo.svg", brandNameNode: <>My <span>Clinic</span></> }}
/>