0% found this document useful (0 votes)

21 views91 pages

DO HTML

The document is an HTML template for a supplier management system, featuring a responsive design with RTL support and dark mode. It includes various UI components such as a navigation sidebar, toast notifications, and a back-to-top button, styled using Tailwind CSS. The document also incorporates JavaScript libraries for data handling and formatting, enhancing user interaction and accessibility.

Uploaded by

OMAR ASSRORI

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

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

0% found this document useful (0 votes)

21 views91 pages

DO HTML

Uploaded by

OMAR ASSRORI

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

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

You are on page 1/ 91

<!

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>
<p class="text-sm text-gray-500 mt-1">$
{formattedDate}</p>
</div>
<div class="flex gap-2">
${!notification.read ? `
<button class="mark-read bg-blue-100 text-blue-800
px-2 py-1 rounded text-xs hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-100
dark:hover:bg-blue-800">
‫تعليم كمقروء‬
</button>
` : ''}
<button class="delete-notification bg-red-100 text-red-
800 px-2 py-1 rounded text-xs hover:bg-red-200 dark:bg-red-900 dark:text-red-100
dark:hover:bg-red-800">
‫حذف‬
</button>
</div>
</div>
<div class="mt-2">
<p>${notification.message}</p>
</div>
${notification.actionLink ? `
<div class="mt-3">
<button class="notification-action bg-primary text-
white px-3 py-1 rounded text-sm hover:bg-secondary transition-colors" data-link="$
{notification.actionLink}">
${notification.actionText || '‫}'عرض التفاصيل‬
</button>
</div>
` : ''}
`;

container.appendChild(notificationCard);
});

// ‫إضافة أحداث للأزرار‬

container.querySelectorAll('.mark-read').forEach(button => {
button.addEventListener('click', function() {
const card = this.closest('.notification-card');
const notificationId = card.getAttribute('data-id');

markNotificationAsRead(notificationId);
card.classList.remove('unread');
card.classList.add('read');
this.remove();
});
});

container.querySelectorAll('.delete-notification').forEach(button => {
button.addEventListener('click', function() {
const card = this.closest('.notification-card');
const notificationId = card.getAttribute('data-id');

deleteNotification(notificationId);
card.remove();

// ‫" توجد إشعارات‬‫ أظهر رسالة ال‬،‫"إذا لم تتبق إشعارات‬

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

container.querySelectorAll('.notification-action').forEach(button => {
button.addEventListener('click', function() {
const link = this.getAttribute('data-link');
if (link) {
const [screenId, params] = link.split('?');
// ‫االنتقال إلى الشاشة المطلوبة‬
showScreen(screenId);

// ‫معالجة المعلمات إن وجدت‬

if (params) {
const urlParams = new URLSearchParams(params);
const supplierId = urlParams.get('supplierId');

// ‫تعيين المورد في الشاشة المرتبطة‬

if (supplierId) {
if (screenId === 'manage-commissions') {
const commissionSupplier =
document.getElementById('commissionSupplier');
if (commissionSupplier) {
commissionSupplier.value = supplierId;
commissionSupplier.dispatchEvent(new
Event('change'));
}
}
}
}

// ‫تعليم الإشعار كمقروء‬

const card = this.closest('.notification-card');
const notificationId = card.getAttribute('data-id');
markNotificationAsRead(notificationId);
}
});
});
}

// ‫تعليم إشعار كمقروء‬

SupplierStorage.saveCommissionNotifications(updatedNotifications);

// ‫تحديث العداد‬
const unreadCount = updatedNotifications.filter(notification => !
notification.read).length;
updateNotificationBadge(unreadCount);
}

// ‫حذف إشعار‬
function deleteNotification(notificationId) {
const notifications = SupplierStorage.getCommissionNotifications();
const updatedNotifications = notifications.filter(notification =>
notification.id !== notificationId);

SupplierStorage.saveCommissionNotifications(updatedNotifications);

// ‫تحديث العداد‬
const unreadCount = updatedNotifications.filter(notification => !
notification.read).length;
updateNotificationBadge(unreadCount);
}

// ‫تعليم جميع الإشعارات كمقروءة‬

function markAllNotificationsAsRead() {
const notifications = SupplierStorage.getCommissionNotifications();
const updatedNotifications = notifications.map(notification =>
({ ...notification, read: true }));

SupplierStorage.saveCommissionNotifications(updatedNotifications);

// ‫تحديث العداد‬
updateNotificationBadge(0);

// ‫تحديث واجهة المستخدم‬

loadCommissionNotifications();

ToastManager.success('‫;)'تم تعليم جميع الإشعارات كمقروءة‬

}

// ‫إضافة إشعار جديد‬

function addNotification(title, message, actionLink = null, actionText =
null) {
const notifications = SupplierStorage.getCommissionNotifications();

// ‫إنشاء إشعار جديد‬

const newNotification = {
id: Date.now().toString(),
title,
message,
date: new Date().toISOString(),
read: false,
actionLink,
actionText
};

notifications.push(newNotification);
SupplierStorage.saveCommissionNotifications(notifications);

// ‫تحديث العداد‬
const unreadCount = notifications.filter(notification => !
notification.read).length;
updateNotificationBadge(unreadCount);

return newNotification;
}

// ‫تحديث عداد الإشعارات غير المقروءة‬

function updateNotificationBadge(count) {
const badge = document.getElementById('notification-badge');

if (!badge) return;

if (count > 0) {
badge.textContent = count > 99 ? '99+' : count;
badge.classList.remove('hidden');
} else {
badge.classList.add('hidden');
}
}

// ‫فحص وجود إشعارات عموالت مستحقة‬

function checkPendingCommissions() {
const suppliers = SupplierStorage.getSuppliers();
let pendingCommissionsCount = 0;

suppliers.forEach(supplier => {
const commissions = SupplierStorage.getCommissionData(supplier.id);
if (!commissions || commissions.length === 0) return;

// ‫حساب إجمالي العموالت والعموالت المستلمة‬

let totalCashCommission = 0;
let totalInKindCommission = 0;

commissions.forEach(commission => {
if (commission.hasCommission) {
if (commission.commissionType === 'cash') {
totalCashCommission += commission.commissionAmount;
} else if (commission.commissionType === 'kind') {
totalInKindCommission += commission.commissionAmount;
}
}
});

// ‫الحصول على العموالت المستلمة‬

const receivedCashCommission =
parseFloat(localStorage.getItem(`received_cash_commission_${supplier.id}`) || '0');
const receivedInKindCommission =
parseFloat(localStorage.getItem(`received_in_kind_commission_${supplier.id}`) ||
'0');

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

const pendingCashCommission = totalCashCommission -
receivedCashCommission;
const pendingInKindCommission = totalInKindCommission -
receivedInKindCommission;

if (pendingCashCommission > 0 || pendingInKindCommission > 0) {

pendingCommissionsCount++;

// ‫التحقق مما إذا كان هناك إشعار موجود بالفعل لهذا المورد‬
const notifications =
SupplierStorage.getCommissionNotifications();
const existingNotification = notifications.find(notification =>
notification.title.includes(supplier.name) &&
notification.actionLink &&
notification.actionLink.includes(supplier.id)
);

// ‫ أضف واحدًا جديدًا‬،‫إذا لم يكن هناك إشعار موجود‬

if (!existingNotification) {
const message = `
‫ يوجد عموالت مستحقة للمورد‬${supplier.name}:
${pendingCashCommission > 0 ? `<div class="mt-1"> ‫عمولة‬
‫نقدية‬: ${formatNumber(pendingCashCommission)}</div>` : ''}
${pendingInKindCommission > 0 ? `<div class="mt-1">
‫عمولة عينية‬: ${formatNumber(pendingInKindCommission)}</div>` : ''}
`;

addNotification(
`‫ عموالت مستحقة‬- ${supplier.name}`,
message,
`manage-commissions?supplierId=${supplier.id}`,
'‫'عرض تفاصيل العموالت‬
);
}
}
});

// ‫تحديث عداد الإشعارات غير المقروءة‬

const notifications = SupplierStorage.getCommissionNotifications();
const unreadCount = notifications.filter(notification => !
notification.read).length;
updateNotificationBadge(unreadCount);

return pendingCommissionsCount;
}

// ============================
// ‫تحميل إعدادات أنواع المستندات‬
// ============================
function loadDocTypesSettings() {
const docTypes = SupplierStorage.getDocumentTypes();
const tableBody = document.getElementById('docTypesTableBody');

if (!tableBody) return;

tableBody.innerHTML = '';

docTypes.forEach((docType, index) => {

// ‫إضافة مستمعي الأحداث لأزرار التعديل والحذف‬

// ============================
// ‫تعديل نوع المستند‬
// ============================
function editDocType(index) {
const docTypes = SupplierStorage.getDocumentTypes();
const docType = docTypes[index];

ModalManager.create({
title: '‫'تعديل نوع المستند‬,
content: `
<div class="grid grid-cols-1 gap-4">
<div>
<label for="edit-doctype-name" class="block mb-2 font-
bold">‫<نوع المستند‬/label>
<input type="text" id="edit-doctype-name" value="$
{docType.type}" class="w-full p-2 border border-gray-300 rounded text-base">
</div>
<div>
<label for="edit-doctype-keywords" class="block mb-2
font-bold">)‫<الكلمات المفتاحية (مفصولة بفواصل‬/label>
<textarea id="edit-doctype-keywords" class="w-full p-2
border border-gray-300 rounded text-base" rows="4">${docType.keywords}</textarea>
</div>
</div>
`,
onOk: () => {
const name = document.getElementById('edit-doctype-
name').value;
const keywords = document.getElementById('edit-doctype-
keywords').value;

if (!name || !keywords) {
ToastManager.error(' ‫الرجاء إدخال نوع المستند والكلمات‬
‫;)'المفتاحية‬
return;
}

docTypes[index] = {
type: name,
keywords: keywords
};

SupplierStorage.saveDocumentTypes(docTypes);
loadDocTypesSettings();
loadDocTypeSelects();

ToastManager.success('‫;)'تم تحديث نوع المستند بنجاح‬

}
});
}
// ============================
// ‫حذف نوع المستند‬
// ============================
function deleteDocType(index) {
ModalManager.confirm(
'‫'هل أنت متأكد من حذف نوع المستند هذا؟‬,
() => {
const docTypes = SupplierStorage.getDocumentTypes();
docTypes.splice(index, 1);
SupplierStorage.saveDocumentTypes(docTypes);
loadDocTypesSettings();
loadDocTypeSelects();
ToastManager.success('‫;)'تم حذف نوع المستند بنجاح‬
}
);
}

// ============================
// ‫تحميل أنواع المستندات في عناصر االختيار‬
// ============================
function loadDocTypeSelects() {
const docTypes = SupplierStorage.getDocumentTypes();
const selectElements = [
document.getElementById('matchingReportDocType'),
document.getElementById('commissionReportDocType')
];

selectElements.forEach(select => {
if (!select) return;

// ‫مسح جميع الخيارات باستثناء الأول‬

while (select.options.length > 1) {
select.remove(1);
}

// ‫إضافة أنواع المستندات‬

docTypes.forEach(docType => {
const option = document.createElement('option');
option.value = docType.type;
option.textContent = docType.type;
select.appendChild(option);
});
});
}

// ============================
// ‫تهيئة شاشة النسخ االحتياطي واالستعادة‬
// ============================
function updateStorageInfo() {
const usageInfo = SupplierStorage.getStorageUsage();
const usedStorageElement = document.getElementById('usedStorage');
const progressBar = document.getElementById('storageProgressBar');

if (usedStorageElement && progressBar) {

const usedMB = (usageInfo.used / 1024).toFixed(2);
const totalMB = (usageInfo.limit / 1024).toFixed(0);

usedStorageElement.textContent = `${usedMB} ‫ ميجابايت من‬${totalMB}

