Hugging Face's logo

Spaces:
Tahersaeedi
/
anycoder-0ca1f7cf
Running

App Files Community
Tahersaeedi commited on
Commit
9c2d201
·
verified ·
1 Parent(s): d5abe20

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +333 -245
index.html CHANGED
@@ -1,12 +1,14 @@
1
  <!DOCTYPE html>
2
  <html lang="fa" dir="rtl">
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>سیستم مدیریت ضمانت‌نامه‌های بانکی</title>
7
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css">
8
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
9
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/persian-datepicker@1.2.0/dist/css/persian-datepicker.min.css">
 
10
  <style>
11
  :root {
12
  --primary-color: #2c3e50;
@@ -40,7 +42,8 @@
40
  transition: all 0.3s;
41
  }
42
 
43
- .sidebar .nav-link:hover, .sidebar .nav-link.active {
 
44
  background-color: rgba(255, 255, 255, 0.1);
45
  color: white;
46
  }
@@ -135,7 +138,8 @@
135
  margin-bottom: 0;
136
  }
137
 
138
- .table th, .table td {
 
139
  vertical-align: middle;
140
  }
141
 
@@ -143,12 +147,14 @@
143
  max-width: 800px;
144
  }
145
 
146
- .form-control, .form-select {
 
147
  border-radius: 5px;
148
  border: 1px solid #ddd;
149
  }
150
 
151
- .form-control:focus, .form-select:focus {
 
152
  border-color: var(--secondary-color);
153
  box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
154
  }
@@ -258,6 +264,7 @@
258
  }
259
  </style>
260
  </head>
 
261
  <body>
262
  <div class="container-fluid">
263
  <div class="row">
@@ -265,7 +272,7 @@
265
  <div class="col-md-3 col-lg-2 sidebar">
266
  <div class="p-3">
267
  <h4 class="text-center mb-4">مدیریت ضمانت‌نامه‌ها</h4>
268
- <ul class="nav flex-column">
269
  <li class="nav-item">
270
  <a class="nav-link active" href="#" data-page="dashboard">
271
  <i class="bi bi-speedometer2 me-2"></i>
@@ -362,222 +369,6 @@
362
  </div>
363
  </div>
364
 
