Replace SVGs with icons, restructure the table for CRUD operations across the project, standardize the application's display, and build a new template for the table's action buttons.
This commit is contained in:
m7amedez5511
80
README.md
80
README.md
@@ -1,15 +1,75 @@
|
||||
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.
|
||||
# Slash.sa — Fleet & Logistics Management Platform
|
||||
|
||||
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.
|
||||
A full-featured web platform for managing fleet and logistics operations, built **Arabic-first** with complete **RTL** support and targeted at the Saudi market. The platform covers vehicle, driver, branch, order, and trip management along with a maintenance log, all backed by role-based dashboards (admin / client / field user).
|
||||
|
||||
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.
|
||||
## Prerequisites
|
||||
|
||||
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.
|
||||
- Node.js 20.9 or later
|
||||
- npm (or any compatible package manager)
|
||||
|
||||
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.
|
||||
## Tech Stack
|
||||
|
||||
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.
|
||||
| Layer | Technology |
|
||||
| ---------------- | -------------------------------------------------------- |
|
||||
| Framework | Next.js 16 (App Router) |
|
||||
| Language | TypeScript |
|
||||
| Styling | Tailwind CSS v4 |
|
||||
| Forms & Validation | react-hook-form + yup |
|
||||
| Icons | lucide-react (marketing pages) / Tabler Icons Webfont (dashboard) |
|
||||
| Authentication | JWT + HttpOnly cookie + protective middleware |
|
||||
|
||||
## Project Structure (overview)
|
||||
|
||||
```
|
||||
app/
|
||||
├── (marketing pages) home, features/app, how_it_works, pricing, faq
|
||||
├── dashboard/ protected dashboard (guarded by middleware)
|
||||
│ ├── cars, drivers, orders, trips, clients, branches, roles, audit, users
|
||||
├── login, register authentication pages
|
||||
├── api/proxy/[...path] unified proxy for all backend requests
|
||||
└── components/layout Navbar, Sidebar, Topbar (manually used across pages)
|
||||
|
||||
src/
|
||||
├── Components/ dashboard components (organized per module: Car, Driver, Order...)
|
||||
├── hooks/ data-fetching and mutation logic (Create/Update/Delete) per module
|
||||
├── services/ API call layer (each module has its own service)
|
||||
├── types/ TypeScript type definitions per data model
|
||||
├── validations/ yup schemas for form validation
|
||||
└── lib/ helper functions (auth, session, formatters, order-status)
|
||||
```
|
||||
|
||||
## Running Locally
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) in your browser.
|
||||
|
||||
## Available Scripts
|
||||
|
||||
| Command | Description |
|
||||
| --------------- | ------------------------------------- |
|
||||
| `npm run dev` | Run the development server (Webpack) |
|
||||
| `npm run build` | Build the production bundle |
|
||||
| `npm run start` | Run the built production version |
|
||||
| `npm run lint` | Lint the codebase with ESLint |
|
||||
|
||||
## Deployment Notes
|
||||
|
||||
- The platform is built on the Next.js App Router and runs on any environment that supports Node.js 20.9+ (e.g., Vercel).
|
||||
- All backend requests are routed through `app/api/proxy/[...path]/route.ts` — make sure the backend base URL is configured correctly before deploying.
|
||||
- Authentication relies on an HttpOnly cookie set via `app/api/auth/set-cookie` and cleared via `app/api/clear-cookie`. Make sure `Secure` is enabled in production (this happens automatically based on `NODE_ENV`).
|
||||
- Route-level protection is handled by `middleware.ts` — check its `matcher` config whenever you add new protected routes.
|
||||
|
||||
## Contributing
|
||||
|
||||
1. Create a new branch from `main` with a clear name describing the change (e.g., `feature/car-maintenance-filters`).
|
||||
2. Follow the existing code conventions: RTL-first, CSS custom property tokens instead of hardcoded colors, and the hooks/services/types/validations structure for each new module.
|
||||
3. Run `npm run lint` before opening a Pull Request.
|
||||
4. Write a clear description of the change and link it to any related issue.
|
||||
|
||||
## License
|
||||
|
||||
All rights reserved © 2026 Slash.sa
|
||||
Reference in New Issue
Block a user