‫;`ميجابايت‬
progressBar.style.width = `${usageInfo.percentage}%`;

// ‫تغيير لون شريط التقدم حسب نسبة االستخدام‬

if (usageInfo.percentage < 50) {
progressBar.classList.remove('bg-yellow-500', 'bg-red-500');
progressBar.classList.add('bg-primary');
} else if (usageInfo.percentage < 80) {
progressBar.classList.remove('bg-primary', 'bg-red-500');
progressBar.classList.add('bg-yellow-500');
} else {
progressBar.classList.remove('bg-primary', 'bg-yellow-500');
progressBar.classList.add('bg-red-500');
}
}
}

// ============================
// ‫تحديث معلومات الترويسة‬
// ============================
function updateHeaderInfo(companyInfo) {
const companyInfoDisplay =
document.getElementById('companyInfoDisplay');
if (!companyInfoDisplay) return;

companyInfoDisplay.innerHTML = `
<div class="text-sm">
<div class="font-bold">${companyInfo.nameAr || '‫<}'الشركة‬/div>
${companyInfo.branch ? `<div>‫فرع‬:
${companyInfo.branch}</div>` : ''}
</div>
`;
}

// ============================
// ‫إعداد شاشة مخزون الموردين‬
// ============================
function loadInventoryItems(supplierId) {
const items = SupplierStorage.getInventoryItems(supplierId);
const tableBody = document.getElementById('inventoryTableBody');

if (!tableBody) return;

if (!supplierId || items.length === 0) {

tableBody.innerHTML = `
<tr>
<td colspan="8" class="text-center py-4">‫ال توجد أصناف مخزنة‬
‫<لهذا المورد‬/td>
</tr>
`;

// ‫إخفاء ترقيم الصفحات إذا لم تكن هناك بيانات‬

const paginationContainer =
document.getElementById('inventoryPagination');
if (paginationContainer) {
paginationContainer.innerHTML = '';
}

return;
}

tableBody.innerHTML = '';

items.forEach(item => {
// ‫تحديد حالة المخزون بناًء على الكمية المتاحة‬
let stockStatus = '';
let stockStatusClass = '';

if (item.minQuantity === undefined) {

item.minQuantity = 10; // ‫قيمة افتراضية‬
}

if (item.quantity <= item.minQuantity * 0.5) {

stockStatus = '‫;'منخفض‬
stockStatusClass = 'stock-low';
} else if (item.quantity <= item.minQuantity) {
stockStatus = '‫;'متوسط‬
stockStatusClass = 'stock-medium';
} else {
stockStatus = '‫;'مرتفع‬
stockStatusClass = 'stock-high';
}

const row = document.createElement('tr');

row.innerHTML = `
<td>${item.code}</td>
<td>${item.name}</td>
<td>${item.unit || ''}</td>
<td>${item.quantity}</td>
<td>${formatNumber(item.price)}</td>
<td>${new
Date(item.lastUpdate).toLocaleDateString('ar-SA')}</td>
<td><span class="stock-status-badge ${stockStatusClass}">$
{stockStatus}</span></td>
<td class="flex gap-2">
<button class="edit-inventory-item bg-blue-500 text-white
px-2 py-1 rounded text-xs hover:bg-blue-600 transition-colors"
data-id="${item.id}" aria-label=" ‫تعديل‬
‫<صنف">تعديل‬/button>
<button class="delete-inventory-item bg-red-500 text-white
px-2 py-1 rounded text-xs hover:bg-red-600 transition-colors"
data-id="${item.id}" aria-label=" ‫حذف‬
‫<صنف">حذف‬/button>
</td>
`;
tableBody.appendChild(row);
});

// ‫تهيئة ترقيم الصفحات‬

if (!window.inventoryTablePagination) {
window.inventoryTablePagination =
setupTablePagination('inventoryTable', 'inventoryPagination', 10);
} else {
window.inventoryTablePagination.updateRows();
}

// ‫تهيئة البحث‬
if (!window.inventorySearchManager) {
window.inventorySearchManager = setupTableSearch('inventorySearch',
'inventoryTable', {
searchableColumns: [0, 1, 2], // ‫البحث في الكود واسم الصنف‬
‫والوحدة‬
paginationManager: window.inventoryTablePagination
});
}

// ‫إضافة مستمعي الأحداث للأزرار‬

document.querySelectorAll('.edit-inventory-item').forEach(button => {
button.addEventListener('click', function() {
const itemId = this.dataset.id;
editInventoryItem(supplierId, itemId);
});
});

document.querySelectorAll('.delete-inventory-item').forEach(button => {
button.addEventListener('click', function() {
const itemId = this.dataset.id;
deleteInventoryItem(supplierId, itemId);
});
});
}

// ============================
// ‫إضافة أو تعديل صنف في المخزون‬
// ============================
function addEditInventoryItem(supplierId, itemId = null) {
const items = SupplierStorage.getInventoryItems(supplierId);
let item = null;

if (itemId !== null) {

item = items.find(item => item.id === itemId);
if (!item) {
ToastManager.error('‫;)'الصنف غير موجود‬
return;
}
}

const title = item ? '‫ 'إضافة صنف جديد‬: '‫;'تعديل صنف مخزون‬

ModalManager.create({
title: title,
content: `
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="item-code" class="block mb-2 font-bold">‫كود‬
‫<* الصنف‬/label>
<input type="text" id="item-code" value="${item ?
item.code : ''}" class="w-full p-2 border border-gray-300 rounded text-base">
</div>
<div>
<label for="item-name" class="block mb-2 font-bold">‫اسم‬
‫<* الصنف‬/label>
<input type="text" id="item-name" value="${item ?
item.name : ''}" class="w-full p-2 border border-gray-300 rounded text-base">
</div>
<div>
<label for="item-unit" class="block mb-2 font-bold">
‫<الوحدة‬/label>
<input type="text" id="item-unit" value="${item ?
item.unit || '' : ''}" class="w-full p-2 border border-gray-300 rounded text-base">
</div>
<div>
<label for="item-quantity" class="block mb-2 font-
bold">‫<* الكمية المتوفرة‬/label>
<input type="number" id="item-quantity" value="${item ?
item.quantity : '0'}" min="0" step="0.01" class="w-full p-2 border border-gray-300
rounded text-base">
</div>
<div>
<label for="item-price" class="block mb-2 font-bold">
‫<* سعر الشراء‬/label>
<input type="number" id="item-price" value="${item ?
item.price : '0'}" min="0" step="0.01" class="w-full p-2 border border-gray-300
rounded text-base">
</div>
<div>
<label for="item-min-quantity" class="block mb-2 font-
bold">‫<الحد الأدنى للكمية‬/label>
<input type="number" id="item-min-quantity" value="$
{item ? item.minQuantity || '10' : '10'}" min="0" step="0.01" class="w-full p-2
border border-gray-300 rounded text-base">
</div>
</div>
`,
onOk: () => {
const code = document.getElementById('item-code').value;
const name = document.getElementById('item-name').value;
const unit = document.getElementById('item-unit').value;
const quantity = parseFloat(document.getElementById('item-
quantity').value) || 0;
const price = parseFloat(document.getElementById('item-
price').value) || 0;
const minQuantity = parseFloat(document.getElementById('item-
min-quantity').value) || 10;

// ‫التحقق من الحقول المطلوبة‬

if (!code || !name) {
ToastManager.error('‫;)'الكود واسم الصنف مطلوبان‬
return;
}

if (item) {
// ‫تحديث صنف موجود‬
const index = items.findIndex(i => i.id === itemId);
if (index !== -1) {
items[index] = {
...item,
code,
name,
unit,
quantity,
price,
minQuantity,
lastUpdate: new Date().toISOString()
};
SupplierStorage.saveInventoryItems(supplierId, items);
loadInventoryItems(supplierId);
ToastManager.success('‫;)'تم تحديث الصنف بنجاح‬
}
} else {
// ‫إضافة صنف جديد‬
const newItem = {
id: Date.now().toString(),
code,
name,
unit,
quantity,
price,
minQuantity,
lastUpdate: new Date().toISOString()
};

items.push(newItem);
SupplierStorage.saveInventoryItems(supplierId, items);
loadInventoryItems(supplierId);
ToastManager.success('‫;)'تم إضافة الصنف بنجاح‬
}
}
});
}

// ============================
// ‫حذف صنف من المخزون‬
// ============================
function deleteInventoryItem(supplierId, itemId) {
ModalManager.confirm(
'‫'هل أنت متأكد من حذف هذا الصنف من المخزون؟‬,
() => {
const items = SupplierStorage.getInventoryItems(supplierId);
const updatedItems = items.filter(item => item.id !== itemId);

SupplierStorage.saveInventoryItems(supplierId, updatedItems);
loadInventoryItems(supplierId);

ToastManager.success('‫;)'تم حذف الصنف بنجاح‬

}
);
}

// ============================
// ‫إنشاء تقرير المخزون‬
// ============================
function generateInventoryReport() {
const supplierId =
document.getElementById('inventoryReportSupplier').value;
const statusFilter =
document.getElementById('inventoryReportStatus').value;
const sortBy = document.getElementById('inventoryReportSort').value;

if (!supplierId) {
ToastManager.error('‫;)'الرجاء اختيار المورد‬
return;
}
// ‫الحصول على بيانات المورد‬
const suppliers = SupplierStorage.getSuppliers();
const supplier = suppliers.find(s => s.id === supplierId);

if (!supplier) {
ToastManager.error('‫;)'المورد غير موجود‬
return;
}

// ‫الحصول على أصناف المخزون‬

const inventoryItems = SupplierStorage.getInventoryItems(supplierId);

if (inventoryItems.length === 0) {
ToastManager.error('‫;)'ال توجد أصناف مخزنة لهذا المورد‬
return;
}

// ‫فلترة الأصناف حسب حالة المخزون‬

let filteredItems = [...inventoryItems];
if (statusFilter !== 'all') {
filteredItems = filteredItems.filter(item => {
const minQuantity = item.minQuantity || 10;

if (statusFilter === 'low') {

return item.quantity <= minQuantity * 0.5;
} else if (statusFilter === 'medium') {
return item.quantity > minQuantity * 0.5 && item.quantity
<= minQuantity;
} else if (statusFilter === 'high') {
return item.quantity > minQuantity;
}

return true;
});
}

// ‫ترتيب الأصناف‬
filteredItems.sort((a, b) => {
if (sortBy === 'name') {
return a.name.localeCompare(b.name);
} else if (sortBy === 'quantity') {
return a.quantity - b.quantity;
} else if (sortBy === 'price') {
return a.price - b.price;
} else if (sortBy === 'date') {
return new Date(b.lastUpdate) - new Date(a.lastUpdate);
}

return 0;
});

// ‫إنشاء ترويسة التقرير‬

const companyInfo = SupplierStorage.getCompanyInfo();

const reportHeader = document.getElementById('inventoryReportHeader');

reportHeader.innerHTML = `
<div class="flex justify-between items-center mb-2">
<div>
<h2 class="text-xl font-bold">${companyInfo.nameAr || '
‫<}'الشركة‬/h2>
<p>${companyInfo.branch ? '‫فرع‬: ' + companyInfo.branch :
''}</p>
</div>
${companyInfo.logo ? `<img src="${companyInfo.logo}" alt=" ‫شعار‬
‫ "الشركة‬class="print-logo" style="max-width: ${companyInfo.logoSize}px">` : ''}
<div>
<p><strong>‫التاريخ‬:</strong> ${new
Date().toLocaleDateString('ar-SA')}</p>
</div>
</div>
<h3 class="text-lg font-bold mb-1">‫<تقرير مخزون المورد‬/h3>
<p><strong>‫المورد‬:</strong> ${supplier.name} (${supplier.id})</p>
${statusFilter !== 'all' ? `<p><strong>‫حالة المخزون‬:</strong> ${
statusFilter === 'low' ? '‫ 'منخفض‬:
statusFilter === 'medium' ? '‫ 'متوسط‬:
statusFilter === 'high' ? '‫ 'الكل‬: '‫'مرتفع‬
}</p>` : ''}
`;

// ‫إنشاء ملخص المخزون‬

const totalItems = filteredItems.length;
const totalValue = filteredItems.reduce((sum, item) => sum +
(item.quantity * item.price), 0);
const lowStockCount = filteredItems.filter(item => item.quantity <=
(item.minQuantity || 10) * 0.5).length;
const averagePrice = totalItems > 0 ? totalValue / totalItems : 0;

document.getElementById('totalItemsCount').textContent = totalItems;
document.getElementById('totalInventoryValue').textContent =
formatNumber(totalValue);
document.getElementById('lowStockCount').textContent = lowStockCount;
document.getElementById('averageUnitPrice').textContent =
formatNumber(averagePrice);

// ‫إنشاء جدول التقرير‬

const reportTableBody =
document.getElementById('inventoryReportTableBody');

if (!reportTableBody) return;

reportTableBody.innerHTML = '';

filteredItems.forEach(item => {
// ‫تحديد حالة المخزون‬
let stockStatus = '';
let stockStatusClass = '';

const minQuantity = item.minQuantity || 10;

if (item.quantity <= minQuantity * 0.5) {

stockStatus = '‫;'منخفض‬
stockStatusClass = 'stock-low';
} else if (item.quantity <= minQuantity) {
stockStatus = '‫;'متوسط‬
stockStatusClass = 'stock-medium';
} else {
stockStatus = '‫;'مرتفع‬
stockStatusClass = 'stock-high';
}

// ‫حساب القيمة الإجمالية للصنف‬

const totalItemValue = item.quantity * item.price;

const row = document.createElement('tr');

row.innerHTML = `
<td>${item.code}</td>
<td>${item.name}</td>
<td>${item.unit || '-'}</td>
<td>${item.quantity}</td>
<td>${formatNumber(item.price)}</td>
<td>${formatNumber(totalItemValue)}</td>
<td>${new
Date(item.lastUpdate).toLocaleDateString('ar-SA')}</td>
<td><span class="stock-status-badge ${stockStatusClass}">$
{stockStatus}</span></td>
`;
reportTableBody.appendChild(row);
});

// ‫إظهار التقرير وأزرار الطباعة والتصدير‬

document.getElementById('inventoryReportContent').classList.remove('hidden');

document.getElementById('printInventoryReport').classList.remove('hidden');

document.getElementById('exportInventoryReport').classList.remove('hidden');

ToastManager.success('‫;)'تم إنشاء تقرير المخزون بنجاح‬

}

// ============================
// ‫طباعة تقرير المخزون‬
// ============================
function printInventoryReport() {
// ‫إنشاء نافذة الطباعة‬
const printWindow = window.open('', '_blank');

// ‫الحصول على محتوى التقرير‬

const reportHeader =
document.getElementById('inventoryReportHeader').innerHTML;
const summaryHTML = document.querySelector('#inventoryReportContent .p-
4.mb-4').outerHTML;
const tableHTML =
document.getElementById('inventoryReportTable').outerHTML;

printWindow.document.write(`
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8">
<title>‫<تقرير المخزون‬/title>
<style>
@import url('https://fonts.googleapis.com/css2?
family=Tajawal:wght@400;500;700&display=swap');

body {
font-family: 'Tajawal', sans-serif;
padding: 20px;
direction: rtl;
}

.header {
margin-bottom: 20px;
border-bottom: 2px solid #40B3EF;
padding-bottom: 10px;
}

.summary-box {
background-color: #f8f9fa;
border-radius: 5px;
padding: 15px;
margin-bottom: 20px;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

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

th {
background-color: #40B3EF;
color: white;
}

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

.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;
}
@media print {
@page {
size: landscape;
margin: 15mm 10mm;
}

body {
font-size: 12pt;
}
}
</style>
</head>
<body>
<div class="header">
${reportHeader}
</div>

${summaryHTML.replace('class="p-4 mb-4 bg-blue-50 border

border-blue-200 rounded-lg dark:bg-blue-900/30 dark:border-blue-800"',
'class="summary-box"')}

${tableHTML}

<div class="footer" style="text-align: center; margin-top:

30px; color: #666;">
<p>‫ تم إنشاء التقرير في‬${new Date().toLocaleString('ar-
SA')}</p>
</div>
</body>
</html>
`);

printWindow.document.close();

// ‫انتظار حتى يتم تحميل الصفحة ثم الطباعة‬

printWindow.onload = function() {
printWindow.print();
};
}

// ============================
// ‫تصدير تقرير المخزون للإكسل‬
// ============================
function exportInventoryReport() {
const supplierId =
document.getElementById('inventoryReportSupplier').value;

// ‫الحصول على بيانات المورد‬

const suppliers = SupplierStorage.getSuppliers();
const supplier = suppliers.find(s => s.id === supplierId);

if (!supplier) {
ToastManager.error('‫;)'المورد غير موجود‬
return;
}

// ‫تصدير الجدول‬
exportTableToExcel('inventoryReportTable', `‫_تقرير_مخزون‬$
{supplier.name}`, {
sheetName: '‫'المخزون‬,
headerMap: {
0: '‫'كود الصنف‬,
1: '‫'اسم الصنف‬,
2: '‫'الوحدة‬,
3: '‫'الكمية المتوفرة‬,
4: '‫'سعر الوحدة‬,
5: '‫'القيمة الإجمالية‬,
6: '‫'آخر تحديث‬,
7: '‫'حالة المخزون‬
}
});
}

// ============================
// ‫تحميل جدول الموردين‬
// ============================
function loadSuppliersTable() {
const suppliers = SupplierStorage.getSuppliers();
const tableBody = document.getElementById('suppliersTableBody');

if (!tableBody) return;

if (suppliers.length === 0) {
tableBody.innerHTML = `
<tr>
<td colspan="7" class="text-center py-4"> ‫ال توجد بيانات‬
‫<متاحة‬/td>
</tr>
`;

// ‫إخفاء ترقيم الصفحات إذا لم تكن هناك بيانات‬

const paginationContainer =
document.getElementById('suppliersPagination');
if (paginationContainer) {
paginationContainer.innerHTML = '';
}

return;
}

tableBody.innerHTML = '';

suppliers.forEach(supplier => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${supplier.id}</td>
<td>${supplier.name}</td>
<td class="truncate-text" title="${supplier.address || ''}">$
{supplier.address || ''}</td>
<td>${supplier.phone1 || ''}</td>
<td>${supplier.fax || ''}</td>
<td>${supplier.reference || ''}</td>
<td class="flex gap-2">
<button class="edit-supplier bg-blue-500 text-white px-2
py-1 rounded text-xs hover:bg-blue-600 transition-colors"
data-id="${supplier.id}" aria-label="‫ تعديل‬$
{supplier.name}">‫<تعديل‬/button>
<button class="delete-supplier bg-red-500 text-white px-2
py-1 rounded text-xs hover:bg-red-600 transition-colors"
data-id="${supplier.id}" aria-label="‫ حذف‬$
{supplier.name}">‫<حذف‬/button>
<button class="view-supplier bg-secondary text-white px-2
py-1 rounded text-xs hover:bg-primary transition-colors"
data-id="${supplier.id}" aria-label="‫ عرض‬$
{supplier.name}">‫<عرض‬/button>
</td>
`;
tableBody.appendChild(row);
});

// ‫تهيئة ترقيم الصفحات‬

if (!window.suppliersTablePagination) {
window.suppliersTablePagination =
setupTablePagination('suppliersTable', 'suppliersPagination', 10);
} else {
window.suppliersTablePagination.updateRows();
}

// ‫تهيئة الفرز للجدول‬

setupTableSorting('suppliersTable', { excludedColumns: [6] });

// ‫إضافة مستمعي الأحداث لأزرار التعديل والحذف‬

document.querySelectorAll('.edit-supplier').forEach(button => {
button.addEventListener('click', function() {
const supplierId = this.dataset.id;
editSupplier(supplierId);
});
});

document.querySelectorAll('.delete-supplier').forEach(button => {
button.addEventListener('click', function() {
const supplierId = this.dataset.id;
deleteSupplier(supplierId);
});
});

document.querySelectorAll('.view-supplier').forEach(button => {
button.addEventListener('click', function() {
const supplierId = this.dataset.id;
// ‫تعيين قيمة المورد في شاشة كشف الحساب‬
const viewStatementSupplier =
document.getElementById('viewStatementSupplier');
if (viewStatementSupplier) {
viewStatementSupplier.value = supplierId;
viewStatementSupplier.dispatchEvent(new Event('change'));

// ‫التبديل إلى شاشة كشف الحساب‬

showScreen('account-statements');
}
});
});

// ‫إعداد البحث‬
if (!window.supplierSearchManager) {
window.supplierSearchManager = setupTableSearch('supplierSearch',
'suppliersTable', {
searchableColumns: [0, 1, 2, 3, 4, 5], // ‫البحث في كل الأعمدة‬
‫ما عدا العمليات‬
paginationManager: window.suppliersTablePagination
});
}
}

