Responsive Café POS System

تطوير نظام نقاط بيع (POS) متكامل لإدارة المقاهي (Frontend)

يسرني عرض مشروع "Café POS"، وهو نظام واجهة أمامية (Frontend System) متكامل وفعال لإدارة المبيعات وقائمة الطعام في المقاهي. تم تطوير هذا النظام ليكون أداة قوية وسهلة الاستخدام للموظفين، مع ضمان تجربة عصرية وسلسة.

التقنيات الأساسية المستخدمة:

HTML5: لبناء الهيكل الأساسي للنظام بفعالية.

CSS3 & Tailwind CSS: تم استخدام إطار عمل Tailwind CSS بشكل خاص لتسريع عملية التنسيق وضمان تصميم عالي الجودة وقابل للتوسع، مع الاستفادة من التصميم القائم على الأدوات المساعدة (Utility-First).

JavaScript: لتنفيذ جميع الوظائف التفاعلية والديناميكية الخاصة بالنظام (إضافة، تعديل، حذف، بحث، وحساب الإجمالي).

المميزات الرئيسية والتنفيذ الدقيق:

تصميم متجاوب بالكامل (Fully Responsive Design):

بفضل استخدام Tailwind CSS، تم ضمان أن الواجهة تتكيف بشكل مثالي مع جميع أحجام الشاشات (كمبيوتر مكتبي، جهاز لوحي، وهاتف ذكي)، مما يجعل النظام قابلًا للاستخدام على أي جهاز داخل المقهى.

واجهة مستخدم احترافية وعصرية (Modern UI/UX):

تم اختيار نظام ألوان داكن (Dark Theme) مريح للعين، مع استخدام اللون البرتقالي الداكن كلون مميز للأزرار والعناصر التفاعلية، مما يعزز سهولة الاستخدام والتركيز.

تصميم واجهة تسجيل دخول (Login Screen) منفصلة ومبسطة لأمان النظام.

وظائف إدارة القائمة والمبيعات (Core POS Features):

إضافة عنصر جديد: واجهة واضحة لإدخال تفاصيل المنتج الجديد (التصنيف، اسم الصنف، الكمية، السعر)، مع حساب تلقائي للإجمالي.

جدول عرض البيانات: عرض تفصيلي للمنتجات المضافة (ID, Category, Item, Qty, Price) في جدول منظم.

تعديل وحذف: توفير خيارات التعديل (Edit) والحذف (Delete) لكل صنف مباشرة من الجدول، مع إمكانية تحديث البيانات في واجهة الإدخال.

البحث الفوري (Search Functionality): مربع بحث أسفل الواجهة يسمح بالبحث السريع والفعال ضمن قائمة الأصناف، مما يسرّع عملية الطلب.

تكامل الواجهة الأمامية مع وظائف إدارة البيانات:

استخدام JavaScript لربط واجهة المستخدم بالوظائف الأساسية (CRUD Operations)، مما يضمن تجربة سلسة للمستخدمين عند إدخال البيانات، تعديلها، وعرضها ديناميكيًا على الشاشة.

يبرهن هذا المشروع على قدرتي على تطوير واجهات أمامية معقدة وظيفيًا وذات جودة تصميم عالية، باستخدام Tailwind CSS لتحقيق المرونة والتجاوب.