# Bootstrap to Tailwind CSS Migration Report

**Generated:** February 16, 2026  
**Total Templates:** 196 HTML templates  
**Color Palette:** Al Hammadi Brand (Navy/Blue)

---

## 🎨 Al Hammadi Brand Color Palette

All migrated templates should use the following Al Hammadi brand colors:

```javascript
// Configured in templates/layouts/base.html
colors: {
    'navy': '#005696',   /* Primary Al Hammadi Blue */
    'blue': '#007bbd',   /* Accent Blue */
    'light': '#eef6fb',  /* Background Soft Blue */
    'slate': '#64748b',  /* Secondary text */
}
```

### Color Usage Guidelines

| Color | Hex | Usage |
|-------|-----|-------|
| **Navy** | `#005696` | Primary buttons, active states, headings, main actions |
| **Blue** | `#007bbd` | Accent elements, secondary buttons, links, hover states |
| **Light** | `#eef6fb` | Soft backgrounds, badges, hover states, card accents |
| **Slate** | `#64748b` | Secondary text, muted elements, descriptions |

### Common Tailwind Patterns with Brand Colors

```html
<!-- Primary Buttons -->
<button class="bg-gradient-to-r from-navy to-blue text-white px-4 py-2 rounded-xl hover:opacity-90 transition">

<!-- Secondary Buttons -->
<button class="bg-light text-navy px-4 py-2 rounded-xl hover:bg-blue-100 transition">

<!-- Active/Selected States -->
<div class="bg-light text-navy border-l-4 border-navy">

<!-- Form Inputs Focus -->
<input class="focus:ring-2 focus:ring-navy focus:border-transparent">

<!-- Page Backgrounds -->
<div class="bg-gradient-to-br from-navy via-blue to-light min-h-screen">

<!-- Card Headers -->
<div class="bg-gradient-to-br from-navy to-blue text-white p-6 rounded-t-2xl">

<!-- Icons -->
<i data-lucide="icon-name" class="text-navy w-5 h-5">
<i data-lucide="icon-name" class="text-blue w-5 h-5">
```

---

## 📊 Executive Summary

| Status | Count | Percentage |
|--------|-------|------------|
| ✅ Fully Migrated (Tailwind only) | 68 templates | 34.7% |
| ⚠️ Needs Migration (Has Bootstrap classes) | 128 templates | 65.3% |
| **Total** | **196 templates** | **100%** |

### Key Bootstrap Classes Still in Use

| Class | Frequency |
|-------|-----------|
| `card-body` | 373 occurrences |
| `form-label` | 339 occurrences |
| `row` | 312 occurrences |
| `btn-outline-*` | 206 occurrences |
| `card-header` | 179 occurrences |
| `form-control` | 148 occurrences |
| `col-md-6` | 137 occurrences |
| `btn-primary` | 134 occurrences |
| `page-item` | 125 occurrences (pagination) |
| `container` | 125 occurrences |

---

## 🎯 Priority Migration Queue (Top 25)

Templates with the highest Bootstrap class counts should be migrated first:

| Priority | Template | Bootstrap Classes | App |
|----------|----------|-------------------|-----|
| 🔴 P1 | `templates/organizations/staff_detail.html` | 63 | Organizations |
| 🔴 P1 | `templates/actions/action_detail.html` | 58 | Actions |
| 🔴 P1 | `templates/social/social_analytics.html` | 44 | Social |
| 🔴 P1 | `templates/dashboard/staff_performance_detail.html` | 44 | Dashboard |
| 🔴 P1 | `templates/feedback/feedback_list.html` | 38 | Feedback |
| 🔴 P1 | `templates/appreciation/appreciation_list.html` | 38 | Appreciation |
| 🟡 P2 | `templates/observations/observation_list.html` | 35 | Observations |
| 🟡 P2 | `templates/complaints/inquiry_list.html` | 35 | Complaints |
| 🟡 P2 | `templates/surveys/template_form.html` | 34 | Surveys |
| 🟡 P2 | `templates/social/social_platform.html` | 34 | Social |
| 🟡 P2 | `templates/social/social_comment_detail.html` | 34 | Social |
| 🟡 P2 | `templates/social/social_comment_list.html` | 33 | Social |
| 🟡 P2 | `templates/references/document_view.html` | 31 | References |
| 🟡 P2 | `templates/callcenter/complaint_form.html` | 31 | Call Center |
| 🟡 P2 | `templates/ai_engine/sentiment_list.html` | 31 | AI Engine |
| 🟢 P3 | `templates/journeys/instance_list.html` | 30 | Journeys |
| 🟢 P3 | `templates/callcenter/inquiry_form.html` | 30 | Call Center |
| 🟢 P3 | `templates/surveys/template_detail.html` | 29 | Surveys |
| 🟢 P3 | `templates/physicians/leaderboard.html` | 28 | Physicians |
| 🟢 P3 | `templates/ai_engine/sentiment_detail.html` | 28 | AI Engine |
| 🟢 P3 | `templates/layouts/source_user_base.html` | 27 | Layouts |
| 🟢 P3 | `templates/journeys/template_detail.html` | 26 | Journeys |
| 🟢 P3 | `templates/appreciation/my_badges.html` | 26 | Appreciation |
| 🟢 P3 | `templates/ai_engine/sentiment_dashboard.html` | 26 | AI Engine |
| 🟢 P3 | `templates/dashboard/department_benchmarks.html` | 25 | Dashboard |

