Hugging Face's logo

Spaces:
BADRNOMAN
/
https-wa-me-967773299164
Running

App Files Community
BADRNOMAN commited on
Commit
73efcab
·
verified ·
1 Parent(s): 1cb9f3f

اريد انشاء نظام محاسبي متكامل استطيع العمل عليه والاضافة والتعديل والحذف والاستعراض اي نظام متكامل ERP - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +1112 -17
index.html CHANGED
@@ -1,20 +1,1115 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- </head>
9
- <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
10
- <div class="w-full">
11
- <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
12
- <h1 class="text-4xl lg:text-6xl font-bold font-sans">
13
- <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
14
- Ask me anything.
15
- </h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  </div>
17
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
18
- <script></script>
19
- <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>
20
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>نظام ERP المحاسبي المتكامل</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .sidebar.collapsed {
14
+ width: 70px;
15
+ }
16
+ .sidebar.collapsed .sidebar-text {
17
+ display: none;
18
+ }
19
+ .sidebar.collapsed .logo-text {
20
+ display: none;
21
+ }
22
+ .sidebar.collapsed .menu-item {
23
+ justify-content: center;
24
+ }
25
+ .content-area {
26
+ transition: all 0.3s ease;
27
+ }
28
+ .content-area.expanded {
29
+ margin-right: 250px;
30
+ }
31
+ .content-area.collapsed {
32
+ margin-right: 70px;
33
+ }
34
+ .rtl {
35
+ direction: rtl;
36
+ }
37
+ .ltr {
38
+ direction: ltr;
39
+ }
40
+ .table-responsive {
41
+ overflow-x: auto;
42
+ }
43
+ @media (max-width: 768px) {
44
+ .sidebar {
45
+ position: fixed;
46
+ z-index: 1000;
47
+ height: 100vh;
48
+ transform: translateX(-100%);
49
+ }
50
+ .sidebar.show {
51
+ transform: translateX(0);
52
+ }
53
+ .content-area {
54
+ margin-right: 0 !important;
55
+ }
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="bg-gray-100 rtl">
60
+ <!-- Mobile Menu Button -->
61
+ <button id="mobileMenuButton" class="md:hidden fixed top-4 right-4 z-50 bg-blue-600 text-white p-2 rounded-lg shadow-lg">
62
+ <i class="fas fa-bars"></i>
63
+ </button>
64
+
65
+ <!-- Sidebar -->
66
+ <div id="sidebar" class="sidebar bg-blue-800 text-white h-screen fixed top-0 right-0 w-64 shadow-lg">
67
+ <div class="p-4 flex items-center justify-between border-b border-blue-700">
68
+ <div class="flex items-center">
69
+ <i class="fas fa-calculator text-2xl"></i>
70
+ <span class="logo-text text-xl font-bold mr-2">نظام ERP</span>
71
+ </div>
72
+ <button id="toggleSidebar" class="text-white focus:outline-none">
73
+ <i class="fas fa-chevron-right"></i>
74
+ </button>
75
+ </div>
76
+
77
+ <div class="p-4">
78
+ <div class="flex items-center mb-6">
79
+ <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center">
80
+ <i class="fas fa-user"></i>
81
+ </div>
82
+ <div class="sidebar-text mr-3">
83
+ <div class="font-semibold">مدير النظام</div>
84
+ <div class="text-xs text-blue-200">Admin</div>
85
+ </div>
86
+ </div>
87
+
88
+ <nav class="mt-6">
89
+ <div class="mb-2 text-blue-300 uppercase text-xs sidebar-text">القوائم الرئيسية</div>
90
+
91
+ <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">
92
+ <i class="fas fa-tachometer-alt w-6 text-center"></i>
93
+ <span class="sidebar-text mr-2">لوحة التحكم</span>
94
+ </a>
95
+
96
+ <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1" data-tab="invoices">
97
+ <i class="fas fa-file-invoice-dollar w-6 text-center"></i>
98
+ <span class="sidebar-text mr-2">الفواتير</span>
99
+ </a>
100
+
101
+ <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1" data-tab="customers">
102
+ <i class="fas fa-users w-6 text-center"></i>
103
+ <span class="sidebar-text mr-2">العملاء</span>
104
+ </a>
105
+
106
+ <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1" data-tab="suppliers">
107
+ <i class="fas fa-truck w-6 text-center"></i>
108
+ <span class="sidebar-text mr-2">الموردين</span>
109
+ </a>
110
+
111
+ <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1" data-tab="inventory">
112
+ <i class="fas fa-boxes w-6 text-center"></i>
113
+ <span class="sidebar-text mr-2">المخزون</span>
114
+ </a>
115
+
116
+ <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1" data-tab="reports">
117
+ <i class="fas fa-chart-bar w-6 text-center"></i>
118
+ <span class="sidebar-text mr-2">التقارير</span>
119
+ </a>
120
+
121
+ <div class="mb-2 mt-6 text-blue-300 uppercase text-xs sidebar-text">الإعدادات</div>
122
+
123
+ <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1" data-tab="settings">
124
+ <i class="fas fa-cog w-6 text-center"></i>
125
+ <span class="sidebar-text mr-2">الإعدادات</span>
126
+ </a>
127
+
128
+ <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition mb-1" data-tab="users">
129
+ <i class="fas fa-user-shield w-6 text-center"></i>
130
+ <span class="sidebar-text mr-2">المستخدمون</span>
131
+ </a>
132
+ </nav>
133
+ </div>
134
+
135
+ <div class="absolute bottom-0 w-full p-4 border-t border-blue-700">
136
+ <a href="#" class="menu-item flex items-center py-2 px-2 rounded-lg hover:bg-blue-700 transition">
137
+ <i class="fas fa-sign-out-alt w-6 text-center"></i>
138
+ <span class="sidebar-text mr-2">تسجيل الخروج</span>
139
+ </a>
140
+ </div>
141
  </div>
142
+
143
+ <!-- Main Content -->
144
+ <div id="contentArea" class="content-area min-h-screen bg-gray-100">
145
+ <header class="bg-white shadow-sm">
146
+ <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
147
+ <h1 class="text-xl font-semibold text-gray-900" id="pageTitle">لوحة التحكم</h1>
148
+ <div class="flex items-center">
149
+ <div class="relative">
150
+ <button id="notificationsBtn" class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none mr-4">
151
+ <span class="sr-only">الإشعارات</span>
152
+ <i class="fas fa-bell text-xl"></i>
153
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
154
+ </button>
155
+ </div>
156
+ <div class="relative">
157
+ <button id="searchBtn" class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
158
+ <span class="sr-only">بحث</span>
159
+ <i class="fas fa-search text-xl"></i>
160
+ </button>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </header>
165
+
166
+ <!-- Tab Content -->
167
+ <main>
168
+ <!-- Dashboard Tab -->
169
+ <div id="dashboard" class="tab-content active">
170
+ <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
171
+ <!-- Stats Cards -->
172
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
173
+ <div class="bg-white overflow-hidden shadow rounded-lg">
174
+ <div class="p-5">
175
+ <div class="flex items-center">
176
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
177
+ <i class="fas fa-money-bill-wave text-white text-xl"></i>
178
+ </div>
179
+ <div class="mr-3 w-0 flex-1">
180
+ <p class="text-sm font-medium text-gray-500 truncate">إجمالي المبيعات</p>
181
+ <p class="text-2xl font-semibold text-gray-900">25,000 ر.س</p>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <div class="bg-white overflow-hidden shadow rounded-lg">
188
+ <div class="p-5">
189
+ <div class="flex items-center">
190
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
191
+ <i class="fas fa-users text-white text-xl"></i>
192
+ </div>
193
+ <div class="mr-3 w-0 flex-1">
194
+ <p class="text-sm font-medium text-gray-500 truncate">عدد العملاء</p>
195
+ <p class="text-2xl font-semibold text-gray-900">142</p>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="bg-white overflow-hidden shadow rounded-lg">
202
+ <div class="p-5">
203
+ <div class="flex items-center">
204
+ <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
205
+ <i class="fas fa-box-open text-white text-xl"></i>
206
+ </div>
207
+ <div class="mr-3 w-0 flex-1">
208
+ <p class="text-sm font-medium text-gray-500 truncate">المنتجات</p>
209
+ <p class="text-2xl font-semibold text-gray-900">56</p>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="bg-white overflow-hidden shadow rounded-lg">
216
+ <div class="p-5">
217
+ <div class="flex items-center">
218
+ <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
219
+ <i class="fas fa-file-invoice text-white text-xl"></i>
220
+ </div>
221
+ <div class="mr-3 w-0 flex-1">
222
+ <p class="text-sm font-medium text-gray-500 truncate">الفواتير</p>
223
+ <p class="text-2xl font-semibold text-gray-900">87</p>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Recent Invoices -->
231
+ <div class="bg-white shadow rounded-lg mb-6">
232
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
233
+ <h3 class="text-lg leading-6 font-medium text-gray-900">أحدث الفواتير</h3>
234
+ </div>
235
+ <div class="px-4 py-5 sm:p-6">
236
+ <div class="table-responsive">
237
+ <table class="min-w-full divide-y divide-gray-200">
238
+ <thead class="bg-gray-50">
239
+ <tr>
240
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الفاتورة</th>
241
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العميل</th>
242
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
243
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المبلغ</th>
244
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
245
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
246
+ </tr>
247
+ </thead>
248
+ <tbody class="bg-white divide-y divide-gray-200">
249
+ <tr>
250
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-001</td>
251
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">شركة التقنية المحدودة</td>
252
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15</td>
253
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5,250 ر.س</td>
254
+ <td class="px-6 py-4 whitespace-nowrap">
255
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">مدفوعة</span>
256
+ </td>
257
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
258
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
259
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
260
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
261
+ </td>
262
+ </tr>
263
+ <tr>
264
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-002</td>
265
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">شركة البناء الحديث</td>
266
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14</td>
267
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12,750 ر.س</td>
268
+ <td class="px-6 py-4 whitespace-nowrap">
269
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">قيد الانتظار</span>
270
+ </td>
271
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
272
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
273
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
274
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
275
+ </td>
276
+ </tr>
277
+ <tr>
278
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-003</td>
279
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">مؤسسة النور للتجارة</td>
280
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-12</td>
281
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8,400 ر.س</td>
282
+ <td class="px-6 py-4 whitespace-nowrap">
283
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">ملغاة</span>
284
+ </td>
285
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
286
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
287
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
288
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
289
+ </td>
290
+ </tr>
291
+ </tbody>
292
+ </table>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Charts -->
298
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
299
+ <div class="bg-white shadow rounded-lg p-6">
300
+ <h3 class="text-lg font-medium text-gray-900 mb-4">إحصائيات المبيعات</h3>
301
+ <canvas id="salesChart" height="300"></canvas>
302
+ </div>
303
+ <div class="bg-white shadow rounded-lg p-6">
304
+ <h3 class="text-lg font-medium text-gray-900 mb-4">توزيع العملاء</h3>
305
+ <canvas id="customersChart" height="300"></canvas>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Invoices Tab -->
312
+ <div id="invoices" class="tab-content hidden">
313
+ <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
314
+ <div class="bg-white shadow rounded-lg mb-6">
315
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200 flex justify-between items-center">
316
+ <h3 class="text-lg leading-6 font-medium text-gray-900">إدارة الفواتير</h3>
317
+ <button id="addInvoiceBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
318
+ <i class="fas fa-plus mr-1"></i> إضافة فاتورة جديدة
319
+ </button>
320
+ </div>
321
+ <div class="px-4 py-5 sm:p-6">
322
+ <div class="mb-4 flex flex-col md:flex-row md:items-center md:justify-between">
323
+ <div class="mb-2 md:mb-0">
324
+ <div class="relative">
325
+ <input type="text" placeholder="بحث..." class="pl-10 pr-4 py-2 border rounded-md w-full md:w-64">
326
+ <div class="absolute left-3 top-3 text-gray-400">
327
+ <i class="fas fa-search"></i>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ <div class="flex items-center">
332
+ <label for="filter" class="mr-2 text-sm text-gray-600">تصفية حسب:</label>
333
+ <select id="filter" class="border rounded-md px-3 py-1 text-sm">
334
+ <option>الكل</option>
335
+ <option>مدفوعة</option>
336
+ <option>قيد الانتظار</option>
337
+ <option>ملغاة</option>
338
+ </select>
339
+ </div>
340
+ </div>
341
+
342
+ <div class="table-responsive">
343
+ <table class="min-w-full divide-y divide-gray-200">
344
+ <thead class="bg-gray-50">
345
+ <tr>
346
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الفاتورة</th>
347
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العميل</th>
348
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
349
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المبلغ</th>
350
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
351
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
352
+ </tr>
353
+ </thead>
354
+ <tbody class="bg-white divide-y divide-gray-200" id="invoicesTableBody">
355
+ <!-- Invoices will be loaded here -->
356
+ </tbody>
357
+ </table>
358
+ </div>
359
+
360
+ <div class="mt-4 flex flex-col md:flex-row justify-between items-center">
361
+ <div class="text-sm text-gray-500 mb-2 md:mb-0">
362
+ عرض <span id="startItem">1</span> إلى <span id="endItem">10</span> من <span id="totalItems">25</span> فاتورة
363
+ </div>
364
+ <div class="flex">
365
+ <button class="px-3 py-1 border rounded-md text-sm disabled:opacity-50" id="prevPage" disabled>السابق</button>
366
+ <div class="mx-2 flex">
367
+ <button class="px-3 py-1 border rounded-md text-sm bg-blue-600 text-white">1</button>
368
+ <button class="px-3 py-1 border rounded-md text-sm ml-1">2</button>
369
+ <button class="px-3 py-1 border rounded-md text-sm ml-1">3</button>
370
+ </div>
371
+ <button class="px-3 py-1 border rounded-md text-sm" id="nextPage">التالي</button>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+
379
+ <!-- Customers Tab -->
380
+ <div id="customers" class="tab-content hidden">
381
+ <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
382
+ <div class="bg-white shadow rounded-lg mb-6">
383
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200 flex justify-between items-center">
384
+ <h3 class="text-lg leading-6 font-medium text-gray-900">إدارة العملاء</h3>
385
+ <button id="addCustomerBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
386
+ <i class="fas fa-plus mr-1"></i> إضافة عميل جديد
387
+ </button>
388
+ </div>
389
+ <div class="px-4 py-5 sm:p-6">
390
+ <div class="mb-4 flex flex-col md:flex-row md:items-center md:justify-between">
391
+ <div class="mb-2 md:mb-0">
392
+ <div class="relative">
393
+ <input type="text" placeholder="بحث..." class="pl-10 pr-4 py-2 border rounded-md w-full md:w-64">
394
+ <div class="absolute left-3 top-3 text-gray-400">
395
+ <i class="fas fa-search"></i>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ <div class="flex items-center">
400
+ <label for="customerFilter" class="mr-2 text-sm text-gray-600">تصفية حسب:</label>
401
+ <select id="customerFilter" class="border rounded-md px-3 py-1 text-sm">
402
+ <option>الكل</option>
403
+ <option>نشط</option>
404
+ <option>غير نشط</option>
405
+ </select>
406
+ </div>
407
+ </div>
408
+
409
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="customersGrid">
410
+ <!-- Customers will be loaded here -->
411
+ </div>
412
+
413
+ <div class="mt-4 flex flex-col md:flex-row justify-between items-center">
414
+ <div class="text-sm text-gray-500 mb-2 md:mb-0">
415
+ عرض <span id="customerStartItem">1</span> إلى <span id="customerEndItem">6</span> من <span id="customerTotalItems">15</span> عميل
416
+ </div>
417
+ <div class="flex">
418
+ <button class="px-3 py-1 border rounded-md text-sm disabled:opacity-50" id="customerPrevPage" disabled>السابق</button>
419
+ <div class="mx-2 flex">
420
+ <button class="px-3 py-1 border rounded-md text-sm bg-blue-600 text-white">1</button>
421
+ <button class="px-3 py-1 border rounded-md text-sm ml-1">2</button>
422
+ <button class="px-3 py-1 border rounded-md text-sm ml-1">3</button>
423
+ </div>
424
+ <button class="px-3 py-1 border rounded-md text-sm" id="customerNextPage">التالي</button>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <!-- Suppliers Tab -->
433
+ <div id="suppliers" class="tab-content hidden">
434
+ <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
435
+ <div class="bg-white shadow rounded-lg mb-6">
436
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200 flex justify-between items-center">
437
+ <h3 class="text-lg leading-6 font-medium text-gray-900">إدارة الموردين</h3>
438
+ <button id="addSupplierBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
439
+ <i class="fas fa-plus mr-1"></i> إضافة مورد جديد
440
+ </button>
441
+ </div>
442
+ <div class="px-4 py-5 sm:p-6">
443
+ <div class="mb-4 flex flex-col md:flex-row md:items-center md:justify-between">
444
+ <div class="mb-2 md:mb-0">
445
+ <div class="relative">
446
+ <input type="text" placeholder="بحث..." class="pl-10 pr-4 py-2 border rounded-md w-full md:w-64">
447
+ <div class="absolute left-3 top-3 text-gray-400">
448
+ <i class="fas fa-search"></i>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="table-responsive">
455
+ <table class="min-w-full divide-y divide-gray-200">
456
+ <thead class="bg-gray-50">
457
+ <tr>
458
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم المورد</th>
459
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">البريد الإلكتروني</th>
460
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الهاتف</th>
461
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المنتجات</th>
462
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
463
+ </tr>
464
+ </thead>
465
+ <tbody class="bg-white divide-y divide-gray-200" id="suppliersTableBody">
466
+ <!-- Suppliers will be loaded here -->
467
+ </tbody>
468
+ </table>
469
+ </div>
470
+
471
+ <div class="mt-4 flex flex-col md:flex-row justify-between items-center">
472
+ <div class="text-sm text-gray-500 mb-2 md:mb-0">
473
+ عرض <span id="supplierStartItem">1</span> إلى <span id="supplierEndItem">10</span> من <span id="supplierTotalItems">12</span> مورد
474
+ </div>
475
+ <div class="flex">
476
+ <button class="px-3 py-1 border rounded-md text-sm disabled:opacity-50" id="supplierPrevPage" disabled>السابق</button>
477
+ <div class="mx-2 flex">
478
+ <button class="px-3 py-1 border rounded-md text-sm bg-blue-600 text-white">1</button>
479
+ <button class="px-3 py-1 border rounded-md text-sm ml-1">2</button>
480
+ </div>
481
+ <button class="px-3 py-1 border rounded-md text-sm" id="supplierNextPage">التالي</button>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+
489
+ <!-- Inventory Tab -->
490
+ <div id="inventory" class="tab-content hidden">
491
+ <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
492
+ <div class="bg-white shadow rounded-lg mb-6">
493
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200 flex justify-between items-center">
494
+ <h3 class="text-lg leading-6 font-medium text-gray-900">إدارة المخزون</h3>
495
+ <div>
496
+ <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">
497
+ <i class="fas fa-plus mr-1"></i> إضافة منتج
498
+ </button>
499
+ <button id="importProductsBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium">
500
+ <i class="fas fa-file-import mr-1"></i> استيراد
501
+ </button>
502
+ </div>
503
+ </div>
504
+ <div class="px-4 py-5 sm:p-6">
505
+ <div class="mb-4 flex flex-col md:flex-row md:items-center md:justify-between">
506
+ <div class="mb-2 md:mb-0">
507
+ <div class="relative">
508
+ <input type="text" placeholder="بحث..." class="pl-10 pr-4 py-2 border rounded-md w-full md:w-64">
509
+ <div class="absolute left-3 top-3 text-gray-400">
510
+ <i class="fas fa-search"></i>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ <div class="flex items-center">
515
+ <label for="categoryFilter" class="mr-2 text-sm text-gray-600">تصفية حسب:</label>
516
+ <select id="categoryFilter" class="border rounded-md px-3 py-1 text-sm">
517
+ <option>الكل</option>
518
+ <option>إلكترونيات</option>
519
+ <option>أثاث</option>
520
+ <option>مواد غذائية</option>
521
+ <option>أدوات مكتبية</option>
522
+ </select>
523
+ </div>
524
+ </div>
525
+
526
+ <div class="table-responsive">
527
+ <table class="min-w-full divide-y divide-gray-200">
528
+ <thead class="bg-gray-50">
529
+ <tr>
530
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الصورة</th>
531
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المنتج</th>
532
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الكمية</th>
533
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">سعر الشراء</th>
534
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">سعر البيع</th>
535
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
536
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
537
+ </tr>
538
+ </thead>
539
+ <tbody class="bg-white divide-y divide-gray-200" id="inventoryTableBody">
540
+ <!-- Inventory items will be loaded here -->
541
+ </tbody>
542
+ </table>
543
+ </div>
544
+
545
+ <div class="mt-4 flex flex-col md:flex-row justify-between items-center">
546
+ <div class="text-sm text-gray-500 mb-2 md:mb-0">
547
+ عرض <span id="inventoryStartItem">1</span> إلى <span id="inventoryEndItem">10</span> من <span id="inventoryTotalItems">56</span> منتج
548
+ </div>
549
+ <div class="flex">
550
+ <button class="px-3 py-1 border rounded-md text-sm disabled:opacity-50" id="inventoryPrevPage" disabled>السابق</button>
551
+ <div class="mx-2 flex">
552
+ <button class="px-3 py-1 border rounded-md text-sm bg-blue-600 text-white">1</button>
553
+ <button class="px-3 py-1 border rounded-md text-sm ml-1">2</button>
554
+ <button class="px-3 py-1 border rounded-md text-sm ml-1">3</button>
555
+ <button class="px-3 py-1 border rounded-md text-sm ml-1">4</button>
556
+ <button class="px-3 py-1 border rounded-md text-sm ml-1">5</button>
557
+ <button class="px-3 py-1 border rounded-md text-sm ml-1">6</button>
558
+ </div>
559
+ <button class="px-3 py-1 border rounded-md text-sm" id="inventoryNextPage">التالي</button>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ </div>
566
+
567
+ <!-- Reports Tab -->
568
+ <div id="reports" class="tab-content hidden">
569
+ <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
570
+ <div class="bg-white shadow rounded-lg mb-6">
571
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
572
+ <h3 class="text-lg leading-6 font-medium text-gray-900">التقارير</h3>
573
+ </div>
574
+ <div class="px-4 py-5 sm:p-6">
575
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
576
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
577
+ <h4 class="text-lg font-medium mb-4">تقرير المبيعات</h4>
578
+ <div class="mb-4">
579
+ <label class="block text-sm font-medium text-gray-700 mb-1">الفترة الزمنية</label>
580
+ <select class="border rounded-md px-3 py-2 w-full">
581
+ <option>هذا الشهر</option>
582
+ <option>الشهر الماضي</option>
583
+ <option>هذا العام</option>
584
+ <option>العام الماضي</option>
585
+ <option>مخصص</option>
586
+ </select>
587
+ </div>
588
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium w-full">
589
+ <i class="fas fa-download mr-1"></i> إنشاء التقرير
590
+ </button>
591
+ </div>
592
+
593
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
594
+ <h4 class="text-lg font-medium mb-4">تقرير المخزون</h4>
595
+ <div class="mb-4">
596
+ <label class="block text-sm font-medium text-gray-700 mb-1">نوع التقرير</label>
597
+ <select class="border rounded-md px-3 py-2 w-full">
598
+ <option>منتوش منتهية</option>
599
+ <option>منتوش قاربت على الانتهاء</option>
600
+ <option>حركة المخزون</option>
601
+ <option>تقرير كامل</option>
602
+ </select>
603
+ </div>
604
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium w-full">
605
+ <i class="fas fa-download mr-1"></i> إنشاء التقرير
606
+ </button>
607
+ </div>
608
+ </div>
609
+
610
+ <div class="bg-gray-50 p-4 rounded-lg">
611
+ <h4 class="text-lg font-medium mb-4">التقارير المحفوظة</h4>
612
+ <div class="table-responsive">
613
+ <table class="min-w-full divide-y divide-gray-200">
614
+ <thead class="bg-gray-100">
615
+ <tr>
616
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم التقرير</th>
617
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">النوع</th>
618
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاريخ الإنشاء</th>
619
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
620
+ </tr>
621
+ </thead>
622
+ <tbody class="bg-white divide-y divide-gray-200">
623
+ <tr>
624
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">تقرير المبيعات - يونيو 2023</td>
625
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">مبيعات</td>
626
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-30</td>
627
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
628
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-download"></i></button>
629
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
630
+ </td>
631
+ </tr>
632
+ <tr>
633
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">تقرير المخزون - مايو 2023</td>
634
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">مخزون</td>
635
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-31</td>
636
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
637
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-download"></i></button>
638
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
639
+ </td>
640
+ </tr>
641
+ </tbody>
642
+ </table>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+
650
+ <!-- Settings Tab -->
651
+ <div id="settings" class="tab-content hidden">
652
+ <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
653
+ <div class="bg-white shadow rounded-lg mb-6">
654
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
655
+ <h3 class="text-lg leading-6 font-medium text-gray-900">إعدادات النظام</h3>
656
+ </div>
657
+ <div class="px-4 py-5 sm:p-6">
658
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
659
+ <div class="md:col-span-1">
660
+ <div class="bg-gray-50 p-4 rounded-lg">
661
+ <h4 class="text-lg font-medium mb-4">الإعدادات</h4>
662
+ <ul class="space-y-2">
663
+ <li><a href="#" class="text-blue-600 font-medium settings-tab active" data-tab="general-settings">عام</a></li>
664
+ <li><a href="#" class="text-gray-600 settings-tab" data-tab="company-settings">بيانات الشركة</a></li>
665
+ <li><a href="#" class="text-gray-600 settings-tab" data-tab="invoice-settings">إعدادات الفواتير</a></li>
666
+ <li><a href="#" class="text-gray-600 settings-tab" data-tab="tax-settings">الضرائب</a></li>
667
+ <li><a href="#" class="text-gray-600 settings-tab" data-tab="email-settings">إعدادات البريد</a></li>
668
+ <li><a href="#" class="text-gray-600 settings-tab" data-tab="backup-settings">النسخ الاحتياطي</a></li>
669
+ </ul>
670
+ </div>
671
+ </div>
672
+
673
+ <div class="md:col-span-2">
674
+ <!-- General Settings -->
675
+ <div id="general-settings" class="settings-tab-content active">
676
+ <h4 class="text-lg font-medium mb-4">الإعدادات العامة</h4>
677
+ <form>
678
+ <div class="mb-4">
679
+ <label class="block text-sm font-medium text-gray-700 mb-1">اسم النظام</label>
680
+ <input type="text" class="border rounded-md px-3 py-2 w-full" value="نظام ERP المحاسبي">
681
+ </div>
682
+ <div class="mb-4">
683
+ <label class="block text-sm font-medium text-gray-700 mb-1">العملة</label>
684
+ <select class="border rounded-md px-3 py-2 w-full">
685
+ <option>ريال سعودي (ر.س)</option>
686
+ <option>دولار أمريكي ($)</option>
687
+ <option>يورو (€)</option>
688
+ </select>
689
+ </div>
690
+ <div class="mb-4">
691
+ <label class="block text-sm font-medium text-gray-700 mb-1">اللغة</label>
692
+ <select class="border rounded-md px-3 py-2 w-full">
693
+ <option>العربية</option>
694
+ <option>الإنجليزية</option>
695
+ </select>
696
+ </div>
697
+ <div class="mb-4">
698
+ <label class="block text-sm font-medium text-gray-700 mb-1">التوقيت</label>
699
+ <select class="border rounded-md px-3 py-2 w-full">
700
+ <option>Asia/Riyadh (توقيت السعودية)</option>
701
+ <option>UTC (توقيت عالمي)</option>
702
+ </select>
703
+ </div>
704
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">حفظ التغييرات</button>
705
+ </form>
706
+ </div>
707
+
708
+ <!-- Company Settings -->
709
+ <div id="company-settings" class="settings-tab-content hidden">
710
+ <h4 class="text-lg font-medium mb-4">بيانات الشركة</h4>
711
+ <form>
712
+ <div class="mb-4">
713
+ <label class="block text-sm font-medium text-gray-700 mb-1">اسم الشركة</label>
714
+ <input type="text" class="border rounded-md px-3 py-2 w-full" value="شركة التقنية المحدودة">
715
+ </div>
716
+ <div class="mb-4">
717
+ <label class="block text-sm font-medium text-gray-700 mb-1">الشعار</label>
718
+ <div class="flex items-center">
719
+ <div class="w-16 h-16 bg-gray-200 rounded-md flex items-center justify-center overflow-hidden">
720
+ <i class="fas fa-building text-gray-400 text-2xl"></i>
721
+ </div>
722
+ <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>
723
+ <button class="text-red-600 hover:text-red-800 text-sm font-medium">إزالة</button>
724
+ </div>
725
+ </div>
726
+ <div class="mb-4">
727
+ <label class="block text-sm font-medium text-gray-700 mb-1">العنوان</label>
728
+ <textarea class="border rounded-md px-3 py-2 w-full" rows="3">الرياض، المملكة العربية السعودية</textarea>
729
+ </div>
730
+ <div class="mb-4">
731
+ <label class="block text-sm font-medium text-gray-700 mb-1">رقم السجل التجاري</label>
732
+ <input type="text" class="border rounded-md px-3 py-2 w-full" value="1234567890">
733
+ </div>
734
+ <div class="mb-4">
735
+ <label class="block text-sm font-medium text-gray-700 mb-1">رقم الهاتف</label>
736
+ <input type="text" class="border rounded-md px-3 py-2 w-full" value="+966112345678">
737
+ </div>
738
+ <div class="mb-4">
739
+ <label class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</label>
740
+ <input type="email" class="border rounded-md px-3 py-2 w-full" value="info@techcompany.com">
741
+ </div>
742
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">حفظ التغييرات</button>
743
+ </form>
744
+ </div>
745
+
746
+ <!-- Invoice Settings -->
747
+ <div id="invoice-settings" class="settings-tab-content hidden">
748
+ <h4 class="text-lg font-medium mb-4">��عدادات الفواتير</h4>
749
+ <form>
750
+ <div class="mb-4">
751
+ <label class="block text-sm font-medium text-gray-700 mb-1">بادئة رقم الفاتورة</label>
752
+ <input type="text" class="border rounded-md px-3 py-2 w-full" value="INV-">
753
+ </div>
754
+ <div class="mb-4">
755
+ <label class="block text-sm font-medium text-gray-700 mb-1">تنسيق رقم الفاتورة</label>
756
+ <select class="border rounded-md px-3 py-2 w-full">
757
+ <option>INV-YYYY-NNNN (INV-2023-0001)</option>
758
+ <option>INV-NNNN (INV-0001)</option>
759
+ <option>NNNN (0001)</option>
760
+ </select>
761
+ </div>
762
+ <div class="mb-4">
763
+ <label class="block text-sm font-medium text-gray-700 mb-1">شروط الدفع الافتراضية</label>
764
+ <textarea class="border rounded-md px-3 py-2 w-full" rows="3">يجب سداد الفاتورة خلال 30 يوم من تاريخ الاصدار.</textarea>
765
+ </div>
766
+ <div class="mb-4">
767
+ <label class="block text-sm font-medium text-gray-700 mb-1">ملاحظات الفاتورة الافتراضية</label>
768
+ <textarea class="border rounded-md px-3 py-2 w-full" rows="3">شكرا لتعاملكم معنا.</textarea>
769
+ </div>
770
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">حفظ التغييرات</button>
771
+ </form>
772
+ </div>
773
+ </div>
774
+ </div>
775
+ </div>
776
+ </div>
777
+ </div>
778
+ </div>
779
+
780
+ <!-- Users Tab -->
781
+ <div id="users" class="tab-content hidden">
782
+ <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
783
+ <div class="bg-white shadow rounded-lg mb-6">
784
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200 flex justify-between items-center">
785
+ <h3 class="text-lg leading-6 font-medium text-gray-900">إدارة المستخدمين</h3>
786
+ <button id="addUserBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
787
+ <i class="fas fa-plus mr-1"></i> إضافة مستخدم
788
+ </button>
789
+ </div>
790
+ <div class="px-4 py-5 sm:p-6">
791
+ <div class="mb-4">
792
+ <div class="relative">
793
+ <input type="text" placeholder="بحث..." class="pl-10 pr-4 py-2 border rounded-md w-full md:w-64">
794
+ <div class="absolute left-3 top-3 text-gray-400">
795
+ <i class="fas fa-search"></i>
796
+ </div>
797
+ </div>
798
+ </div>
799
+
800
+ <div class="table-responsive">
801
+ <table class="min-w-full divide-y divide-gray-200">
802
+ <thead class="bg-gray-50">
803
+ <tr>
804
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الصورة</th>
805
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الاسم</th>
806
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">البريد الإلكتروني</th>
807
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الدور</th>
808
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
809
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
810
+ </tr>
811
+ </thead>
812
+ <tbody class="bg-white divide-y divide-gray-200">
813
+ <tr>
814
+ <td class="px-6 py-4 whitespace-nowrap">
815
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
816
+ <i class="fas fa-user text-blue-600"></i>
817
+ </div>
818
+ </td>
819
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">أحمد محمد</td>
820
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">ahmed@example.com</td>
821
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">مدير النظام</td>
822
+ <td class="px-6 py-4 whitespace-nowrap">
823
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">نشط</span>
824
+ </td>
825
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
826
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button>
827
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
828
+ </td>
829
+ </tr>
830
+ <tr>
831
+ <td class="px-6 py-4 whitespace-nowrap">
832
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
833
+ <i class="fas fa-user text-purple-600"></i>
834
+ </div>
835
+ </td>
836
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">سارة عبدالله</td>
837
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">sara@example.com</td>
838
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">محاسب</td>
839
+ <td class="px-6 py-4 whitespace-nowrap">
840
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">نشط</span>
841
+ </td>
842
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
843
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button>
844
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
845
+ </td>
846
+ </tr>
847
+ <tr>
848
+ <td class="px-6 py-4 whitespace-nowrap">
849
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center">
850
+ <i class="fas fa-user text-yellow-600"></i>
851
+ </div>
852
+ </td>
853
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">خالد سعيد</td>
854
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">khaled@example.com</td>
855
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">موظف مبيعات</td>
856
+ <td class="px-6 py-4 whitespace-nowrap">
857
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">نشط</span>
858
+ </td>
859
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
860
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button>
861
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
862
+ </td>
863
+ </tr>
864
+ </tbody>
865
+ </table>
866
+ </div>
867
+
868
+ <div class="mt-4 flex flex-col md:flex-row justify-between items-center">
869
+ <div class="text-sm text-gray-500 mb-2 md:mb-0">
870
+ عرض <span id="usersStartItem">1</span> إلى <span id="usersEndItem">3</span> من <span id="usersTotalItems">3</span> مستخدم
871
+ </div>
872
+ <div class="flex">
873
+ <button class="px-3 py-1 border rounded-md text-sm disabled:opacity-50" id="usersPrevPage" disabled>السابق</button>
874
+ <div class="mx-2 flex">
875
+ <button class="px-3 py-1 border rounded-md text-sm bg-blue-600 text-white">1</button>
876
+ </div>
877
+ <button class="px-3 py-1 border rounded-md text-sm disabled:opacity-50" id="usersNextPage" disabled>التالي</button>
878
+ </div>
879
+ </div>
880
+ </div>
881
+ </div>
882
+ </div>
883
+ </div>
884
+ </main>
885
+ </div>
886
+
887
+ <!-- Modals -->
888
+ <!-- Add Invoice Modal -->
889
+ <div id="addInvoiceModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
890
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
891
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
892
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
893
+ </div>
894
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
895
+ <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">
896
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
897
+ <div class="sm:flex sm:items-start">
898
+ <div class="mt-3 text-center sm:mt-0 sm:mr-4 sm:text-right w-full">
899
+ <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4" id="modalTitle">إضافة فاتورة جديدة</h3>
900
+ <div class="mt-2">
901
+ <form id="invoiceForm">
902
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
903
+ <div>
904
+ <label class="block text-sm font-medium text-gray-700 mb-1">العميل</label>
905
+ <select class="border rounded-md px-3 py-2 w-full">
906
+ <option>اختر عميل...</option>
907
+ <option>شركة التقنية المحدودة</option>
908
+ <option>شركة البناء الحديث</option>
909
+ <option>مؤسسة النور للتجارة</option>
910
+ </select>
911
+ </div>
912
+ <div>
913
+ <label class="block text-sm font-medium text-gray-700 mb-1">تاريخ الفاتورة</label>
914
+ <input type="date" class="border rounded-md px-3 py-2 w-full">
915
+ </div>
916
+ <div>
917
+ <label class="block text-sm font-medium text-gray-700 mb-1">تاريخ الاستحقاق</label>
918
+ <input type="date" class="border rounded-md px-3 py-2 w-full">
919
+ </div>
920
+ <div>
921
+ <label class="block text-sm font-medium text-gray-700 mb-1">حالة الفاتورة</label>
922
+ <select class="border rounded-md px-3 py-2 w-full">
923
+ <option>قيد الانتظار</option>
924
+ <option>مدفوعة</option>
925
+ <option>ملغاة</option>
926
+ </select>
927
+ </div>
928
+ </div>
929
+
930
+ <div class="mb-4">
931
+ <label class="block text-sm font-medium text-gray-700 mb-1">عناصر الفاتورة</label>
932
+ <div class="border rounded-md">
933
+ <table class="min-w-full divide-y divide-gray-200">
934
+ <thead class="bg-gray-50">
935
+ <tr>
936
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المنتج</th>
937
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الكمية</th>
938
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">السعر</th>
939
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المجموع</th>
940
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
941
+ </tr>
942
+ </thead>
943
+ <tbody class="bg-white divide-y divide-gray-200" id="invoiceItems">
944
+ <tr>
945
+ <td class="px-6 py-4 whitespace-nowrap">
946
+ <select class="border rounded-md px-2 py-1 w-full">
947
+ <option>اختر منتج...</option>
948
+ <option>حاسوب محمول</option>
949
+ <option>هاتف ذكي</option>
950
+ <option>طابعة</option>
951
+ </select>
952
+ </td>
953
+ <td class="px-6 py-4 whitespace-nowrap">
954
+ <input type="number" value="1" min="1" class="border rounded-md px-2 py-1 w-20">
955
+ </td>
956
+ <td class="px-6 py-4 whitespace-nowrap">
957
+ <input type="number" value="0" min="0" step="0.01" class="border rounded-md px-2 py-1 w-24">
958
+ </td>
959
+ <td class="px-6 py-4 whitespace-nowrap">0 ر.س</td>
960
+ <td class="px-6 py-4 whitespace-nowrap">
961
+ <button type="button" class="text-red-600 hover:text-red-900 remove-item"><i class="fas fa-trash"></i></button>
962
+ </td>
963
+ </tr>
964
+ </tbody>
965
+ </table>
966
+ <div class="p-3">
967
+ <button type="button" id="addItemBtn" class="text-blue-600 hover:text-blue-900 text-sm font-medium">
968
+ <i class="fas fa-plus mr-1"></i> إضافة عنصر
969
+ </button>
970
+ </div>
971
+ </div>
972
+ </div>
973
+
974
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
975
+ <div>
976
+ <label class="block text-sm font-medium text-gray-700 mb-1">الخصم</label>
977
+ <div class="flex">
978
+ <input type="number" value="0" min="0" max="100" class="border rounded-r-md px-3 py-2 w-20">
979
+ <span class="flex items-center px-3 bg-gray-100 border border-r-0 rounded-l-md">%</span>
980
+ </div>
981
+ </div>
982
+ <div>
983
+ <label class="block text-sm font-medium text-gray-700 mb-1">الضريبة</label>
984
+ <div class="flex">
985
+ <input type="number" value="15" min="0" max="100" class="border rounded-r-md px-3 py-2 w-20">
986
+ <span class="flex items-center px-3 bg-gray-100 border border-r-0 rounded-l-md">%</span>
987
+ </div>
988
+ </div>
989
+ </div>
990
+
991
+ <div class="bg-gray-50 p-4 rounded-md mb-4">
992
+ <div class="flex justify-between mb-2">
993
+ <span class="font-medium">المجموع الفرعي:</span>
994
+ <span>0 ر.س</span>
995
+ </div>
996
+ <div class="flex justify-between mb-2">
997
+ <span class="font-medium">الخصم:</span>
998
+ <span>0 ر.س (0%)</span>
999
+ </div>
1000
+ <div class="flex justify-between mb-2">
1001
+ <span class="font-medium">الضريبة:</span>
1002
+ <span>0 ر.س (15%)</span>
1003
+ </div>
1004
+ <div class="flex justify-between font-bold text-lg border-t border-gray-200 pt-2">
1005
+ <span>الإجمالي:</span>
1006
+ <span>0 ر.س</span>
1007
+ </div>
1008
+ </div>
1009
+
1010
+ <div class="mb-4">
1011
+ <label class="block text-sm font-medium text-gray-700 mb-1">ملاحظات</label>
1012
+ <textarea class="border rounded-md px-3 py-2 w-full" rows="3"></textarea>
1013
+ </div>
1014
+
1015
+ <div class="mb-4">
1016
+ <label class="block text-sm font-medium text-gray-700 mb-1">شروط الدفع</label>
1017
+ <textarea class="border rounded-md px-3 py-2 w-full" rows="2"></textarea>
1018
+ </div>
1019
+ </form>
1020
+ </div>
1021
+ </div>
1022
+ </div>
1023
+ </div>
1024
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
1025
+ <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">
1026
+ حفظ الفاتورة
1027
+ </button>
1028
+ <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">
1029
+ إلغاء
1030
+ </button>
1031
+ </div>
1032
+ </div>
1033
+ </div>
1034
+ </div>
1035
+
1036
+ <!-- Add Customer Modal -->
1037
+ <div id="addCustomerModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
1038
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
1039
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
1040
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
1041
+ </div>
1042
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
1043
+ <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">
1044
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
1045
+ <div class="sm:flex sm:items-start">
1046
+ <div class="mt-3 text-center sm:mt-0 sm:mr-4 sm:text-right w-full">
1047
+ <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">إضافة عميل جديد</h3>
1048
+ <div class="mt-2">
1049
+ <form id="customerForm">
1050
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
1051
+ <div>
1052
+ <label class="block text-sm font-medium text-gray-700 mb-1">الاسم</label>
1053
+ <input type="text" class="border rounded-md px-3 py-2 w-full">
1054
+ </div>
1055
+ <div>
1056
+ <label class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</label>
1057
+ <input type="email" class="border rounded-md px-3 py-2 w-full">
1058
+ </div>
1059
+ <div>
1060
+ <label class="block text-sm font-medium text-gray-700 mb-1">الهاتف</label>
1061
+ <input type="tel" class="border rounded-md px-3 py-2 w-full">
1062
+ </div>
1063
+ <div>
1064
+ <label class="block text-sm font-medium text-gray-700 mb-1">الشركة</label>
1065
+ <input type="text" class="border rounded-md px-3 py-2 w-full">
1066
+ </div>
1067
+ </div>
1068
+
1069
+ <div class="mb-4">
1070
+ <label class="block text-sm font-medium text-gray-700 mb-1">العنوان</label>
1071
+ <textarea class="border rounded-md px-3 py-2 w-full" rows="2"></textarea>
1072
+ </div>
1073
+
1074
+ <div class="mb-4">
1075
+ <label class="block text-sm font-medium text-gray-700 mb-1">ملاحظات</label>
1076
+ <textarea class="border rounded-md px-3 py-2 w-full" rows="2"></textarea>
1077
+ </div>
1078
+
1079
+ <div class="mb-4">
1080
+ <label class="block text-sm font-medium text-gray-700 mb-1">الحالة</label>
1081
+ <select class="border rounded-md px-3 py-2 w-full">
1082
+ <option>نشط</option>
1083
+ <option>غير نشط</option>
1084
+ </select>
1085
+ </div>
1086
+ </form>
1087
+ </div>
1088
+ </div>
1089
+ </div>
1090
+ </div>
1091
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
1092
+ <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">
1093
+ حفظ العميل
1094
+ </button>
1095
+ <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">
1096
+ إلغاء
1097
+ </button>
1098
+ </div>
1099
+ </div>
1100
+ </div>
1101
+ </div>
1102
+
1103
+ <!-- Add Product Modal -->
1104
+ <div id="addProductModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
1105
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
1106
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
1107
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
1108
+ </div>
1109
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
1110
+ <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">
1111
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
1112
+ <div class="sm:flex sm:items-start">
1113
+ <div class="mt-3 text-center sm:mt-0 sm:mr-4 sm:text-right
1114
+ <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>
1115
+ </html>