# Deep Analysis & Implementation Plan: Dynamic Facilities Page

This document provides a detailed analysis of `Facilities.tsx` and a plan to convert every content section into a dynamic, database-driven component using the `Facility` model we created.

## 1. Component Analysis & Mapping

We will map each hardcoded section in `Facilities.tsx` to the `FacilityEnum` categories and database fields.

### Tab 1: Overview
| UI Section | Current Static Data | Target DB Category | Field Mapping |
|------------|---------------------|--------------------|---------------|
| **Hero Title** | "World Class Infrastructure" | *Static/Derived* | Derived from Tab Name |
| **Main List** | `mainFacilities` (Smart Classrooms...) | `OVERVIEW_MAIN` | Title, Description, Image, Icon (SVG) |
| **Grid** | `lifestyles` (Sports, Arts...) | `OVERVIEW_LIFESTYLE` | Title, Icon, `meta_data['category']` (for "Athletics", "Creative") |

### Tab 2: Hostel
| UI Section | Current Static Data | Target DB Category | Field Mapping |
|------------|---------------------|--------------------|---------------|
| **Features** | `Comfortable Rooms`, `Meals`... | `HOSTEL_FEATURE` | Title, Description, Icon |
| **Stats** | "200+ Capacity" | `HOSTEL_FEATURE` | Title ("Capacity..."), `meta_data['value']` ("200+"), Image |
| **Hero Text** | "A Calm Residency" | *Static Layout* | Keep static or adding `PageSetting` model later |

### Tab 3: Transportation
| UI Section | Current Static Data | Target DB Category | Field Mapping |
|------------|---------------------|--------------------|---------------|
| **Images/Cards** | "Safe Transit", "35+ Routes" | `TRANSPORT_STATS` | Title, `meta_data['subtitle']`, Image, Icon |
| **Feature List** | "GPS Tracking", "Background checks"... | `TRANSPORT_FEATURE` | Title |

### Tab 4: Sports
| UI Section | Current Static Data | Target DB Category | Field Mapping |
|------------|---------------------|--------------------|---------------|
| **Grid** | Football, Basketball, Pool... | `SPORTS_ITEM` | Title, Image, Icon, `meta_data['size']` |

### Tab 5: Library
| UI Section | Current Static Data | Target DB Category | Field Mapping |
|------------|---------------------|--------------------|---------------|
| **Stats** | "25K+ Books", "50+ Journals" | `LIBRARY_STATS` | `meta_data['value']` (25K+), `title` (Books) |
| **Image Grid** | 4 Collage Images | `LIBRARY_IMAGES` | Image |

---

## 2. Implementation Steps

### Step 1: Update Route & Controller
We need to change how the page is served. Instead of a direct Inertia render, we need to fetch data first.

**Action**:
- Update `routes/web.php` to point `/facilities` to a controller.
- Create/Update `FrontController` or `FacilityController` (Frontend) to fetch data:
  ```php
  $facilities = Facility::where('status', true)->orderBy('position')->get()->groupBy('category');
  ```

### Step 2: Refactor `Facilities.tsx` Component
The React component needs major changes to accept data props instead of using local arrays.

**Changes Required**:
1.  **Define Props Interface**:
    ```typescript
    interface Props {
        overview_main: Facility[];
        overview_lifestyle: Facility[];
        hostel_features: Facility[];
        sports_items: Facility[];
        // ... etc
    }
    ```
2.  **Replace Arrays**: Remove `const mainFacilities = [...]` and use `props.overview_main`.
3.  **Update Rendering Logic**:
    - **Icons**: The static file uses React Components (`Lucide Icons`). The DB returns `icon` as a URL string (SVG/PNG). We must update the render code:
        - *Before*: `<item.icon className="w-6 h-6" />`
        - *After*: `<img src={item.icon} className="w-6 h-6 mb-4" />` (with a fallback if icon is null).
    - **Meta Data**: Access fields like `item.meta_data?.size` instead of `item.size`.

### Step 3: Handling "Everything" (Scope Check)
The user asked to make *everything* dynamic.
- **Lists/Grids**: Covered by the plan above.
- **Section Headers ("A CALM RESIDENCY")**: These are part of the page structure. To make them dynamic, we would need a `PageContent` model (Key/Value pairs like `hostel_title => 'A Calm Residency'`).
    - *Recommendation*: For this iteration, we make the **content** dynamic. If you want the *headers* dynamic too, we should create a dictionary/settings table, but that adds significant complexity. I recommend starting with the content facilities.

## 3. Execution Plan

1.  **Frontend Controller**: Implement the data fetching logic.
2.  **Frontend Route**: Connect the route.
3.  **React Refactor**: Systematically replace each static section with dynamic loops.

Ready to proceed?