UI Cleanup Backlog¶

Audit Date: 2025-12-30 Reference: Metronic Tailwind template patterns

Priority Levels¶

HIGH: Large custom CSS blocks (20+ lines), complex layouts, duplicate code
MEDIUM: Moderate CSS (10-20 lines), non-standard components
LOW: Small CSS overrides, necessary inline styles

HIGH PRIORITY¶

1. Knowledge Bases Index ✅ COMPLETED¶

File: resources/views/default/panel/admin/knowledge-bases/index.blade.php - CSS Lines: ~68 lines → ~3 lines (tab state only) - Resolution: Replaced custom badges with existing x-badge component, converted table to Tailwind utilities

2. Guardrails Index ✅ COMPLETED¶

File: resources/views/default/panel/admin/guardrails/index.blade.php - CSS Lines: ~59 lines → ~3 lines (tab state only) - Resolution: Same pattern as Knowledge Bases - using x-badge and Tailwind utilities

3. SEO Tool ✅ COMPLETED¶

File: app/Extensions/SEOTool/resources/views/seo-tool.blade.php - CSS Lines: ~41 lines → ~6 lines (contenteditable placeholder pseudo-elements only) - Resolution: Replaced keyframe animations with Tailwind animate-pulse, converted container/sizing to Tailwind utilities

4. DataForSEO Settings ✅ COMPLETED¶

File: resources/views/default/panel/admin/settings/dataforseo.blade.php - CSS Lines: ~21 lines → 0 lines - Resolution: Converted toggle cards to Tailwind utilities with dynamic classes, replaced badges with x-badge component

MEDIUM PRIORITY¶

5. Announcements Index¶

File: resources/views/default/panel/admin/announcements/index.blade.php - CSS Lines: ~22 lines - Action: Migrate to Tailwind utilities

6. Knowledge Bases Sync¶

File: resources/views/default/panel/admin/knowledge-bases/sync.blade.php - CSS Lines: ~35 lines - Action: Extract to sync status component

7. API Testing¶

File: resources/views/default/panel/admin/api-testing/index.blade.php - CSS Lines: ~33 lines - Action: Create testing interface component

8. Chat Form¶

File: resources/views/default/panel/admin/openai/chat/form.blade.php - CSS Lines: ~16 lines - Action: Use form component system

9. DB Sync Pages¶

Files: - resources/views/default/panel/admin/dbsync/history.blade.php (~12 lines) - resources/views/default/panel/admin/dbsync/index.blade.php (~19 lines) - Action: Consolidate sync page styles

10. Branding Config¶

File: resources/views/default/panel/admin/config/branding.blade.php - CSS Lines: ~7 lines - Action: Replace with Tailwind sizing (w-[250px] h-[250px])

11. Frontend Settings¶

Files: - resources/views/default/panel/admin/frontend/settings.blade.php - resources/views/default/panel/admin/frontend/section_settings.blade.php - Action: Migrate to Tailwind utilities

File: app/Extensions/SocialMedia/resources/views/calendar.blade.php - CSS Lines: ~40 lines (embedded in JavaScript) - Issues: Custom event styles in JS strings - Action: Extract to Alpine component with Tailwind classes

LOW PRIORITY (Defer)¶

These files have inline styles that are either: - Dynamically generated (background images, CSS variables) - Required for functionality (theme customizer) - Too small to prioritize

panel/user/openai_chat/chat.blade.php - Dynamic chat backgrounds
LiveCustomizer/resources/views/particles/customizer.blade.php - Theme system
AiPresentation/resources/views/gallery/gallery.blade.php - Grid layouts
~77 additional files with minor inline styles

Shared Components to Create¶

x-badge Component ✅ ALREADY EXISTS¶

<x-badge variant="success|warning|info|danger|muted" size="xs|sm|md|lg">Label</x-badge>

- Location: resources/views/default/components/badge.blade.php - Variants: default, primary, secondary, info, success, danger, warning, muted - Sizes: xs, sm, md, lg - Used to replace: .kb-badge, .guardrail-badge, .badge-platform, .badge-active, etc.

x-status-badge Component¶

<x-status-badge status="active|syncing|failed|disabled" />

- Self-contained status indicator with icon and label - Used for sync states, availability, etc.

x-toggle-card Component¶

<x-toggle-card :enabled="$isEnabled" :cost="$cost">
    Content
</x-toggle-card>

- Replace: .api-toggle-card patterns - Built-in state styling

x-data-table Component¶

<x-data-table :columns="$columns" :rows="$rows" />

- Standardized table styling - Replaces custom table CSS

Migration Patterns¶

Badge Migration¶

- <span class="kb-badge badge-active">Active</span>
+ <x-badge variant="success" size="sm">Active</x-badge>

Table Migration¶

- <table class="kb-table">
+ <table class="w-full text-sm">
+   <thead class="border-b bg-muted/50">

Custom Style Block Removal¶

- <style>
-   .kb-badge { ... }
-   .kb-table { ... }
- </style>
+ {{-- Removed: using x-badge and Tailwind table utilities --}}

Metrics¶

Category	Files	Est. CSS Lines	Impact
HIGH	~~4~~ 0 remaining	~~~189~~ ~9 lines	✅ Complete
MEDIUM	12	~150	Next sprint
LOW	77+	~200	Defer
Total	89+	~359

Progress: Eliminated ~180 lines of custom CSS from all HIGH priority items.