f1a521dd5a
Replace manual useState + validate() wiring with react-hook-form and
yupResolver across CarFormModal, DriverFormModal, Tripformmodal,
OrderFormModal, BranchFormModal, CarMaintananceFormModal, RoleFormModal,
and UserFormModal, following the existing pattern in Addressformmodal.
- Pin yupResolver's generic explicitly (yupResolver<FormValues>(schema as any))
since create/update schemas differ structurally and yup can't unify them
into a single inferred type on its own.
- Replace manual ref-based autofocus (useRef + ref={firstRef}) with
autoFocus/setFocus to avoid ref collisions with register()'s own ref.
- DriverFormModal: bind photo/nationalPhoto/driverCardPhoto file fields via
Controller instead of register.
- Tripformmodal: convert startTime/endTime to ISO-8601 via setValueAs while
keeping the datetime-local input display unaffected.
- OrderFormModal: register nested deliveryAddress/pickupAddress fields via
dot-path syntax; keep pickupMode as local state; preserve conditional
address payload assembly.
- CarMaintananceFormModal: keep toNumberOrUndefined cost coercion and
ISO-8601 date conversion at submit time.
- RoleFormModal: bind permissionIds checkbox group via Controller.
- UserFormModal: add a custom resolver wrapper to preserve the
empty-password-on-edit behavior (skip password validation when editing
with a blank password field).
Also replace raw HTML elements with the shared UI kit components
(Modal, Input, Textarea, Select, Button, Alert, Badge, EmptyState) across
form modals, detail modals, and tables:
- RoleFormModal: Modal, Input, Textarea, Button
- OrderFormModal: Modal, Input, Select, Button
- UserDetailModal / Archiveduserdetailmodal: Modal, Alert, Button
- UserTable / Archivedusertable: Badge, Button, EmptyState
- RoleDetailModal / ArchivedRoleDetailModal: Modal, Alert, Select, Button
- RoleTable / ArchivedRoleTable: Button, EmptyState
- Tripreportpanel: Button with built-in loading state instead of manual
Spinner/disabled/color wiring
StatusBadge, IconBtn, and other per-action custom chips/checkboxes are kept
as-is in every file — the shared Badge/Button components don't support dot
indicators or per-action color-coding, so forcing them in would misshape or
strip semantics from these controls.
Archivedusersmodal, ArchivedRolesModal, and ArchivedTripList required no
changes — already fully compliant with the shared UI kit.
No changes to visual layout, CSS, or Arabic labels/section headings beyond
what's required by the component swaps above.
Slash.sa — منصة إدارة الأسطول واللوجستيات
منصة ويب متكاملة لإدارة عمليات الأسطول واللوجستيات، مبنية بلغة عربية أولًا (Arabic-first) باتجاه RTL كامل، وموجهة للسوق السعودي. تشمل المنصة إدارة المركبات والسائقين والفروع والطلبات والرحلات وسجل الصيانة، مع لوحات تحكم منفصلة حسب دور المستخدم (مشرف / عميل / مستخدم ميداني).
المتطلبات الأساسية
- Node.js 20.9 أو أحدث
- npm (أو أي package manager متوافق)
التقنيات المستخدمة
| الطبقة | التقنية |
|---|---|
| الإطار | 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)
التشغيل محليًا
npm install
npm run dev
افتح 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)
- أنشئ فرعًا جديدًا من
mainباسم واضح للتغيير (مثال:feature/car-maintenance-filters). - اتبع نفس أسلوب الكود الموجود: RTL-first، CSS custom property tokens بدل الألوان الثابتة، وهيكلة hooks/services/types/validations لكل وحدة جديدة.
- شغّل
npm run lintقبل فتح Pull Request. - اكتب وصفًا واضحًا للتغيير وربطه بأي تذكرة (issue) ذات صلة.
الترخيص
جميع الحقوق محفوظة © 2026 Slash.sa