137 lines
4.0 KiB
Markdown
137 lines
4.0 KiB
Markdown
# LibreBooking UI
|
|
|
|
A modern, user-friendly web interface for LibreBooking that provides an improved booking experience while maintaining compatibility with the LibreBooking API.
|
|
|
|
## Features
|
|
|
|
### For Users
|
|
- **Resource Browsing**: View available resources with detailed information including location, capacity, and amenities
|
|
- **Easy Booking**: Intuitive reservation creation with real-time availability checking
|
|
- **Calendar View**: Visual weekly calendar showing resource availability and existing bookings
|
|
- **Responsive Design**: Works seamlessly on desktop, tablet, and mobile devices
|
|
|
|
### For Administrators
|
|
- **Admin Dashboard**: Centralized management interface for all reservations
|
|
- **Reservation Management**: Confirm, cancel, and review booking requests
|
|
- **Status Tracking**: Monitor pending, confirmed, and cancelled reservations
|
|
- **Quick Actions**: One-click confirmation and cancellation of bookings
|
|
|
|
## Technology Stack
|
|
|
|
- **Frontend**: React 18 with TypeScript
|
|
- **Routing**: React Router for navigation
|
|
- **Date Handling**: date-fns for date manipulation
|
|
- **Styling**: CSS3 with responsive design
|
|
- **API Integration**: Structured client for LibreBooking API compatibility
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── components/ # Reusable UI components
|
|
│ ├── Layout.tsx # Main navigation and layout
|
|
│ └── Layout.css
|
|
├── pages/ # Page components
|
|
│ ├── ResourcesList.tsx # Resource listing page
|
|
│ ├── CreateReservation.tsx # Booking form
|
|
│ ├── ResourceCalendar.tsx # Weekly calendar view
|
|
│ └── AdminDashboard.tsx # Admin management interface
|
|
├── services/ # API and business logic
|
|
│ ├── api.ts # Mock API for development
|
|
│ └── librebooking-api.ts # LibreBooking API client
|
|
├── types/ # TypeScript interfaces
|
|
│ └── index.ts # Core data types
|
|
└── App.tsx # Main application component
|
|
```
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
- Node.js 16+
|
|
- npm or yarn
|
|
|
|
### Installation
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Start the development server:
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
3. Open [http://localhost:3000](http://localhost:3000) in your browser
|
|
|
|
## API Integration
|
|
|
|
### Development Mode
|
|
The application runs with mock data by default for development and testing.
|
|
|
|
### Production Integration
|
|
|
|
1. Copy the environment template:
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
|
|
2. Configure your LibreBooking API endpoint:
|
|
```env
|
|
REACT_APP_LIBREBOOKING_API_URL=https://your-librebooking-instance.com
|
|
```
|
|
|
|
3. Update the API client in `src/services/api.ts` to use the real LibreBooking API:
|
|
```typescript
|
|
import { createLibreBookingClient } from './librebooking-api';
|
|
|
|
export const api = createLibreBookingClient();
|
|
```
|
|
|
|
## Available Pages
|
|
|
|
- **/resources** - Browse available resources
|
|
- **/resources/:id/calendar** - View resource availability calendar
|
|
- **/reservations/new** - Create a new reservation
|
|
- **/admin** - Admin dashboard for managing reservations
|
|
|
|
## Building for Production
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
This creates a `build` folder with the production-ready application.
|
|
|
|
## Features in Detail
|
|
|
|
### Resource Management
|
|
- List all available resources with filtering options
|
|
- Display resource details: location, capacity, amenities
|
|
- Real-time availability status
|
|
- Quick booking shortcuts
|
|
|
|
### Reservation System
|
|
- Step-by-step booking process
|
|
- Date and time selection with validation
|
|
- Resource-specific booking forms
|
|
- Confirmation and status tracking
|
|
|
|
### Calendar View
|
|
- Weekly calendar layout
|
|
- Visual reservation blocks
|
|
- Navigation between weeks
|
|
- Today highlighting
|
|
- Color-coded reservation status
|
|
|
|
### Admin Dashboard
|
|
- Overview statistics
|
|
- Pending reservation alerts
|
|
- Quick action buttons
|
|
- Detailed reservation information
|
|
- Status management
|
|
|
|
## Contributing
|
|
|
|
This UI is designed to be an independent frontend that communicates with the LibreBooking backend via REST API. The mock data service makes it easy to develop and test without a backend connection.
|