# TBI-PRL-FRONT

## 🚀 Tech Stack

- **Framework:** Next.js 16 (App Router)
- **Language:** TypeScript
- **UI & Styling:** Material UI (MUI) v7 + Tailwind CSS v4
- **State Management:** Zustand
- **Data Fetching:** TanStack React Query (v5)
- **Forms:** React Hook Form + Zod
- **Authentication:** NextAuth.js

---

## 📂 Project Structure

The project follows a modular and scalable architecture:

```text
src/
├── app/              # Next.js App Router (Routing, Layouts, Pages)
│   ├── (auth)/       # Authentication routes (Login, etc.)
│   ├── (dashboard)/  # Main application dashboard and medical exams
│   └── layout.tsx    # Root layout with providers
├── components/       # Shared reusable components
│   ├── layout/       # Navigation, Sidebar, Header
│   └── ui/           # Atomic components (Buttons, Modals, Cards, etc.)
├── features/         # App-specific features (Modular)
│   └── guided-assistant/ # 🚨 SPACE FOR AI COLLABORATION
├── hooks/            # Global custom React hooks
├── providers/        # Context providers (Theme, QueryClient, Auth)
├── store/            # Zustand global stores
├── theme/            # MUI Custom Theme and Design System
└── types/            # Global TypeScript definitions and interfaces 
```

---

## 🛠 Collaborative Workspace: AI Integration

To facilitate the integration of guided-assistant medical examinations, a dedicated directory has been created: `src/features/guided-assistant/`.

**External developers should place their code here:**

- `src/features/guided-assistant/components/`: UI components for guided-assistant interaction.
- `src/features/guided-assistant/hooks/`: React hooks for AI logic.
- `src/features/guided-assistant/services/`: API services for backend AI communication.
- `src/features/guided-assistant/store/`: Local state management for AI features.
- `src/features/guided-assistant/types/`: TypeScript interfaces and types.
- `src/features/guided-assistant/utils/`: Helper functions.

---

## 🏗 Key Architecture Details

### 1. Routing & Layout

- **App Router:** We use the Next.js `app` directory.
- **Route Groups:** Used to organize routes without affecting the URL (e.g., `(auth)` and `(dashboard)`).
- **Protected Routes:** Access control is handled via middleware and NextAuth.

### 2. State Management

- **Global State:** Handled by **Zustand**. Stores are located in `src/store/`.
- **Server State:** Handled by **React Query**. Used for caching and synchronizing data from the backend.

### 3. Styling & Components

- **MUI Theme:** A custom design system is implemented in `src/theme/`. It uses `ThemeRegistry` for SSR compatibility.
- **Reusable UI:** Atomic components are in `src/components/ui/`. Please use these components to maintain visual consistency.
- **Tailwind CSS:** Used for utility-first styling where complex MUI customization is not required.

### 4. API & Services

- All backend communications should be abstracted into services or custom hooks using `useQuery` or `useMutation`.

---

## 🚦 Getting Started

1. **Install dependencies:**

   ```bash
   pnpm install
   ```

2. **Run the development server:**

   ```bash
   pnpm dev
   ```

3. **Build for production:**
   ```bash
   pnpm build
   ```

---

## 📝 Contribution Guidelines

1. **Naming Conventions:** Use PascalCase for components and camelCase for hooks/functions.
2. **Type Safety:** Always define TypeScript interfaces for props and API responses.
3. **Modularity:** Keep feature-specific logic within the `src/features/` folder.
4. **Visual Consistency:** Check `src/theme/` and `src/components/ui/` before creating new visual elements.