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:

npm install

2. Start the development server:

npm start

3. Open 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:

cp .env.example .env

2. Configure your LibreBooking API endpoint:

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:

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

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.