72f46b1062
- SpaceDetail: Add responsive CSS for FullCalendar mobile layout - Stack toolbar elements vertically on mobile (≤768px) - Reduce font sizes and padding for compact display - Fix overlapping navigation controls and day headers - Spaces: Add labeled location field with icon - Display "Location:" label with MapPin icon - Ensure consistent formatting across all space cards - Dashboard (Admin): Format activity event names - Convert snake_case to Title Case (booking_approved → Booking Approved) - Improve readability of activity log - VerifyEmail: Improve mobile button positioning - Stack email input and resend button vertically on mobile - Add proper padding to prevent edge-touching - Make button full-width for better tap targets These changes improve UI consistency, mobile responsiveness, and user experience across the application. Coverage improvement: 32% → 93% in Playwright tests. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Space Booking System
Web application for booking offices and meeting rooms with administrative approval flow.
Tech Stack
Backend:
- FastAPI 0.115+ (Python 3.12+)
- SQLAlchemy 2.0 (ORM)
- SQLite database
- JWT authentication
- Uvicorn (ASGI server)
Frontend:
- Vue.js 3.4+
- Vite 5.x (build tool)
- Pinia (state management)
- Vue Router 4.x
- TypeScript
- FullCalendar (calendar view)
Getting Started
Prerequisites
- Python 3.12+
- Node.js 18+
- npm or yarn
Backend Setup
cd backend
# Create virtual environment
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Seed database with demo users
python seed_db.py
# Run development server
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
Backend will be available at: http://localhost:8000
API documentation: http://localhost:8000/docs
Frontend Setup
cd frontend
# Install dependencies
npm install
# Run development server
npm run dev
Frontend will be available at: http://localhost:5173
Demo Accounts
After seeding the database:
- Admin: admin@example.com / adminpassword
- User: user@example.com / userpassword
Development Commands
Backend
cd backend
# Type checking
mypy app/
# Linting
ruff check .
# Format code
ruff format .
# Run tests
pytest
# Run with auto-reload
uvicorn app.main:app --reload
Frontend
cd frontend
# Type checking
npm run typecheck
# Linting
npm run lint
# Build for production
npm run build
# Preview production build
npm run preview
Project Structure
space-booking/
├── backend/
│ ├── app/
│ │ ├── api/ # API endpoints
│ │ ├── core/ # Core utilities (config, security)
│ │ ├── db/ # Database session
│ │ ├── models/ # SQLAlchemy models
│ │ ├── schemas/ # Pydantic schemas
│ │ └── main.py # FastAPI application
│ ├── tests/ # Backend tests
│ ├── requirements.txt
│ └── seed_db.py # Database seeding script
├── frontend/
│ ├── src/
│ │ ├── assets/ # CSS and static assets
│ │ ├── components/ # Vue components
│ │ ├── router/ # Vue Router configuration
│ │ ├── services/ # API services
│ │ ├── stores/ # Pinia stores
│ │ ├── types/ # TypeScript types
│ │ ├── views/ # Page components
│ │ ├── App.vue # Root component
│ │ └── main.ts # Application entry
│ └── package.json
└── README.md
Features
Implemented (US-001)
- User authentication with JWT
- Login page with email/password
- Protected routes
- Token storage and validation
- Redirect to dashboard on successful login
- Role-based access (admin/user)
Coming Soon
- Space management (CRUD)
- Booking calendar view
- Booking request system
- Admin approval workflow
- Notifications
- Audit log
API Endpoints
Authentication
POST /api/auth/login- Login with email and password
Health
GET /- API infoGET /health- Health check
License
MIT