A
Anonymous

Customer Dashboard Overview

Objective: Design a dashboard that displays a list of potential customers in a card-based layout. Each card should provide a quick summary of key customer information, their potential score, and sales opportunities, with a focus on visual clarity and actionable insights. Cards should be interactive, allowing users to click for a detailed 360° view of the customer profile. 🎨 Card Design Structure: Card Header: ✅ Họ và tên (Full Name) — Large, bold text for quick identification. ✅ Loại khách hàng (Customer Type) — Small badge indicating customer type (e.g., VIP, Ưu tiên, Thông thường). Card Body (Key Information): Điểm tiềm năng (Potential Score) Display as a progress circle or bar (e.g., 85/100) to visualize customer potential. Color-coded based on score: 🟢 High Potential (80+) 🟡 Medium Potential (50-79) 🔴 Low Potential (<50) Tổng tài sản (AUM - Assets Under Management) Total assets managed by the bank for this customer. Điểm tín dụng (Credit Score) Display as a number (e.g., 750). Include a status label (Good, Average, Poor). Sản phẩm đang sử dụng (Active Products) List key products with icons for easy recognition: 💳 Credit Card 🏦 Savings Account 📄 Loan 🛡️ Insurance Cơ hội bán hàng (Sales Opportunities) Brief text highlighting relevant product suggestions (e.g., Gợi ý: Khoản vay mua nhà). Card Footer (Interaction & Alerts): Trạng thái tương tác (Interaction Status) Last interaction date and type (e.g., Cuộc gọi: 05/01/2025). Cảnh báo (Alerts) Display key alerts with icons: ⚠️ Overdue payment 📆 Loan nearing maturity 🎉 Birthday or special event 🔧 Interactivity Features: Click to Expand: Clicking on a card opens the 360° customer profile. Quick Action Buttons: 📞 Call Now ✉️ Send Email 📝 Add Note Design Tips: Responsive Layout: Ensure the card layout works on both desktop and mobile screens. Card Size: Compact cards for desktop (3-4 cards per row), larger cards for mobile (1-2 per row). Color-Coding: Use colors to differentiate potential scores and customer types. Icons & Visuals: Use icons for products, alerts, and actions to make cards more intuitive and visually appealing.

Prompt
Component Preview

About

Create visually appealing, interactive customer profile cards with React and Tailwind. Display key insights, potential scores, and sales opportunities for effective customer management.

Share

Last updated 1 month ago