365
- <!-- Guarantee Modal -->
366
- <div class="modal fade" id="guaranteeModal" tabindex="-1" aria-hidden="true">
367
- <div class="modal-dialog modal-lg">
368
- <div class="modal-content">
369
- <div class="modal-header">
370
- <h5 class="modal-title" id="guaranteeModalLabel">اضافه کردن ضمانت‌نامه جدید</h5>
371
- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
372
- </div>
373
- <div class="modal-body">
374
- <form id="guaranteeForm">
375
- <div class="row">
376
- <div class="col-md-6 mb-3">
377
- <label for="guaranteeNumber" class="form-label">شماره ضمانت‌نامه <span class="text-danger">*</span></label>
378
- <input type="text" class="form-control" id="guaranteeNumber" required>
379
- </div>
380
- <div class="col-md-6 mb-3">
381
- <label for="guaranteeType" class="form-label">نوع ضمانت‌نامه <span class="text-danger">*</span></label>
382
- <select class="form-select" id="guaranteeType" required>
383
- <option value="">انتخاب کنید</option>
384
- <option value="تندر">شرکت در مناقصه</option>
385
- <option value="حسن انجام کار">حسن انجام کار</option>
386
- <option value="پیش‌پرداخت">پیش‌پرداخت</option>
387
- <option value="کسورات">کسورات</option>
388
- <option value="سایر">سایر</option>
389
- </select>
390
- </div>
391
- </div>
392
-
393
- <div class="row">
394
- <div class="col-md-6 mb-3">
395
- <label for="bankId" class="form-label">بانک و شعبه <span class="text-danger">*</span></label>
396
- <select class="form-select" id="bankId" required>
397
- <option value="">انتخاب کنید</option>
398
- </select>
399
- </div>
400
- <div class="col-md-6 mb-3">
401
- <label for="amount" class="form-label">مبلغ (ریال) <span class="text-danger">*</span></label>
402
- <input type="number" class="form-control" id="amount" required>
403
- </div>
404
- </div>
405
-
406
- <div class="row">
407
- <div class="col-md-6 mb-3">
408
- <label for="issueDate" class="form-label">تاریخ صدور <span class="text-danger">*</span></label>
409
- <input type="text" class="form-control persian-datepicker" id="issueDate" required>
410
- </div>
411
- <div class="col-md-6 mb-3">
412
- <label for="expiryDate" class="form-label">تاریخ سررسید <span class="text-danger">*</span></label>
413
- <input type="text" class="form-control persian-datepicker" id="expiryDate" required>
414
- </div>
415
- </div>
416
-
417
- <div class="row">
418
- <div class="col-md-6 mb-3">
419
- <label for="status" class="form-label">وضعیت <span class="text-danger">*</span></label>
420
- <select class="form-select" id="status" required>
421
- <option value="active">فعال</option>
422
- <option value="renewed">تمدید شده</option>
423
- <option value="released">آزاد شده</option>
424
- <option value="captured">ضبط شده</option>
425
- <option value="cancelled">ابطال شده</option>
426
- </select>
427
- </div>
428
- <div class="col-md-6 mb-3">
429
- <label for="contractorId" class="form-label">پیمانکار <span class="text-danger">*</span></label>
430
- <select class="form-select" id="contractorId" required>
431
- <option value="">انتخاب کنید</option>
432
- </select>
433
- </div>
434
- </div>
435
-
436
- <div class="row">
437
- <div class="col-md-6 mb-3">
438
- <label for="contractNumber" class="form-label">شماره قرارداد</label>
439
- <input type="text" class="form-control" id="contractNumber">
440
- </div>
441
- <div class="col-md-6 mb-3">
442
- <label for="contractTitle" class="form-label">عنوان قرارداد</label>
443
- <input type="text" class="form-control" id="contractTitle">
444
- </div>
445
- </div>
446
-
447
- <div class="mb-3">
448
- <label for="description" class="form-label">توضیحات</label>
449
- <textarea class="form-control" id="description" rows="3"></textarea>
450
- </div>
451
-
452
- <div class="mb-3">
453
- <label class="form-label">فایل‌های پیوست</label>
454
- <div class="file-upload" id="fileUpload">
455
- <i class="bi bi-cloud-arrow-up fs-1 mb-2"></i>
456
- <p>فایل‌ها را اینجا بکشید یا کلیک کنید</p>
457
- <input type="file" id="fileInput" multiple style="display: none;">
458
- </div>
459
- <div class="file-list mt-2" id="fileList"></div>
460
- </div>
461
- </form>
462
- </div>
463
- <div class="modal-footer">
464
- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">انصراف</button>
465
- <button type="button" class="btn btn-primary" id="saveGuarantee">ذخیره</button>
466
- </div>
467
- </div>
468
- </div>
469
- </div>
470
-
471
- <!-- Contractor Modal -->
472
- <div class="modal fade" id="contractorModal" tabindex="-1" aria-hidden="true">
473
- <div class="modal-dialog">
474
- <div class="modal-content">
475
- <div class="modal-header">
476
- <h5 class="modal-title" id="contractorModalLabel">اضافه کردن پیمانکار جدید</h5>
477
- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
478
- </div>
479
- <div class="modal-body">
480
- <form id="contractorForm">
481
- <div class="mb-3">
482
- <label for="contractorName" class="form-label">نام شرکت <span class="text-danger">*</span></label>
483
- <input type="text" class="form-control" id="contractorName" required>
484
- </div>
485
- <div class="mb-3">
486
- <label for="nationalId" class="form-label">شناسه ملی</label>
487
- <input type="text" class="form-control" id="nationalId">
488
- </div>
489
- <div class="mb-3">
490
- <label for="economicCode" class="form-label">کد اقتصادی</label>
491
- <input type="text" class="form-control" id="economicCode">
492
- </div>
493
- <div class="mb-3">
494
- <label for="contactPerson" class="form-label">نام مسئول</label>
495
- <input type="text" class="form-control" id="contactPerson">
496
- </div>
497
- <div class="mb-3">
498
- <label for="phone" class="form-label">تلفن</label>
499
- <input type="text" class="form-control" id="phone">
500
- </div>
501
- <div class="mb-3">
502
- <label for="mobile" class="form-label">موبایل</label>
503
- <input type="text" class="form-control" id="mobile">
504
- </div>
505
- <div class="mb-3">
506
- <label for="email" class="form-label">ایمیل</label>
507
- <input type="email" class="form-control" id="email">
508
- </div>
509
- <div class="mb-3">
510
- <label for="address" class="form-label">آدرس</label>
511
- <textarea class="form-control" id="address" rows="3"></textarea>
512
- </div>
513
- </form>
514
- </div>
515
- <div class="modal-footer">
516
- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">انصراف</button>
517
- <button type="button" class="btn btn-primary" id="saveContractor">ذخیره</button>
518
- </div>
519
- </div>
520
- </div>
521
- </div>
522
-
523
- <!-- Bank Modal -->
524
- <div class="modal fade" id="bankModal" tabindex="-1" aria-hidden="true">
525
- <div class="modal-dialog">
526
- <div class="modal-content">
527
- <div class="modal-header">
528
- <h5 class="modal-title" id="bankModalLabel">اضافه کردن بانک/شعبه جدید</h5>
529
- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
530
- </div>
531
- <div class="modal-body">
532
- <form id="bankForm">
533
- <div class="mb-3">
534
- <label for="bankName" class="form-label">نام بانک <span class="text-danger">*</span></label>
535
- <input type="text" class="form-control" id="bankName" required>
536
- </div>
537
- <div class="mb-3">
538
- <label for="branchName" class="form-label">نام شعبه <span class="text-danger">*</span></label>
539
- <input type="text" class="form-control" id="branchName" required>
540
- </div>
541
- <div class="mb-3">
542
- <label for="branchCode" class="form-label">کد شعبه</label>
543
- <input type="text" class="form-control" id="branchCode">
544
- </div>
545
- <div class="mb-3">
546
- <label for="bankPhone" class="form-label">تلفن</label>
547
- <input type="text" class="form-control" id="bankPhone">
548
- </div>
549
- <div class="mb-3">
550
- <label for="bankAddress" class="form-label">آدرس</label>
551
- <textarea class="form-control" id="bankAddress" rows="3"></textarea>
552
- </div>
553
- </form>
554
- </div>
555
- <div class="modal-footer">
556
- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">انصراف</button>
557
- <button type="button" class="btn btn-primary" id="saveBank">ذخیره</button>
558
- </div>
559
- </div>
560
- </div>
561
- </div>
562
-
563
- <!-- Alert Modal -->
564
- <div class="modal fade" id="alertModal" tabindex="-1" aria-hidden="true">
565
- <div class="modal-dialog">
566
- <div class="modal-content">
567
- <div class="modal-header">
568
- <h5 class="modal-title">هشدار سررسید ضمانت‌نامه</h5>
569
- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
570
- </div>
571
- <div class="modal-body" id="alertModalBody">
572
- <!-- Alert content will be loaded here -->
573
- </div>
574
- <div class="modal-footer">
575
- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
576
- </div>
577
- </div>
578
- </div>
579
- </div>
580
-
581
  <!-- Built with anycoder -->
