|
|
<!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> |
