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.

README.md

@@ -1,72 +1,15 @@
-# Slash.sa — منصة إدارة الأسطول واللوجستيات
+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.
 
-منصة ويب متكاملة لإدارة عمليات الأسطول واللوجستيات، مبنية بلغة عربية أولًا (Arabic-first)
-باتجاه RTL كامل، وموجهة للسوق السعودي. تشمل المنصة إدارة المركبات والسائقين والفروع
-والطلبات والرحلات وسجل الصيانة، مع لوحات تحكم منفصلة حسب دور المستخدم (مشرف / عميل / مستخدم ميداني).
+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.
 
-- Node.js 20.9 أو أحدث
-- npm (أو أي package manager متوافق)
+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.
 
-| الطبقة              | التقنية                                   |
-| -------------------- | ------------------------------------------ |
-| الإطار               | Next.js 16 (App Router)                    |
-| اللغة                | TypeScript                                 |
-| التنسيق              | Tailwind CSS v4                            |
-| النماذج والتحقق      | react-hook-form + yup                      |
-| الأيقونات            | lucide-react (صفحات التسويق) / Tabler Icons Webfont (لوحة التحكم) |
-| المصادقة             | JWT + HttpOnly cookie + middleware للحماية |
-
-## هيكل المشروع (مختصر)
-app/
-├── (صفحات تسويقية)      home, features/app, how_work, prices, frequently_asked_questions
-├── dashboard/            لوحة التحكم (محمية بواسطة middleware)
-│   ├── cars, drivers, orders, trips, clients, branches, roles, audit, users
-├── login, register       صفحات المصادقة
-├── api/proxy/[...path]   بروكسي موحّد لكل طلبات الـ backend
-└── components/layout     Navbar, Sidebar, Topbar (تُستخدم عبر الصفحات يدويًا)
-src/
-├── Components/           مكوّنات لوحة التحكم (مقسّمة حسب الوحدة: Car, Driver, Order...)
-├── hooks/                منطق جلب البيانات والطفرات (Create/Update/Delete) لكل وحدة
-├── services/              طبقة استدعاء الـ API (كل وحدة لها service منفصل)
-├── types/                تعريفات TypeScript لكل نموذج بيانات
-├── validations/          مخططات yup للتحقق من صحة النماذج
-└── lib/                  دوال مساعدة (auth, session, formatters, order-status)
-## التشغيل محليًا
-
-```bash
-npm install
-npm run dev
-```
-
-افتح [http://localhost:3000](http://localhost:3000) في المتصفح.
-
-## الأوامر المتاحة
-
-| الأمر            | الوصف                                  |
-| ---------------- | --------------------------------------- |
-| `npm run dev`    | تشغيل بيئة التطوير (Webpack)            |
-| `npm run build`  | بناء نسخة الإنتاج                      |
-| `npm run start`  | تشغيل نسخة الإنتاج المبنية              |
-| `npm run lint`   | فحص الكود بواسطة ESLint                |
-
-## ملاحظات النشر (Deployment)
-
-- المنصة مبنية على Next.js App Router وتعمل على أي بيئة تدعم Node.js 20.9+ (مثل Vercel).
-- كل طلبات الـ backend تمر عبر `app/api/proxy/[...path]/route.ts`، فتأكد من ضبط الـ backend base URL بشكل صحيح قبل النشر.
-- التوثيق (Authentication) يعتمد على HttpOnly cookie تُضبط عبر `app/api/auth/set-cookie`، وتُمسح عبر `app/api/clear-cookie` — تأكد من تفعيل `Secure` في بيئة الإنتاج (يتم تلقائيًا حسب `NODE_ENV`).
-- الحماية على مستوى الراوت تتم عبر `middleware.ts` — راجع الـ `matcher` فيه عند إضافة مسارات محمية جديدة.
-
-## المساهمة (Contributing)
-
-1. أنشئ فرعًا جديدًا من `main` باسم واضح للتغيير (مثال: `feature/car-maintenance-filters`).
-2. اتبع نفس أسلوب الكود الموجود: RTL-first، CSS custom property tokens بدل الألوان الثابتة، وهيكلة hooks/services/types/validations لكل وحدة جديدة.
-3. شغّل `npm run lint` قبل فتح Pull Request.
-4. اكتب وصفًا واضحًا للتغيير وربطه بأي تذكرة (issue) ذات صلة.
-
-## الترخيص
-
-جميع الحقوق محفوظة © 2026 Slash.sa
+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.