---

## 📁 Migration Status by App/Module

### ✅ Fully Migrated Apps (All Templates Complete)

| App | Migrated/Total | Status |
|-----|----------------|--------|
| `emails/` | 1/1 | ✅ Complete |

### ⚠️ Partially Migrated Apps

| App | Migrated | Needs Work | Total | Progress |
|-----|----------|------------|-------|----------|
| `accounts/` | 15 | 7 | 22 | 68% |
| `actions/` | 2 | 1 | 3 | 67% |
| `complaints/` | 5 | 16 | 21 | 24% |
| `core/` | 1 | 2 | 3 | 33% |
| `dashboard/` | 9 | 2 | 11 | 82% |
| `layouts/` | 6 | 2 | 8 | 75% |
| `organizations/` | 9 | 8 | 17 | 53% |
| `surveys/` | 7 | 9 | 16 | 44% |

### 🔴 Not Started / Minimal Migration

| App | Migrated | Needs Work | Total | Status |
|-----|----------|------------|-------|--------|
| `ai_engine/` | 1 | 5 | 6 | 🔴 17% |
| `analytics/` | 0 | 3 | 3 | 🔴 0% |
| `appreciation/` | 0 | 9 | 9 | 🔴 0% |
| `callcenter/` | 0 | 8 | 8 | 🔴 0% |
| `config/` | 0 | 3 | 3 | 🔴 0% |
| `feedback/` | 0 | 4 | 4 | 🔴 0% |
| `integrations/` | 0 | 1 | 1 | 🔴 0% |
| `journeys/` | 0 | 7 | 7 | 🔴 0% |
| `notifications/` | 0 | 1 | 1 | 🔴 0% |
| `observations/` | 0 | 8 | 8 | 🔴 0% |
| `physicians/` | 0 | 6 | 6 | 🔴 0% |
| `projects/` | 0 | 2 | 2 | 🔴 0% |
| `px_sources/` | 0 | 9 | 9 | 🔴 0% |
| `references/` | 0 | 6 | 6 | 🔴 0% |
| `simulator/` | 0 | 2 | 2 | 🔴 0% |
| `social/` | 0 | 5 | 5 | 🔴 0% |
| `standards/` | 0 | 13 | 13 | 🔴 0% |

---

## ✅ Templates Already Migrated (68 Templates)

These templates are already using Tailwind CSS with Al Hammadi brand colors:

### Core Layouts
- `templates/layouts/base.html` ✅ (Navy/Blue configured)
- `templates/layouts/public_base.html` ✅

### Authentication
- `templates/accounts/login.html` ✅ (Navy gradient background)
- `templates/accounts/settings.html` ✅

### Dashboard
- `templates/dashboard/admin_evaluation.html` ✅
- `templates/dashboard/command_center.html` ✅
- `templates/dashboard/my_dashboard.html` ✅

### Surveys (7/16)
- `templates/surveys/analytics_reports.html` ✅
- `templates/surveys/comment_list.html` ✅
- `templates/surveys/instance_detail.html` ✅
- `templates/surveys/invalid_token.html` ✅
- `templates/surveys/manual_send.html` ✅
- `templates/surveys/public_form.html` ✅ (Navy gradient header)
- `templates/surveys/thank_you.html` ✅

