A comprehensive facility management system built for tracking cleaning staff visits, managing sites, and maintaining service quality through customizable checklists.
- Admin Dashboard: Complete system management with user, site, and checklist administration
- Staff Portal: Visit logging, site management, and checklist completion
- Client Interface: Monitor assigned sites and view service history
- Site Management: Create and manage facility locations with detailed information
- Visit Tracking: Log visits with check-in/check-out times and notes
- Customizable Checklists: Create reusable checklists for different site types
- User Management: Role-based access control (Admin, Staff, Client)
- Database Inspector: Real-time database monitoring and management tools
- Frontend: React 18 + TypeScript + Vite
- UI Components: shadcn/ui + Radix UI + Tailwind CSS
- Backend: Supabase (PostgreSQL + Auth + Real-time)
- State Management: TanStack Query (React Query)
- Form Handling: React Hook Form + Zod validation
- Routing: React Router v6
- Node.js 18+ (recommended: use nvm)
- A Supabase account and project
git clone <your-git-url>
cd client-site-lognpm installCreate a .env file in the project root with your Supabase credentials:
# Supabase Configuration
# Get these values from your Supabase project dashboard at https://app.supabase.com
VITE_SUPABASE_URL=your_supabase_project_url_here
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here
# Example values (replace with your actual values):
# VITE_SUPABASE_URL=https://your-project-ref.supabase.co
# VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...How to get your Supabase credentials:
- Go to https://app.supabase.com
- Select your project (or create a new one)
- Go to Settings → API
- Copy the "Project URL" as
VITE_SUPABASE_URL - Copy the "anon public" key as
VITE_SUPABASE_ANON_KEY
VITE_ prefix is required for Vite to expose these variables to the browser. These are public keys and safe to expose in the frontend.
The application uses Supabase migrations for database schema management. The migrations in /supabase/migrations/ will be automatically applied to your Supabase project.
Key database features:
- Row Level Security (RLS) enabled on all tables
- Role-based access control
- Automated profile creation on user signup
- Proper foreign key relationships
npm run devThe application will be available at http://localhost:8080
npm run dev- Start development server with hot reloadnpm run build- Build for productionnpm run build:dev- Build in development modenpm run preview- Preview production build locallynpm run lint- Run ESLint
src/
├── components/ # Reusable UI components
│ ├── ui/ # shadcn/ui components
│ ├── AppSidebar.tsx # Main navigation sidebar
│ ├── Layout.tsx # Application layout wrapper
│ └── ErrorBoundary.tsx # Error handling
├── contexts/ # React contexts
│ └── AuthContext.tsx # Authentication state management
├── hooks/ # Custom React hooks
├── integrations/ # External service integrations
│ └── supabase/ # Supabase client and types
├── lib/ # Utility functions and validations
├── pages/ # Route components
│ ├── admin/ # Admin-only pages
│ ├── staff/ # Staff role pages
│ └── client/ # Client role pages
└── assets/ # Static assets
- Full system access
- User management (create, update, delete users)
- Site management (all sites)
- Checklist management
- Visit oversight (all visits)
- Database inspection tools
- View all sites
- Create and manage visits
- Complete checklists during visits
- View personal visit history
- View assigned sites only
- Monitor visit history for their sites
- Read-only access to their facilities
The application uses Supabase's auto-generated TypeScript types for type safety. Database schema changes are automatically reflected in the TypeScript types.
profiles- User profiles with role informationsites- Facility locations with visit schedulingvisits- Service visit logs with check-in/out timeschecklists- Reusable task lists for different site types
- User signs up/signs in via Supabase Auth
- Profile is automatically created via database trigger
- Role-based redirecting and UI rendering
- Row Level Security enforces permissions at the database level
- Global error boundary catches React errors
- Query error boundaries for data fetching errors
- Form validation with Zod schemas
- Comprehensive error messaging
The application can be deployed to any static hosting service:
- Build the project:
npm run build - Deploy the
dist/folder to your hosting service - Configure environment variables on your hosting platform
- Ensure your Supabase project is properly configured for production
Recommended hosting options:
- Vercel (recommended - see DEPLOYMENT.md for detailed guide)
- Netlify
- AWS S3 + CloudFront
- GitHub Pages
Set these environment variables in your hosting platform:
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_keySee DEPLOYMENT.md for complete deployment instructions.
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
For issues related to:
- Application bugs: Open a GitHub issue
- Supabase setup: Check Supabase Documentation
- Deployment: Consult your hosting provider's documentation
Checklist
Clinical Room 1