marwan/HH
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
HH/BOOTSTRAP_TO_TAILWIND_MIGRATION_REPORT.md
ismail 39b1dcb8c0 lots of updates
2026-02-22 08:35:53 +03:00

18 KiB
Raw Blame History

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:

// 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

<!-- 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)

<!-- 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)

<!-- 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:

<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:

<!-- 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

<!-- 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

<!-- 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

<!-- 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

<!-- 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