### Complaints (5/21)
- `templates/complaints/analytics.html` ✅
- `templates/complaints/complaint_form.html` ✅
- `templates/complaints/complaint_list.html` ✅
- `templates/complaints/complaint_pdf.html` ✅
- `templates/complaints/inquiry_detail.html` ✅

### Organizations (9/17)
- `templates/organizations/hierarchy_node.html` ✅
- `templates/organizations/section_confirm_delete.html` ✅
- `templates/organizations/section_form.html` ✅
- `templates/organizations/section_list.html` ✅
- `templates/organizations/staff_list.html` ✅
- `templates/organizations/subsection_confirm_delete.html` ✅
- `templates/organizations/subsection_form.html` ✅
- `templates/organizations/subsection_list.html` ✅

### Others
- `templates/actions/action_create.html` ✅
- `templates/actions/action_list.html` ✅
- `templates/core/public_submit.html` ✅
- `templates/emails/explanation_request.html` ✅

---

## 🔧 Common Bootstrap → Tailwind Mappings

### Layout & Grid

| Bootstrap | Tailwind Equivalent |
|-----------|---------------------|
| `container` | `container mx-auto px-4` |
| `row` | `flex flex-wrap` or `grid grid-cols-*` |
| `col-md-6` | `w-full md:w-1/2` or `md:col-span-6` |
| `col-md-4` | `w-full md:w-1/3` or `md:col-span-4` |
| `col-md-3` | `w-full md:w-1/4` or `md:col-span-3` |
| `col-lg-8` | `lg:w-2/3` or `lg:col-span-8` |

### Components (Using Al Hammadi Colors)

| Bootstrap | Tailwind Equivalent with Brand Colors |
|-----------|---------------------------------------|
| `card` | `bg-white rounded-2xl shadow-sm border border-gray-50` |
| `card-header` | `p-6 border-b border-gray-100` |
| `card-header` (colored) | `bg-gradient-to-br from-navy to-blue text-white p-6 rounded-t-2xl` |
| `card-body` | `p-6` |
| `card-title` | `text-lg font-semibold text-gray-800` |
| `card-footer` | `p-4 border-t border-gray-100 bg-gray-50 rounded-b-2xl` |
| `btn-primary` | `bg-gradient-to-r from-navy to-blue text-white px-4 py-2 rounded-xl hover:opacity-90 transition` |
| `btn-secondary` | `bg-light text-navy px-4 py-2 rounded-xl hover:bg-blue-100 transition` |
| `btn-success` | `bg-green-500 text-white px-4 py-2 rounded-xl hover:bg-green-600 transition` |
| `btn-danger` | `bg-red-500 text-white px-4 py-2 rounded-xl hover:bg-red-600 transition` |
| `btn-outline-primary` | `border border-navy text-navy px-4 py-2 rounded-xl hover:bg-navy hover:text-white transition` |
| `btn-sm` | `px-3 py-1.5 text-sm` |
| `form-control` | `w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition` |
| `form-label` | `block text-sm font-medium text-gray-700 mb-1.5` |
| `form-group` | `mb-4` |
| `form-select` | `w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent bg-white` |

### Tables

| Bootstrap | Tailwind Equivalent |
|-----------|---------------------|
| `table` | `w-full` |
| `table-striped` | `[&_tbody_tr:nth-child(odd)]:bg-gray-50` |
| `table-bordered` | `border border-gray-200` |
| `table-hover` | `[&_tbody_tr:hover]:bg-gray-100 transition` |
| `table-light` | `bg-gray-50` |
| `table-responsive` | `overflow-x-auto` |

### Navigation & UI (Al Hammadi Brand)

