Radius Booking Plugin – Developer Documentation - mdhrshahin20/documentation GitHub Wiki

Welcome to the Radius Booking plugin documentation! This guide provides a comprehensive overview, file relationships, extension strategies, and visual diagrams for key concepts and feature workflows.

📑 Index

Project Overview
Folder Structure
Developer Setup Guide
Plugin Architecture
PHP Backend Files – Detailed Overview
React Frontend Files – Detailed Overview
Relationships and Interactions
How to Add a New Feature (Example & Workflow)
Final Remarks

Project Overview

Purpose: WordPress plugin for managing bookings, appointments, services, employees, customers, and more.
Tech Stack: PHP (WordPress), React, TailwindCSS, Vite, Webpack, Composer, WP REST API.

Folder Structure

Folder/File	Purpose
`bin/`	CLI scripts/tools (e.g., build plugin zip).
`includes/`	PHP codebase: abstracts, core, controllers, models, repositories, etc.
`src/`	React frontend source: components, modules, pages, store, SCSS, etc.
`radius-booking.php`	Plugin bootstrap (WordPress entrypoint).

Developer Setup Guide

Install Dependencies:
- PHP: composer install
- Frontend: npm install
Frontend Build:
- Development: npm run dev (Vite)
- Production: via Webpack or Vite
WordPress Environment:
- Configure .wp-env.json for local WP setup
- Activate plugin via WP admin
Testing & Linting:
- PHPUnit for PHP (vendor/bin/phpunit)
- ESLint & PHPCS for JS/PHP linting

Plugin Architecture

Abstracts/Core: Base classes, ORM, migrations, DI, events.
Controllers: REST API endpoints for appointments, services, users.
Middleware: Auth, permissions, rate limiting.
Database/ORM: Table definitions, relationships, query builder.
Frontend: React, Redux modules, reusable UI components.
Assets: Asset loading via Vite/Webpack.
Installer: Handles initial setup (DB, config).

PHP Backend Files – Detailed Overview

See PHP Backend Files for breakdown of abstracts, controllers, API, database, models, repositories, and resources.

React Frontend Files – Detailed Overview

See React Frontend Files for breakdown of components, modules, pages, state management, and UI.

Relationships and Interactions

System Component Diagram

Below is the system architecture as a component diagram. Use a Mermaid-compatible viewer for proper rendering.

flowchart TD
    A["WordPress Core"] --> B["radius-booking.php"]
    B --> C["includes/ (PHP Core)"]
    C --> D["REST API Controllers"]
    D --> E["API Middleware"]
    D --> F["Services"]
    F --> G["Repositories"]
    G --> H["Models"]
    H --> I["Database"]
    C --> J["Asset Loader"]
    J --> K["src/ (React Frontend)"]
    K --> L["Redux Store"]
    K --> M["React Components"]
    M -- "API Calls" --> D

PHP Class Relationships

Below is the PHP object-oriented class hierarchy and relationships. This diagram has been syntax-corrected for Mermaid.

classDiagram
    class BaseController
    class RESTController
    class AppointmentController
    class ServiceController
    class UserController
    class BaseModel
    class Appointment
    class Service
    class User
    class BaseRepository
    class AppointmentRepository
    class ServiceRepository
    class UserRepository
    class BaseResource
    class AppointmentResource
    class ServiceResource
    class UserResource
    class Migration
    class DBMigrator

    RESTController <|-- BaseController
    AppointmentController <|-- RESTController
    ServiceController <|-- RESTController
    UserController <|-- RESTController

    Appointment <|-- BaseModel
    Service <|-- BaseModel
    User <|-- BaseModel

    AppointmentRepository <|-- BaseRepository
    ServiceRepository <|-- BaseRepository
    UserRepository <|-- BaseRepository

    AppointmentResource <|-- BaseResource
    ServiceResource <|-- BaseResource
    UserResource <|-- BaseResource

    DBMigrator --|> Migration

API Request Flow (Sequence Diagram)

sequenceDiagram
    participant Client
    participant WP as "WordPress"
    participant RR as "RouteRegistrar"
    participant "AppointmentController@create"
    participant Srv as "AppointmentService"
    participant Repo as "AppointmentRepository"
    participant ORM as "ORM/DB"

    Client->>WP: "POST /api/appointments"
    WP->>RR: Route Request
    RR->>"AppointmentController@create": Invoke Controller
    "AppointmentController@create"->>Srv: Create Appointment
    Srv->>Repo: Save Appointment
    Repo->>ORM: Insert Record
    ORM-->>Repo: DB Result
    Repo-->>Srv: Repository Result
    Srv-->>"AppointmentController@create": Service Result
    "AppointmentController@create"-->>WP: ApiResponse
    WP-->>Client: Response

Database Entity Relationship Diagram

