مشروع متكامل (Full-Stack) لإدارة المخزون والعمليات اللوجستية

نظام إدارة المستودعات الذكي (WMS Dashboard)

مشروع متكامل (Full-Stack) لإدارة المخزون والعمليات اللوجستية، تم بناؤه باستخدام React و Supabase مع التركيز على الأداء العالي (High Performance) وتجربة المستخدم السلسة.

المميزات التقنية والحلول البرمجية:

1. إدارة البيانات الضخمة (Efficient Data Handling):

التصفح والترقيم (Pagination): تم تنفيذ الترقيم من جهة الخادم (Server-side Pagination) لضمان سرعة تحميل النظام مهما زاد حجم المنتجات، مع جلب 10 عناصر فقط في كل طلب.

الجلب المسبق (Prefetching): استخدمت TanStack Query للتنبؤ بخطوة المستخدم التالية وجلب بيانات الصفحة التالية في الخلفية، مما يجعل التنقل بين الصفحات لحظياً.

2. محرك البحث الذكي (Optimized Search Engine):

تطبيق تقنية الـ Debouncing: لمنع تكرار الطلبات البرمجية (API calls) مع كل حرف يكتبه المستخدم، مما وفر في استهلاك الموارد التي تحدث بسبب تداخل الطلبات.

نظام الفلترة المتقدم: إمكانية البحث بالاسم، الكود (SKU)، الفئات، أو الترتيب حسب السعر والكمية في وقت واحد.

3. سلامة البيانات (Database Integrity):

العمليات الموحدة (Atomic Transactions): تم بناء وظيفة Stored Procedure (RPC) داخل قاعدة بيانات PostgreSQL لضمان تنفيذ عمليتين معاً: (تحديث المخزون + تسجيل حركة الطلب). إذا فشلت واحدة، تُلغى الأخرى تلقائياً لضمان دقة الحسابات.

سياسات الأمان (RLS): تفعيل سياسات Row Level Security لضمان أن العمليات الحساسة لا تتم إلا من خلال مستخدمين موثقين.

تجربة مستخدم انسيابية: استخدام Framer Motion لإضافة انتقالات ناعمة (Transitions) بين الصفحات والقوائم، مع تصميم متجاوب (Responsive) تماماً باستخدام Tailwind CSS.

4. الاستقرار والانتشار (Deployment):

تكوين ملفات التوجيه (Redirects) لحل مشاكل الـ SPA Routing عند إعادة تحميل الصفحة (Refresh) لضمان استقرار التطبيق بعد الرفع.

التقنيات المستخدمة (Tech Stack):

Frontend: React (Vite), Tailwind CSS, Framer Motion.

State Management: TanStack Query (React Query).

Backend: Supabase (PostgreSQL, Auth, RPC).

Tools: Lucide React, Date-fns, React Router

-