| Bootstrap | Tailwind Equivalent |
|-----------|---------------------|
| `navbar` | `bg-white border-b border-gray-100` |
| `nav-item` | `flex items-center` |
| `nav-link` | `px-4 py-2 text-gray-600 hover:text-navy transition` |
| `nav-link active` | `bg-light text-navy px-4 py-2 rounded-xl font-medium` |
| `dropdown-menu` | `absolute bg-white rounded-xl shadow-lg border border-gray-100 py-2 z-50` |
| `dropdown-item` | `px-4 py-2 hover:bg-light hover:text-navy transition` |
| `dropdown-item active` | `px-4 py-2 bg-light text-navy` |
| `pagination` | `flex gap-1` |
| `page-item` | `px-3 py-1.5 rounded-lg border border-gray-200` |
| `page-item active` | `px-3 py-1.5 rounded-lg bg-navy text-white border border-navy` |
| `badge` | `inline-flex px-2 py-0.5 rounded-full text-xs font-medium` |
| `badge-primary` | `bg-navy text-white` |
| `badge-secondary` | `bg-light text-navy` |
| `badge-success` | `bg-green-100 text-green-700` |
| `badge-danger` | `bg-red-100 text-red-700` |
| `badge-warning` | `bg-yellow-100 text-yellow-700` |
| `badge-info` | `bg-blue-100 text-blue-700` |
| `alert-info` | `bg-blue-50 text-blue-800 border border-blue-200 rounded-xl p-4` |
| `alert-success` | `bg-green-50 text-green-800 border border-green-200 rounded-xl p-4` |
| `alert-warning` | `bg-yellow-50 text-yellow-800 border border-yellow-200 rounded-xl p-4` |
| `alert-danger` | `bg-red-50 text-red-800 border border-red-200 rounded-xl p-4` |
| `list-group` | `divide-y divide-gray-100 border border-gray-200 rounded-xl` |
| `list-group-item` | `px-4 py-3 hover:bg-light hover:text-navy transition` |
| `list-group-item active` | `px-4 py-3 bg-light text-navy border-l-4 border-navy` |

### Modals

| Bootstrap | Tailwind Equivalent |
|-----------|---------------------|
| `modal` | `fixed inset-0 z-50 flex items-center justify-center bg-black/50` |
| `modal-dialog` | `bg-white rounded-2xl shadow-2xl max-w-lg w-full mx-4` |
| `modal-header` | `px-6 py-4 border-b border-gray-100 flex justify-between items-center` |
| `modal-body` | `p-6` |
| `modal-footer` | `px-6 py-4 border-t border-gray-100 flex justify-end gap-2` |
| `btn-close` | `p-1 hover:bg-gray-100 rounded-lg transition` |

---

## 🔄 Migration from Old Rose/Pink to Navy/Blue

### Before (Rose/Pink Theme - DEPRECATED)
```html
<!-- Buttons -->
<button class="bg-rose-500 hover:bg-rose-600 text-white">
<button class="bg-gradient-to-r from-rose-400 to-rose-500">

<!-- Active states -->
<div class="bg-rose-50 text-rose-500">

<!-- Focus states -->
<input class="focus:ring-rose-500">

<!-- Icons -->
<i data-lucide="heart" class="text-rose-500">
```

### After (Al Hammadi Navy/Blue - CURRENT)
```html
<!-- Primary Buttons -->
<button class="bg-gradient-to-r from-navy to-blue text-white hover:opacity-90 transition">
<button class="bg-navy text-white hover:bg-blue-700 transition">

<!-- Secondary/Active states -->
<div class="bg-light text-navy">

<!-- Focus states -->
<input class="focus:ring-2 focus:ring-navy focus:border-transparent">

<!-- Icons -->
<i data-lucide="heart" class="text-navy">
<i data-lucide="heart" class="text-blue">
```

---

## 📋 Migration Checklist by App

### Phase 1: Critical User-Facing (Recommended First)

- [ ] `organizations/staff_detail.html` - Use navy for actions, light for backgrounds
- [ ] `organizations/staff_form.html` - Form inputs with navy focus rings
- [ ] `accounts/onboarding/*.html` (16 templates) - Navy gradient headers

### Phase 2: Core Features

- [ ] `actions/action_detail.html` - Navy primary buttons
- [ ] `feedback/feedback_list.html` - Light backgrounds, navy accents
- [ ] `complaints/inquiry_list.html` - Navy/blue status badges
- [ ] `observations/observation_list.html` - Light hover states
- [ ] `surveys/template_form.html` - Navy focus states
- [ ] `surveys/template_detail.html` - Navy gradient cards

### Phase 3: Analytics & Dashboards

- [ ] `social/social_analytics.html` - Navy charts, light backgrounds
- [ ] `social/social_platform.html` - Navy/blue navigation
- [ ] `social/social_comment_*.html` - Light comment backgrounds
- [ ] `ai_engine/*.html` (5 templates) - Navy sentiment indicators
- [ ] `dashboard/staff_performance_detail.html` - Navy metrics
- [ ] `dashboard/department_benchmarks.html` - Navy charts

