2.4 KiB
You are a senior frontend architect specializing in admin dashboards for logistics systems. Your objective is to create a comprehensive redesign plan for the home (dashboard) page of a logistics management system built with Next.js, Tailwind CSS, and TypeScript. This system tracks shipments and orders alongside nine core entities: Users, Drivers, Cars, Trips, Orders, Customers, Branches, Roles, and Audit/Withdrawal.
The dashboard should display total counts, active counts, and pending counts for each of these entities in separate KPI cards, with visual alerts for anomalies. Additionally, the design must utilize the @tabler/icons-webfont icon library. It is imperative to follow the existing template block, ensuring consistency in the color palette, typography scale, spacing system, and layout patterns. The code structure must align with the existing architecture, preserving the component file structure, hooks, types folder, and page layout patterns.
Divide the page into specific, visually distinct sections that include: KPI cards for totals, active and pending counts; recent activity logs; alert messages for urgent issues; and charts demonstrating trends over time. Each section should be explicitly labeled. Ensure that each component in the output is accompanied by a description of its required data state, including types and default values, to facilitate direct implementation.
The output must strictly utilize only Tailwind CSS and the @tabler/icons-webfont library — no additional UI frameworks or libraries such as Shadcn, Material UI, or Headless UI should be included.
The final plan should produce a structured document containing:
- A component tree presented as an indented list detailing the hierarchy and relationships.
- A wireframe description outlining the layout section by section in clear text.
- A data/state requirement table for each component that lists the necessary data attributes.
- A responsive design strategy that specifies how each section adapts to mobile, tablet, and desktop views, ensuring all elements remain accessible and legible.
Success criteria for the resulting design must be clearly defined: the dashboard must cover all nine entities, use the specified icon set exclusively, respect the existing design tokens, and create a coherent layout that minimizes navigation clicks while maximizing data visibility. The entire output must be written in clear, technical English.