0% found this document useful (0 votes)

1 views

!Doctype HTML

The document is an HTML template for a supplier management system interface, featuring a responsive design with a sidebar navigation and various UI components. It includes styles for dark mode, toast notifications, and print formatting, along with JavaScript libraries for enhanced functionality. The layout is structured for Arabic language support with right-to-left text direction.

Uploaded by

OMAR ASSRORI

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

1 views

!Doctype HTML

Uploaded by

OMAR ASSRORI

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

You are on page 1/ 65

<!

DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>‫<إدارة الموردين‬/title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/[email protected]/papaparse.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#40B3EF',
secondary: '#0047AB',
light: '#F0F8FF',
dark: '#002147'
},
fontSize: {
'base': '16px'
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?
family=Tajawal:wght@400;500;700&display=swap');

* {
font-family: 'Tajawal', sans-serif;
}

/* ‫* تنظيم وتحسين أسلوب شجرة القائمة‬/

.tree-view .tree-content {
display: none;
transition: all 0.3s ease;
}

.tree-view.active .tree-content {
display: block;
}

.tree-view .tree-toggle::before {
content: "+";
margin-left: 5px;
font-weight: bold;
transition: transform 0.3s ease;
display: inline-block;
width: 16px;
text-align: center;
}

.tree-view.active .tree-toggle::before {
content: "-";
}

/* ‫* تحسين معالجة الوضع المظلم‬/

.dark {
color-scheme: dark;
}

.dark .bg-white {
background-color: #181818;
color: white;
}

.dark .border-gray-200 {
border-color: #333;
}

.dark .text-gray-700 {
color: #ddd;
}

.dark .bg-gray-100 {
background-color: #222;
}

.dark .bg-light {
background-color: #222;
}

/* ‫* تحسين أسلوب الطباعة‬/

@media print {
.no-print {
display: none !important;
}

.print-only {
display: block !important;
}

.hide-in-print-data-only.print-data-only {
display: none !important;
}

@page {
size: A4;
margin: 15mm 10mm;
}

body {
font-size: 12pt;
background-color: white !important;
color: black !important;
}

/* ‫* تثبيت الترويسة في أعلى كل صفحة عند الطباعة‬/

.print-header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
padding: 10px 0;
background-color: white;
border-bottom: 1px solid #ddd;
z-index: 100;
}

/* ‫* إضافة مسافة بين الترويسة والمحتوى‬/

.print-content {
margin-top: 130px;
}

table {
page-break-inside: auto;
}

tr {
page-break-inside: avoid;
page-break-after: auto;
}
}

/* ‫ تحسين معالجة‬RTL */
.rtl-grid {
direction: rtl;
text-align: right;
}

input, select, textarea {

text-align: right;
}

/* ‫* تحسين الجداول‬/
.table-container {
overflow-x: auto;
position: relative;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 8px;
border: 1px solid #ddd;
text-align: right;
}

th {
background-color: #40B3EF;
color: white;
font-weight: bold;
position: sticky;
top: 0;
z-index: 10;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

.dark tr:nth-child(even) {
background-color: #2a2a2a;
}

.dark th {
background-color: #205375;
}

.dark td, .dark th {

border-color: #444;
}

/* ‫* تحسين أسلوب فروق المبالغ‬/

.diff-positive {
color: #059669;
font-weight: bold;
}

.dark .diff-positive {
color: #10b981;
}

.diff-negative {
color: #dc2626;
font-weight: bold;
}

.dark .diff-negative {
color: #ef4444;
}

/* ‫* تحسين حجم الشعار‬/

.company-logo {
max-width: 100px;
max-height: 100px;
object-fit: contain;
}

.print-logo {
max-width: 80px;
max-height: 80px;
}

/* ‫* إضافة تنسيقات جديدة لمربعات الحوار‬/

.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
opacity: 0;
transition: opacity 0.3s ease;
}

.modal-overlay.active {
opacity: 1;
}

.modal-content {
background-color: white;
border-radius: 8px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
transform: scale(0.9);
transition: transform 0.3s ease;
}

.dark .modal-content {
background-color: #1f2937;
color: #f3f4f6;
}

.modal-overlay.active .modal-content {
transform: scale(1);
}

/* ‫* أنيميشن التحميل‬/
.loading-spinner {
display: inline-block;
width: 24px;
height: 24px;
border: 3px solid rgba(64, 179, 239, 0.3);
border-radius: 50%;
border-top-color: #40B3EF;
animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

/* ‫* تحسينات النص‬/
.truncate-text {
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* ‫ تحسينات الوصول‬accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}

/* ‫* تصميم التوست‬/
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
max-width: 300px;
}

.toast {
padding: 12px 16px;
border-radius: 6px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
transform: translateX(120%);
transition: transform 0.3s ease;
display: flex;
align-items: center;
}

.toast.success {
background-color: #059669;
color: white;
}

.toast.error {
background-color: #dc2626;
color: white;
}

.toast.info {
background-color: #40B3EF;
color: white;
}

.toast.visible {
transform: translateX(0);
}

.toast .close-toast {
margin-right: 8px;
cursor: pointer;
opacity: 0.8;
}

.toast .close-toast:hover {
opacity: 1;
}

/* ‫* زر العودة للأعلى‬/
.back-to-top {
position: fixed;
bottom: 20px;
left: 20px;
width: 40px;
height: 40px;
background-color: #40B3EF;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 30;
}

.back-to-top.visible {
opacity: 1;
visibility: visible;
}

/* ‫* تنسيقات حالة المطابقة‬/

.matching-status-complete {
background-color: #dcfce7;
color: #166534;
padding: 2px 6px;
border-radius: 4px;
font-weight: bold;
}

.dark .matching-status-complete {
background-color: #065f46;
color: #d1fae5;
}

.matching-status-pending {
background-color: #fff7cd;
color: #854d0e;
padding: 2px 6px;
border-radius: 4px;
font-weight: bold;
}

.dark .matching-status-pending {
background-color: #854d0e;
color: #fef9c3;
}

.matching-status-missing {
background-color: #fee2e2;
color: #b91c1c;
padding: 2px 6px;
border-radius: 4px;
font-weight: bold;
}

.dark .matching-status-missing {
background-color: #991b1b;
color: #fecaca;
}

/* ‫* تنسيقات أنواع العموالت الجديدة‬/

.commission-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.875rem;
font-weight: bold;
margin-right: 5px;
margin-bottom: 5px;
}

.commission-annual {
background-color: #C8E6C9;
color: #1B5E20;
}

.commission-special {
background-color: #FFECB3;
color: #FF6F00;
}

.commission-custom {
background-color: #E1BEE7;
color: #6A1B9A;
}

.commission-contract {
background-color: #BBDEFB;
color: #0D47A1;
}

.commission-scientific {
background-color: #F5F5F5;
color: #424242;
}

.dark .commission-annual {
background-color: #1B5E20;
color: #C8E6C9;
}

.dark .commission-special {
background-color: #FF6F00;
color: #FFECB3;
}

.dark .commission-custom {
background-color: #6A1B9A;
color: #E1BEE7;
}

.dark .commission-contract {
background-color: #0D47A1;
color: #BBDEFB;
}

.dark .commission-scientific {
background-color: #424242;
color: #F5F5F5;
}

/* ‫* تنسيقات إشعارات العموالت‬/

.notification-badge {
position: absolute;
top: -8px;
right: -8px;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background-color: #ef4444;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 50%;
}

.notification-card {
border-right: 4px solid;
margin-bottom: 10px;
transition: all 0.3s ease;
}

.notification-card.unread {
border-right-color: #ef4444;
background-color: rgba(239, 68, 68, 0.05);
}

.notification-card.read {
border-right-color: #6b7280;
background-color: rgba(107, 114, 128, 0.05);
}

/* ‫* تنسيقات المخزون‬/
.stock-status-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.875rem;
font-weight: bold;
}

.stock-low {
background-color: #FEE2E2;
color: #B91C1C;
}

.stock-medium {
background-color: #FEF3C7;
color: #D97706;
}

.stock-high {
background-color: #D1FAE5;
color: #047857;
}

.dark .stock-low {
background-color: #B91C1C;
color: #FEE2E2;
}

.dark .stock-medium {
background-color: #D97706;
color: #FEF3C7;
}

.dark .stock-high {
background-color: #047857;
color: #D1FAE5;
}
</style>
</head>
<body class="bg-light dark:bg-dark text-gray-800 dark:text-gray-100">
<div class="flex flex-col min-h-screen">

<button id="backToTop" class="back-to-top" aria-label="‫>"العودة إلى الأعلى‬
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
</button>

<div class="flex flex-col md:flex-row flex-1">

<nav class="w-full md:w-64 bg-white dark:bg-gray-900 p-4 border-r
border-gray-200 dark:border-gray-700 no-print">
<div class="mb-6">
<h2 class="text-lg font-bold text-secondary mb-2"> ‫القائمة‬
‫<الرئيسية‬/h2>

<div class="tree-container">

<div class="tree-view mb-2">
<div class="tree-toggle cursor-pointer font-bold text-
secondary hover:text-primary">
‫الإعدادات‬
</div>
<div class="tree-content pr-4 mt-2">
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="system-settings">‫<إعدادات النظام‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="import-export-settings">‫<إعدادات االستيراد والتصدير‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="regional-settings">‫<الإعدادات الإقليمية‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="company-info">‫<بيانات الشركة‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="document-types-settings">‫<إعدادات أنواع المستندات‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="backup-restore">‫<النسخ االحتياطي واالستعادة‬/div>
</div>
</div>

<div class="tree-view mb-2">
<div class="tree-toggle cursor-pointer font-bold text-
secondary hover:text-primary">
‫المدخالت‬
</div>
<div class="tree-content pr-4 mt-2">
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="supplier-data">‫<بيانات الموردين‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="account-statements">‫<كشوفات الحساب‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="commission-setup">‫<ترميز عموالت الموردين‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="supplier-inventory">‫<إدارة مخزون الموردين‬/div>
</div>
</div>

<div class="tree-view mb-2">
<div class="tree-toggle cursor-pointer font-bold text-
secondary hover:text-primary">
‫العمليات‬
</div>
<div class="tree-content pr-4 mt-2">
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="match-statements">‫<مطابقة كشف الحساب‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="unposted-transactions">‫<العمليات الغير مرحلة‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="manage-commissions">‫<إدارة عموالت الموردين‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="commission-notifications">
<div class="relative inline-block">
<span>‫<إشعارات العموالت‬/span>
<span id="notification-badge"
class="notification-badge hidden">0</span>
</div>
</div>
</div>
</div>

<div class="tree-view mb-2">
<div class="tree-toggle cursor-pointer font-bold text-
secondary hover:text-primary">
‫التقارير‬
</div>
<div class="tree-content pr-4 mt-2">
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="suppliers-matching-status">‫<حالة مطابقة الموردين‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="matching-report">‫<تقرير المطابقة‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="commission-report">‫<تقرير العموالت‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="financial-metrics">‫<تقرير المؤشرات المالية‬/div>
<div class="cursor-pointer py-1 hover:text-primary"
data-screen="inventory-report">‫<تقرير المخزون‬/div>
</div>
</div>
</div>
</div>
</nav>

<main class="flex-1 p-6 bg-white dark:bg-gray-800 overflow-auto">
<div id="content-area" class="min-h-full">

<div id="welcome-screen" class="text-center py-10">
<h2 class="text-3xl font-bold text-secondary mb-4">‫مرحًبا بك‬
‫<في نظام إدارة الموردين‬/h2>
<p class="text-lg mb-6">
‫الرجاء اختيار إحدى الوظائف من القائمة الجانبية للبدء‬
</p>
<div class="mt-8">
<img
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0i
MCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXR
oIGQ9Ik0xMiAyMkM2LjQ4IDIyIDIgMTcuNTIgMiAxMkMyIDYuNDggNi40OCAyIDEyIDJDMTcuNTIgMiAyMi
A2LjQ4IDIyIDEyQzIyIDE3LjUyIDE3LjUyIDIyIDEyIDIyWk0xMiAyMEMxNi40MiAyMCAyMCAxNi40MiAyM
CAxMkMyMCA3LjU4IDE2LjQyIDQgMTIgNEM3LjU4IDQgNCAgNy41OCA0IDEyQzQgMTYuNDIgNy41OCAyMCAx
MiAyMFpNMTYuNSAxMUgxNFY4LjVDMTQgNy42NyAxMy4zMyA3IDEyLjUgN0gxMS41QzEwLjY3IDcgMTAgNy4
2NyAxMCA4LjVWMTNIMTEuNVYxNS41QzExLjUgMTYuMzMgMTIuMTcgMTcgMTMgMTdIMTRDMTQuODMgMTcgMT
UuNSAxNi4zMyAxNS41IDE1LjVWMTNIMTYuNUMxNy4zMyAxMyAxOCAxMi4zMyAxOCAxMS41QzE4IDEwLjY3I
DE3LjMzIDEwIDE2LjUgMTBIMTQuNVYxMUgxNi41WiIgZmlsbD0iIzQwQjNFRiIvPjwvc3ZnPg==" alt="
‫ "شعار النظام‬class="mx-auto h-32">
</div>
</div>

<div id="system-settings" class="screen-content hidden">
<h2 class="text-2xl font-bold text-secondary mb-4"> ‫إعدادات‬
‫<النظام‬/h2>

<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<h3 class="text-xl font-bold text-secondary mb-2">
‫<الإعدادات العامة‬/h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="systemName" class="block mb-2 font-
bold">‫<اسم النظام‬/label>
<input type="text" id="systemName" value=" ‫نظام‬
‫ "إدارة الموردين‬class="w-full p-2 border border-gray-300 rounded text-base">
</div>
<div>
<label for="systemVersion" class="block mb-2
font-bold">‫<نسخة النظام‬/label>
<input type="text" id="systemVersion"
value="1.3" class="w-full p-2 border border-gray-300 rounded text-base" readonly>
</div>
</div>
<div class="mt-4">
<button id="saveSystemSettings" class="bg-primary
text-white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫حفظ‬
‫<الإعدادات‬/button>
</div>
</div>
</div>

<div id="import-export-settings" class="screen-content hidden">

<h2 class="text-2xl font-bold text-secondary mb-4"> ‫إعدادات‬
‫<االستيراد والتصدير‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<h3 class="text-xl font-bold text-secondary mb-2">
‫<إعدادات استيراد ملفات الإكسل‬/h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block mb-2 font-bold">‫ترتيب أعمدة‬
‫<بيانات الموردين‬/label>
<div class="text-sm text-gray-600 dark:text-
gray-300 mb-2">
،‫ اسم المورد‬،‫ الكود‬:‫الترتيب الحالي‬
‫ المـــرجــــع‬،‫ الحســــاب‬،‫ فاكس‬،‫ تلفون‬،‫ تلفون‬،‫العنوان‬
</div>
<button id="resetSupplierColumns" class="bg-
gray-200 dark:bg-gray-600 px-4 py-2 rounded hover:bg-gray-300 dark:hover:bg-gray-
500 transition-colors">‫<إعادة تعيين إلى االفتراضي‬/button>
</div>
<div>
<label class="block mb-2 font-bold">‫ترتيب أعمدة‬
‫<كشوفات الحساب‬/label>
<div class="text-sm text-gray-600 dark:text-
gray-300 mb-2">
‫ رقم‬،‫ التاريخ‬،‫ الفرع‬:‫الترتيب الحالي‬
‫ الرصيد‬،‫ دائن‬،‫ مدين‬،‫ قيمة البضاعة المتبقية‬،‫ البيان‬،‫المستند‬
</div>
<button id="resetStatementColumns" class="bg-
gray-200 dark:bg-gray-600 px-4 py-2 rounded hover:bg-gray-300 dark:hover:bg-gray-
500 transition-colors">‫<إعادة تعيين إلى االفتراضي‬/button>
</div>
</div>
</div>
</div>

<div id="document-types-settings" class="screen-content
hidden">
<h2 class="text-2xl font-bold text-secondary mb-4"> ‫إعدادات‬
‫<أنواع المستندات‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<h3 class="text-xl font-bold text-secondary mb-2">‫تعريف‬
‫<أنواع المستندات الحالية‬/h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-
4">
‫يمكنك تخصيص كيفية تحديد أنواع المستندات من خالل‬
‫تعريف الكلمات المفتاحية التي تدل على كل نوع‬
</p>

<div class="table-container mb-6">

<table id="docTypesTable" class="w-full border-
collapse">
<thead>
<tr>
<th scope="col">‫<نوع المستند‬/th>
<th scope="col"> ‫الكلمات المفتاحية‬
‫<للتعرف على النوع‬/th>
<th scope="col">‫<العمليات‬/th>
</tr>
</thead>
<tbody id="docTypesTableBody">

</tbody>
</table>
</div>

<h3 class="text-lg font-bold text-secondary mb-2">‫إضافة‬

‫<نوع مستند جديد‬/h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="newDocTypeName" class="block mb-2
font-bold">‫<اسم نوع المستند‬/label>
<input type="text" id="newDocTypeName"
class="w-full p-2 border border-gray-300 rounded text-base" placeholder=" :‫مثال‬
‫>"فاتورة ضريبية‬
</div>
<div>
<label for="newDocTypeKeywords" class="block
mb-2 font-bold">)‫<الكلمات المفتاحية (مفصولة بفواصل‬/label>
<input type="text" id="newDocTypeKeywords"
class="w-full p-2 border border-gray-300 rounded text-base" placeholder=" :‫مثال‬
‫ ضريبة القيمة المضافة‬,‫ ضريبة‬,‫>"فاتورة ضريبية‬
</div>
</div>
<div class="mt-4">
<button id="addNewDocType" class="bg-primary text-
white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫إضافة نوع مستند‬
‫<جديد‬/button>
</div>

<div class="mt-6 flex flex-wrap gap-2">

<button id="saveDocTypesSettings" class="bg-green-
500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors"> ‫حفظ إعدادات‬
‫<أنواع المستندات‬/button>
<button id="resetDocTypesSettings" class="bg-red-
500 text-white px-4 py-2 rounded hover:bg-red-600 transition-colors"> ‫إعادة تعيين‬
‫<إلى االفتراضي‬/button>
</div>
</div>
</div>

<div id="regional-settings" class="screen-content hidden">

<h2 class="text-2xl font-bold text-secondary mb-4">
‫<الإعدادات الإقليمية‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<h3 class="text-xl font-bold text-secondary mb-2">
‫<إعدادات العملة والأرقام‬/h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="currency" class="block mb-2 font-
bold">‫<العملة‬/label>
<select id="currency" class="w-full p-2 border
border-gray-300 rounded text-base">
<option value="YER" selected>‫ريال يمني‬
(YER)</option>
<option value="SAR">‫ريال سعودي‬
(SAR)</option>
<option value="USD">‫دوالر أمريكي‬
(USD)</option>
</select>
</div>
<div>
<label for="numberFormat" class="block mb-2
font-bold">‫<تنسيق الأرقام‬/label>
<select id="numberFormat" class="w-full p-2
border border-gray-300 rounded text-base">
<option value="comma"
selected>1,000,000.00</option>
<option value="dot">1.000.000,00</option>
<option value="space">1 000 000.00</option>
</select>
</div>
<div>
<label for="allowNegative" class="block mb-2
font-bold">‫<السماح بالأرقام السالبة‬/label>
<select id="allowNegative" class="w-full p-2
border border-gray-300 rounded text-base">
<option value="true" selected>‫<نعم‬/option>
<option value="false">‫<ال‬/option>
</select>
</div>
</div>
<div class="mt-4">
<button id="saveRegionalSettings" class="bg-primary
text-white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫حفظ‬
‫<الإعدادات‬/button>
</div>
</div>
</div>

<div id="company-info" class="screen-content hidden">

<h2 class="text-2xl font-bold text-secondary mb-4"> ‫بيانات‬
‫<الشركة‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="companyNameAr" class="block mb-2
font-bold">)‫<اسم الشركة (عربي‬/label>
<input type="text" id="companyNameAr" class="w-
full p-2 border border-gray-300 rounded text-base" placeholder="‫>"أدخل اسم الشركة‬
</div>
<div>
<label for="companyNameEn" class="block mb-2
font-bold">)‫<اسم الشركة (إنجليزي‬/label>
<input type="text" id="companyNameEn" class="w-
full p-2 border border-gray-300 rounded text-base" placeholder="Enter company
name">
</div>
<div>
<label for="companyBranch" class="block mb-2
font-bold">‫<الفرع‬/label>
<input type="text" id="companyBranch" class="w-
full p-2 border border-gray-300 rounded text-base" placeholder="‫>"أدخل اسم الفرع‬
</div>
<div>
<label for="companyAddress" class="block mb-2
font-bold">‫<العنوان‬/label>
<input type="text" id="companyAddress"
class="w-full p-2 border border-gray-300 rounded text-base" placeholder="‫أدخل عنوان‬
‫>"الشركة‬
</div>
<div>
<label for="companyMobile" class="block mb-2
font-bold">‫<رقم الموبايل‬/label>
<input type="text" id="companyMobile" class="w-
full p-2 border border-gray-300 rounded text-base" placeholder="‫>"أدخل رقم الموبايل‬
</div>
<div>
<label for="companyWhatsapp" class="block mb-2
font-bold">‫<رقم الواتس‬/label>
<input type="text" id="companyWhatsapp"
class="w-full p-2 border border-gray-300 rounded text-base" placeholder=" ‫أدخل رقم‬
‫>"الواتس‬
</div>
<div>
<label for="companyPhone" class="block mb-2
font-bold">‫<رقم الهاتف‬/label>
<input type="text" id="companyPhone" class="w-
full p-2 border border-gray-300 rounded text-base" placeholder="‫>"أدخل رقم الهاتف‬
</div>
<div>
<label for="companyEmail" class="block mb-2
font-bold">‫<البريد الإلكتروني‬/label>
<input type="email" id="companyEmail" class="w-
full p-2 border border-gray-300 rounded text-base" placeholder=" ‫أدخل البريد‬
‫>"الإلكتروني‬
</div>
</div>
<div class="mt-4">
<label class="block mb-2 font-bold"> ‫شعار‬
‫<الشركة‬/label>
<div class="flex flex-col md:flex-row items-start
md:items-center">
<div id="logoDisplay" class="w-32 h-32 border
border-gray-300 flex items-center justify-center mb-2 bg-white">
<span class="text-gray-500"> ‫ال يوجد‬
‫<شعار‬/span>
</div>
<div class="md:mr-4">
<input type="file" id="companyLogo"
accept="image/*" class="block w-full text-sm text-gray-500
file:mr-4 file:py-2 file:px-4
file:rounded file:border-0
file:text-sm file:font-semibold
file:bg-primary file:text-white
hover:file:bg-secondary">
<div class="mt-2">
<label for="logoSize" class="block mb-2
font-bold">‫( حجم الشعار للطباعة‬%)</label>
<div class="flex items-center">
<input type="range" id="logoSize"
min="20" max="100" value="80" class="w-full">
<span id="logoSizeValue" class="mr-
2 min-w-[40px]">80%</span>
</div>
</div>
</div>
</div>
</div>
<div class="mt-4">
<button id="saveCompanyInfo" class="bg-primary
text-white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫حفظ‬
‫<البيانات‬/button>
<div id="companyInfoStatus" class="mt-2 text-green-
500 hidden"></div>
</div>
</div>
</div>

<div id="backup-restore" class="screen-content hidden">
<h2 class="text-2xl font-bold text-secondary mb-4"> ‫النسخ‬
‫<االحتياطي واستعادة البيانات‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<h3 class="text-xl font-bold text-secondary mb-2">‫إدارة‬
‫<النسخ االحتياطي‬/h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
‫يمكنك إنشاء نسخة احتياطية من جميع بياناتك‬
‫واستعادتها في أي وقت‬.
</p>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-

6">
<div class="bg-white dark:bg-gray-600 p-4 rounded
shadow">
<h4 class="text-lg font-bold mb-3"> ‫إنشاء نسخة‬
‫<احتياطية‬/h4>
<p class="text-sm text-gray-600 dark:text-gray-
300 mb-4">
‫قم بإنشاء نسخة احتياطية من جميع بيانات‬
‫النظام وتحميلها كملف‬.
</p>
<button id="createBackup" class="bg-primary
text-white px-4 py-2 rounded hover:bg-secondary transition-colors">
‫إنشاء نسخة احتياطية‬
</button>
</div>

<div class="bg-white dark:bg-gray-600 p-4 rounded

shadow">
<h4 class="text-lg font-bold mb-3"> ‫استعادة من‬
‫<نسخة احتياطية‬/h4>
<p class="text-sm text-gray-600 dark:text-gray-
300 mb-4">
‫استعادة البيانات من ملف نسخة احتياطية‬
‫محفوظ مسبقًا‬.
</p>
<input type="file" id="restoreFile"
accept=".json" class="block w-full text-sm text-gray-500
file:mr-4 file:py-2 file:px-4
file:rounded file:border-0
file:text-sm file:font-semibold
file:bg-primary file:text-white
hover:file:bg-secondary mb-2">
<button id="restoreBackup" class="bg-yellow-500
text-white px-4 py-2 rounded hover:bg-yellow-600 transition-colors">
‫استعادة البيانات‬
</button>
</div>
</div>

<div class="bg-white dark:bg-gray-600 p-4 rounded

shadow">
<h4 class="text-lg font-bold mb-3"> ‫استخدام التخزين‬
‫<المحلي‬/h4>
<div id="storageUsage" class="mb-4">
<div class="mb-2 flex justify-between items-
center">
<span>‫المساحة المستخدمة‬:</span>
<span id="usedStorage">0 ‫<كيلوبايت‬/span>
</div>
<div class="h-4 w-full bg-gray-200 dark:bg-
gray-700 rounded-full overflow-hidden">
<div id="storageProgressBar" class="h-full
bg-primary transition-all duration-300" style="width: 0%;"></div>
</div>
</div>
<div class="flex flex-wrap gap-2">
<button id="clearAllData" class="bg-red-500
text-white px-4 py-2 rounded hover:bg-red-600 transition-colors">
‫مسح جميع البيانات‬
</button>
<button id="refreshStorageInfo" class="bg-blue-
500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">
‫تحديث معلومات التخزين‬
</button>
</div>
</div>
</div>
</div>

<div id="supplier-data" class="screen-content hidden">

<h2 class="text-2xl font-bold text-secondary mb-4"> ‫بيانات‬
‫<الموردين‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<h3 class="text-xl font-bold text-secondary mb-2">
‫<استيراد بيانات الموردين‬/h3>
<div class="mb-4">
<input type="file" id="supplierFileInput"
accept=".xlsx, .xls, .csv" class="block w-full text-sm text-gray-500
file:mr-4 file:py-2 file:px-4
file:rounded file:border-0
file:text-sm file:font-semibold
file:bg-primary file:text-white
hover:file:bg-secondary">
<p class="text-sm text-gray-600 dark:text-gray-300
mt-2">
:‫يجب أن يحتوي ملف الإكسل على الحقول التالية‬
‫ المـــرجــــع‬،‫ الحســــاب‬،‫ فاكس‬،‫ تلفون‬،‫ تلفون‬،‫ العنوان‬،‫ اسم المورد‬،‫الكود‬
</p>
</div>
<div class="mb-4 flex flex-wrap gap-2">
<button id="importSuppliers" class="bg-primary
text-white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫استيراد‬
‫<البيانات‬/button>
<button id="clearSuppliers" class="bg-red-500 text-
white px-4 py-2 rounded hover:bg-red-600 transition-colors">‫<مسح البيانات‬/button>
<button id="exportSuppliers" class="bg-secondary
text-white px-4 py-2 rounded hover:bg-primary transition-colors"> ‫تصدير‬
‫<البيانات‬/button>
</div>
</div>

<div class="mt-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-secondary"> ‫قائمة‬
‫<الموردين‬/h3>
<button id="addNewSupplier" class="bg-green-500
text-white px-3 py-1 rounded text-sm hover:bg-green-600 transition-colors"> ‫إضافة‬
‫<مورد جديد‬/button>
</div>
<div class="mb-4 relative">
<input type="text" id="supplierSearch"
placeholder="‫بحث عن مورد‬..." class="w-full p-2 border border-gray-300 rounded text-
base pr-10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5
w-5 text-gray-400 absolute top-2.5 left-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4
4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6
6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
<div class="table-container">
<table id="suppliersTable" class="w-full border-
collapse">
<thead>
<tr>
<th scope="col">‫<الكود‬/th>
<th scope="col">‫<اسم المورد‬/th>
<th scope="col">‫<العنوان‬/th>
<th scope="col">‫<تلفون‬/th>
<th scope="col">‫<فاكس‬/th>
<th scope="col">‫<الحساب المرجع‬/th>
<th scope="col">‫<العمليات‬/th>
</tr>
</thead>
<tbody id="suppliersTableBody">

<tr>
<td colspan="7" class="text-center py-
4">‫<ال توجد بيانات متاحة‬/td>
</tr>
</tbody>
</table>
</div>
<div id="suppliersPagination" class="mt-4 flex justify-
center items-center">

</div>
</div>
</div>

<div id="supplier-inventory" class="screen-content hidden">
<h2 class="text-2xl font-bold text-secondary mb-4"> ‫إدارة‬
‫<مخزون الموردين‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<div class="mb-4">
<label for="inventorySupplier" class="block mb-2
font-bold">‫<اختر المورد‬/label>
<select id="inventorySupplier" class="w-full p-2
border border-gray-300 rounded text-base">
<option value="">-- ‫ اختر المورد‬--</option>

</select>
</div>
<button id="addInventoryItem" class="bg-primary text-
white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫إضافة صنف‬
‫<جديد‬/button>
</div>

<div class="mt-6">
<h3 class="text-xl font-bold text-secondary mb-2">‫قائمة‬
‫<الأصناف المتوفرة لدى المورد‬/h3>
<div class="mb-4 relative">
<input type="text" id="inventorySearch"
placeholder="‫بحث عن صنف‬..." class="w-full p-2 border border-gray-300 rounded text-
base pr-10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5
w-5 text-gray-400 absolute top-2.5 left-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4
4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6
6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
<div class="table-container">
<table id="inventoryTable" class="w-full border-
collapse">
<thead>
<tr>
<th scope="col">‫<كود الصنف‬/th>
<th scope="col">‫<اسم الصنف‬/th>
<th scope="col">‫<الوحدة‬/th>
<th scope="col">‫<الكمية المتوفرة‬/th>
<th scope="col">‫<سعر الشراء‬/th>
<th scope="col">‫<آخر تحديث‬/th>
<th scope="col">‫<حالة المخزون‬/th>
<th scope="col">‫<العمليات‬/th>
</tr>
</thead>
<tbody id="inventoryTableBody">

</div>
</div>
</div>

<div id="commission-setup" class="screen-content hidden">
<h2 class="text-2xl font-bold text-secondary mb-4"> ‫ترميز‬
‫<عموالت الموردين‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<div class="mb-4">
<label for="commissionSetupSupplier" class="block
mb-2 font-bold">‫<اختر المورد‬/label>
<select id="commissionSetupSupplier" class="w-full
p-2 border border-gray-300 rounded text-base">
<option value="">-- ‫ اختر المورد‬--</option>

</select>
</div>

<div class="mb-4 mt-6">

<h3 class="text-lg font-bold text-secondary mb-4">
‫<تعريف نوع العمولة االفتراضية‬/h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label for="defaultCommissionType"
class="block mb-2 font-bold">‫<نوع العمولة االفتراضية‬/label>
<select id="defaultCommissionType"
class="w-full p-2 border border-gray-300 rounded text-base">
<option value="cash" selected> ‫عمولة‬
‫<نقدية‬/option>
<option value="kind"> ‫عمولة‬
‫<عينية‬/option>
<option value="inclusive"> ‫شاملة‬
‫<العمولة‬/option>
</select>
</div>
<div>
<label for="defaultCommissionPercentage"
class="block mb-2 font-bold">‫( نسبة العمولة االفتراضية‬%)</label>
<input type="number"
id="defaultCommissionPercentage" class="w-full p-2 border border-gray-300 rounded
text-base" value="10" min="0" max="100" step="0.01">
</div>
<div>
<label for="defaultCommissionBasis"
class="block mb-2 font-bold">‫<تطبيق على‬/label>
<select id="defaultCommissionBasis"
class="w-full p-2 border border-gray-300 rounded text-base">
<option value="purchases" selected>‫صافي‬
‫<المشتريات‬/option>
<option value="payments"> ‫إجمالي‬
‫<السداد‬/option>
</select>
</div>
</div>
</div>

<div class="mt-6">
<h3 class="text-lg font-bold text-secondary mb-4">
‫<تعريف العمولة حسب نوع المستند‬/h3>
<div class="table-container">
<table id="docCommissionTable" class="w-full
border-collapse">
<thead>
<tr>
<th scope="col">‫<نوع المستند‬/th>
<th scope="col">‫<تطبيق العمولة‬/th>
<th scope="col">‫<نوع العمولة‬/th>
<th scope="col">‫نسبة العمولة‬
(%)</th>
</tr>
</thead>
<tbody id="docCommissionTableBody">

</tbody>
</table>
</div>
</div>

<div class="mt-4 flex flex-wrap gap-2">

<button id="saveCommissionSetup" class="bg-primary
text-white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫حفظ إعدادات‬
‫<العمولة‬/button>
<button id="resetCommissionSetup" class="bg-red-500
text-white px-4 py-2 rounded hover:bg-red-600 transition-colors"> ‫إعادة تعيين إلى‬
‫<االفتراضي‬/button>
</div>
</div>
</div>

<div id="account-statements" class="screen-content hidden">

<h2 class="text-2xl font-bold text-secondary mb-4"> ‫كشوفات‬
‫<الحساب‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<h3 class="text-xl font-bold text-secondary mb-2">
‫<استيراد كشف حساب‬/h3>
<div class="mb-4">
<label for="statementSupplier" class="block mb-2
font-bold">‫<اختر المورد‬/label>
<select id="statementSupplier" class="w-full p-2
border border-gray-300 rounded text-base">
<option value="">-- ‫ اختر المورد‬--</option>

</select>
</div>
<div class="mb-4">
<input type="file" id="statementFileInput"
accept=".xlsx, .xls, .csv" class="block w-full text-sm text-gray-500
file:mr-4 file:py-2 file:px-4
file:rounded file:border-0
file:text-sm file:font-semibold
file:bg-primary file:text-white
hover:file:bg-secondary">
<p class="text-sm text-gray-600 dark:text-gray-300
mt-2">
:‫يجب أن يحتوي ملف الإكسل على الحقول التالية‬
‫ الرصيد‬،‫ دائن‬،‫ مدين‬،‫ قيمة البضاعة المتبقية‬،‫ البيان‬،‫ رقم المستند‬،‫ التاريخ‬،‫الفرع‬
</p>
</div>
<div class="mb-4 flex flex-wrap gap-2">
<button id="importStatement" class="bg-primary
text-white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫استيراد‬
‫<الكشف‬/button>
<button id="clearStatement" class="bg-red-500 text-
white px-4 py-2 rounded hover:bg-red-600 transition-colors">‫<مسح الكشف‬/button>
<button id="exportStatement" class="bg-secondary
text-white px-4 py-2 rounded hover:bg-primary transition-colors"> ‫تصدير‬
‫<الكشف‬/button>
</div>
</div>

<div class="mt-6">
<h3 class="text-xl font-bold text-secondary mb-2"> ‫كشف‬
‫<الحساب‬/h3>
<div class="mb-4">
<select id="viewStatementSupplier" class="w-full p-
2 border border-gray-300 rounded text-base">
<option value="">-- ‫ اختر المورد لعرض الكشف‬--
</option>

</select>
</div>
<div class="mb-2 flex justify-between items-center">
<div id="statementNumber" class="text-primary font-
bold"></div>
<div id="statementDate"
class="text-gray-600"></div>
</div>
<div class="table-container">
<table id="statementsTable" class="w-full border-
collapse">
<thead>
<tr>
<th scope="col">‫<الفرع‬/th>
<th scope="col">‫<التاريخ‬/th>
<th scope="col">‫<رقم المستند‬/th>
<th scope="col">‫<نوع المستند‬/th>
<th scope="col">‫<البيان‬/th>
<th scope="col"> ‫قيمة البضاعة‬
‫<المتبقية‬/th>
<th scope="col">‫<مدين‬/th>
<th scope="col">‫<دائن‬/th>
<th scope="col">‫<الرصيد‬/th>
<th scope="col">‫<العمليات‬/th>
</tr>
</thead>
<tbody id="statementsTableBody">

<tr>
<td colspan="10" class="text-center py-
4">‫<ال توجد بيانات متاحة‬/td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4 flex flex-wrap gap-2">
<button id="printStatement" class="bg-secondary
text-white px-4 py-2 rounded hover:bg-primary transition-colors">
‫طباعة الكشف‬
</button>
<button id="sendStatementWhatsapp" class="bg-green-
500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors hidden">
‫إرسال الكشف عبر الواتساب‬
</button>
<button id="addManualStatement" class="bg-primary
text-white px-4 py-2 rounded hover:bg-secondary transition-colors">
‫إضافة حركة يدويًا‬
</button>
</div>
</div>
</div>

<div id="match-statements" class="screen-content hidden">

<h2 class="text-2xl font-bold text-secondary mb-4"> ‫مطابقة‬
‫<كشف الحساب‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<div class="mb-4">
<label for="matchSupplier" class="block mb-2 font-
bold">‫<اختر المورد‬/label>
<select id="matchSupplier" class="w-full p-2 border
border-gray-300 rounded text-base">
<option value="">-- ‫ اختر المورد‬--</option>

</select>
</div>
</div>

<div id="unposted-transactions" class="screen-content hidden">
<h2 class="text-2xl font-bold text-secondary mb-4">‫العمليات‬
‫<الغير مرحلة‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<div class="mb-4">
<label for="unpostedSupplier" class="block mb-2
font-bold">‫<اختر المورد‬/label>
<select id="unpostedSupplier" class="w-full p-2
border border-gray-300 rounded text-base">
<option value="">-- ‫ اختر المورد‬--</option>

</select>
</div>
<button id="addUnpostedTransaction" class="bg-primary
text-white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫إضافة عملية‬
‫<جديدة‬/button>
</div>

<div class="mt-6">
<h3 class="text-xl font-bold text-secondary mb-2">‫قائمة‬
‫<العمليات الغير مرحلة‬/h3>
<div class="table-container">
<table id="unpostedTable" class="w-full border-
collapse">
<thead>
<tr>
<th scope="col">‫<الفرع‬/th>
<th scope="col">‫<التاريخ‬/th>
<th scope="col">‫<رقم المستند‬/th>
<th scope="col">‫<نوع المستند‬/th>
<th scope="col">‫<البيان‬/th>
<th scope="col"> ‫قيمة البضاعة‬
‫<المتبقية‬/th>
<th scope="col">‫<مدين‬/th>
<th scope="col">‫<دائن‬/th>
<th scope="col">‫<الرصيد‬/th>
<th scope="col">‫<العمليات‬/th>
</tr>
</thead>
<tbody id="unpostedTableBody">

<tr>
<td colspan="10" class="text-center py-
4">‫<يرجى اختيار مورد أوًال‬/td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4">
<button id="moveToStatement" class="bg-green-500
text-white px-4 py-2 rounded hover:bg-green-600 transition-colors"> ‫ترحيل العمليات‬
‫<المحددة‬/button>
</div>
</div>
</div>

<div id="manage-commissions" class="screen-content hidden">

<h2 class="text-2xl font-bold text-secondary mb-4"> ‫إدارة‬
‫<عموالت الموردين‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<div class="mb-4">
<label for="commissionSupplier" class="block mb-2
font-bold">‫<اختر المورد‬/label>
<select id="commissionSupplier" class="w-full p-2
border border-gray-300 rounded text-base">
<option value="">-- ‫ اختر المورد‬--</option>

</select>
</div>
<div class="mt-4">
<button id="calculateDefaultCommission" class="bg-
green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors"> ‫حساب‬
‫<العمولة حسب الإعدادات‬/button>
</div>
</div>

<div class="mt-6">
<h3 class="text-xl font-bold text-secondary mb-2">‫إدارة‬
‫<العموالت‬/h3>
<div class="table-container">
<table id="commissionsTable" class="w-full border-
collapse">
<thead>
<tr>
<th scope="col">‫<التاريخ‬/th>
<th scope="col">‫<رقم المستند‬/th>
<th scope="col">‫<نوع المستند‬/th>
<th scope="col">‫<البيان‬/th>
<th scope="col">‫<مدين‬/th>
<th scope="col">‫<دائن‬/th>
<th scope="col">‫<مرتبط بعمولة‬/th>
<th scope="col">‫<نوع العمولة‬/th>
<th scope="col">‫<نسبة العمولة‬/th>
<th scope="col">‫<مبلغ العمولة‬/th>
</tr>
</thead>
<tbody id="commissionsTableBody">
<!-- Commission data will be loaded here --
>
<tr>
<td colspan="10" class="text-center py-
4">‫<يرجى اختيار مورد أوًال‬/td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4 p-4 bg-gray-100 dark:bg-gray-700
rounded-lg">
<h4 class="text-lg font-bold text-secondary mb-2">
‫<ملخص العموالت‬/h4>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label class="block mb-2 font-bold"> ‫إجمالي‬
‫<العمولة النقدية‬/label>
<div id="totalCashCommission" class="p-2
bg-white dark:bg-gray-600 border border-gray-300 rounded">0.00</div>
</div>
<div>
<label class="block mb-2 font-bold"> ‫إجمالي‬
‫<العمولة العينية‬/label>
<div id="totalInKindCommission" class="p-2
bg-white dark:bg-gray-600 border border-gray-300 rounded">0.00</div>
</div>
<div>
<label for="receivedCashCommission"
class="block mb-2 font-bold">‫<العمولة النقدية المستلمة‬/label>
<input type="number"
id="receivedCashCommission" class="w-full p-2 border border-gray-300 rounded text-
base" value="0">
</div>
<div>
<label for="receivedInKindCommission"
class="block mb-2 font-bold">‫<العمولة العينية المستلمة‬/label>
<input type="number"
id="receivedInKindCommission" class="w-full p-2 border border-gray-300 rounded
text-base" value="0">
</div>
</div>
<div class="mt-4">
<button id="saveCommissions" class="bg-primary
text-white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫حفظ‬
‫<العموالت‬/button>
</div>
</div>
</div>
</div>

<div id="commission-notifications" class="screen-content
hidden">
<h2 class="text-2xl font-bold text-secondary mb-4"> ‫إشعارات‬
‫<العموالت‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<h3 class="text-xl font-bold text-secondary mb-2">
‫<تنبيهات العموالت المستحقة‬/h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
‫هنا يتم عرض قائمة بالموردين الذين لديهم عموالت‬
‫مستحقة لم يتم استالمها بعد‬
</p>

<div class="mb-4 flex gap-2">

<button id="markAllNotificationsRead" class="bg-
secondary text-white px-4 py-2 rounded hover:bg-primary transition-colors">
‫تعليم الكل كمقروء‬
</button>
<button id="refreshNotifications" class="bg-primary
text-white px-4 py-2 rounded hover:bg-secondary transition-colors">
‫تحديث الإشعارات‬
</button>
</div>
</div>

<div id="notificationsContainer" class="space-y-2">

<div class="text-center py-8 text-gray-500">
‫ال توجد إشعارات حاليًا‬
</div>
</div>
</div>

<div id="suppliers-matching-status" class="screen-content
hidden">
<h2 class="text-2xl font-bold text-secondary mb-4"> ‫حالة‬
‫<مطابقة الموردين‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<div class="mb-4">
<h3 class="text-lg font-bold text-secondary mb-2">
‫<معايير التصفية‬/h3>
<div class="flex flex-wrap gap-4">
<label class="inline-flex items-center">
<input type="radio"
name="supplierStatusFilter" value="all" class="form-radio h-5 w-5 text-primary"
checked>
<span class="mr-2">‫<جميع الموردين‬/span>
</label>
<label class="inline-flex items-center">
<input type="radio"
name="supplierStatusFilter" value="complete" class="form-radio h-5 w-5 text-
primary">
<span class="mr-2">‫<المطابقين‬/span>
</label>
<label class="inline-flex items-center">
<input type="radio"
name="supplierStatusFilter" value="pending" class="form-radio h-5 w-5 text-
primary">
<span class="mr-2">‫<تحت المتابعة‬/span>
</label>
<label class="inline-flex items-center">
<input type="radio"
name="supplierStatusFilter" value="missing" class="form-radio h-5 w-5 text-
primary">
<span class="mr-2"> ‫غير متوفر كشف‬
‫<حساب‬/span>
</label>
</div>
</div>
<div class="mt-4">
<button id="refreshSuppliersStatus" class="bg-
primary text-white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫تحديث‬
‫<البيانات‬/button>
<button id="exportSuppliersStatus" class="bg-
secondary text-white px-4 py-2 rounded hover:bg-primary transition-colors"> ‫تصدير‬
‫<للإكسل‬/button>
<button id="printSuppliersStatus" class="bg-green-
500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors"> ‫طباعة‬
‫<التقرير‬/button>
</div>
</div>

<div class="mt-6">
<h3 class="text-xl font-bold text-secondary mb-2">‫قائمة‬
‫<حالة مطابقة الموردين‬/h3>
<div class="mb-4 relative">
<input type="text" id="supplierStatusSearch"
placeholder="‫بحث عن مورد‬..." class="w-full p-2 border border-gray-300 rounded text-
base pr-10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5
w-5 text-gray-400 absolute top-2.5 left-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4
4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6
6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>

<div class="p-4 mb-4 bg-blue-50 border border-blue-200

rounded-lg dark:bg-blue-900/30 dark:border-blue-800">
<div class="flex justify-between items-center mb-
2">
<h4 class="text-lg font-bold text-blue-600
dark:text-blue-300">‫<إحصائيات المطابقة‬/h4>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="p-3 bg-white border rounded shadow-
sm dark:bg-gray-800 dark:border-gray-700">
<div class="font-bold text-gray-600
dark:text-gray-300">‫<إجمالي الموردين‬/div>
<div id="totalSuppliersCount" class="text-
2xl font-bold text-primary">0</div>
</div>
<div class="p-3 bg-white border rounded shadow-
sm dark:bg-gray-800 dark:border-gray-700">
<div class="font-bold text-gray-600
dark:text-gray-300">‫<موردين مطابقين‬/div>
<div id="matchedSuppliersCount"
class="text-2xl font-bold text-green-600 dark:text-green-500">0</div>
</div>
<div class="p-3 bg-white border rounded shadow-
sm dark:bg-gray-800 dark:border-gray-700">
<div class="font-bold text-gray-600
dark:text-gray-300">‫<موردين تحت المتابعة‬/div>
<div id="pendingSuppliersCount"
class="text-2xl font-bold text-yellow-600 dark:text-yellow-500">0</div>
</div>
<div class="p-3 bg-white border rounded shadow-
sm dark:bg-gray-800 dark:border-gray-700">
<div class="font-bold text-gray-600
dark:text-gray-300">‫<غير متوفر كشف حساب‬/div>
<div id="missingSuppliersCount"
class="text-2xl font-bold text-red-600 dark:text-red-500">0</div>
</div>
</div>
</div>

<div class="table-container">
<table id="suppliersStatusTable" class="w-full
border-collapse">
<thead>
<tr>
<th scope="col">‫<رقم المورد‬/th>
<th scope="col">‫<اسم المورد‬/th>
<th scope="col">‫<حالة المطابقة‬/th>
<th scope="col">‫<إجمالي الفارق‬/th>
<th scope="col">‫<تفاصيل‬/th>
</tr>
</thead>
<tbody id="suppliersStatusTableBody">

<tr>
<td colspan="5" class="text-center py-
4">‫يتم تحميل البيانات‬...</td>
</tr>
</tbody>
</table>
</div>
<div id="suppliersStatusPagination" class="mt-4 flex
justify-center items-center">

</div>
</div>
</div>

<div id="matching-report" class="screen-content hidden">

<h2 class="text-2xl font-bold text-secondary mb-4"> ‫تقرير‬
‫<المطابقة‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<div class="mb-4">
<label for="matchingReportSupplier" class="block
mb-2 font-bold">‫<اختر المورد‬/label>
<select id="matchingReportSupplier" class="w-full
p-2 border border-gray-300 rounded text-base">
<option value="">-- ‫ اختر المورد‬--</option>

</select>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="matchingReportFromDate"
class="block mb-2 font-bold">‫<من تاريخ‬/label>
<input type="date" id="matchingReportFromDate"
class="w-full p-2 border border-gray-300 rounded text-base">
</div>
<div>
<label for="matchingReportToDate" class="block
mb-2 font-bold">‫<إلى تاريخ‬/label>
<input type="date" id="matchingReportToDate"
class="w-full p-2 border border-gray-300 rounded text-base">
</div>
</div>
<div class="mt-4">
<label class="block mb-2 font-bold"> ‫حالة‬
‫<المطابقة‬/label>
<div class="flex flex-wrap gap-4">
<label class="inline-flex items-center">
<input type="radio" name="matchingStatus"
value="all" class="form-radio h-5 w-5 text-primary" checked>
<span class="mr-2">‫<الكل‬/span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="matchingStatus"
value="matched" class="form-radio h-5 w-5 text-primary">
<span class="mr-2">‫<العمليات المطابقة‬/span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="matchingStatus"
value="unmatched" class="form-radio h-5 w-5 text-primary">
<span class="mr-2"> ‫العمليات غير‬
‫<المطابقة‬/span>
</label>
</div>
</div>
<div class="mt-4">
<label for="matchingReportDocType" class="block mb-
2 font-bold">‫<نوع المستند‬/label>
<select id="matchingReportDocType" class="w-full p-
2 border border-gray-300 rounded text-base">
<option value="all">‫<جميع المستندات‬/option>

</select>
</div>
<div class="mt-4">
<label class="block mb-2 font-bold"> ‫خيارات‬
‫<الطباعة‬/label>
<div class="flex flex-wrap gap-4">
<label class="inline-flex items-center mr-4">
<input type="checkbox" id="printHeaderOnly"
class="form-checkbox h-5 w-5 text-primary">
<span class="mr-2"> ‫طباعة الترويسة‬
‫<فقط‬/span>
</label>
<label class="inline-flex items-center mr-4">
<input type="radio" name="printOrientation"
value="portrait" class="form-radio h-5 w-5 text-primary" checked>
<span class="mr-2">‫<طباعة عمودي‬/span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="printOrientation"
value="landscape" class="form-radio h-5 w-5 text-primary">
<span class="mr-2">‫<طباعة أفقي‬/span>
</label>
</div>
</div>
<div class="mt-4 flex flex-wrap items-center gap-2">
<button id="generateMatchingReport" class="bg-
primary text-white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫إنشاء‬
‫<التقرير‬/button>
<button id="printMatchingReport" class="bg-
secondary text-white px-4 py-2 rounded hover:bg-primary transition-colors hidden">
‫<طباعة التقرير‬/button>
<button id="exportMatchingReport" class="bg-green-
500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors hidden">‫تصدير‬
‫<للإكسل‬/button>
</div>
</div>

<div id="matchingReportContent" class="mt-6 hidden">

<div id="matchingReportTable" class="table-container

hide-in-print-data-only">

</div>

<div id="matchingReportSummary" class="mt-4 p-4 bg-

gray-100 dark:bg-gray-700 rounded-lg hide-in-print-data-only">

</div>
</div>
</div>
<div id="commission-report" class="screen-content hidden">
<h2 class="text-2xl font-bold text-secondary mb-4"> ‫تقرير‬
‫<العموالت‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<div class="mb-4">
<label for="commissionReportSupplier" class="block
mb-2 font-bold">‫<اختر المورد‬/label>
<select id="commissionReportSupplier" class="w-full
p-2 border border-gray-300 rounded text-base">
<option value="">-- ‫ اختر المورد‬--</option>

</select>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="commissionReportFromDate"
class="block mb-2 font-bold">‫<من تاريخ‬/label>
<input type="date"
id="commissionReportFromDate" class="w-full p-2 border border-gray-300 rounded
text-base">
</div>
<div>
<label for="commissionReportToDate"
class="block mb-2 font-bold">‫<إلى تاريخ‬/label>
<input type="date" id="commissionReportToDate"
class="w-full p-2 border border-gray-300 rounded text-base">
</div>
</div>
<div class="mb-4">
<label for="commissionReportType" class="block mb-2
font-bold">‫<نوع التقرير‬/label>
<select id="commissionReportType" class="w-full p-2
border border-gray-300 rounded text-base">
<option value="detailed">‫<تفصيلي‬/option>
<option value="summary">‫<إجمالي‬/option>
</select>
</div>
<div class="mt-4">
<label for="commissionReportDocType" class="block
mb-2 font-bold">‫<نوع المستند‬/label>
<select id="commissionReportDocType" class="w-full
p-2 border border-gray-300 rounded text-base">
<option value="all">‫<جميع المستندات‬/option>

</select>
</div>
<div class="mt-4">
<label class="block mb-2 font-bold"> ‫خيارات‬
‫<الطباعة‬/label>
<div class="flex flex-wrap gap-4">
<label class="inline-flex items-center mr-4">
<input type="checkbox"
id="printCommHeaderOnly" class="form-checkbox h-5 w-5 text-primary">
<span class="mr-2"> ‫طباعة الترويسة‬
‫<فقط‬/span>
</label>
<label class="inline-flex items-center mr-4">
<input type="radio"
name="commPrintOrientation" value="portrait" class="form-radio h-5 w-5 text-
primary" checked>
<span class="mr-2">‫<طباعة عمودي‬/span>
</label>
<label class="inline-flex items-center">
<input type="radio"
name="commPrintOrientation" value="landscape" class="form-radio h-5 w-5 text-
primary">
<span class="mr-2">‫<طباعة أفقي‬/span>
</label>
</div>
</div>
<div class="mt-4 flex flex-wrap items-center gap-2">
<button id="generateCommissionReport" class="bg-
primary text-white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫إنشاء‬
‫<التقرير‬/button>
<button id="printCommissionReport" class="bg-
secondary text-white px-4 py-2 rounded hover:bg-primary transition-colors hidden">
‫<طباعة التقرير‬/button>
<button id="exportCommissionReport" class="bg-
green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors
hidden">‫<تصدير للإكسل‬/button>
</div>
</div>

<div id="commissionReportContent" class="mt-6 hidden">

<div id="commissionReportTable" class="table-container

hide-in-print-data-only">

</div>

<div id="commissionReportSummary" class="mt-4 p-4 bg-

gray-100 dark:bg-gray-700 rounded-lg hide-in-print-data-only">

</div>
</div>
</div>

<div id="financial-metrics" class="screen-content hidden">
<h2 class="text-2xl font-bold text-secondary mb-4"> ‫تقرير‬
‫<المؤشرات المالية‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<div class="mb-4">
<label for="financialMetricsSupplier" class="block
mb-2 font-bold">‫<اختر المورد‬/label>
<select id="financialMetricsSupplier" class="w-full
p-2 border border-gray-300 rounded text-base">
<option value="">-- ‫ اختر المورد‬--</option>

</select>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="financialMetricsFromDate"
class="block mb-2 font-bold">‫<من تاريخ‬/label>
<input type="date"
id="financialMetricsFromDate" class="w-full p-2 border border-gray-300 rounded
text-base">
</div>
<div>
<label for="financialMetricsToDate"
class="block mb-2 font-bold">‫<إلى تاريخ‬/label>
<input type="date" id="financialMetricsToDate"
class="w-full p-2 border border-gray-300 rounded text-base">
</div>
</div>
<div class="mt-4 flex flex-wrap items-center gap-2">
<button id="generateFinancialMetrics" class="bg-
primary text-white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫إنشاء‬
‫<التقرير‬/button>
<button id="printFinancialMetrics" class="bg-
secondary text-white px-4 py-2 rounded hover:bg-primary transition-colors hidden">
‫<طباعة التقرير‬/button>
<button id="exportFinancialMetrics" class="bg-
green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors
hidden">‫<تصدير للإكسل‬/button>
</div>
</div>

<div id="financialMetricsContent" class="mt-6 hidden">

<div class="print-content">
<div id="documentTypesSummary" class="mt-4 p-4 bg-
gray-100 dark:bg-gray-700 rounded-lg mb-6">
<h4 class="text-lg font-bold text-secondary mb-
4">‫<ملخص العمليات حسب نوع المستند‬/h4>
<div class="table-container">
<table id="documentTypesSummaryTable"
class="w-full border-collapse">
<thead>
<tr>
<th scope="col"> ‫نوع‬
‫<المستند‬/th>
<th scope="col"> ‫عدد‬
‫<العمليات‬/th>
<th scope="col"> ‫إجمالي‬
‫<المدين‬/th>
<th scope="col"> ‫إجمالي‬
‫<الدائن‬/th>
<th scope="col"> ‫الرصيد‬
‫<الصافي‬/th>
</tr>
</thead>
<tbody
id="documentTypesSummaryTableBody">

</tbody>
</table>
</div>
</div>

<div class="mt-4 p-4 bg-gray-100 dark:bg-gray-700

rounded-lg">
<h4 class="text-lg font-bold text-secondary mb-
4">‫<ملخص المؤشرات المالية‬/h4>
<div class="grid grid-cols-1 md:grid-cols-2
gap-6">
<div class="bg-white dark:bg-gray-600 p-4
rounded shadow">
<h5 class="text-md font-bold mb-3">
‫<المشتريات الآجلة‬/h5>
<div class="grid grid-cols-2 gap-2">
<div>
<label class="block text-sm mb-
1">‫إجمالي فواتير المشتريات الآجلة‬:</label>
<div id="totalCreditPurchases"
class="p-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 rounded">0.00</div>
</div>
<div>
<label class="block text-sm mb-
1">‫إجمالي مردودات المشتريات الآجلة‬:</label>
<div id="totalCreditReturns"
class="p-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 rounded">0.00</div>
</div>
<div class="col-span-2">
<label class="block font-bold
text-sm mb-1">‫صافي المشتريات الآجلة‬:</label>
<div id="netCreditPurchases"
class="p-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 rounded font-
bold">0.00</div>
</div>
</div>
</div>

<div class="bg-white dark:bg-gray-600 p-4

rounded shadow">
<h5 class="text-md font-bold mb-3">
‫<المشتريات النقدية‬/h5>
<div class="grid grid-cols-2 gap-2">
<div>
<label class="block text-sm mb-
1">‫إجمالي فواتير المشتريات النقدية‬:</label>
<div id="totalCashPurchases"
class="p-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 rounded">0.00</div>
</div>
<div>
<label class="block text-sm mb-
1">‫إجمالي مردودات المشتريات النقدية‬:</label>
<div id="totalCashReturns"
class="p-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 rounded">0.00</div>
</div>
<div class="col-span-2">
<label class="block font-bold
text-sm mb-1">‫صافي المشتريات النقدية‬:</label>
<div id="netCashPurchases"
class="p-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 rounded font-
bold">0.00</div>
</div>
</div>
</div>

<div class="bg-white dark:bg-gray-600 p-4

rounded shadow">
<h5 class="text-md font-bold mb-3">
‫<إجمالي السداد‬/h5>
<div class="grid grid-cols-2 gap-2">
<div>
<label class="block text-sm mb-
1">‫إجمالي سندات الصرف النقدي‬:</label>
<div id="totalCashPayments"
class="p-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 rounded">0.00</div>
</div>
<div>
<label class="block text-sm mb-
1">‫إجمالي سندات الصرف بالشيك‬:</label>
<div id="totalCheckPayments"
class="p-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 rounded">0.00</div>
</div>
<div class="col-span-2">
<label class="block font-bold
text-sm mb-1">‫إجمالي الدفعات‬:</label>
<div id="totalPayments"
class="p-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 rounded font-
bold">0.00</div>
</div>
</div>
</div>

<div class="bg-white dark:bg-gray-600 p-4

rounded shadow">
<h5 class="text-md font-bold mb-3">
‫<العموالت المحتسبة‬/h5>
<div class="grid grid-cols-2 gap-2">
<div>
<label class="block text-sm mb-
1">‫العمولة من صافي المشتريات‬:</label>
<div
id="commissionFromPurchases" class="p-2 bg-gray-50 dark:bg-gray-700 border border-
gray-300 rounded">0.00</div>
</div>
<div>
<label class="block text-sm mb-
1">‫العمولة من إجمالي السداد‬:</label>
<div
id="commissionFromPayments" class="p-2 bg-gray-50 dark:bg-gray-700 border border-
gray-300 rounded">0.00</div>
</div>
<div class="col-span-2">
<label class="block font-bold
text-sm mb-1">‫نسبة العمولة االفتراضية‬:</label>
<div
id="defaultCommissionRateDisplay" class="p-2 bg-gray-50 dark:bg-gray-700 border
border-gray-300 rounded font-bold">10%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="inventory-report" class="screen-content hidden">
<h2 class="text-2xl font-bold text-secondary mb-4"> ‫تقرير‬
‫<المخزون‬/h2>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-
4">
<div class="mb-4">
<label for="inventoryReportSupplier" class="block
mb-2 font-bold">‫<اختر المورد‬/label>
<select id="inventoryReportSupplier" class="w-full
p-2 border border-gray-300 rounded text-base">
<option value="">-- ‫ اختر المورد‬--</option>

</select>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="inventoryReportStatus" class="block
mb-2 font-bold">‫<حالة المخزون‬/label>
<select id="inventoryReportStatus" class="w-
full p-2 border border-gray-300 rounded text-base">
<option value="all">‫<جميع الأصناف‬/option>
<option value="low">‫<مخزون منخفض‬/option>
<option value="medium">‫<مخزون متوسط‬/option>
<option value="high">‫<مخزون مرتفع‬/option>
</select>
</div>
<div>
<label for="inventoryReportSort" class="block
mb-2 font-bold">‫<ترتيب حسب‬/label>
<select id="inventoryReportSort" class="w-full
p-2 border border-gray-300 rounded text-base">
<option value="name">‫<اسم الصنف‬/option>
<option value="quantity"> ‫الكمية‬
‫<المتاحة‬/option>
<option value="price">‫<سعر الشراء‬/option>
<option value="date"> ‫تاريخ آخر‬
‫<تحديث‬/option>
</select>
</div>
</div>
<div class="mt-4 flex flex-wrap items-center gap-2">
<button id="generateInventoryReport" class="bg-
primary text-white px-4 py-2 rounded hover:bg-secondary transition-colors"> ‫إنشاء‬
‫<التقرير‬/button>
<button id="printInventoryReport" class="bg-
secondary text-white px-4 py-2 rounded hover:bg-primary transition-colors hidden">
‫<طباعة التقرير‬/button>
<button id="exportInventoryReport" class="bg-green-
500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors hidden">‫تصدير‬
‫<للإكسل‬/button>
</div>
</div>

<div id="inventoryReportContent" class="mt-6 hidden">

<div class="p-4 mb-4 bg-blue-50 border border-blue-200

rounded-lg dark:bg-blue-900/30 dark:border-blue-800">
<div class="flex justify-between items-center mb-
2">
<h4 class="text-lg font-bold text-blue-600
dark:text-blue-300">‫<ملخص المخزون‬/h4>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="p-3 bg-white border rounded shadow-
sm dark:bg-gray-800 dark:border-gray-700">
<div class="font-bold text-gray-600
dark:text-gray-300">‫<إجمالي الأصناف‬/div>
<div id="totalItemsCount" class="text-2xl
font-bold text-primary">0</div>
</div>
<div class="p-3 bg-white border rounded shadow-
sm dark:bg-gray-800 dark:border-gray-700">
<div class="font-bold text-gray-600
dark:text-gray-300">‫<إجمالي قيمة المخزون‬/div>
<div id="totalInventoryValue" class="text-
2xl font-bold text-primary">0.00</div>
</div>
<div class="p-3 bg-white border rounded shadow-
sm dark:bg-gray-800 dark:border-gray-700">
<div class="font-bold text-gray-600
dark:text-gray-300">‫<أصناف منخفضة المخزون‬/div>
<div id="lowStockCount" class="text-2xl
font-bold text-red-600 dark:text-red-500">0</div>
</div>
<div class="p-3 bg-white border rounded shadow-
sm dark:bg-gray-800 dark:border-gray-700">
<div class="font-bold text-gray-600
dark:text-gray-300">‫<متوسط سعر الوحدة‬/div>
<div id="averageUnitPrice" class="text-2xl
font-bold text-secondary">0.00</div>
</div>
</div>
</div>

<div id="inventoryReportTable" class="table-container">

// ‫تحديث حالة الوضع المظلم‬

if (userPrefersDark) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}

// ‫االستماع للتغييرات في تفضيالت المستخدم‬

// ============================
// ‫إضافة مكون إدارة الإشعارات‬
// ============================
const ToastManager = {
show: function(message, type = 'info', duration = 3000) {
const container = document.getElementById('toastContainer');
if (!container) return;

const toast = document.createElement('div');

toast.className = `toast ${type}`;
toast.innerHTML = `
<span>${message}</span>
<span class="close-toast mr-2">×</span>
`;

container.appendChild(toast);

// Trigger animation after insert

setTimeout(() => {
toast.classList.add('visible');
}, 50);

// Add event listener to close button

const closeBtn = toast.querySelector('.close-toast');
if (closeBtn) {
closeBtn.addEventListener('click', () => {
this.hide(toast);
});
}

// Auto hide after duration

if (duration > 0) {
setTimeout(() => {
this.hide(toast);
}, duration);
}

return toast;
},

hide: function(toast) {
toast.classList.remove('visible');
setTimeout(() => {
if (toast && toast.parentNode) {
toast.parentNode.removeChild(toast);
}
}, 300);
},

success: function(message, duration = 3000) {

return this.show(message, 'success', duration);
},

error: function(message, duration = 4000) {

return this.show(message, 'error', duration);
},
info: function(message, duration = 3000) {
return this.show(message, 'info', duration);
}
};

// ============================
// )‫مكون إدارة الموداالت (مربعات الحوار‬
// ============================
const ModalManager = {
modals: [],

create: function(options) {
const modal = document.createElement('div');
modal.className = 'modal-overlay';
modal.setAttribute('role', 'dialog');
modal.setAttribute('aria-modal', 'true');

const content = options.content || '';

const title = options.title || '';
const okText = options.okText || '‫;'موافق‬
const cancelText = options.cancelText || '‫;'إلغاء‬
const showFooter = options.showFooter !== false;

modal.innerHTML = `
<div class="modal-content p-6 relative">
${title ? `<h3 class="text-xl font-bold text-secondary mb-
4">${title}</h3>` : ''}
<div class="modal-body">
${content}
</div>
${showFooter ? `
<div class="flex justify-end mt-4 gap-2">
${options.showCancel !== false ? `<button
class="modal-cancel bg-gray-300 text-gray-800 px-4 py-2 rounded hover:bg-gray-400
transition-colors">${cancelText}</button>` : ''}
<button class="modal-ok bg-primary text-white px-4
py-2 rounded hover:bg-secondary transition-colors">${okText}</button>
</div>
` : ''}
<button class="modal-close absolute top-2 left-2 text-gray-
500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
<span class="sr-only">‫<إغالق‬/span>
</button>
</div>
`;

document.body.appendChild(modal);

// ‫ادارة اغالق المودال عند الضغط خارجه‬

modal.addEventListener('click', (e) => {
if (e.target === modal && options.closeOnOutsideClick !==
false) {
this.close(modal);
if (options.onCancel) options.onCancel();
}
});

// ‫أزرار الإغالق‬
const closeBtn = modal.querySelector('.modal-close');
if (closeBtn) {
closeBtn.addEventListener('click', () => {
this.close(modal);
if (options.onCancel) options.onCancel();
});
}

// ‫زر الإلغاء‬
const cancelBtn = modal.querySelector('.modal-cancel');
if (cancelBtn) {
cancelBtn.addEventListener('click', () => {
this.close(modal);
if (options.onCancel) options.onCancel();
});
}

// ‫زر الموافقة‬
const okBtn = modal.querySelector('.modal-ok');
if (okBtn) {
okBtn.addEventListener('click', () => {
if (options.onOk) options.onOk(modal);
if (options.closeOnOk !== false) {
this.close(modal);
}
});
}

// ‫اضف المودال إلى المصفوفة‬

this.modals.push(modal);

// ‫حرك المودال إلى الواجهة‬

setTimeout(() => {
modal.classList.add('active');
}, 50);

// ‫ إضافة مستمع للإغالق بضغط‬ESC

const escapeHandler = (e) => {
if (e.key === 'Escape' && options.closeOnEscape !== false) {
this.close(modal);
if (options.onCancel) options.onCancel();
document.removeEventListener('keydown', escapeHandler);
}
};

document.addEventListener('keydown', escapeHandler);

return modal;
},

close: function(modal) {
modal.classList.remove('active');
setTimeout(() => {
if (modal && modal.parentNode) {
modal.parentNode.removeChild(modal);
// ‫إزالة المودال من المصفوفة‬
this.modals = this.modals.filter(m => m !== modal);
}
}, 300);
},

closeAll: function() {
[...this.modals].forEach(modal => {
this.close(modal);
});
},

alert: function(message, title = '‫'تنبيه‬, callback = null) {

return this.create({
title: title,
content: `<p>${message}</p>`,
showCancel: false,
onOk: callback
});
},

confirm: function(message, onConfirm, onCancel = null, title = '‫)'تأكيد‬

{
return this.create({
title: title,
content: `<p>${message}</p>`,
onOk: onConfirm,
onCancel: onCancel
});
},

prompt: function(message, defaultValue = '', onConfirm, onCancel =

null, title = '‫{ )'إدخال‬
const inputId = 'prompt-input-' + Date.now();
const modal = this.create({
title: title,
content: `
<p class="mb-2">${message}</p>
<input type="text" id="${inputId}" class="w-full p-2 border
border-gray-300 rounded text-base" value="${defaultValue}">
`,
onOk: (modal) => {
const input = modal.querySelector(`#${inputId}`);
const value = input ? input.value : '';
if (onConfirm) onConfirm(value);
},
onCancel: onCancel
});

// ‫ركز على حقل الإدخال‬

setTimeout(() => {
const input = modal.querySelector(`#${inputId}`);
if (input) input.focus();
}, 100);

return modal;
}
};
// ============================
// ‫تحسين االصطفاف للتيبالت‬
// ============================
function setupTableSorting(tableId, options = {}) {
const table = document.getElementById(tableId);
if (!table) return;

const thead = table.querySelector('thead');

if (!thead) return;

const headerCells = thead.querySelectorAll('th');

const tbody = table.querySelector('tbody');
if (!tbody) return;

const excludedColumns = options.excludedColumns || [];

// ‫ تحويله إلى نص أو رقم للمقارنة‬،‫وظيفة للحصول على قيمة العمود‬

function getCellValue(row, index) {
const cell = row.cells[index];
if (!cell) return '';

// ‫تجنب المقارنة على أعمدة مع أزرار أو عناصر تفاعلية‬

if (cell.querySelector('button') || cell.querySelector('input') ||
cell.querySelector('select')) {
return '';
}

// ‫تحقق إذا كانت القيمة رقمية‬

const text = cell.textContent.trim();
if (!isNaN(text.replace(/[,\s]/g, ''))) {
return parseFloat(text.replace(/[,\s]/g, ''));
}

return text.toLowerCase();
}

// ‫إضافة مؤشرات الفرز للعناوين‬

headerCells.forEach((th, i) => {
// ‫تجاوز الأعمدة المستبعدة‬
if (excludedColumns.includes(i)) return;

th.classList.add('cursor-pointer', 'select-none');
th.setAttribute('tabindex', '0');

// ‫إضافة مؤشر الفرز‬

const sortIndicator = document.createElement('span');
sortIndicator.className = 'sort-indicator mr-1 opacity-0
transition-opacity';
sortIndicator.innerHTML = '▲';
th.appendChild(sortIndicator);

// ‫إضافة مستمع الحدث للنقر‬

th.addEventListener('click', function() {
sortTable(i, this);
});

// ‫دعم لوحة المفاتيح‬

th.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
sortTable(i, this);
}
});
});

function sortTable(columnIndex, header) {

// ‫تجاوز الأعمدة المستبعدة‬
if (excludedColumns.includes(columnIndex)) return;

const rows = Array.from(tbody.rows);

const indicator = header.querySelector('.sort-indicator');

// ‫إعادة تعيين جميع المؤشرات‬

headerCells.forEach(th => {
const ind = th.querySelector('.sort-indicator');
if (ind && th !== header) {
ind.classList.add('opacity-0');
ind.innerHTML = '▲';
}
});

// ‫تحديد اتجاه الفرز‬

const isAscending = indicator.innerHTML === '▼';
indicator.innerHTML = isAscending ? '▲' : '▼';
indicator.classList.remove('opacity-0');

// ‫فرز الصفوف‬
rows.sort((a, b) => {
const aValue = getCellValue(a, columnIndex);
const bValue = getCellValue(b, columnIndex);

if (typeof aValue === 'number' && typeof bValue === 'number') {

return isAscending ? aValue - bValue : bValue - aValue;
} else {
return isAscending
? aValue.toString().localeCompare(bValue.toString())
: bValue.toString().localeCompare(aValue.toString());
}
});

// ‫إعادة ترتيب الصفوف في الجدول‬

tbody.innerHTML = '';
rows.forEach(row => tbody.appendChild(row));
}
}

// ============================
// ‫ترقيم الصفحات للجداول‬
// ============================
function setupTablePagination(tableId, paginationId, itemsPerPage = 10) {
const table = document.getElementById(tableId);
const pagination = document.getElementById(paginationId);

if (!table || !pagination) return;

const tbody = table.querySelector('tbody');

if (!tbody) return;
let currentPage = 1;
let rows = Array.from(tbody.rows);

// ‫إعداد ترقيم الصفحات‬

function setupPagination() {
pagination.innerHTML = '';

// ‫إضافة زر الصفحة السابقة‬

const prevButton = document.createElement('button');
prevButton.className = 'px-3 py-1 mx-1 bg-gray-200 dark:bg-gray-700
rounded';
prevButton.innerHTML = '«';
prevButton.addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
showPage(currentPage);
}
});
pagination.appendChild(prevButton);

// ‫إضافة أزرار الصفحات‬

const pageCount = Math.ceil(rows.length / itemsPerPage);

// ‫محدودية عدد أزرار الصفحات المعروضة‬

const maxVisiblePages = 5;
let startPage = Math.max(1, currentPage -
Math.floor(maxVisiblePages / 2));
let endPage = Math.min(pageCount, startPage + maxVisiblePages - 1);

if (endPage - startPage + 1 < maxVisiblePages) {

startPage = Math.max(1, endPage - maxVisiblePages + 1);
}

// ‫إضافة زر للصفحة الأولى إذا لم تكن مرئية‬

if (startPage > 1) {
const firstPageBtn = document.createElement('button');
firstPageBtn.className = 'px-3 py-1 mx-1 bg-gray-200 dark:bg-
gray-700 rounded';
firstPageBtn.textContent = '1';
firstPageBtn.addEventListener('click', () => {
currentPage = 1;
showPage(currentPage);
});
pagination.appendChild(firstPageBtn);

if (startPage > 2) {
const ellipsis = document.createElement('span');
ellipsis.className = 'px-3 py-1';
ellipsis.textContent = '...';
pagination.appendChild(ellipsis);
}
}

// ‫أزرار الصفحات المرئية‬

for (let i = startPage; i <= endPage; i++) {
const pageButton = document.createElement('button');
pageButton.className = `px-3 py-1 mx-1 rounded ${currentPage
=== i ? 'bg-primary text-white' : 'bg-gray-200 dark:bg-gray-700'}`;
pageButton.textContent = i;
pageButton.addEventListener('click', () => {
currentPage = i;
showPage(currentPage);
});
pagination.appendChild(pageButton);
}

// ‫إضافة زر للصفحة الأخيرة إذا لم تكن مرئية‬

if (endPage < pageCount) {
if (endPage < pageCount - 1) {
const ellipsis = document.createElement('span');
ellipsis.className = 'px-3 py-1';
ellipsis.textContent = '...';
pagination.appendChild(ellipsis);
}

const lastPageBtn = document.createElement('button');

lastPageBtn.className = 'px-3 py-1 mx-1 bg-gray-200 dark:bg-
gray-700 rounded';
lastPageBtn.textContent = pageCount;
lastPageBtn.addEventListener('click', () => {
currentPage = pageCount;
showPage(currentPage);
});
pagination.appendChild(lastPageBtn);
}

// ‫إضافة زر الصفحة التالية‬

const nextButton = document.createElement('button');
nextButton.className = 'px-3 py-1 mx-1 bg-gray-200 dark:bg-gray-700
rounded';
nextButton.innerHTML = '»';
nextButton.addEventListener('click', () => {
if (currentPage < pageCount) {
currentPage++;
showPage(currentPage);
}
});
pagination.appendChild(nextButton);
}

// ‫عرض صفحة معينة‬

function showPage(page) {
const startIndex = (page - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;

// ‫إخفاء جميع الصفوف ثم إظهار الصفوف المطلوبة فقط‬

rows.forEach((row, index) => {
row.style.display = (index >= startIndex && index < endIndex) ?
'' : 'none';
});

// ‫تحديث ترقيم الصفحات‬

setupPagination();
}

// ‫تحديث الصفوف عند تغيير محتوى الجدول‬

function updateRows() {
rows = Array.from(tbody.rows);
currentPage = 1;
showPage(currentPage);
}

// ‫البدء بعرض الصفحة الأولى‬

showPage(currentPage);

// ‫إرجاع وظائف للتحديث‬

return {
updateRows,
showPage: (page) => {
currentPage = page;
showPage(page);
},
refresh: () => showPage(currentPage)
};
}

// ============================
// ‫مدير البحث في الجداول‬
// ============================
function setupTableSearch(searchInputId, tableId, options = {}) {
const searchInput = document.getElementById(searchInputId);
const table = document.getElementById(tableId);

if (!searchInput || !table) return;

const tbody = table.querySelector('tbody');

if (!tbody) return;

const searchableColumns = options.searchableColumns || null; // null

‫يعني البحث في كل الأعمدة‬
const paginationManager = options.paginationManager || null;

// ‫( وظيفة تأخير البحث لتحسين الأداء‬debounce)

let debounceTimer;
function debounce(func, delay = 300) {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(func, delay);
}

// ‫وظيفة البحث‬
function performSearch() {
const searchTerm = searchInput.value.toLowerCase();
const rows = Array.from(tbody.rows);
let matchCount = 0;

// ‫فلترة الصفوف‬
rows.forEach(row => {
let shouldShow = false;

// ‫البحث في أعمدة محددة أو جميع الأعمدة‬

const columnsToSearch = searchableColumns ||
Array.from(Array(row.cells.length).keys());

for (const colIndex of columnsToSearch) {

if (row.cells[colIndex]) {
const cellText =
row.cells[colIndex].textContent.toLowerCase();
if (cellText.includes(searchTerm)) {
shouldShow = true;
break;
}
}
}

if (paginationManager) {
// ‫ نخفي الصفوف غير المطابقة‬،‫إذا كان هناك مدير ترقيم صفحات‬
‫ونحدث مدير الترقيم‬
row.dataset.searchMatch = shouldShow ? 'true' : 'false';
if (shouldShow) matchCount++;
} else {
// ‫مباشرة تحديث عرض الصفوف بدون ترقيم صفحات‬
row.style.display = shouldShow ? '' : 'none';
if (shouldShow) matchCount++;
}
});

// ‫تحديث ترقيم الصفحات إذا كان موجودًا‬

if (paginationManager) {
// ‫ نعرض كل الصفوف ونعيد ترقيم الصفحات‬،‫إذا كان البحث فارغًا‬
if (searchTerm === '') {
rows.forEach(row => {
delete row.dataset.searchMatch;
});
paginationManager.updateRows();
} else {
// ‫عرض نتائج البحث فقط وإخفاء ترقيم الصفحات إذا كانت‬
‫النتائج قليلة‬
rows.forEach(row => {
row.style.display = row.dataset.searchMatch ===
'true' ? '' : 'none';
});
}
}

// ‫عرض رسالة إذا لم تكن هناك نتائج‬

if (matchCount === 0) {
let existingMessage = tbody.querySelector('.no-results-
message');

if (!existingMessage) {
const noResultsRow = document.createElement('tr');
noResultsRow.className = 'no-results-message';
noResultsRow.innerHTML = `<td colspan="$
{table.querySelectorAll('thead th').length}" class="text-center py-4"> ‫ال توجد نتائج‬
‫<للبحث‬/td>`;
tbody.appendChild(noResultsRow);
}
} else {
const existingMessage = tbody.querySelector('.no-results-
message');
if (existingMessage) {
existingMessage.remove();
}
}
}
// ‫إضافة مستمع للبحث مع تأخير‬
searchInput.addEventListener('input', () => {
debounce(performSearch);
});

// ‫إضافة زر مسح البحث‬

const clearButton = document.createElement('button');
clearButton.className = 'absolute top-2.5 right-2 text-gray-400
hover:text-gray-600 focus:outline-none';
clearButton.type = 'button';
clearButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0
0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000
16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10
11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-
1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>
<span class="sr-only">‫<مسح البحث‬/span>
`;
clearButton.addEventListener('click', () => {
searchInput.value = '';
performSearch();
searchInput.focus();
});

// ‫إضافة الزر للواجهة‬

const searchInputParent = searchInput.parentElement;
searchInputParent.style.position = 'relative';
searchInputParent.appendChild(clearButton);

// ‫تحديث مع البداية‬
clearButton.style.opacity = '0';

// ‫إظهار وإخفاء زر المسح‬

searchInput.addEventListener('input', () => {
clearButton.style.opacity = searchInput.value ? '1' : '0';
});

return {
search: performSearch
};
}

// ============================
// ‫مدير التصدير للإكسل‬
// ============================
function exportTableToExcel(tableId, fileName = 'exported_data', options =
{}) {
const table = document.getElementById(tableId);
if (!table) {
ToastManager.error('‫;)'لم يتم العثور على الجدول المطلوب للتصدير‬
return;
}

try {
// ‫معالجة الخيارات‬
const sheetName = options.sheetName || 'Sheet1';
const includeHidden = options.includeHidden !== false;
const excludeColumns = options.excludeColumns || [];
const headerMap = options.headerMap || {}; // ‫تخصيص عناوين الأعمدة‬

// ‫إنشاء مصفوفة بيانات‬

const data = [];

// ‫إضافة الترويسة‬
const headerRow = [];
const headers = table.querySelectorAll('thead th');
headers.forEach((header, index) => {
if (!excludeColumns.includes(index)) {
// ‫استخدام االسم المخصص أو نص العنوان الأصلي‬
headerRow.push(headerMap[index] ||
header.textContent.trim());
}
});
data.push(headerRow);

// ‫إضافة الصفوف‬
const rows = table.querySelectorAll('tbody tr');
rows.forEach(row => {
// ‫تخطي الصفوف المخفية إذا تم تحديد ذلك‬
if (!includeHidden && row.style.display === 'none') {
return;
}

const rowData = [];

row.querySelectorAll('td').forEach((cell, index) => {
if (!excludeColumns.includes(index)) {
// ‫ تنظيف البيانات من‬HTML ‫وتحويل الأرقام‬
let cellData = cell.textContent.trim();

// ‫تحويل النص إلى رقم إذا كان رقًما‬

if (!isNaN(cellData.replace(/[,\s]/g, ''))) {
cellData = parseFloat(cellData.replace(/[,\s]/g,
''));
}

rowData.push(cellData);
}
});

// ‫إضافة الصف فقط إذا كان يحتوي على بيانات‬

if (rowData.some(cell => cell !== '')) {
data.push(rowData);
}
});

// ‫إنشاء ورقة عمل‬

const ws = XLSX.utils.aoa_to_sheet(data);

// ‫إنشاء كتاب عمل وإضافة ورقة العمل‬

const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, sheetName);

// ‫تنزيل الملف‬
XLSX.writeFile(wb, `${fileName}.xlsx`);

ToastManager.success('‫;)'تم تصدير البيانات بنجاح‬

} catch (error) {
console.error('‫خطأ في تصدير البيانات‬:', error);
ToastManager.error('‫;)'حدث خطأ أثناء تصدير البيانات‬
}
}

// ============================
// ‫تحسين وظائف التخزين المحلي‬
// ============================
const SupplierStorage = {
// ‫تحسين الوظائف العامة مع معالجة الأخطاء‬
saveData: function(key, data) {
try {
localStorage.setItem(key, JSON.stringify(data));
return true;
} catch (error) {
// ‫معالجة خطأ امتالء التخزين‬
if (error instanceof DOMException && (error.code === 22 ||
error.name === 'QuotaExceededError')) {
ToastManager.error(' ‫ حاول إزالة‬.‫ال توجد مساحة كافية للتخزين‬
‫بعض البيانات غير المستخدمة‬.');
} else {
console.error(`‫( خطأ في حفظ البيانات‬${key}):`, error);
ToastManager.error('‫;)'حدث خطأ أثناء حفظ البيانات‬
}
return false;
}
},

getData: function(key, defaultValue = null) {

try {
const data = localStorage.getItem(key);
return data ? JSON.parse(data) : defaultValue;
} catch (error) {
console.error(`‫( خطأ في استرجاع البيانات‬${key}):`, error);
return defaultValue;
}
},

removeData: function(key) {
try {
localStorage.removeItem(key);
return true;
} catch (error) {
console.error(`‫( خطأ في حذف البيانات‬${key}):`, error);
return false;
}
},

// ‫وظائف محسنة للموردين‬

saveSuppliers: function(suppliers) {
return this.saveData('suppliers', suppliers);
},

getSuppliers: function() {
return this.getData('suppliers', []);
},

// ‫وظائف محسنة لكشوفات الحساب‬

saveStatements: function(supplierId, statements) {
return this.saveData(`statements_${supplierId}`, statements);
},

getStatements: function(supplierId) {
return this.getData(`statements_${supplierId}`, []);
},

// ‫وظائف محسنة للعمليات غير المرحلة‬

saveUnpostedTransactions: function(supplierId, transactions) {
return this.saveData(`unposted_${supplierId}`, transactions);
},

getUnpostedTransactions: function(supplierId) {
return this.getData(`unposted_${supplierId}`, []);
},

// ‫وظائف محسنة لبيانات المطابقة‬

saveMatchingData: function(supplierId, matchingData) {
return this.saveData(`matching_${supplierId}`, matchingData);
},

getMatchingData: function(supplierId) {
return this.getData(`matching_${supplierId}`, []);
},

// ‫وظائف محسنة لبيانات العمولة‬

saveCommissionData: function(supplierId, commissionData) {
return this.saveData(`commission_${supplierId}`, commissionData);
},

getCommissionData: function(supplierId) {
return this.getData(`commission_${supplierId}`, []);
},

// ‫وظائف محسنة لبيانات الشركة‬

saveCompanyInfo: function(companyInfo) {
return this.saveData('companyInfo', companyInfo);
},

getCompanyInfo: function() {
return this.getData('companyInfo', {
nameAr: '',
nameEn: '',
branch: '',
address: '',
mobile: '',
whatsapp: '',
phone: '',
email: '',
logo: '',
logoSize: 80
});
},

// ‫وظائف محسنة لإعدادات النظام‬

saveSystemSettings: function(settings) {
return this.saveData('systemSettings', settings);
},
getSystemSettings: function() {
return this.getData('systemSettings', {
name: '‫'نظام إدارة الموردين‬,
version: '1.3'
});
},

// ‫وظائف محسنة للإعدادات الإقليمية‬

saveRegionalSettings: function(settings) {
return this.saveData('regionalSettings', settings);
},

getRegionalSettings: function() {
return this.getData('regionalSettings', {
currency: 'YER',
numberFormat: 'comma',
allowNegative: true
});
},

// ‫وظائف محسنة لإعدادات العمولة‬

saveCommissionSetup: function(supplierId, setupData) {
return this.saveData(`commission_setup_${supplierId}`, setupData);
},

getCommissionSetup: function(supplierId) {
return this.getData(`commission_setup_${supplierId}`, {
defaultType: 'cash',
defaultPercentage: 10,
defaultBasis: 'purchases',
docTypes: []
});
},

// ‫وظائف محسنة لرقم كشف الحساب‬

getNextStatementNumber: function() {
try {
let number = parseInt(localStorage.getItem('statementNumber')
|| '0');
number++;
localStorage.setItem('statementNumber', number.toString());
return number;
} catch (error) {
console.error("‫خطأ في إنشاء رقم كشف حساب جديد‬:", error);
return new Date().getTime(); // ‫استخدام الطابع الزمني كرقم بديل‬
}
},

getCurrentStatementNumber: function() {
try {
return parseInt(localStorage.getItem('statementNumber') ||
'0');
} catch (error) {
console.error("‫خطأ في استرجاع رقم كشف الحساب الحالي‬:", error);
return 0;
}
},
// ‫وظائف محسنة لمعلومات كشف الحساب‬
saveStatementInfo: function(statementNumber, supplierId, date,
recordCount) {
try {
const statementInfo = {
number: statementNumber,
supplierId: supplierId,
date: date,
recordCount: recordCount,
createdAt: new Date().toISOString()
};

// ‫الحصول على سجالت كشوفات الحساب الموجودة‬

let statements = this.getData('statementRecords', []);
statements.push(statementInfo);

return this.saveData('statementRecords', statements);

} catch (error) {
console.error("‫خطأ في حفظ معلومات كشف الحساب‬:", error);
return false;
}
},

// ‫الحصول على جميع سجالت كشوفات الحساب‬

getAllStatementRecords: function() {
return this.getData('statementRecords', []);
},

// ‫وظائف محسنة لأنواع المستندات‬

saveDocumentTypes: function(docTypes) {
return this.saveData('documentTypes', docTypes);
},

getDocumentTypes: function() {
return this.getData('documentTypes', DEFAULT_DOC_TYPES);
},

// ‫وظائف مخزون الموردين‬

saveInventoryItems: function(supplierId, items) {
return this.saveData(`inventory_${supplierId}`, items);
},

getInventoryItems: function(supplierId) {
return this.getData(`inventory_${supplierId}`, []);
},

// ‫وظائف إشعارات العموالت‬

saveCommissionNotifications: function(notifications) {
return this.saveData('commission_notifications', notifications);
},

getCommissionNotifications: function() {
return this.getData('commission_notifications', []);
},

// ‫طرق مساعدة للتحكم في التخزين‬

clearAll: function() {
try {
localStorage.clear();
return true;
} catch (error) {
console.error("‫خطأ في مسح جميع البيانات‬:", error);
return false;
}
},

// ‫الحصول على حجم التخزين المستخدم‬

getStorageUsage: function() {
try {
let totalSize = 0;
for (let key in localStorage) {
if (localStorage.hasOwnProperty(key)) {
totalSize += ((localStorage[key].length + key.length) *
2) / 1024; // ‫بالكيلوبايت‬
}
}
return {
used: totalSize,
limit: 5 * 1024, // ‫ ميجابايت‬5 ‫تقريًبا‬
percentage: (totalSize / (5 * 1024)) * 100
};
} catch (error) {
console.error("‫خطأ في حساب استخدام التخزين‬:", error);
return { used: 0, limit: 5 * 1024, percentage: 0 };
}
},

// ‫إنشاء نسخة احتياطية من جميع البيانات‬

createBackup: function() {
try {
let backup = {};
for (let key in localStorage) {
if (localStorage.hasOwnProperty(key)) {
backup[key] = localStorage.getItem(key);
}
}

const backupStr = JSON.stringify(backup);

const backupBlob = new Blob([backupStr], { type:
'application/json' });
const url = URL.createObjectURL(backupBlob);

const a = document.createElement('a');
a.href = url;
a.download = `suppliers_backup_${new
Date().toISOString().slice(0, 10)}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);

return true;
} catch (error) {
console.error("‫خطأ في إنشاء نسخة احتياطية‬:", error);
return false;
}
},
‫استعادة النسخة االحتياطية ‪//‬‬
‫{ )‪restoreBackup: function(backupData‬‬
‫{ ‪try‬‬
‫مسح البيانات الحالية ‪//‬‬
‫;)(‪localStorage.clear‬‬

‫استعادة البيانات ‪//‬‬

‫{ )‪for (let key in backupData‬‬
‫;)]‪localStorage.setItem(key, backupData[key‬‬
‫}‬

‫;‪return true‬‬
‫{ )‪} catch (error‬‬
‫;)‪:", error‬خطأ في استعادة النسخة االحتياطية"(‪console.error‬‬
‫;‪return false‬‬
‫}‬
‫}‬
‫;}‬

‫============================ ‪//‬‬
‫أنواع المستندات االفتراضية ‪//‬‬
‫============================ ‪//‬‬
‫[ = ‪const DEFAULT_DOC_TYPES‬‬
‫{‬
‫‪',‬رصيد افتتاحي' ‪type:‬‬
‫الرصيد الإفتتــاحي‪,‬رصيد افتتاحي‪,‬الرصيد االفتتاحي‪,‬الرصيد ' ‪keywords:‬‬
‫'الأول‪,‬رصيد أول المدة‪,‬رصيد اول‬
‫‪},‬‬
‫{‬
‫‪',‬فاتورة تعويض مجانيه' ‪type:‬‬
‫فاتورة تعويض رقم‪,‬فاتورة تعويض مجانيه‪,‬فاتورة تعويض‪,‬تعويض' ‪keywords:‬‬
‫'مجان‪,‬بضاعة مجانية‪,‬تعويض عن‪,‬فاتورة مجانية‬
‫‪},‬‬
‫{‬
‫‪',‬فاتورة مشترات آجله' ‪type:‬‬
‫لكم فاتورة مشتروات آجلة رقم‪,‬لكم فاتورة مشتريات ' ‪keywords:‬‬
‫آجلة‪,‬فاتورة مشتريات اجل‪,‬لكم فاتورة مشتريات اجله‪,‬مشتريات آجلة‪,‬فاتورة آجل‪,‬مشترات‬
‫'آجل‪,‬فاتورة مشتريات بالأجل‬
‫‪},‬‬
‫{‬
‫‪',‬فاتورة مشتريات نقدية' ‪type:‬‬
‫فاتورة مشتروات نقديةرقم‪,‬فاتورة مشتريات نقدية رقم‪,‬فاتورة' ‪keywords:‬‬
‫'مشتريات نقدي‪,‬مشتريات نقد‪,‬مشتريات كاش‪,‬فاتورة نقد‪,‬مشتريات نقدية‬
‫‪},‬‬
‫{‬
‫‪',‬سند صرف نقدي' ‪type:‬‬
‫عليكم أمر صرف نقدي رقم‪,‬عليكم امر صرف نقدي رقم‪,‬امر صرف ' ‪keywords:‬‬
‫نقدي‪,‬سند صرف نقد‪,‬صرف نقد‪,‬دفع نقدي‪,‬نقدية للمورد‪,‬سداد نقدي‪,‬دفعة نقدية‪,‬تحويل نقدي‪,‬أمر‬
‫'صرف نقدي رقم‬
‫‪},‬‬
‫{‬
‫‪',‬مرود مشتريات اجل' ‪type:‬‬
‫عليكم مردودمشتروات رقم‪,‬مردود مشتريات رقم‪,‬مرتجع ' ‪keywords:‬‬
‫مشتريات‪,‬ارتجاع مشتريات‪,‬مردود مشتريات اجل‪,‬مرتجع مشتروات‪,‬مردودات مشتريات‪,‬ارجاع‬
‫'مشتريات‪,‬مرجوع مشتريات‪,‬مردودمشتروات رقم‬
‫‪},‬‬
‫{‬
‫‪',‬سند صرف شيك' ‪type:‬‬
‫أمر صرف شيكات رقم‪,‬امر صرف شيك‪,‬سند صرف شيك‪,‬دفع شيك‪,‬شيك ' ‪keywords:‬‬
‫دفع بشيك‬,‫سداد شيك‬,‫دفعة بشيك‬,‫شيك مسحوب‬,‫شيك بنكي‬,‫'رقم‬
},
{
type: '‫'قيد يومية‬,
keywords: ' ‫قيد‬,‫قيد اليومية‬,‫قيد تسوية‬,‫سند قيد‬,‫قيد محاسبي‬,‫قيد يومية‬
‫قيد اليومية العامة‬,‫قيد فروق‬,‫قيد التسويات رقم‬,‫قيد تصحيح‬,‫قيد تعديل‬,‫'عام‬
},
{
type: '‫'قيد فارق عملة‬,
keywords: '‫قيد فارق عملة‬,‫فرق العملة‬,‫'قيد فروق العملة‬
},
{
type: '‫'عمولة نقدية‬,
keywords: '‫خصم عمولة‬,‫عمولة نقدية‬,‫اشعار خصم‬,‫'إشعار خصم رقم‬
},
{
type: '‫'اشعار مدين‬,
keywords: '‫مدين‬,‫خصم على المورد‬,‫اشعار خصم‬,‫إشعار مدين‬,‫اشعار مدين رقم‬
‫خصم مورد‬,‫'بقيمة‬
},
{
type: '‫'اشعار دائن‬,
keywords: '‫اضافة‬,‫إشعار اضافة‬,‫اشعار اضافه‬,‫إشعار دائن‬,‫اشعار دائن رقم‬
‫إضافة للمورد‬,‫'رصيد‬
},
{
type: '‫'مرتجع مشتريات نقدية‬,
keywords: ' ‫مردود‬,‫ارتجاع مشتريات نقدية‬,‫مرتجع مشتريات نقدية‬
‫ارجاع نقدي‬,‫'نقدي‬
}
];

// ============================
// ‫وظائف تنسيق الأرقام‬
// ============================
function formatNumber(number) {
const settings = SupplierStorage.getRegionalSettings();

// ‫التحقق من القيم السالبة‬

if (!settings.allowNegative && number < 0) {
number = 0;
}

// ‫تنسيق الرقم حسب الإعدادات الإقليمية‬

let formattedNumber;
try {
switch(settings.numberFormat) {
case 'dot':
formattedNumber = number.toLocaleString('de-DE',
{ minimumFractionDigits: 2, maximumFractionDigits: 2 });
break;
case 'space':
formattedNumber = number.toLocaleString('fr-FR',
{ minimumFractionDigits: 2, maximumFractionDigits: 2 }).replace(',', '.');
break;
case 'comma':
default:
formattedNumber = number.toLocaleString('en-US',
{ minimumFractionDigits: 2, maximumFractionDigits: 2 });
break;
}
} catch (error) {
console.error("‫خطأ في تنسيق الرقم‬:", error);
formattedNumber = number.toFixed(2);
}

return formattedNumber;
}

// ‫عرض العملة والرقم مع التنسيق‬

function formatCurrency(number) {
const settings = SupplierStorage.getRegionalSettings();
return `${formatNumber(number)} ${settings.currency}`;
}

// ============================
// ‫التعرف على نوع المستند‬
// ============================
function detectDocumentType(description) {
if (!description) return '';

description = description.trim().toLowerCase();

// ‫الحصول على تعريفات أنواع المستندات الحالية‬

const docTypes = SupplierStorage.getDocumentTypes();

// ‫التحقق من كل نوع مستند‬

for (const docType of docTypes) {
const keywords = docType.keywords.split(',');
for (const keyword of keywords) {
if (keyword &&
description.includes(keyword.trim().toLowerCase())) {
return docType.type;
}
}
}

// ‫القيمة االفتراضية إذا لم يتم العثور على تطابق‬

return '‫;'أخرى‬
}

// ============================
// ‫تحليل التاريخ العربي‬
// ============================
function parseArabicDate(dateStr) {
if (!dateStr) return null;

// ‫معالجة تنسيقات التاريخ المختلفة‬

let dateParts;
let year, month, day;

try {
if (dateStr.includes('/')) {
// ‫ التنسيق‬DD/MM/YYYY ‫أو ما شابه‬
dateParts = dateStr.split('/');
if (dateParts.length === 3) {
if (dateParts[2].length === 2) {
year = parseInt('20' + dateParts[2]);
} else {
year = parseInt(dateParts[2]);
}

// ‫التحقق من أي جزء هو اليوم وأيهما الشهر بناًء على‬

‫النطاقات النموذجية‬
if (parseInt(dateParts[0]) > 12) {
day = parseInt(dateParts[0]);
month = parseInt(dateParts[1]);
} else if (parseInt(dateParts[1]) > 12) {
day = parseInt(dateParts[1]);
month = parseInt(dateParts[0]);
} else {
// ‫ االفتراضي للتنسيق العربي‬DD/MM/YYYY
day = parseInt(dateParts[0]);
month = parseInt(dateParts[1]);
}
} else {
return null;
}
} else if (dateStr.includes('-')) {
// ‫ التنسيق‬YYYY-MM-DD ‫ أو‬DD-MM-YYYY
dateParts = dateStr.split('-');
if (dateParts.length === 3) {
if (dateParts[0].length === 4) {
// YYYY-MM-DD
year = parseInt(dateParts[0]);
month = parseInt(dateParts[1]);
day = parseInt(dateParts[2]);
} else {
// DD-MM-YYYY
if (dateParts[2].length === 2) {
year = parseInt('20' + dateParts[2]);
} else {
year = parseInt(dateParts[2]);
}

// ‫التحقق من أي جزء هو اليوم وأيهما الشهر‬

if (parseInt(dateParts[0]) > 12) {
day = parseInt(dateParts[0]);
month = parseInt(dateParts[1]);
} else if (parseInt(dateParts[1]) > 12) {
day = parseInt(dateParts[1]);
month = parseInt(dateParts[0]);
} else {
// ‫ االفتراضي للتنسيق العربي‬DD-MM-YYYY
day = parseInt(dateParts[0]);
month = parseInt(dateParts[1]);
}
}
} else {
return null;
}
} else {
// ‫ محاولة تحليل كتاريخ‬ISO
const date = new Date(dateStr);
if (!isNaN(date.getTime())) {
return date;
}
return null;
}

// ‫إنشاء كائن تاريخ‬

const date = new Date(year, month - 1, day);

// )31/04 ‫التحقق من صحة التاريخ (للكشف عن التواريخ غير الصالحة مثل‬

if (date.getFullYear() !== year || date.getMonth() !== month - 1 ||
date.getDate() !== day) {
return null; // ‫تاريخ غير صالح‬
}

return date;
} catch (error) {
console.error("‫خطأ في تحليل التاريخ‬:", error);
return null;
}
}

// ============================
// ‫فلترة كشوفات الحساب حسب نطاق تاريخ‬
// ============================
function filterStatementsByDate(statements, fromDate, toDate) {
if (!fromDate || !toDate) return statements;

const fromDateObj = new Date(fromDate);

const toDateObj = new Date(toDate);
toDateObj.setHours(23, 59, 59, 999); // ‫تضمين نهاية اليوم بالكامل‬

return statements.filter(statement => {

const statementDate = parseArabicDate(statement.date);
if (!statementDate) return false;

return statementDate >= fromDateObj && statementDate <= toDateObj;

});
}

// ============================
// ‫إعداد زر العودة للأعلى‬
// ============================
function initializeBackToTopButton() {
const backToTopBtn = document.getElementById('backToTop');
if (!backToTopBtn) return;

const contentArea = document.getElementById('content-area');

if (!contentArea) return;

// ‫عرض أو إخفاء الزر اعتماًدا على موضع التمرير‬

contentArea.addEventListener('scroll', () => {
if (contentArea.scrollTop > 300) {
backToTopBtn.classList.add('visible');
} else {
backToTopBtn.classList.remove('visible');
}
});

// ‫التمرير إلى الأعلى عند النقر على الزر‬

backToTopBtn.addEventListener('click', () => {
contentArea.scrollTo({
top: 0,
behavior: 'smooth'
});
});
}

// ============================
// ‫تهيئة التنقل في شجرة القائمة‬
// ============================
function initializeTreeNavigation() {
const treeToggles = document.querySelectorAll('.tree-toggle');

treeToggles.forEach(toggle => {
toggle.addEventListener('click', () => {
const treeView = toggle.parentElement;
treeView.classList.toggle('active');
});

// ‫إضافة دعم لوحة المفاتيح‬

toggle.setAttribute('tabindex', '0');
toggle.setAttribute('role', 'button');
toggle.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggle.click();
}
});
});
}

// ============================
// ‫تهيئة التنقل بين الشاشات‬
// ============================
function initializeScreenNavigation() {
const screenLinks = document.querySelectorAll('[data-screen]');

screenLinks.forEach(link => {
link.addEventListener('click', () => {
const screenId = link.dataset.screen;
showScreen(screenId);
});

// ‫إضافة دعم لوحة المفاتيح‬

link.setAttribute('tabindex', '0');
link.setAttribute('role', 'button');
link.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
link.click();
}
});
});
}

// ============================
// ‫وظيفة عرض الشاشة‬
// ============================
function showScreen(screenId) {
// ‫إخفاء جميع الشاشات‬
document.querySelectorAll('.screen-content').forEach(screen => {
screen.classList.add('hidden');
});

// ‫إخفاء شاشة الترحيب‬

document.getElementById('welcome-screen').classList.add('hidden');

// ‫عرض الشاشة المحددة‬

const screen = document.getElementById(screenId);
if (screen) {
screen.classList.remove('hidden');

// ‫تحميل محتوى الشاشة المحدد‬

if (screenId === 'document-types-settings') {
loadDocTypesSettings();
} else if (screenId === 'supplier-data') {
loadSuppliersTable();
} else if (screenId === 'matching-report' || screenId ===
'commission-report') {
loadDocTypeSelects();
} else if (screenId === 'account-statements') {
const viewStatementSupplier =
document.getElementById('viewStatementSupplier');
if (viewStatementSupplier.value) {
loadStatements(viewStatementSupplier.value);
}
} else if (screenId === 'commission-setup') {
loadCommissionSetupScreen();
} else if (screenId === 'match-statements') {
const matchSupplier = document.getElementById('matchSupplier');
if (matchSupplier.value) {
loadMatchingOperations(matchSupplier.value);
}
} else if (screenId === 'suppliers-matching-status') {
loadSuppliersMatchingStatus();
} else if (screenId === 'supplier-inventory') {
const inventorySupplier =
document.getElementById('inventorySupplier');
if (inventorySupplier.value) {
loadInventoryItems(inventorySupplier.value);
}
} else if (screenId === 'commission-notifications') {
loadCommissionNotifications();
} else if (screenId === 'backup-restore') {
updateStorageInfo();
}

// ‫التمرير إلى أعلى الشاشة‬

const contentArea = document.getElementById('content-area');
if (contentArea) {
contentArea.scrollTop = 0;
}
}
}

// ============================
// ‫تهيئة شاشة إشعارات العموالت‬
// ============================
function loadCommissionNotifications() {
const notifications = SupplierStorage.getCommissionNotifications();
const container = document.getElementById('notificationsContainer');

if (!container) return;

// ‫إعادة تعيين العداد‬

updateNotificationBadge(0);

// ‫إذا لم تكن هناك إشعارات‬

if (notifications.length === 0) {
container.innerHTML = `
<div class="text-center py-8 text-gray-500">
‫ال توجد إشعارات حاليًا‬
</div>
`;
return;
}

container.innerHTML = '';

// ‫ترتيب الإشعارات بحيث تكون غير المقروءة في الأعلى ثم حسب التاريخ‬

const sortedNotifications = [...notifications].sort((a, b) => {
if (a.read !== b.read) return a.read ? 1 : -1;
return new Date(b.date) - new Date(a.date);
});

sortedNotifications.forEach(notification => {
const notificationCard = document.createElement('div');
notificationCard.className = `notification-card p-4 rounded-lg $
{notification.read ? 'read' : 'unread'}`;
notificationCard.setAttribute('data-id', notification.id);

// ‫تنسيق التاريخ‬
const date = new Date(notification.date);
const formattedDate = date.toLocaleDateString('ar-SA', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});

notificationCard.innerHTML = `
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold">${notification.title}</h4>
</script>
</body>
</html>

Scribd Download - Com 48 Wetten Van de Macht
No ratings yet
Scribd Download - Com 48 Wetten Van de Macht
30 pages
Código Personalizado Yampi
100% (2)
Código Personalizado Yampi
19 pages
اكسير الشباب اصبح بين ايدينا عبدالاعلى العراقي 38 صفحة PDF
100% (3)
اكسير الشباب اصبح بين ايدينا عبدالاعلى العراقي 38 صفحة PDF
561 pages
DO_html
No ratings yet
DO_html
91 pages
Template
No ratings yet
Template
21 pages
creative_41859_4
No ratings yet
creative_41859_4
9 pages
html
No ratings yet
html
22 pages
133776189039308919
No ratings yet
133776189039308919
18 pages
Css Kodları
No ratings yet
Css Kodları
21 pages
La Participación en Consorcios
No ratings yet
La Participación en Consorcios
171 pages
Archive Browser
No ratings yet
Archive Browser
86 pages
20_chapitre_08_schema_interactif_u2_doc_6.html
No ratings yet
20_chapitre_08_schema_interactif_u2_doc_6.html
181 pages
Mybb
No ratings yet
Mybb
22 pages
Banking Management SystemPages.html
No ratings yet
Banking Management SystemPages.html
20 pages
index
No ratings yet
index
18 pages
Estilos Globales
No ratings yet
Estilos Globales
18 pages
PMP Handbook
No ratings yet
PMP Handbook
259 pages
Script_mapi
No ratings yet
Script_mapi
12 pages
Trang cá nhân cuối
No ratings yet
Trang cá nhân cuối
29 pages
Document
No ratings yet
Document
15 pages
PDF1
No ratings yet
PDF1
12 pages
Template Teksmedik
No ratings yet
Template Teksmedik
42 pages
XML Version Blog Budi
No ratings yet
XML Version Blog Budi
20 pages
Ramadan Bloggertheme9.Com - XML
No ratings yet
Ramadan Bloggertheme9.Com - XML
36 pages
CSS for Lumira
No ratings yet
CSS for Lumira
32 pages
Source Code Food Delivery Webpage
100% (1)
Source Code Food Delivery Webpage
13 pages
Add Product
No ratings yet
Add Product
6 pages
Youcan Code
No ratings yet
Youcan Code
15 pages
Uni
No ratings yet
Uni
16 pages
email-18587685.eml
No ratings yet
email-18587685.eml
8 pages
Unknown 3
No ratings yet
Unknown 3
34 pages
Text
No ratings yet
Text
15 pages
Css
No ratings yet
Css
5 pages
Adeline
No ratings yet
Adeline
24 pages
Francois - Quiz - Interactif - Je - Fais - Le - Bilan - Chapitre - 1.html 2
No ratings yet
Francois - Quiz - Interactif - Je - Fais - Le - Bilan - Chapitre - 1.html 2
27 pages
Import Url
No ratings yet
Import Url
57 pages
Chat Box
0% (1)
Chat Box
67 pages
Untitled Document 2
No ratings yet
Untitled Document 2
5 pages
Spotbackup
No ratings yet
Spotbackup
12 pages
Styles.css
No ratings yet
Styles.css
4 pages
HB PHBStyle
No ratings yet
HB PHBStyle
17 pages
Adad
No ratings yet
Adad
389 pages
HTML Dir
No ratings yet
HTML Dir
151 pages
!DOCTYPE html1
No ratings yet
!DOCTYPE html1
6 pages
Reinitialisation
No ratings yet
Reinitialisation
6 pages
ra
No ratings yet
ra
5 pages
Login HTML CSS
No ratings yet
Login HTML CSS
3 pages
css مشروع
No ratings yet
css مشروع
10 pages
Mini Casino Com Salvamento e Caça Niki
No ratings yet
Mini Casino Com Salvamento e Caça Niki
18 pages
preindex.html
No ratings yet
preindex.html
5 pages
Lesson 1
No ratings yet
Lesson 1
3 pages
Balaksix 0101000
No ratings yet
Balaksix 0101000
30 pages
indexhtml
No ratings yet
indexhtml
13 pages
Message
No ratings yet
Message
198 pages
New Microsoft Word Document
No ratings yet
New Microsoft Word Document
68 pages
Manual Book Iot3
No ratings yet
Manual Book Iot3
8 pages
style.css
No ratings yet
style.css
7 pages
HB AbyssStyle
No ratings yet
HB AbyssStyle
13 pages
واجهة المشغل
No ratings yet
واجهة المشغل
25 pages
HB WaterdeepStyle
No ratings yet
HB WaterdeepStyle
19 pages
Angular Shopping Store: From Scratch to Successful Payment
From Everand
Angular Shopping Store: From Scratch to Successful Payment
Abdelfattah Ragab
No ratings yet
Comprehensive CSS3 Command List, With Descriptions And Typical Mark Up
From Everand
Comprehensive CSS3 Command List, With Descriptions And Typical Mark Up
Online Trainees
No ratings yet
GC 2024 09 20
No ratings yet
GC 2024 09 20
20 pages
XSLT Mapping in Sap Pi 7.1
100% (2)
XSLT Mapping in Sap Pi 7.1
21 pages
Introduction To XML For Iseries Developers: Applications Systems Group September 18, 2002
No ratings yet
Introduction To XML For Iseries Developers: Applications Systems Group September 18, 2002
30 pages
Querying XML Documents With Xquery
No ratings yet
Querying XML Documents With Xquery
15 pages
Clisson and Eugene Extract
No ratings yet
Clisson and Eugene Extract
15 pages
Beginning JSP 2-From Novice To Professional
No ratings yet
Beginning JSP 2-From Novice To Professional
39 pages
Payloads
100% (1)
Payloads
11 pages
Index of Books Dars e Nizami
No ratings yet
Index of Books Dars e Nizami
51 pages
4D WSC Sample
No ratings yet
4D WSC Sample
18 pages
How To Write Effective Xpath Selenium: Xpath //tag - Name (@attribute - Name 'Value')
100% (1)
How To Write Effective Xpath Selenium: Xpath //tag - Name (@attribute - Name 'Value')
6 pages
Experiment No. 1: Aim: - Design A Registration Form Using HTML5 Tags. Program
No ratings yet
Experiment No. 1: Aim: - Design A Registration Form Using HTML5 Tags. Program
4 pages
Resource Description Framework (RFD) : Unit-2
No ratings yet
Resource Description Framework (RFD) : Unit-2
55 pages
Interview Questions
No ratings yet
Interview Questions
78 pages
Bot Flamzy
No ratings yet
Bot Flamzy
15 pages
gc_2024_10_14
No ratings yet
gc_2024_10_14
12 pages
HTML5 ELearning Kit For Dummies - (HTML5 Elearning Kit For Dummies®)
No ratings yet
HTML5 ELearning Kit For Dummies - (HTML5 Elearning Kit For Dummies®)
6 pages
Web Services Description Language
No ratings yet
Web Services Description Language
51 pages
Introduction To XML: Frank Tompa and Airi Salminen University of Waterloo (Fwtompa, Asalminen) @DB - Uwaterloo.ca
No ratings yet
Introduction To XML: Frank Tompa and Airi Salminen University of Waterloo (Fwtompa, Asalminen) @DB - Uwaterloo.ca
50 pages
Differences Between HTML and HTML5 PDF
No ratings yet
Differences Between HTML and HTML5 PDF
8 pages
CSS Example
No ratings yet
CSS Example
18 pages
Computer Project 2020 (TESLA)
No ratings yet
Computer Project 2020 (TESLA)
50 pages
XML DTD
No ratings yet
XML DTD
12 pages
HTML 5 and CSS 3 Notes
100% (1)
HTML 5 and CSS 3 Notes
25 pages
HTML Lists - Javatpoint
No ratings yet
HTML Lists - Javatpoint
4 pages
HTML Tutorial
No ratings yet
HTML Tutorial
160 pages
Basic XPath and CSS Theory
No ratings yet
Basic XPath and CSS Theory
13 pages
Experiment 6/ Task No.6: A.1 Aim
No ratings yet
Experiment 6/ Task No.6: A.1 Aim
3 pages
Web Design Course Outline
No ratings yet
Web Design Course Outline
10 pages