### Phase 4: Management Interfaces

- [ ] `journeys/*.html` (7 templates) - Navy step indicators
- [ ] `callcenter/*.html` (8 templates) - Navy action buttons
- [ ] `appreciation/*.html` (9 templates) - Navy/blue badges
- [ ] `px_sources/*.html` (9 templates) - Navy source icons
- [ ] `standards/*.html` (13 templates) - Navy compliance indicators
- [ ] `references/*.html` (6 templates) - Navy folder icons

### Phase 5: Layouts & Configuration

- [ ] `layouts/source_user_base.html` - Navy sidebar, light active states
- [ ] `config/*.html` (3 templates) - Navy settings icons
- [ ] `analytics/*.html` (3 templates) - Navy chart colors
- [ ] `notifications/settings.html` - Navy toggle switches
- [ ] `integrations/survey_mapping_settings.html` - Navy link icons

---

## 🚀 Quick Migration Strategy

### Step 1: Set Up Tailwind Config

Ensure your base template has the Al Hammadi colors configured:

```html
<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    'navy': '#005696',
                    'blue': '#007bbd',
                    'light': '#eef6fb',
                    'slate': '#64748b',
                }
            }
        }
    }
</script>
```

### Step 2: Replace Grid System

Replace Bootstrap grid with Tailwind grid:
```html
<!-- Before -->
<div class="row">
    <div class="col-md-6">...</div>
    <div class="col-md-6">...</div>
</div>

<!-- After -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div>...</div>
    <div>...</div>
</div>
```

### Step 3: Replace Cards with Brand Colors

```html
<!-- Before -->
<div class="card">
    <div class="card-header">Title</div>
    <div class="card-body">Content</div>
</div>

<!-- After -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-50 overflow-hidden">
    <div class="bg-gradient-to-br from-navy to-blue text-white p-6">
        <h3 class="text-lg font-semibold">Title</h3>
    </div>
    <div class="p-6">Content</div>
</div>
```

### Step 4: Replace Forms with Navy Focus

```html
<!-- Before -->
<div class="form-group">
    <label class="form-label">Email</label>
    <input type="email" class="form-control">
</div>

<!-- After -->
<div class="mb-4">
    <label class="block text-sm font-medium text-gray-700 mb-1.5">Email</label>
    <input type="email" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition">
</div>
```

### Step 5: Replace Buttons with Brand Gradients

```html
<!-- Before -->
<button class="btn btn-primary">Save</button>
<button class="btn btn-secondary">Cancel</button>

<!-- After -->
<button class="bg-gradient-to-r from-navy to-blue text-white px-4 py-2 rounded-xl hover:opacity-90 transition">Save</button>
<button class="bg-light text-navy px-4 py-2 rounded-xl hover:bg-blue-100 transition">Cancel</button>
```

### Step 6: Replace Navigation with Brand Colors

```html
<!-- Before -->
<a class="nav-link active" href="#">Dashboard</a>

<!-- After -->
<a class="flex items-center gap-3 px-4 py-3 bg-light text-navy rounded-xl font-medium transition" href="#">
    <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
    <span>Dashboard</span>
</a>
```

---

## 📝 Notes

1. **Email Templates:** Email templates (in `templates/*/email/` and `templates/emails/`) may need inline styles for email client compatibility.

2. **Tailwind Config:** The base layout (`templates/layouts/base.html`) already includes the Al Hammadi color configuration with `navy`, `blue`, `light`, and `slate`.

3. **Legacy Colors:** The old `px-*` colors (rose, orange) are still in the config for backward compatibility but should NOT be used in new migrations.

4. **JavaScript Components:** Some templates use `data-bs-toggle="collapse"` which is Bootstrap JS. These need custom JS replacement (already handled in base.html).

5. **Icons:** Migrated templates use Lucide icons (`<i data-lucide="name">`) with `text-navy` or `text-blue` classes.

6. **Chart Colors:** When updating charts (ApexCharts), use the Al Hammadi colors:
   - Primary: `#005696` (navy)
   - Secondary: `#007bbd` (blue)
   - Accent: `#eef6fb` (light)

---

**Report Generated:** February 16, 2026  
**Color Palette:** Al Hammadi Brand (Navy #005696, Blue #007bbd)  
**Next Update:** After Phase 1 completion