// ============================
// ‫تعديل بيانات المورد‬
// ============================
function editSupplier(supplierId) {
const suppliers = SupplierStorage.getSuppliers();
const supplier = suppliers.find(s => s.id === supplierId);

if (!supplier) {
ToastManager.error('‫;)'المورد غير موجود‬
return;
}

ModalManager.create({
title: '‫'تعديل بيانات المورد‬,
content: `
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="edit-id" class="block mb-2 font-bold">
‫<الكود‬/label>
<input type="text" id="edit-id" value="${supplier.id}"
class="w-full p-2 border border-gray-300 rounded text-base" readonly>
</div>
<div>
<label for="edit-name" class="block mb-2 font-bold">‫اسم‬
‫<المورد‬/label>
<input type="text" id="edit-name" value="$
{supplier.name}" class="w-full p-2 border border-gray-300 rounded text-base">
</div>
<div>
<label for="edit-address" class="block mb-2 font-bold">
‫<العنوان‬/label>
<input type="text" id="edit-address" value="$
{supplier.address || ''}" class="w-full p-2 border border-gray-300 rounded text-
base">
</div>
<div>
<label for="edit-phone1" class="block mb-2 font-bold">
1 ‫<تلفون‬/label>
<input type="text" id="edit-phone1" value="$
{supplier.phone1 || ''}" class="w-full p-2 border border-gray-300 rounded text-
base">
</div>
<div>
<label for="edit-phone2" class="block mb-2 font-bold">
2 ‫<تلفون‬/label>
<input type="text" id="edit-phone2" value="$
{supplier.phone2 || ''}" class="w-full p-2 border border-gray-300 rounded text-
base">
</div>
<div>
<label for="edit-fax" class="block mb-2 font-bold">
‫<فاكس‬/label>
<input type="text" id="edit-fax" value="${supplier.fax
|| ''}" class="w-full p-2 border border-gray-300 rounded text-base">
</div>
<div>
<label for="edit-account" class="block mb-2 font-bold">
‫<الحساب‬/label>
<input type="text" id="edit-account" value="$
{supplier.account || ''}" class="w-full p-2 border border-gray-300 rounded text-
base">
</div>
<div>
<label for="edit-reference" class="block mb-2 font-
bold">‫<الحساب المرجع‬/label>
<input type="text" id="edit-reference" value="$
{supplier.reference || ''}" class="w-full p-2 border border-gray-300 rounded text-
base">
</div>
</div>
`,
onOk: () => {
const updatedSupplier = {
id: document.getElementById('edit-id').value,
name: document.getElementById('edit-name').value,
address: document.getElementById('edit-address').value,
phone1: document.getElementById('edit-phone1').value,
phone2: document.getElementById('edit-phone2').value,
fax: document.getElementById('edit-fax').value,
account: document.getElementById('edit-account').value,
reference: document.getElementById('edit-reference').value
};

// ‫تحقق من الحقول المطلوبة‬

if (!updatedSupplier.name) {
ToastManager.error('‫;)'اسم المورد مطلوب‬
return;
}

const suppliers = SupplierStorage.getSuppliers();

const index = suppliers.findIndex(s => s.id === supplierId);

if (index !== -1) {

suppliers[index] = updatedSupplier;
SupplierStorage.saveSuppliers(suppliers);
loadSuppliersTable();
loadSuppliersInDropdowns();
ToastManager.success('‫;)'تم تحديث بيانات المورد بنجاح‬
}
}
});
}

// ============================
// ‫حذف المورد‬
// ============================
function deleteSupplier(supplierId) {
const suppliers = SupplierStorage.getSuppliers();
const supplier = suppliers.find(s => s.id === supplierId);

if (!supplier) {
ToastManager.error('‫;)'المورد غير موجود‬
return;
}

ModalManager.confirm(
`‫" هل أنت متأكد من حذف المورد‬${supplier.name}" ‫؟ سيتم حذف جميع‬
‫البيانات المرتبطة به أيًضا‬.`,
() => {
const updatedSuppliers = suppliers.filter(s => s.id !==
supplierId);

SupplierStorage.saveSuppliers(updatedSuppliers);

// ‫حذف البيانات المرتبطة‬

SupplierStorage.removeData(`statements_${supplierId}`);
SupplierStorage.removeData(`matching_${supplierId}`);
SupplierStorage.removeData(`commission_${supplierId}`);
SupplierStorage.removeData(`unposted_${supplierId}`);
SupplierStorage.removeData(`commission_setup_${supplierId}`);
SupplierStorage.removeData(`inventory_${supplierId}`);

loadSuppliersTable();
loadSuppliersInDropdowns();

ToastManager.success('‫;)'تم حذف المورد بنجاح‬

}
);
}

// ============================
// ‫تحميل الموردين في القوائم المنسدلة‬
// ============================
function loadSuppliersInDropdowns() {
const suppliers = SupplierStorage.getSuppliers();
const dropdowns = [
document.getElementById('statementSupplier'),
document.getElementById('viewStatementSupplier'),
document.getElementById('matchSupplier'),
document.getElementById('unpostedSupplier'),
document.getElementById('commissionSupplier'),
document.getElementById('matchingReportSupplier'),
document.getElementById('commissionReportSupplier'),
document.getElementById('financialMetricsSupplier'),
document.getElementById('commissionSetupSupplier'),
document.getElementById('inventorySupplier'),
document.getElementById('inventoryReportSupplier')
];

dropdowns.forEach(dropdown => {
if (!dropdown) return;

// ‫مسح القائمة المنسدلة باستثناء الخيار الأول‬

while (dropdown.options.length > 1) {
dropdown.remove(1);
}

// ‫ترتيب الموردين أبجدًيا‬

// ============================
// ‫تحميل كشوفات الحساب‬
// ============================
function loadStatements(supplierId) {
const statements = SupplierStorage.getStatements(supplierId);
const tableBody = document.getElementById('statementsTableBody');

if (!tableBody) return;

if (statements.length === 0) {
tableBody.innerHTML = `
<tr>
<td colspan="10" class="text-center py-4"> ‫ال توجد بيانات‬
‫<متاحة‬/td>
</tr>
`;
return;
}

tableBody.innerHTML = '';

statements.forEach(statement => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${statement.branch}</td>
<td>${statement.date}</td>
<td>${statement.docNo}</td>
<td>${statement.docType || ''}</td>
<td class="truncate-text" title="${statement.description}">$
{statement.description}</td>
<td>${formatNumber(statement.remainingValue)}</td>
<td>${formatNumber(statement.debit)}</td>
<td>${formatNumber(statement.credit)}</td>
<td>${formatNumber(statement.balance)}</td>
<td class="flex gap-2">
<button class="edit-statement bg-blue-500 text-white px-2
py-1 rounded text-xs hover:bg-blue-600 transition-colors"
data-id="${statement.id}" aria-label=" ‫تعديل‬
‫<سجل">تعديل‬/button>
<button class="delete-statement bg-red-500 text-white px-2
py-1 rounded text-xs hover:bg-red-600 transition-colors"
data-id="${statement.id}" aria-label=" ‫حذف‬
‫<سجل">حذف‬/button>
</td>
`;
tableBody.appendChild(row);
});
// ‫إضافة مستمعي الأحداث للأزرار‬
document.querySelectorAll('.edit-statement').forEach(button => {
button.addEventListener('click', function() {
const statementId = this.dataset.id;
editStatement(supplierId, statementId);
});
});

document.querySelectorAll('.delete-statement').forEach(button => {
button.addEventListener('click', function() {
const statementId = this.dataset.id;
deleteStatement(supplierId, statementId);
});
});

// ‫تهيئة الفرز للجدول‬

setupTableSorting('statementsTable', { excludedColumns: [9] });
}

// ============================
// ‫تعديل سجل في كشف الحساب‬
// ============================
function editStatement(supplierId, statementId) {
const statements = SupplierStorage.getStatements(supplierId);
const statement = statements.find(s => s.id === statementId);

if (!statement) {
ToastManager.error('‫;)'السجل غير موجود‬
return;
}

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

ModalManager.create({
title: '‫'تعديل سجل في كشف الحساب‬,
content: `
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="edit-stmt-branch" class="block mb-2 font-
bold">‫<الفرع‬/label>
<input type="text" id="edit-stmt-branch" value="$
{statement.branch}" class="w-full p-2 border border-gray-300 rounded text-base">
</div>
<div>
<label for="edit-stmt-date" class="block mb-2 font-
bold">‫<التاريخ‬/label>
<input type="text" id="edit-stmt-date" value="$
{statement.date}" class="w-full p-2 border border-gray-300 rounded text-base">
</div>
<div>
<label for="edit-stmt-docNo" class="block mb-2 font-
bold">‫<رقم المستند‬/label>
<input type="text" id="edit-stmt-docNo" value="$
{statement.docNo}" class="w-full p-2 border border-gray-300 rounded text-base">
</div>
<div>
<label for="edit-stmt-docType" class="block mb-2 font-
bold">‫<نوع المستند‬/label>
<select id="edit-stmt-docType" class="w-full p-2 border
border-gray-300 rounded text-base">
${docTypeOptions}
</select>
</div>
<div class="md:col-span-2">
<label for="edit-stmt-description" class="block mb-2
font-bold">‫<البيان‬/label>
<textarea id="edit-stmt-description" class="w-full p-2
border border-gray-300 rounded text-base"
rows="3">${statement.description}</textarea>
</div>
<div>
<label for="edit-stmt-remainingValue" class="block mb-2
font-bold">‫<قيمة البضاعة المتبقية‬/label>
<input type="number" id="edit-stmt-remainingValue"
value="${statement.remainingValue}" class="w-full p-2 border border-gray-300
rounded text-base" step="0.01">
</div>
<div>
<label for="edit-stmt-debit" class="block mb-2 font-
bold">‫<مدين‬/label>
<input type="number" id="edit-stmt-debit" value="$
{statement.debit}" class="w-full p-2 border border-gray-300 rounded text-base"
step="0.01">
</div>
<div>
<label for="edit-stmt-credit" class="block mb-2 font-
bold">‫<دائن‬/label>
<input type="number" id="edit-stmt-credit" value="$
{statement.credit}" class="w-full p-2 border border-gray-300 rounded text-base"
step="0.01">
</div>
</div>
`,
onOk: () => {
// ‫جمع البيانات المحدثة‬
const updatedStatement = {
...statement,
branch: document.getElementById('edit-stmt-branch').value,
date: document.getElementById('edit-stmt-date').value,
docNo: document.getElementById('edit-stmt-docNo').value,
docType: document.getElementById('edit-stmt-
docType').value,
description: document.getElementById('edit-stmt-
description').value,
remainingValue: parseFloat(document.getElementById('edit-
stmt-remainingValue').value) || 0,
debit: parseFloat(document.getElementById('edit-stmt-
debit').value) || 0,
credit: parseFloat(document.getElementById('edit-stmt-
credit').value) || 0
};

// ‫التحقق من البيانات‬
if (!updatedStatement.date || !updatedStatement.docNo) {
ToastManager.error('‫;)'التاريخ ورقم المستند مطلوبان‬
return;
}

// ‫تحديث السجل‬
const index = statements.findIndex(s => s.id === statementId);
if (index !== -1) {
statements[index] = updatedStatement;

// ‫إعادة حساب الرصيد‬

let balance = 0;
statements.forEach((stmt, i) => {
balance = balance + stmt.debit - stmt.credit;
statements[i].balance = balance;
});

SupplierStorage.saveStatements(supplierId, statements);
loadStatements(supplierId);
ToastManager.success('‫;)'تم تحديث السجل بنجاح‬
}
}
});
}

// ============================
// ‫حذف سجل من كشف الحساب‬
// ============================
function deleteStatement(supplierId, statementId) {
ModalManager.confirm(
'‫'هل أنت متأكد من حذف هذا السجل؟‬,
() => {
const statements = SupplierStorage.getStatements(supplierId);
const updatedStatements = statements.filter(s => s.id !==
statementId);

// ‫إعادة حساب الأرصدة إذا لزم الأمر‬

if (updatedStatements.length > 0) {
let balance = 0;
updatedStatements.forEach((statement, index) => {
balance = balance + statement.debit - statement.credit;
statement.balance = balance;
statement.id = index.toString(); // ‫إعادة تعيين‬
‫المعرفات‬
});
}

SupplierStorage.saveStatements(supplierId, updatedStatements);
</script>
</body>
</html>

كتاب إحترف تجاوب المواقع بالبوتستراب
No ratings yet
كتاب إحترف تجاوب المواقع بالبوتستراب
114 pages
اكواد html جاهزة و احترافية - المرسال
No ratings yet
اكواد html جاهزة و احترافية - المرسال
19 pages
Java Script 2
100% (2)
Java Script 2
121 pages
!doctype HTML
No ratings yet
!doctype HTML
65 pages
HTML Website1
No ratings yet
HTML Website1
25 pages
Angular Shopping Store: From Scratch to Successful Payment
From Everand
Angular Shopping Store: From Scratch to Successful Payment
Abdelfattah Ragab
No ratings yet
Auto Indexer - PHP
No ratings yet
Auto Indexer - PHP
16 pages
Css
No ratings yet
Css
6 pages
Css &
No ratings yet
Css &
278 pages
Message
No ratings yet
Message
7 pages
!DOCTYPE html1
No ratings yet
!DOCTYPE html1
6 pages
redirectToURL Chrome Tiktok 1
No ratings yet
redirectToURL Chrome Tiktok 1
6 pages
تاكد ١
No ratings yet
تاكد ١
1 page
New Text Document
No ratings yet
New Text Document
6 pages
Flexbox in CSS Explanation
No ratings yet
Flexbox in CSS Explanation
5 pages
Intern Project
No ratings yet
Intern Project
36 pages
Indexhtml
No ratings yet
Indexhtml
13 pages
Estilos Css
No ratings yet
Estilos Css
27 pages
Prototype CRM
No ratings yet
Prototype CRM
101 pages
Trang cá nhân cuối
No ratings yet
Trang cá nhân cuối
29 pages
Creative 41859 4
No ratings yet
Creative 41859 4
9 pages
Front R38 Test 6
No ratings yet
Front R38 Test 6
9 pages
قالب سورا شوب معرب
No ratings yet
قالب سورا شوب معرب
240 pages
Building A Project
No ratings yet
Building A Project
20 pages
Data User 0 Com - Zoho.notebook Files Untitled
No ratings yet
Data User 0 Com - Zoho.notebook Files Untitled
29 pages
View
No ratings yet
View
5 pages
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
Homepage
No ratings yet
Homepage
5 pages
Code Games صفحة الهبوط
No ratings yet
Code Games صفحة الهبوط
46 pages
Cs420 Assignment Solution
No ratings yet
Cs420 Assignment Solution
8 pages
Theme 15588302489723418
No ratings yet
Theme 15588302489723418
17 pages
RETTT
No ratings yet
RETTT
14 pages
UIUX Final Lab Manual
No ratings yet
UIUX Final Lab Manual
30 pages
DOCTYPE HTML
No ratings yet
DOCTYPE HTML
4 pages
New Text Document
No ratings yet
New Text Document
6 pages
برنامج تصميم
No ratings yet
برنامج تصميم
21 pages
HTML Learn
No ratings yet
HTML Learn
13 pages
Text
No ratings yet
Text
5 pages
bombes.xml صفحة هبوط تحميل فيفا و العاب اخرى
No ratings yet
bombes.xml صفحة هبوط تحميل فيفا و العاب اخرى
44 pages
Design Web Page Using HTML AND CSS
No ratings yet
Design Web Page Using HTML AND CSS
11 pages
براء العواضي
No ratings yet
براء العواضي
11 pages
React Portfolio App Development: Increase your online presence and create your personal brand
From Everand
React Portfolio App Development: Increase your online presence and create your personal brand
Abdelfattah Ragab
No ratings yet
Lesson 8
No ratings yet
Lesson 8
6 pages
Gistfile 1
No ratings yet
Gistfile 1
10 pages
Other Dashboard Backup Codes
No ratings yet
Other Dashboard Backup Codes
37 pages
تواصل معي
No ratings yet
تواصل معي
18 pages
PDF1
No ratings yet
PDF1
12 pages
Email HTML
No ratings yet
Email HTML
31 pages
Css Full Elements Book - Qassemblog
No ratings yet
Css Full Elements Book - Qassemblog
5 pages
Theme
No ratings yet
Theme
249 pages
New Email Template Made On 08-06-24
No ratings yet
New Email Template Made On 08-06-24
2 pages
Version 1.5.1
No ratings yet
Version 1.5.1
46 pages
Photgram
No ratings yet
Photgram
7 pages
Portfolio Code
No ratings yet
Portfolio Code
66 pages
Bi
No ratings yet
Bi
7 pages
Microsoft C# and MVC
No ratings yet
Microsoft C# and MVC
3 pages
Zeknardv 1
No ratings yet
Zeknardv 1
16 pages
1RIJNIX777 CHEAT v2.1
No ratings yet
1RIJNIX777 CHEAT v2.1
16 pages
4444444444
No ratings yet
4444444444
1 page
Index
No ratings yet
Index
60 pages