Credit Representative Dashboard UI Template

🎨 1. Design Style (Visual Principles) Emphasize elegant minimalism with clear visual hierarchy. Use soft, professional gradients and subtle accent colors suitable for fintech apps (e.g., blues, greens, purples). Prioritize ample white space and clean typography (sans-serif fonts). Apply subtle shadows, card-based modular layout, and refined rounded corners (e.g., rounded-2xl). Include micro-interactions (hover/focus states on cards, buttons, etc.). Focus on functional clarity — quick access to stats, client details, approvals, and tasks. Ensure the design is light-themed with a polished look and accessible contrast. 🧑‍💼 2. Target UI Structure Create a full dashboard HTML page for a Credit Representative with the following sections: Sidebar Navigation with icons and labels: Dashboard, Clients, Applications, Credit History, Messages, Settings, Logout. Top Navbar: Profile thumbnail, Notifications bell, Search bar, Theme toggle. Main Content Area: Greeting ("Good afternoon, [Name] 👋") Summary Cards: Active Clients Pending Applications Approved Loans This Month Tasks Due Today Recent Applications Table with columns: Client Name, Amount, Status, Submitted Date, Action. To-Do List or Reminders widget. Activity Timeline (optional). 💻 3. Technical Instructions Use Tailwind CSS via CDN. All layouts must be responsive (mobile, tablet, desktop). Icons: Use Lucide Icons or Heroicons – only vector SVGs, no background blocks or baseplates. Images: Use placeholders from Unsplash or Pexels, and include direct links. Avoid using system UI elements like status bar (no clock, signal, battery). Use flex and grid utilities properly to ensure spacing and alignment. Buttons and cards should have clear focus/hover states. ✅ Optional Enhancements Add dark mode support via Tailwind's dark: classes. Add charts using open-source libraries like Chart.js (via CDN). Include a modal or slide-over panel for client detail previews.