# Project Structure - Multi

## Overview
This is a PHP-based web application with a modular MVC architecture, featuring employee and user management functionality with AJAX integration and AdminLTE UI framework.

---

## Root Level Files
```
multi/
├── .htaccess                    # Apache web server configuration
├── index.php                    # Main entry point / router
├── PROJECT_STRUCTURE.md         # This file
```

---

## Core Directories

### 1. `/ajax`
AJAX handlers for asynchronous requests
```
ajax/
└── employees.ajax.php          # AJAX endpoints for employee operations
```

### 2. `/controllers`
Business logic layer - handles requests and orchestrates operations
```
controllers/
├── employees.controller.php     # Employee-related operations
├── template.controller.php      # Template/layout management
└── users.controller.php         # User-related operations
```

### 3. `/models`
Data layer - database operations and data models
```
models/
├── connection.php              # Database connection setup
├── database.sql                # Database schema and initial data
├── employees.model.php         # Employee data queries
└── users.model.php             # User data queries
```

### 4. `/views`
Presentation layer - UI templates and frontend assets
```
views/
├── 404.php                     # 404 error page
├── template.php                # Main template/layout wrapper
├── dist/                       # Compiled/built assets
│   ├── assets/                 # Static assets
│   ├── css/                    # Compiled CSS files
│   │   ├── adminlte.css
│   │   ├── adminlte.min.css
│   │   ├── adminlte.rtl.css
│   │   ├── adminlte.rtl.min.css
│   │   └── .map files          # Source maps
│   ├── img/                    # Compiled images
│   └── js/                     # Compiled JavaScript
│       ├── adminlte.js
│       ├── adminlte.min.js
│       ├── employees.js        # Employee management frontend logic
│       └── .map files
├── img/                        # Uploaded images
│   └── employees/
│       └── elijah_atura/       # Employee photo subdirectories
├── modules/                    # Modular page components
│   ├── content.php             # Main content area
│   ├── employees.php           # Employee list view
│   ├── footer.php              # Footer component
│   ├── header.php              # Header component
│   ├── home.php                # Home page
│   ├── login.php               # Login form
│   ├── sidebar.php             # Sidebar navigation
│   └── users.php               # User list view
└── src/                        # Source files (pre-compilation)
    ├── assets/                 # Asset source files
    │   └── img/
    │       └── credit/         # Credit/attribution images
    ├── config/                 # Configuration files
    │   ├── assets.config.mjs   # Asset configuration
    │   ├── astro.config.mjs    # Astro static site generator config
    │   ├── postcss.config.mjs  # PostCSS configuration
    │   └── rollup.config.js    # Rollup bundler configuration
    ├── html/                   # Astro templates/components
    │   ├── env.d.ts            # TypeScript environment definitions
    │   ├── components/         # Reusable components
    │   │   ├── _head.astro
    │   │   ├── _scripts.astro
    │   │   └── dashboard/      # Dashboard components
    │   │       ├── _footer.astro
    │   │       ├── _sidenav.astro
    │   │       └── _topbar.astro
    │   │   └── docs/           # Documentation components
    │   │       └── browser-support.mdx
    │   │       └── ... (more mdx files)
    │   └── pages/              # Astro pages (auto-routed)
    │       ├── index.astro
    │       ├── index2.astro
    │       ├── index3.astro
    │       └── docs/
    │           ├── browser-support.astro
    │           ├── color-mode.astro
    │           └── ... (more doc pages)
    ├── scss/                   # SCSS stylesheets
    │   ├── _*.scss             # Partial files
    │   ├── adminlte.scss       # Main SCSS file
    │   ├── mixins/
    │   │   ├── _animations.scss
    │   │   └── _scrollbar.scss
    │   ├── pages/
    │   │   ├── _lockscreen.scss
    │   │   └── _login_and_register.scss
    │   └── parts/              # Component stylesheets
    │       ├── _components.scss
    │       ├── _core.scss
    │       ├── _extra-components.scss
    │       ├── _miscellaneous.scss
    │       └── _pages.scss
    ├── ts/                     # TypeScript source files
    │   ├── adminlte.ts
    │   ├── card-widget.ts
    │   ├── direct-chat.ts
    │   ├── fullscreen.ts
    │   ├── layout.ts
    │   ├── push-menu.ts
    │   ├── treeview.ts
    │   └── util/
    │       └── index.ts
    └── utils/
        └── index.js            # Utility functions
```

---

## Architecture Pattern

### MVC + AJAX
- **Models** (`/models`): Database queries and data operations
- **Controllers** (`/controllers`): Business logic and request handling
- **Views** (`/views`): Template rendering and user interface
- **AJAX** (`/ajax`): Asynchronous API endpoints

### Frontend Stack
- **CSS Framework**: AdminLTE (responsive, built with SCSS)
- **Build Tools**: Astro, Rollup, PostCSS
- **Languages**: JavaScript, TypeScript, SCSS
- **Component System**: Astro components

### Backend Stack
- **Language**: PHP
- **Database**: MySQL/MariaDB
- **Architecture**: Custom MVC

---

## Key Features

### Employee Management
- CRUD operations (Create, Read, Update, Delete)
- Photo uploads
- AJAX-based table updates
- Frontend: `employees.js`, `modules/employees.php`
- Backend: `employees.controller.php`, `employees.model.php`

### User Management
- User authentication/management
- Frontend: `modules/users.php`
- Backend: `users.controller.php`, `users.model.php`

### Database
- Schema defined in `models/database.sql`
- Connection configured in `models/connection.php`

---

## File Relationships

### Adding/Editing an Employee
1. User fills form in `modules/employees.php`
2. `employees.js` handles form submission via AJAX
3. Request sent to `ajax/employees.ajax.php` or `index.php` with action parameters
4. `employees.controller.php` processes the request
5. `employees.model.php` executes database queries
6. Response returned and `employees.js` updates the DOM

### Page Navigation
1. User requests a page from `index.php`
2. Router loads appropriate controller
3. Controller loads data via models
4. `template.php` renders the layout
5. Requested module component inserted into template

---

## Build & Compilation

- **SCSS → CSS**: Compiled via PostCSS configuration
- **TypeScript → JavaScript**: Compiled via Rollup bundler
- **Static Assets**: Processed through Astro
- **Output**: Files placed in `/views/dist/`

---

## Configuration Files

- `astro.config.mjs` - Static site generator settings
- `rollup.config.js` - JavaScript/TypeScript bundler
- `postcss.config.mjs` - CSS post-processing
- `assets.config.mjs` - Asset pipeline configuration

