A
Anonymous

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

Design a dark themed admin dashboard for managing appointments, with the following components: Header: The header is a black bar spanning the top of the page. On the left, there is a logo. On the right, there is a text label that says "Admin Dashboard". Main Content: A welcome section at the top left with a large "Welcome" text and a waving hand emoji. Below the text, there's a subtitle that says, "Start the day with managing new appointments." Three summary cards are horizontally aligned under the welcome section, each displaying different statistics: First Card: Icon: Calendar icon. Title: "Scheduled appointments". Number: "6". Second Card: Icon: Hourglass icon. Title: "Pending appointments". Number: "4". Third Card: Icon: Warning triangle icon. Title: "Cancelled appointments". Number: "3". Table: The table is located below the summary cards, displaying appointment details. Columns include: #: The serial number of the appointment. Patient: The name of the patient. Status: A badge showing the status of the appointment, either "Pending" (blue) or "Scheduled" (green). Appointment: The date and time of the appointment. Doctor: The name of the doctor, with a small circular image of the doctor. Actions: Two text buttons "Schedule" (green text) and "Cancel" (red text). Ensure all elements use a dark background and contrasting text colors for readability.

Prompt
Component Preview

About

AdminDashboard - A dark-themed interface for managing appointments with summary cards, a detailed table, and easy actions, built with. Download instantly!

Share

Last updated 1 month ago