507 lines
18 KiB
Markdown
507 lines
18 KiB
Markdown
# 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
|