582
  <div class="built-with">
583
  Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
@@ -600,6 +391,9 @@
600
  <!-- Load JSZip for backup -->
601
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
602
 
 
 
 
603
  <script>
604
  // Database simulation (in a real app, this would be SQLite)
605
  let db = {
@@ -639,13 +433,13 @@
639
  });
640
 
641
  function setupEventListeners() {
642
- // Sidebar navigation
643
- document.querySelectorAll('.nav-link').forEach(link => {
644
- link.addEventListener('click', function(e) {
645
  e.preventDefault();
646
- const page = this.getAttribute('data-page');
647
  loadPage(page);
648
- });
649
  });
650
 
651
  // Login form
@@ -657,22 +451,6 @@
657
  // Logout button
658
  document.getElementById('logoutBtn')?.addEventListener('click', logout);
659
 
660
- // Guarantee form
661
- document.getElementById('saveGuarantee')?.addEventListener('click', saveGuarantee);
662
-
663
- // Contractor form
664
- document.getElementById('saveContractor')?.addEventListener('click', saveContractor);
665
-
666
- // Bank form
667
- document.getElementById('saveBank')?.addEventListener('click', saveBank);
668
-
669
- // File upload
670
- document.getElementById('fileUpload')?.addEventListener('click', function() {
671
- document.getElementById('fileInput').click();
672
- });
673
-
674
- document.getElementById('fileInput')?.addEventListener('change', handleFileUpload);
675
-
676
  // Toggle sidebar for mobile
677
  document.getElementById('toggleSidebar')?.addEventListener('click', function() {
678
  document.querySelector('.sidebar').classList.toggle('d-none');
@@ -1082,5 +860,315 @@
1082
  <h4>مدیریت ضمانت‌نامه‌ها</h4>
1083
  </div>
1084
  <div class="col-md-6 text-start">
1085
- <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#guaranteeModal" onclick="resetGuaranteeForm()">
1086
- <i class="
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html lang="fa" dir="rtl">
3
+
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>سیستم مدیریت ضمانت‌نامه‌های بانکی</title>
8
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css">
9
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
10
+ <link rel="stylesheet"
11
+ href="https://cdn.jsdelivr.net/npm/persian-datepicker@1.2.0/dist/css/persian-datepicker.min.css">
12
  <style>
13
  :root {
14
  --primary-color: #2c3e50;
 
42
  transition: all 0.3s;
43
  }
44
 
45
+ .sidebar .nav-link:hover,
46
+ .sidebar .nav-link.active {
47
  background-color: rgba(255, 255, 255, 0.1);
48
  color: white;
49
  }
 
138
  margin-bottom: 0;
139
  }
140
 
141
+ .table th,
142
+ .table td {
143
  vertical-align: middle;
144
  }
145
 
 
147
  max-width: 800px;
148
  }
149
 
150
+ .form-control,
151
+ .form-select {
152
  border-radius: 5px;
153
  border: 1px solid #ddd;
154
  }
155
 
156
+ .form-control:focus,
157
+ .form-select:focus {
158
  border-color: var(--secondary-color);
159
  box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
160
  }
 
264
  }
