The Wild Oasis

A React + Supabase hotel admin dashboard for managing cabins, bookings, check-in/check-out flow, staff accounts, and hotel settings.

Features

• Authentication and protected routes
• Dashboard analytics: bookings, sales, occupancy, today's activity, and charts
• Booking management: filtering, sorting, pagination, detail view, and deletion
• Check-in/check-out workflow with payment confirmation and optional breakfast add-on
• Cabin management: create, edit, delete, and image upload
• Hotel settings management: min/max nights, max guests, breakfast price
• Staff management: create users, update profile, and change password
• Dark/light mode toggle with local persistence

Tech Stack

• Frontend: React 18 + Vite
• Routing: React Router
• Server state: React Query
• Styling: styled-components
• Forms: react-hook-form
• Charts: recharts
• Backend: Supabase (Auth + Database + Storage)

Local Development

1. Install dependencies

npm install

2. Start dev server

npm run dev

3. Build

npm run build

Test Credentials

The login form is prefilled with:

• Email: wildoasis@test.com
• Password: wildoasis

Project Structure

src
├─ context/            # Global context (dark mode)
├─ features/           # Domain modules (auth, bookings, cabins, dashboard, etc.)
├─ hooks/              # Reusable hooks
├─ pages/              # Route-level pages
├─ services/           # Supabase API layer
├─ styles/             # Global styles
├─ ui/                 # Shared UI components
├─ utils/              # Helpers and constants
└─ data/               # Sample data and uploader utility