| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>نظام ERP المحاسبي المتكامل</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .sidebar { |
| transition: all 0.3s ease; |
| } |
| |
| .menu-item.active-tab { |
| background-color: rgba(255, 255, 255, 0.2); |
| } |
| .sidebar.collapsed { |
| width: 70px; |
| } |
| .sidebar.collapsed .sidebar-text { |
| display: none; |
| } |
| .sidebar.collapsed .logo-text { |
| display: none; |
| } |
| .sidebar.collapsed .menu-item { |
| justify-content: center; |
| } |
| .content-area { |
| transition: all 0.3s ease; |
| } |
| .content-area.expanded { |
| margin-right: 250px; |
| } |
| .content-area.collapsed { |
| margin-right: 70px; |
| } |
| .rtl { |
| direction: rtl; |
| } |
| .ltr { |
| direction: ltr; |
| } |
| .table-responsive { |
| overflow-x: auto; |
| } |
| @media (max-width: 768px) { |
| .sidebar { |
| position: fixed; |
| z-index: 1000; |
| height: 100vh; |
| transform: translateX(-100%); |
| } |
| .sidebar.show { |
| transform: translateX(0); |
| } |
| .content-area { |
| margin-right: 0 !important; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 rtl"> |
| |
| <button id="mobileMenuButton" class="md:hidden fixed top-4 right-4 z-50 bg-blue-600 text-white p-2 rounded-lg shadow-lg"> |
| <i class="fas fa-bars"></i> |
| </button> |
|
|
| |
| <div id="sidebar" class="sidebar bg-blue-800 text-white h-screen fixed top-0 right-0 w-64 shadow-lg"> |
| <div class="p-4 flex items-center justify-between border-b border-blue-700"> |
| <div class="flex items-center"> |
| <i class="fas fa-calculator text-2xl"></i> |
| <span class="logo-text text-xl font-bold mr-2">نظام ERP</span> |
| </div> |
| <button id="toggleSidebar" class="text-white focus:outline-none"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| </div> |
| |
| <div class="p-4"> |
| <div class="flex items-center mb-6"> |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center"> |
| <i class="fas fa-user"></i> |
| </div> |
| <div class="sidebar-text mr-3"> |
| <div class="font-semibold">مدير النظام</div> |
| <div class="text-xs text-blue-200">Admin</div> |
| </div> |
| </div> |
| |
| <nav class="mt-6"> |
| <div class="mb-2 text-blue-300 uppercase text-xs sidebar-text">القوائم الرئيسية</div> |
| |
| <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1 active-tab" data-tab="dashboard"> |
| <i class="fas fa-tachometer-alt w-6 text-center"></i> |
| <span class="sidebar-text mr-2">لوحة التحكم</span> |
| </a> |
| |
| <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1" data-tab="invoices"> |
| <i class="fas fa-file-invoice-dollar w-6 text-center"></i> |
| <span class="sidebar-text mr-2">الفواتير</span> |
| </a> |
| |
| <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1" data-tab="customers"> |
| <i class="fas fa-users w-6 text-center"></i> |
| <span class="sidebar-text mr-2">العملاء</span> |
| </a> |
| |
| <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1" data-tab="suppliers"> |
| <i class="fas fa-truck w-6 text-center"></i> |
| <span class="sidebar-text mr-2">الموردين</span> |
| </a> |
| |
| <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1" data-tab="inventory"> |
| <i class="fas fa-boxes w-6 text-center"></i> |
| <span class="sidebar-text mr-2">المخزون</span> |
| </a> |
| |
| <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1" data-tab="reports"> |
| <i class="fas fa-chart-bar w-6 text-center"></i> |
| <span class="sidebar-text mr-2">التقارير</span> |
| </a> |
| |
| <div class="mb-2 mt-6 text-blue-300 uppercase text-xs sidebar-text">الإعدادات</div> |
| |
| <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1" data-tab="settings"> |
| <i class="fas fa-cog w-6 text-center"></i> |
| <span class="sidebar-text mr-2">الإعدادات</span> |
| </a> |
| |
| <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1" data-tab="users"> |
| <i class="fas fa-user-shield w-6 text-center"></i> |
| <span class="sidebar-text mr-2">المستخدمون</span> |
| </a> |
| </nav> |
| </div> |
| |
| <div class="absolute bottom-0 w-full p-4 border-t border-blue-700"> |
| <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition"> |
| <i class="fas fa-sign-out-alt w-6 text-center"></i> |
| <span class="sidebar-text mr-2">تسجيل الخروج</span> |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div id="contentArea" class="content-area min-h-screen bg-gray-100"> |
| <header class="bg-white shadow-sm"> |
| <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 flex justify-between items-center"> |
| <h1 class="text-xl font-semibold text-gray-900" id="pageTitle">لوحة التحكم</h1> |
| <div class="flex items-center"> |
| <div class="relative"> |
| <button id="notificationsBtn" class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none mr-4"> |
| <span class="sr-only">الإشعارات</span> |
| <i class="fas fa-bell text-xl"></i> |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
| </button> |
| </div> |
| <div class="relative"> |
| <button id="searchBtn" class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none"> |
| <span class="sr-only">بحث</span> |
| <i class="fas fa-search text-xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main> |
| |
| <div id="dashboard" class="tab-content active"> |
| <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="bg-white overflow-hidden shadow rounded-lg"> |
| <div class="p-5"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> |
| <i class="fas fa-money-bill-wave text-white text-xl"></i> |
| </div> |
| <div class="mr-3 w-0 flex-1"> |
| <p class="text-sm font-medium text-gray-500 truncate">إجمالي المبيعات</p> |
| <p class="text-2xl font-semibold text-gray-900">25,000 ر.س</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white overflow-hidden shadow rounded-lg"> |
| <div class="p-5"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> |
| <i class="fas fa-users text-white text-xl"></i> |
| </div> |
| <div class="mr-3 w-0 flex-1"> |
| <p class="text-sm font-medium text-gray-500 truncate">عدد العملاء</p> |
| <p class="text-2xl font-semibold text-gray-900">142</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white overflow-hidden shadow rounded-lg"> |
| <div class="p-5"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3"> |
| <i class="fas fa-box-open text-white text-xl"></i> |
| </div> |
| <div class="mr-3 w-0 flex-1"> |
| <p class="text-sm font-medium text-gray-500 truncate">المنتجات</p> |
| <p class="text-2xl font-semibold text-gray-900">56</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white overflow-hidden shadow rounded-lg"> |
| <div class="p-5"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-red-500 rounded-md p-3"> |
| <i class="fas fa-file-invoice text-white text-xl"></i> |
| </div> |
| <div class="mr-3 w-0 flex-1"> |
| <p class="text-sm font-medium text-gray-500 truncate">الفواتير</p> |
| <p class="text-2xl font-semibold text-gray-900">87</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white shadow rounded-lg mb-6"> |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">أحدث الفواتير</h3> |
| </div> |
| <div class="px-4 py-5 sm:p-6"> |
| <div class="table-responsive"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الفاتورة</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العميل</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المبلغ</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-001</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">شركة التقنية المحدودة</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5,250 ر.س</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">مدفوعة</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
| <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-002</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">شركة البناء الحديث</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12,750 ر.س</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">قيد الانتظار</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
| <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-003</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">مؤسسة النور للتجارة</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-12</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8,400 ر.س</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">ملغاة</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
| <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
| <div class="bg-white shadow rounded-lg p-6"> |
| <h3 class="text-lg font-medium text-gray-900 mb-4">إحصائيات المبيعات</h3> |
| <canvas id="salesChart" height="300"></canvas> |
| </div> |
| <div class="bg-white shadow rounded-lg p-6"> |
| <h3 class="text-lg font-medium text-gray-900 mb-4">توزيع العملاء</h3> |
| <canvas id="customersChart" height="300"></canvas> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="invoices" class="tab-content hidden"> |
| <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> |
| <div class="bg-white shadow rounded-lg mb-6"> |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200 flex justify-between items-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">إدارة الفواتير</h3> |
| <button id="addInvoiceBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| <i class="fas fa-plus mr-1"></i> إضافة فاتورة جديدة |
| </button> |
| </div> |
| <div class="px-4 py-5 sm:p-6"> |
| <div class="mb-4 flex flex-col md:flex-row md:items-center md:justify-between"> |
| <div class="mb-2 md:mb-0"> |
| <div class="relative"> |
| <input type="text" placeholder="بحث..." class="pl-10 pr-4 py-2 border rounded-md w-full md:w-64"> |
| <div class="absolute left-3 top-3 text-gray-400"> |
| <i class="fas fa-search"></i> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <label for="filter" class="mr-2 text-sm text-gray-600">تصفية حسب:</label> |
| <select id="filter" class="border rounded-md px-3 py-1 text-sm"> |
| <option>الكل</option> |
| <option>مدفوعة</option> |
| <option>قيد الانتظار</option> |
| <option>ملغاة</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="table-responsive"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الفاتورة</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العميل</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المبلغ</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200" id="invoicesTableBody"> |
| |
| </tbody> |
| </table> |
| </div> |
| |
| <div class="mt-4 flex flex-col md:flex-row justify-between items-center"> |
| <div class="text-sm text-gray-500 mb-2 md:mb-0"> |
| عرض <span id="startItem">1</span> إلى <span id="endItem">10</span> من <span id="totalItems">25</span> فاتورة |
| </div> |
| <div class="flex"> |
| <button class="px-3 py-1 border rounded-md text-sm disabled:opacity-50" id="prevPage" disabled>السابق</button> |
| <div class="mx-2 flex"> |
| <button class="px-3 py-1 border rounded-md text-sm bg-blue-600 text-white">1</button> |
| <button class="px-3 py-1 border rounded-md text-sm ml-1">2</button> |
| <button class="px-3 py-1 border rounded-md text-sm ml-1">3</button> |
| </div> |
| <button class="px-3 py-1 border rounded-md text-sm" id="nextPage">التالي</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="customers" class="tab-content hidden"> |
| <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> |
| <div class="bg-white shadow rounded-lg mb-6"> |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200 flex justify-between items-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">إدارة العملاء</h3> |
| <button id="addCustomerBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| <i class="fas fa-plus mr-1"></i> إضافة عميل جديد |
| </button> |
| </div> |
| <div class="px-4 py-5 sm:p-6"> |
| <div class="mb-4 flex flex-col md:flex-row md:items-center md:justify-between"> |
| <div class="mb-2 md:mb-0"> |
| <div class="relative"> |
| <input type="text" placeholder="بحث..." class="pl-10 pr-4 py-2 border rounded-md w-full md:w-64"> |
| <div class="absolute left-3 top-3 text-gray-400"> |
| <i class="fas fa-search"></i> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <label for="customerFilter" class="mr-2 text-sm text-gray-600">تصفية حسب:</label> |
| <select id="customerFilter" class="border rounded-md px-3 py-1 text-sm"> |
| <option>الكل</option> |
| <option>نشط</option> |
| <option>غير نشط</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="customersGrid"> |
| |
| </div> |
| |
| <div class="mt-4 flex flex-col md:flex-row justify-between items-center"> |
| <div class="text-sm text-gray-500 mb-2 md:mb-0"> |
| عرض <span id="customerStartItem">1</span> إلى <span id="customerEndItem">6</span> من <span id="customerTotalItems">15</span> عميل |
| </div> |
| <div class="flex"> |
| <button class="px-3 py-1 border rounded-md text-sm disabled:opacity-50" id="customerPrevPage" disabled>السابق</button> |
| <div class="mx-2 flex"> |
| <button class="px-3 py-1 border rounded-md text-sm bg-blue-600 text-white">1</button> |
| <button class="px-3 py-1 border rounded-md text-sm ml-1">2</button> |
| <button class="px-3 py-1 border rounded-md text-sm ml-1">3</button> |
| </div> |
| <button class="px-3 py-1 border rounded-md text-sm" id="customerNextPage">التالي</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="suppliers" class="tab-content hidden"> |
| <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> |
| <div class="bg-white shadow rounded-lg mb-6"> |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200 flex justify-between items-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">إدارة الموردين</h3> |
| <button id="addSupplierBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| <i class="fas fa-plus mr-1"></i> إضافة مورد جديد |
| </button> |
| </div> |
| <div class="px-4 py-5 sm:p-6"> |
| <div class="mb-4 flex flex-col md:flex-row md:items-center md:justify-between"> |
| <div class="mb-2 md:mb-0"> |
| <div class="relative"> |
| <input type="text" placeholder="بحث..." class="pl-10 pr-4 py-2 border rounded-md w-full md:w-64"> |
| <div class="absolute left-3 top-3 text-gray-400"> |
| <i class="fas fa-search"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="table-responsive"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم المورد</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">البريد الإلكتروني</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الهاتف</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المنتجات</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200" id="suppliersTableBody"> |
| |
| </tbody> |
| </table> |
| </div> |
| |
| <div class="mt-4 flex flex-col md:flex-row justify-between items-center"> |
| <div class="text-sm text-gray-500 mb-2 md:mb-0"> |
| عرض <span id="supplierStartItem">1</span> إلى <span id="supplierEndItem">10</span> من <span id="supplierTotalItems">12</span> مورد |
| </div> |
| <div class="flex"> |
| <button class="px-3 py-1 border rounded-md text-sm disabled:opacity-50" id="supplierPrevPage" disabled>السابق</button> |
| <div class="mx-2 flex"> |
| <button class="px-3 py-1 border rounded-md text-sm bg-blue-600 text-white">1</button> |
| <button class="px-3 py-1 border rounded-md text-sm ml-1">2</button> |
| </div> |
| <button class="px-3 py-1 border rounded-md text-sm" id="supplierNextPage">التالي</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="inventory" class="tab-content hidden"> |
| <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> |
| <div class="bg-white shadow rounded-lg mb-6"> |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200 flex justify-between items-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">إدارة المخزون</h3> |
| <div> |
| <button id="addProductBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium mr-2"> |
| <i class="fas fa-plus mr-1"></i> إضافة منتج |
| </button> |
| <button id="importProductsBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| <i class="fas fa-file-import mr-1"></i> استيراد |
| </button> |
| </div> |
| </div> |
| <div class="px-4 py-5 sm:p-6"> |
| <div class="mb-4 flex flex-col md:flex-row md:items-center md:justify-between"> |
| <div class="mb-2 md:mb-0"> |
| <div class="relative"> |
| <input type="text" placeholder="بحث..." class="pl-10 pr-4 py-2 border rounded-md w-full md:w-64"> |
| <div class="absolute left-3 top-3 text-gray-400"> |
| <i class="fas fa-search"></i> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <label for="categoryFilter" class="mr-2 text-sm text-gray-600">تصفية حسب:</label> |
| <select id="categoryFilter" class="border rounded-md px-3 py-1 text-sm"> |
| <option>الكل</option> |
| <option>إلكترونيات</option> |
| <option>أثاث</option> |
| <option>مواد غذائية</option> |
| <option>أدوات مكتبية</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="table-responsive"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الصورة</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المنتج</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الكمية</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">سعر الشراء</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">سعر البيع</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200" id="inventoryTableBody"> |
| |
| </tbody> |
| </table> |
| </div> |
| |
| <div class="mt-4 flex flex-col md:flex-row justify-between items-center"> |
| <div class="text-sm text-gray-500 mb-2 md:mb-0"> |
| عرض <span id="inventoryStartItem">1</span> إلى <span id="inventoryEndItem">10</span> من <span id="inventoryTotalItems">56</span> منتج |
| </div> |
| <div class="flex"> |
| <button class="px-3 py-1 border rounded-md text-sm disabled:opacity-50" id="inventoryPrevPage" disabled>السابق</button> |
| <div class="mx-2 flex"> |
| <button class="px-3 py-1 border rounded-md text-sm bg-blue-600 text-white">1</button> |
| <button class="px-3 py-1 border rounded-md text-sm ml-1">2</button> |
| <button class="px-3 py-1 border rounded-md text-sm ml-1">3</button> |
| <button class="px-3 py-1 border rounded-md text-sm ml-1">4</button> |
| <button class="px-3 py-1 border rounded-md text-sm ml-1">5</button> |
| <button class="px-3 py-1 border rounded-md text-sm ml-1">6</button> |
| </div> |
| <button class="px-3 py-1 border rounded-md text-sm" id="inventoryNextPage">التالي</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="reports" class="tab-content hidden"> |
| <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> |
| <div class="bg-white shadow rounded-lg mb-6"> |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">التقارير</h3> |
| </div> |
| <div class="px-4 py-5 sm:p-6"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
| <h4 class="text-lg font-medium mb-4">تقرير المبيعات</h4> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">الفترة الزمنية</label> |
| <select class="border rounded-md px-3 py-2 w-full"> |
| <option>هذا الشهر</option> |
| <option>الشهر الماضي</option> |
| <option>هذا العام</option> |
| <option>العام الماضي</option> |
| <option>مخصص</option> |
| </select> |
| </div> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium w-full"> |
| <i class="fas fa-download mr-1"></i> إنشاء التقرير |
| </button> |
| </div> |
| |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
| <h4 class="text-lg font-medium mb-4">تقرير المخزون</h4> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">نوع التقرير</label> |
| <select class="border rounded-md px-3 py-2 w-full"> |
| <option>منتوش منتهية</option> |
| <option>منتوش قاربت على الانتهاء</option> |
| <option>حركة المخزون</option> |
| <option>تقرير كامل</option> |
| </select> |
| </div> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium w-full"> |
| <i class="fas fa-download mr-1"></i> إنشاء التقرير |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="text-lg font-medium mb-4">التقارير المحفوظة</h4> |
| <div class="table-responsive"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-100"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم التقرير</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">النوع</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاريخ الإنشاء</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">تقرير المبيعات - يونيو 2023</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">مبيعات</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-30</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-download"></i></button> |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">تقرير المخزون - مايو 2023</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">مخزون</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-31</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-download"></i></button> |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="settings" class="tab-content hidden"> |
| <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> |
| <div class="bg-white shadow rounded-lg mb-6"> |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">إعدادات النظام</h3> |
| </div> |
| <div class="px-4 py-5 sm:p-6"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="md:col-span-1"> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="text-lg font-medium mb-4">الإعدادات</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-blue-600 font-medium settings-tab active" data-tab="general-settings">عام</a></li> |
| <li><a href="#" class="text-gray-600 settings-tab" data-tab="company-settings">بيانات الشركة</a></li> |
| <li><a href="#" class="text-gray-600 settings-tab" data-tab="invoice-settings">إعدادات الفواتير</a></li> |
| <li><a href="#" class="text-gray-600 settings-tab" data-tab="tax-settings">الضرائب</a></li> |
| <li><a href="#" class="text-gray-600 settings-tab" data-tab="email-settings">إعدادات البريد</a></li> |
| <li><a href="#" class="text-gray-600 settings-tab" data-tab="backup-settings">النسخ الاحتياطي</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="md:col-span-2"> |
| |
| <div id="general-settings" class="settings-tab-content active"> |
| <h4 class="text-lg font-medium mb-4">الإعدادات العامة</h4> |
| <form> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">اسم النظام</label> |
| <input type="text" class="border rounded-md px-3 py-2 w-full" value="نظام ERP المحاسبي"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">العملة</label> |
| <select class="border rounded-md px-3 py-2 w-full"> |
| <option>ريال سعودي (ر.س)</option> |
| <option>دولار أمريكي ($)</option> |
| <option>يورو (€)</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">اللغة</label> |
| <select class="border rounded-md px-3 py-2 w-full"> |
| <option>العربية</option> |
| <option>الإنجليزية</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">التوقيت</label> |
| <select class="border rounded-md px-3 py-2 w-full"> |
| <option>Asia/Riyadh (توقيت السعودية)</option> |
| <option>UTC (توقيت عالمي)</option> |
| </select> |
| </div> |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">حفظ التغييرات</button> |
| </form> |
| </div> |
| |
| |
| <div id="company-settings" class="settings-tab-content hidden"> |
| <h4 class="text-lg font-medium mb-4">بيانات الشركة</h4> |
| <form> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">اسم الشركة</label> |
| <input type="text" class="border rounded-md px-3 py-2 w-full" value="شركة التقنية المحدودة"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">الشعار</label> |
| <div class="flex items-center"> |
| <div class="w-16 h-16 bg-gray-200 rounded-md flex items-center justify-center overflow-hidden"> |
| <i class="fas fa-building text-gray-400 text-2xl"></i> |
| </div> |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1 rounded-md text-sm font-medium mr-3">تغيير</button> |
| <button class="text-red-600 hover:text-red-800 text-sm font-medium">إزالة</button> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">العنوان</label> |
| <textarea class="border rounded-md px-3 py-2 w-full" rows="3">الرياض، المملكة العربية السعودية</textarea> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">رقم السجل التجاري</label> |
| <input type="text" class="border rounded-md px-3 py-2 w-full" value="1234567890"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">رقم الهاتف</label> |
| <input type="text" class="border rounded-md px-3 py-2 w-full" value="+966112345678"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</label> |
| <input type="email" class="border rounded-md px-3 py-2 w-full" value="info@techcompany.com"> |
| </div> |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">حفظ التغييرات</button> |
| </form> |
| </div> |
| |
| |
| <div id="invoice-settings" class="settings-tab-content hidden"> |
| <h4 class="text-lg font-medium mb-4">إعدادات الفواتير</h4> |
| <form> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">بادئة رقم الفاتورة</label> |
| <input type="text" class="border rounded-md px-3 py-2 w-full" value="INV-"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">تنسيق رقم الفاتورة</label> |
| <select class="border rounded-md px-3 py-2 w-full"> |
| <option>INV-YYYY-NNNN (INV-2023-0001)</option> |
| <option>INV-NNNN (INV-0001)</option> |
| <option>NNNN (0001)</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">شروط الدفع الافتراضية</label> |
| <textarea class="border rounded-md px-3 py-2 w-full" rows="3">يجب سداد الفاتورة خلال 30 يوم من تاريخ الاصدار.</textarea> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">ملاحظات الفاتورة الافتراضية</label> |
| <textarea class="border rounded-md px-3 py-2 w-full" rows="3">شكرا لتعاملكم معنا.</textarea> |
| </div> |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">حفظ التغييرات</button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="users" class="tab-content hidden"> |
| <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> |
| <div class="bg-white shadow rounded-lg mb-6"> |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200 flex justify-between items-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">إدارة المستخدمين</h3> |
| <button id="addUserBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| <i class="fas fa-plus mr-1"></i> إضافة مستخدم |
| </button> |
| </div> |
| <div class="px-4 py-5 sm:p-6"> |
| <div class="mb-4"> |
| <div class="relative"> |
| <input type="text" placeholder="بحث..." class="pl-10 pr-4 py-2 border rounded-md w-full md:w-64"> |
| <div class="absolute left-3 top-3 text-gray-400"> |
| <i class="fas fa-search"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="table-responsive"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الصورة</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الاسم</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">البريد الإلكتروني</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الدور</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-user text-blue-600"></i> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">أحمد محمد</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">ahmed@example.com</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">مدير النظام</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">نشط</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button> |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center"> |
| <i class="fas fa-user text-purple-600"></i> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">سارة عبدالله</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">sara@example.com</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">محاسب</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">نشط</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button> |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center"> |
| <i class="fas fa-user text-yellow-600"></i> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">خالد سعيد</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">khaled@example.com</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">موظف مبيعات</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">نشط</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button> |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <div class="mt-4 flex flex-col md:flex-row justify-between items-center"> |
| <div class="text-sm text-gray-500 mb-2 md:mb-0"> |
| عرض <span id="usersStartItem">1</span> إلى <span id="usersEndItem">3</span> من <span id="usersTotalItems">3</span> مستخدم |
| </div> |
| <div class="flex"> |
| <button class="px-3 py-1 border rounded-md text-sm disabled:opacity-50" id="usersPrevPage" disabled>السابق</button> |
| <div class="mx-2 flex"> |
| <button class="px-3 py-1 border rounded-md text-sm bg-blue-600 text-white">1</button> |
| </div> |
| <button class="px-3 py-1 border rounded-md text-sm disabled:opacity-50" id="usersNextPage" disabled>التالي</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const menuItems = document.querySelectorAll('.menu-item[data-tab]'); |
| const tabContents = document.querySelectorAll('.tab-content'); |
| const pageTitle = document.getElementById('pageTitle'); |
| |
| menuItems.forEach(item => { |
| item.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| |
| menuItems.forEach(i => i.classList.remove('active-tab')); |
| |
| |
| this.classList.add('active-tab'); |
| |
| |
| tabContents.forEach(content => { |
| content.classList.add('hidden'); |
| content.classList.remove('active'); |
| }); |
| |
| |
| const tabId = this.getAttribute('data-tab'); |
| const targetContent = document.getElementById(tabId); |
| |
| if (targetContent) { |
| targetContent.classList.remove('hidden'); |
| targetContent.classList.add('active'); |
| |
| |
| pageTitle.textContent = this.querySelector('.sidebar-text').textContent; |
| } |
| }); |
| }); |
| |
| |
| const settingsTabs = document.querySelectorAll('.settings-tab'); |
| const settingsContents = document.querySelectorAll('.settings-tab-content'); |
| |
| settingsTabs.forEach(tab => { |
| tab.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| |
| settingsTabs.forEach(t => { |
| t.classList.remove('font-bold', 'text-blue-600'); |
| t.classList.add('text-gray-600'); |
| }); |
| |
| |
| this.classList.add('font-bold', 'text-blue-600'); |
| this.classList.remove('text-gray-600'); |
| |
| |
| settingsContents.forEach(content => { |
| content.classList.add('hidden'); |
| content.classList.remove('active'); |
| }); |
| |
| |
| const tabId = this.getAttribute('data-tab'); |
| const targetContent = document.getElementById(tabId); |
| |
| if (targetContent) { |
| targetContent.classList.remove('hidden'); |
| targetContent.classList.add('active'); |
| } |
| }); |
| }); |
| }); |
| </script> |
|
|
| |
| |
| <div id="addInvoiceModal" class="fixed inset-0 z-50 overflow-y-auto hidden"> |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
| </div> |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| <div class="inline-block align-bottom bg-white rounded-lg text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
| <div class="sm:flex sm:items-start"> |
| <div class="mt-3 text-center sm:mt-0 sm:mr-4 sm:text-right w-full"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4" id="modalTitle">إضافة فاتورة جديدة</h3> |
| <div class="mt-2"> |
| <form id="invoiceForm"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">العميل</label> |
| <select class="border rounded-md px-3 py-2 w-full"> |
| <option>اختر عميل...</option> |
| <option>شركة التقنية المحدودة</option> |
| <option>شركة البناء الحديث</option> |
| <option>مؤسسة النور للتجارة</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">تاريخ الفاتورة</label> |
| <input type="date" class="border rounded-md px-3 py-2 w-full"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">تاريخ الاستحقاق</label> |
| <input type="date" class="border rounded-md px-3 py-2 w-full"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">حالة الفاتورة</label> |
| <select class="border rounded-md px-3 py-2 w-full"> |
| <option>قيد الانتظار</option> |
| <option>مدفوعة</option> |
| <option>ملغاة</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">عناصر الفاتورة</label> |
| <div class="border rounded-md"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المنتج</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الكمية</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">السعر</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المجموع</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200" id="invoiceItems"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <select class="border rounded-md px-2 py-1 w-full"> |
| <option>اختر منتج...</option> |
| <option>حاسوب محمول</option> |
| <option>هاتف ذكي</option> |
| <option>طابعة</option> |
| </select> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <input type="number" value="1" min="1" class="border rounded-md px-2 py-1 w-20"> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <input type="number" value="0" min="0" step="0.01" class="border rounded-md px-2 py-1 w-24"> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap">0 ر.س</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <button type="button" class="text-red-600 hover:text-red-900 remove-item"><i class="fas fa-trash"></i></button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| <div class="p-3"> |
| <button type="button" id="addItemBtn" class="text-blue-600 hover:text-blue-900 text-sm font-medium"> |
| <i class="fas fa-plus mr-1"></i> إضافة عنصر |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">الخصم</label> |
| <div class="flex"> |
| <input type="number" value="0" min="0" max="100" class="border rounded-r-md px-3 py-2 w-20"> |
| <span class="flex items-center px-3 bg-gray-100 border border-r-0 rounded-l-md">%</span> |
| </div> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">الضريبة</label> |
| <div class="flex"> |
| <input type="number" value="15" min="0" max="100" class="border rounded-r-md px-3 py-2 w-20"> |
| <span class="flex items-center px-3 bg-gray-100 border border-r-0 rounded-l-md">%</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-4 rounded-md mb-4"> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">المجموع الفرعي:</span> |
| <span>0 ر.س</span> |
| </div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">الخصم:</span> |
| <span>0 ر.س (0%)</span> |
| </div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">الضريبة:</span> |
| <span>0 ر.س (15%)</span> |
| </div> |
| <div class="flex justify-between font-bold text-lg border-t border-gray-200 pt-2"> |
| <span>الإجمالي:</span> |
| <span>0 ر.س</span> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">ملاحظات</label> |
| <textarea class="border rounded-md px-3 py-2 w-full" rows="3"></textarea> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">شروط الدفع</label> |
| <textarea class="border rounded-md px-3 py-2 w-full" rows="2"></textarea> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
| <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"> |
| حفظ الفاتورة |
| </button> |
| <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm close-modal"> |
| إلغاء |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="addCustomerModal" class="fixed inset-0 z-50 overflow-y-auto hidden"> |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
| </div> |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| <div class="inline-block align-bottom bg-white rounded-lg text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"> |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
| <div class="sm:flex sm:items-start"> |
| <div class="mt-3 text-center sm:mt-0 sm:mr-4 sm:text-right w-full"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">إضافة عميل جديد</h3> |
| <div class="mt-2"> |
| <form id="customerForm"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">الاسم</label> |
| <input type="text" class="border rounded-md px-3 py-2 w-full"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</label> |
| <input type="email" class="border rounded-md px-3 py-2 w-full"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">الهاتف</label> |
| <input type="tel" class="border rounded-md px-3 py-2 w-full"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">الشركة</label> |
| <input type="text" class="border rounded-md px-3 py-2 w-full"> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">العنوان</label> |
| <textarea class="border rounded-md px-3 py-2 w-full" rows="2"></textarea> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">ملاحظات</label> |
| <textarea class="border rounded-md px-3 py-2 w-full" rows="2"></textarea> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">الحالة</label> |
| <select class="border rounded-md px-3 py-2 w-full"> |
| <option>نشط</option> |
| <option>غير نشط</option> |
| </select> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
| <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"> |
| حفظ العميل |
| </button> |
| <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm close-modal"> |
| إلغاء |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="addProductModal" class="fixed inset-0 z-50 overflow-y-auto hidden"> |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
| </div> |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| <div class="inline-block align-bottom bg-white rounded-lg text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"> |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
| <div class="sm:flex sm:items-start"> |
| <div class="mt-3 text-center sm:mt-0 sm:mr-4 sm:text-right |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=BADRNOMAN/https-wa-me-967773299164" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