erDiagram
    USERS ||--o{ APPOINTMENTS : "has"
    SERVICES ||--o{ APPOINTMENTS : "has"
    USERS {
      int id PK
      string name
      string email
    }
    SERVICES {
      int id PK
      string name
      float price
    }
    APPOINTMENTS {
      int id PK
      int user_id FK
      int service_id FK
      datetime start_time
      datetime end_time
    }

Customer Module State Diagram

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading : "dispatch(FETCH_CUSTOMERS)"
    Loading --> Loaded : "on success"
    Loading --> Error : "on failure"
    Loaded --> Editing : "dispatch(EDIT_CUSTOMER)"
    Editing --> Saving : "dispatch(SAVE_CUSTOMER)"
    Saving --> Loaded : "on save success"
    Saving --> Error : "on save fail"
    Error --> Idle : "retry"

How to Add a New Feature (Example & Workflow)

Example: Adding a "Location" Feature (Full Workflow)

This example walks you through the complete workflow of implementing a new feature, "Location", from backend to frontend.

1. Plan & Prepare

Define what the feature needs:
Example: Allow users to manage physical locations (name, address) linked to appointments.

2. Database Migration

Create Table Migration

includes/Databases/Table/LocationsTable.php

class LocationsTable extends Migration {
    public function up(Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('address');
        $table->timestamps();
    }
    public function down(Blueprint $table) {
        $table->drop();
    }
}

Register Migration

includes/Setup/Installer.php

$this->migrator->add(new LocationsTable());

3. Model & Repository

Model

includes/Models/Location.php

class Location extends BaseModel {
    protected $table = 'locations';
    protected $fillable = ['name', 'address'];
}

Repository

includes/Repositories/LocationRepository.php

class LocationRepository extends BaseRepository {
    protected $model = Location::class;
}

4. Resource & Service

Resource

includes/Resources/LocationResource.php

class LocationResource extends BaseResource {
    public function toArray() {
        return [
            'id'      => $this->id,
            'name'    => $this->name,
            'address' => $this->address,
        ];
    }
}

Service

includes/Services/LocationService.php

class LocationService {
    protected $locations;
    public function __construct(LocationRepository $locations) {
        $this->locations = $locations;
    }

    public function create($attributes) {
        return $this->locations->create($attributes);
    }
    // add other business logic methods as needed
}

5. REST Controller & Routing

Controller

includes/Controllers/LocationController.php

class LocationController extends RESTController {
    public function index() { /* List locations */ }
    public function store($request) { /* Create location */ }
    public function show($id) { /* Show one */ }
    public function update($id, $request) { /* Update */ }
    public function destroy($id) { /* Delete */ }
}

Route Registration

includes/Routes/routes.php

Route::resource('locations', LocationController::class);

6. Frontend Implementation

API Integration

src/modules/Location/api/locationApi.js

import axios from 'axios';
export const fetchLocations = () => axios.get('/api/locations');
export const createLocation = (data) => axios.post('/api/locations', data);
// ...add more as needed

Redux State

src/modules/Location/store/actions.js

export const fetchLocations = () => async (dispatch) => {
    dispatch({ type: 'LOCATIONS_FETCH_REQUEST' });
    // ...API call and state updates
};

Components

Create:

LocationList.jsx (table of locations)
LocationForm.jsx (form for add/edit) Example:

// src/modules/Location/components/LocationForm.jsx
function LocationForm({ onSubmit }) {
  const [name, setName] = React.useState('');
  const [address, setAddress] = React.useState('');
  return (
    <form onSubmit={e => { e.preventDefault(); onSubmit({ name, address }); }}>
      <input value={name} onChange={e => setName(e.target.value)} placeholder="Name" />
      <input value={address} onChange={e => setAddress(e.target.value)} placeholder="Address" />
      <button type="submit">Save</button>
    </form>
  );
}

Page

src/pages/Locations.jsx

import LocationList from '../modules/Location/components/LocationList';
export default function Locations() {
  return (
    <section>
      <h1>Locations</h1>
      <LocationList />
    </section>
  );
}

Route

src/routes.js

{ path: '/locations', element: <Locations /> }

7. UI & Styling

Use TailwindCSS classes or update src/scss/main.scss.
Reuse standard input and button components.

8. Testing

Backend: Write PHPUnit tests for model, repository, controller.
Frontend: Add Jest/Testing Library tests for new React UI.

9. Document and Diagram

Update documentation.
Add diagrams to show flow (see below).

Full Feature Implementation Workflow Diagram

flowchart LR
  A["Define Feature Requirement"] --> B["Add Migration (LocationsTable)"]
  B --> C["Register Migration in Installer"]
  C --> D["Create Model (Location)"]
  D --> E["Create Repository (LocationRepository)"]
  E --> F["Create Resource (LocationResource)"]
  F --> G["Create Service (LocationService)"]
  G --> H["Create Controller (LocationController)"]
  H --> I["Register REST Route on API"]
  I --> J["Implement Frontend API (locationApi.js)"]
  J --> K["Develop Redux/State Logic"]
  K --> L["Create UI Components & Pages"]
  L --> M["Add and Test UI Integrations"]
  M --> N["Add Unit/Integration Tests"]
  N --> O["Document Feature"]

Final Remarks

Use the diagrams above for architectural clarity and implementation planning.
The Feature Implementation Workflow gives a practical, visual step-by-step for any new feature.
For questions, refer to the relevant section via the Index.

Happy coding! 🚀