A
Anonymous

Dashboard Interface - Copy this React, Tailwind Component to your project

"Design a dashboard interface for a messaging management system. The dashboard should have the following features: Sidebar on the Left: The sidebar should have options such as Dashboard, Message Templates, Contacts, Notifications, Analytics, Automations, and Inbox. The sidebar background should be teal, and the text color should be white. The icons next to each menu item should be minimalist and modern. Main Dashboard Content: At the top of the main content area, display the following user information in a compact, horizontal layout: Phone Number: +91 83297 69248 Display Name: WANotifier Test Messaging Limit: 1k/24hr Quality Rating: A green dot with the label High Phone Number Status: A label showing CONNECTED Conversations Section: Display a card with the number of free and paid conversations. Use two rows: Business initiated: Show Free: 0, Paid: 22 User initiated: Show Free: 14, Paid: 0 The total conversation count should be shown as Total: 22, with the Approx Cost displayed as ₹ 11.38. Messaging Section: Display the total number of messages sent (316) and delivered (316), all on a single card. WANotifier Plan Section: Show the plan details with the following limits: Message templates: 89 / 250 Contacts: 1,207 / 10,000 Messages: 523 / 40,000 Marketing notifications: 118 / ∞ Transactional notifications: 10 / 10 API Requests: 41 / 10,000 Notifications Section: List recent notifications with the following details: Name: (e.g., "Demo Notification Market...") Status: Display status like Completed or On going with color coding (green for completed, yellow for on going). Total: Number of notifications sent. Sent, Delivered, Read, Failed counts with appropriate color codes (green for successful, red for failures). Templates Section: List the message templates with their approval status. Contacts Section: List contacts with details like name, number, and subscription status. Quick Links Section: Provide quick access to various external resources like WhatsApp Manager, Facebook group, and TrustPilot review page.

Prompt
Component Preview

About

DashboardInterface - A sleek messaging dashboard with a teal sidebar, user stats, conversation cards, notifications, and quick links,. Download instantly!

Share

Last updated 1 month ago