265
  </style>
266
  </head>
267
+
268
  <body>
269
  <div class="container-fluid">
270
  <div class="row">
 
272
  <div class="col-md-3 col-lg-2 sidebar">
273
  <div class="p-3">
274
  <h4 class="text-center mb-4">مدیریت ضمانت‌نامه‌ها</h4>
275
+ <ul class="nav flex-column" id="sidebarMenu">
276
  <li class="nav-item">
277
  <a class="nav-link active" href="#" data-page="dashboard">
278
  <i class="bi bi-speedometer2 me-2"></i>
 
369
  </div>
370
  </div>
371
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
372
  <!-- Built with anycoder -->
373
  <div class="built-with">
374
  Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
 
391
  <!-- Load JSZip for backup -->
392
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
393
 
394
+ <!-- Load MD5 for password hashing -->
395
+ <script src="https://cdn.jsdelivr.net/npm/js-md5@0.7.3/src/md5.min.js"></script>
396
+
397
  <script>
398
  // Database simulation (in a real app, this would be SQLite)
399
  let db = {
 
433
  });
434
 
435
  function setupEventListeners() {
436
+ // Sidebar navigation - FIXED: Now properly working
437
+ document.getElementById('sidebarMenu').addEventListener('click', function(e) {
438
+ if (e.target.classList.contains('nav-link')) {
439
  e.preventDefault();
440
+ const page = e.target.getAttribute('data-page');
441
  loadPage(page);
442
+ }
443
  });
444
 
445
  // Login form
 
451
  // Logout button
452
  document.getElementById('logoutBtn')?.addEventListener('click', logout);
453
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
454
  // Toggle sidebar for mobile
455
  document.getElementById('toggleSidebar')?.addEventListener('click', function() {
456
  document.querySelector('.sidebar').classList.toggle('d-none');
 
860
  <h4>مدیریت ضمانت‌نامه‌ها</h4>
861
  </div>
862
  <div class="col-md-6 text-start">
863
+ <button class="btn btn-primary" onclick="showGuaranteeModal()">
864
+ <i class="bi bi-plus-circle me-2"></i> اضافه کردن ضمانت‌نامه جدید
865
+ </button>
866
+ </div>
867
+ </div>
868
+
869
+ <div class="card">
870
+ <div class="card-header">
871
+ لیست ضمانت‌نامه‌ها
872
+ </div>
873
+ <div class="card-body">
874
+ <div class="row mb-3">
875
+ <div class="col-md-4">
876
+ <div class="search-box">
877
+ <i class="bi bi-search"></i>
878
+ <input type="text" class="form-control" id="searchGuarantees" placeholder="جستجوی ضمانت‌نامه...">
879
+ </div>
880
+ </div>
881
+ <div class="col-md-4">
882
+ <select class="form-select" id="filterStatus">
883
+ <option value="">همه وضعیت‌ها</option>
884
+ <option value="active">فعال</option>
885
+ <option value="renewed">تمدید شده</option>
886
+ <option value="released">آزاد شده</option>
887
+ <option value="captured">ضبط شده</option>
888
+ <option value="cancelled">ابطال شده</option>
889
+ </select>
890
+ </div>
891
+ <div class="col-md-4">
892
+ <select class="form-select" id="filterBank">
893
+ <option value="">همه بانک‌ها</option>
894
+ ${db.banks.map(bank => `<option value="${bank.id}">${bank.name} - ${bank.branch}</option>`).join('')}
895
+ </select>
896
+ </div>
897
+ </div>
898
+
899
+ <div class="table-responsive">
900
+ <table class="table table-hover">
901
+ <thead>
902
+ <tr>
903
+ <th>شماره</th>
904
+ <th>نوع</th>
905
+ <th>پیمانکار</th>
906
+ <th>بانک</th>
907
+ <th>مبلغ</th>
908
+ <th>تاریخ صدور</th>
909
+ <th>تاریخ سررسید</th>
910
+ <th>وضعیت</th>
911
+ <th>عملیات</th>
912
+ </tr>
913
+ </thead>
914
+ <tbody id="guaranteesTableBody">
915
+ ${db.guarantees.map(g => {
916
+ const bank = db.banks.find(b => b.id === g.bankId);
917
+ const contractor = db.contractors.find(c => c.id === g.contractorId);
918
+ return `
919
+ <tr>
920
+ <td>${g.number}</td>
921
+ <td>${g.type}</td>
922
+ <td>${contractor ? contractor.name : 'نامشخص'}</td>
923
+ <td>${bank ? `${bank.name} - ${bank.branch}` : 'نامشخص'}</td>
924
+ <td>${g.amount.toLocaleString()}</td>
925
+ <td>${g.issueDate}</td>
926
+ <td>${g.expiryDate}</td>
927
+ <td><span class="status-badge status-${g.status}">${getStatusText(g.status)}</span></td>
928
+ <td>
929
+ <button class="btn btn-sm btn-outline-primary" onclick="editGuarantee(${g.id})">
930
+ <i class="bi bi-pencil"></i>
931
+ </button>
932
+ <button class="btn btn-sm btn-outline-danger" onclick="deleteGuarantee(${g.id})">
933
+ <i class="bi bi-trash"></i>
934
+ </button>
935
+ </td>
936
+ </tr>
937
+ `;
938
+ }).join('')}
939
+ </tbody>
940
+ </table>
941
+ </div>
942
+
943
+ <div class="d-flex justify-content-between align-items-center">
944
+ <div>
945
+ <span>نمایش 1 تا ${db.guarantees.length} از ${db.guarantees.length} مورد</span>
946
+ </div>
947
+ <nav>
948
+ <ul class="pagination">
949
+ <li class="page-item disabled">
950
+ <a class="page-link" href="#" aria-label="Previous">
951
+ <span aria-hidden="true">&laquo;</span>
952
+ </a>
953
+ </li>
954
+ <li class="page-item active"><a class="page-link" href="#">1</a></li>
955
+ <li class="page-item disabled">
956
+ <a class="page-link" href="#" aria-label="Next">
957
+ <span aria-hidden="true">&raquo;</span>
958
+ </a>
959
+ </li>
960
+ </ul>
961
+ </nav>
962
+ </div>
963
+ </div>
964
+ </div>
965
+ `;
966
+
967
+ document.getElementById('pageContent').innerHTML = html;
968
+
969
+ // Set up search and filter functionality
970
+ document.getElementById('searchGuarantees').addEventListener('input', filterGuarantees);
971
+ document.getElementById('filterStatus').addEventListener('change', filterGuarantees);
972
+ document.getElementById('filterBank').addEventListener('change', filterGuarantees);
973
+ }
974
+
975
+ function loadContractors() {
976
+ let html = `
977
+ <div class="row mb-4">
978
+ <div class="col-md-6">
979
+ <h4>مدیریت پیمانکاران</h4>
980
+ </div>
981
+ <div class="col-md-6 text-start">
982
+ <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#contractorModal" onclick="resetContractorForm()">
983
+ <i class="bi bi-plus-circle me-2"></i> اضافه کردن پیمانکار جدید
984
+ </button>
985
+ </div>
986
+ </div>
987
+
988
+ <div class="card">
989
+ <div class="card-header">
990
+ لیست پیمانکاران
991
+ </div>
992
+ <div class="card-body">
993
+ <div class="row mb-3">
994
+ <div class="col-md-6">
995
+ <div class="search-box">
996
+ <i class="bi bi-search"></i>
997
+ <input type="text" class="form-control" id="searchContractors" placeholder="جستجوی پیمانکار...">
998
+ </div>
999
+ </div>
1000
+ </div>
1001
+
1002
+ <div class="table-responsive">
1003
+ <table class="table table-hover">
1004
+ <thead>
1005
+ <tr>
1006
+ <th>نام شرکت</th>
1007
+ <th>شناسه ملی</th>
1008
+ <th>کد اقتصادی</th>
1009
+ <th>مسئول</th>
1010
+ <th>تلفن</th>
1011
+ <th>موبایل</th>
1012
+ <th>عملیات</th>
1013
+ </tr>
1014
+ </thead>
1015
+ <tbody id="contractorsTableBody">
1016
+ ${db.contractors.map(c => `
1017
+ <tr>
1018
+ <td>${c.name}</td>
1019
+ <td>${c.nationalId || '-'}</td>
1020
+ <td>${c.economicCode || '-'}</td>
1021
+ <td>${c.contactPerson || '-'}</td>
1022
+ <td>${c.phone || '-'}</td>
1023
+ <td>${c.mobile || '-'}</td>
1024
+ <td>
1025
+ <button class="btn btn-sm btn-outline-primary" onclick="editContractor(${c.id})">
1026
+ <i class="bi bi-pencil"></i>
1027
+ </button>
1028
+ <button class="btn btn-sm btn-outline-danger" onclick="deleteContractor(${c.id})">
1029
+ <i class="bi bi-trash"></i>
1030
+ </button>
1031
+ </td>
1032
+ </tr>
1033
+ `).join('')}
1034
+ </tbody>
1035
+ </table>
1036
+ </div>
1037
+ </div>
1038
+ </div>
1039
+ `;
1040
+
1041
+ document.getElementById('pageContent').innerHTML = html;
1042
+
1043
+ // Set up search functionality
1044
+ document.getElementById('searchContractors').addEventListener('input', function() {
1045
+ const searchTerm = this.value.toLowerCase();
1046
+ const rows = document.querySelectorAll('#contractorsTableBody tr');
1047
+
1048
+ rows.forEach(row => {
1049
+ const text = row.textContent.toLowerCase();
1050
+ row.style.display = text.includes(searchTerm) ? '' : 'none';
1051
+ });
1052
+ });
1053
+ }
1054
+
1055
+ function loadBanks() {
1056
+ let html = `
1057
+ <div class="row mb-4">
1058
+ <div class="col-md-6">
1059
+ <h4>مدیریت بانک‌ها و شعب</h4>
1060
+ </div>
1061
+ <div class="col-md-6 text-start">
1062
+ <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#bankModal" onclick="resetBankForm()">
1063
+ <i class="bi bi-plus-circle me-2"></i> اضافه کردن بانک/شعبه جدید
1064
+ </button>
1065
+ </div>
1066
+ </div>
1067
+
1068
+ <div class="card">
1069
+ <div class="card-header">
1070
+ لیست بانک‌ها و شعب
1071
+ </div>
1072
+ <div class="card-body">
1073
+ <div class="row mb-3">
1074
+ <div class="col-md-6">
1075
+ <div class="search-box">
1076
+ <i class="bi bi-search"></i>
1077
+ <input type="text" class="form-control" id="searchBanks" placeholder="جستجوی بانک...">
1078
+ </div>
1079
+ </div>
1080
+ </div>
1081
+
1082
+ <div class="table-responsive">
1083
+ <table class="table table-hover">
1084
+ <thead>
1085
+ <tr>
1086
+ <th>نام بانک</th>
1087
+ <th>نام شعبه</th>
1088
+ <th>کد شعبه</th>
1089
+ <th>تلفن</th>
1090
+ <th>عملیات</th>
1091
+ </tr>
1092
+ </thead>
1093
+ <tbody id="banksTableBody">
1094
+ ${db.banks.map(b => `
1095
+ <tr>
1096
+ <td>${b.name}</td>
1097
+ <td>${b.branch}</td>
1098
+ <td>${b.code || '-'}</td>
1099
+ <td>${b.phone || '-'}</td>
1100
+ <td>
1101
+ <button class="btn btn-sm btn-outline-primary" onclick="editBank(${b.id})">
1102
+ <i class="bi bi-pencil"></i>
1103
+ </button>
1104
+ <button class="btn btn-sm btn-outline-danger" onclick="deleteBank(${b.id})">
1105
+ <i class="bi bi-trash"></i>
1106
+ </button>
1107
+ </td>
1108
+ </tr>
1109
+ `).join('')}
1110
+ </tbody>
1111
+ </table>
1112
+ </div>
1113
+ </div>
1114
+ </div>
1115
+ `;
1116
+
1117
+ document.getElementById('pageContent').innerHTML = html;
1118
+
1119
+ // Set up search functionality
1120
+ document.getElementById('searchBanks').addEventListener('input', function() {
1121
+ const searchTerm = this.value.toLowerCase();
1122
+ const rows = document.querySelectorAll('#banksTableBody tr');
1123
+
1124
+ rows.forEach(row => {
1125
+ const text = row.textContent.toLowerCase();
1126
+ row.style.display = text.includes(searchTerm) ? '' : 'none';
1127
+ });
1128
+ });
1129
+ }
1130
+
1131
+ function loadReports() {
1132
+ let html = `
1133
+ <div class="row mb-4">
1134
+ <div class="col-md-12">
1135
+ <h4>گزارش‌ها</h4>
1136
+ </div>
1137
+ </div>
1138
+
1139
+ <div class="row mb-4">
1140
+ <div class="col-md-6">
1141
+ <div class="card">
1142
+ <div class="card-header">
1143
+ گزارش بر اساس وضعیت
1144
+ </div>
1145
+ <div class="card-body">
1146
+ <canvas id="reportStatusChart" width="400" height="300"></canvas>
1147
+ </div>
1148
+ </div>
1149
+ </div>
1150
+ <div class="col-md-6">
1151
+ <div class="card">
1152
+ <div class="card-header">
1153
+ گزارش بر اساس نوع
1154
+ </div>
1155
+ <div class="card-body">
1156
+ <canvas id="reportTypeChart" width="400" height="300"></canvas>
1157
+ </div>
1158
+ </div>
1159
+ </div>
1160
+ </div>
1161
+
1162
+ <div class="card">
1163
+ <div class="card-header d-flex justify-content-between align-items-center">
1164
+ گزارش کامل ضمانت‌نامه‌ها
1165
+ <div>
1166
+ <button class="btn btn-sm btn-outline-success" onclick="exportToExcel()">
1167
+ <i class="bi bi-file-earmark-excel me-2"></i> اکسل
1168
+ </button>
1169
+ <button class="btn btn-sm btn-outline-danger" onclick="exportToPDF()">
1170
+ <i class="bi bi-file-earmark-pdf me-2"></i> PDF
1171
+ </button>
1172
+ </div>
1173
+ </div>
1174
+ <div class="card-body">