Update index.html

index.html

@@ -1272,47 +1272,6 @@
             align-items: center;
         }
         
-        /* طراحی واکنش‌گرا */
-        @media (max-width: 768px) {
-            .tabs-nav {
-                flex-direction: column;
-                gap: 0.75rem;
-            }
-            
-            .progress-container {
-                flex-direction: column;
-                align-items: center;
-            }
-            
-            .circle-progress {
-                margin: 0 0 1.5rem 0;
-            }
-            
-            .progress-info {
-                text-align: center;
-            }
-            
-            .comparison-table {
-                display: block;
-                overflow-x: auto;
-                white-space: nowrap;
-            }
-            
-            .steps-list::before {
-                right: 1rem;
-            }
-            
-            .step-item {
-                padding-right: 2.75rem;
-            }
-            
-            .step-dot {
-                width: 2rem;
-                height: 2rem;
-                font-size: 0.9rem;
-            }
-        }
-        
         @media (max-width: 576px) {
             .tabs {
                 flex-direction: column;
@@ -1328,6 +1287,116 @@
                 background-color: var(--light-bg);
             }
         }
+        
+        /* سیستم نمایش پیام‌های خطا و هشدار */
+        .toast-container {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            z-index: 9999;
+            max-width: 350px;
+        }
+        
+        .toast {
+            background-color: white;
+            color: var(--dark-text);
+            padding: 1rem;
+            margin-bottom: 0.75rem;
+            border-radius: var(--radius-md);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            display: flex;
+            align-items: flex-start;
+            transform: translateX(120%);
+            transition: transform 0.3s ease;
+            overflow: hidden;
+            max-width: 100%;
+        }
+        
+        .toast.show {
+            transform: translateX(0);
+        }
+        
+        .toast-icon {
+            min-width: 24px;
+            height: 24px;
+            margin-left: 0.75rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .toast-content {
+            flex: 1;
+        }
+        
+        .toast-title {
+            font-weight: bold;
+            margin-bottom: 0.25rem;
+        }
+        
+        .toast-message {
+            font-size: 0.9rem;
+            color: var(--gray-text);
+        }
+        
+        .toast-close {
+            background: transparent;
+            border: none;
+            color: var(--gray-text);
+            cursor: pointer;
+            font-size: 1.25rem;
+            padding: 0;
+            margin-right: 0.5rem;
+            line-height: 1;
+            transition: color 0.2s;
+        }
+        
+        .toast-close:hover {
+            color: var(--dark-text);
+        }
+        
+        .toast-progress {
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            width: 100%;
+            height: 3px;
+            background: rgba(0, 0, 0, 0.1);
+        }
+        
+        .toast-progress-bar {
+            height: 100%;
+            background: var(--primary-color);
+            width: 100%;
+        }
+        
+        .toast.error .toast-progress-bar {
+            background: var(--danger-color);
+        }
+        
+        .toast.warning .toast-progress-bar {
+            background: var(--warning-color);
+        }
+        
+        .toast.success .toast-progress-bar {
+            background: var(--success-color);
+        }
+        
+        .error-message {
+            color: var(--danger-color);
+            font-size: 0.8rem;
+            margin-top: 0.35rem;
+            display: none;
+        }
+        
+        .form-group.has-error .form-control {
+            border-color: var(--danger-color);
+            background-color: #fff5f5;
+        }
+        
+        .form-group.has-error .error-message {
+            display: block;
+        }
     </style>
 </head>
 <body>
@@ -1364,6 +1433,9 @@
         </div>
     </header>
     
+    <!-- کانتینر نمایش پیام‌های خطا و هشدار -->
+    <div class="toast-container" id="toastContainer"></div>
+    
     <!-- محتوای اصلی -->
     <main class="container">
         <div class="page-header">
@@ -1402,15 +1474,25 @@
                 <div class="tabs-container">
                     <div class="tabs-nav">
                         <button class="tab-btn active" data-tab="branch">
-                            <i class="fas fa-store"></i>
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="margin-bottom: 0.5rem;">
+                                <path d="M22,8.52V3.98C22,2.57,21.36,2,19.77,2H15.73C14.14,2,13.5,2.57,13.5,3.98V8.51C13.5,9.93,14.14,10.49,15.73,10.49H19.77C21.36,10.5,22,9.93,22,8.52Z"/>
+                                <path d="M22,19.77V15.73C22,14.14,21.36,13.5,19.77,13.5H15.73C14.14,13.5,13.5,14.14,13.5,15.73V19.77C13.5,21.36,14.14,22,15.73,22H19.77C21.36,22,22,21.36,22,19.77Z"/>
+                                <path d="M10.5,8.52V3.98C10.5,2.57,9.86,2,8.27,2H4.23C2.64,2,2,2.57,2,3.98V8.51C2,9.93,2.64,10.49,4.23,10.49H8.27C9.86,10.5,10.5,9.93,10.5,8.52Z"/>
+                                <path d="M10.5,19.77V15.73C10.5,14.14,9.86,13.5,8.27,13.5H4.23C2.64,13.5,2,14.14,2,15.73V19.77C2,21.36,2.64,22,4.23,22H8.27C9.86,22,10.5,21.36,10.5,19.77Z"/>
+                            </svg>
                             <span>شعبه</span>
                         </button>
                         <button class="tab-btn" data-tab="regional">
-                            <i class="fas fa-map-marker-alt"></i>
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="margin-bottom: 0.5rem;">
+                                <path d="M12,11.5A2.5,2.5,0,1,1,14.5,9,2.5,2.5,0,0,1,12,11.5Zm0-9A6.5,6.5,0,0,0,5.5,9c0,4.171,5.5,10.144,5.5,10.144S16.5,13.171,16.5,9A6.5,6.5,0,0,0,12,2.5ZM12,12.5a3.5,3.5,0,1,1,3.5-3.5A3.5,3.5,0,0,1,12,12.5Z"/>
+                                <circle cx="12" cy="9" r="1.5"/>
+                            </svg>
                             <span>منطقه</span>
                         </button>
                         <button class="tab-btn" data-tab="central">
-                            <i class="fas fa-building"></i>
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="margin-bottom: 0.5rem;">
+                                <path d="M21,6H19V2a1,1,0,0,0-1-1H6A1,1,0,0,0,5,2V6H3A1,1,0,0,0,2,7v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V7h3v7H8v2H6a1,1,0,0,0-1,1v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1v-3h3v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V16a1,1,0,0,0-1-1H14v-2h3v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V10a1,1,0,0,0-1-1H18V7h2a1,1,0,0,0,1-1V7A1,1,0,0,0,21,6Z"/>
+                            </svg>
                             <span>ستاد مرکزی</span>
                         </button>
                     </div>
@@ -1475,7 +1557,10 @@
                             
                             <div class="special-note">
                                 <div class="note-icon">
-                                    <i class="fas fa-lightbulb"></i>
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M12,6a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1h5a1,1,0,0,0,0-2H13V7A1,1,0,0,0,12,6Z"/>
+                                        <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"/>
+                                    </svg>
                                 </div>
                                 <div class="note-content">
                                     <h3>نکته مهم</h3>
@@ -1486,7 +1571,9 @@
                     </div>
                     
                     <h2 class="section-title">
-                        <i class="fas fa-list-alt"></i>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.75rem;">
+                            <path d="M7,6H6a3,3,0,0,0-3,3V8a1,1,0,0,0,2,0V9a1,1,0,0,1,1-1H7a1,1,0,0,0,0-2ZM5,15a1,1,0,0,0-2,0v1a3,3,0,0,0,3,3H7a1,1,0,0,0,0-2H6a1,1,0,0,1-1-1ZM18,6h1a1,1,0,0,1,1,1V8a1,1,0,0,0,2,0V7a3,3,0,0,0-3-3H18a1,1,0,0,0,0,2Zm3,9a1,1,0,0,0-1,1v1a1,1,0,0,1-1,1H18a1,1,0,0,0,0,2h1a3,3,0,0,0,3-3V15A1,1,0,0,0,21,15ZM12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z"/>
+                        </svg>
                         مراحل درخواست تعمیرات در شعبه
                     </h2>
                     
@@ -1588,7 +1675,10 @@
                             
                             <div class="special-note">
                                 <div class="note-icon">
-                                    <i class="fas fa-lightbulb"></i>
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M12,6a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1h5a1,1,0,0,0,0-2H13V7A1,1,0,0,0,12,6Z"/>
+                                        <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"/>
+                                    </svg>
                                 </div>
                                 <div class="note-content">
                                     <h3>نکته مهم</h3>
@@ -1599,7 +1689,9 @@
                     </div>
                     
                     <h2 class="section-title">
-                        <i class="fas fa-list-alt"></i>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.75rem;">
+                            <path d="M7,6H6a3,3,0,0,0-3,3V8a1,1,0,0,0,2,0V9a1,1,0,0,1,1-1H7a1,1,0,0,0,0-2ZM5,15a1,1,0,0,0-2,0v1a3,3,0,0,0,3,3H7a1,1,0,0,0,0-2H6a1,1,0,0,1-1-1ZM18,6h1a1,1,0,0,1,1,1V8a1,1,0,0,0,2,0V7a3,3,0,0,0-3-3H18a1,1,0,0,0,0,2Zm3,9a1,1,0,0,0-1,1v1a1,1,0,0,1-1,1H18a1,1,0,0,0,0,2h1a3,3,0,0,0,3-3V15A1,1,0,0,0,21,15ZM12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z"/>
+                        </svg>
                         مراحل درخواست تعمیرات در منطقه
                     </h2>
                     
@@ -1688,7 +1780,9 @@
                             
                             <div class="special-note">
                                 <div class="note-icon">
-                                    <i class="fas fa-check-circle"></i>
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"/>
+                                    </svg>
                                 </div>
                                 <div class="note-content">
                                     <h3>نکته مهم</h3>
@@ -1699,7 +1793,9 @@
                     </div>
                     
                     <h2 class="section-title">
-                        <i class="fas fa-list-alt"></i>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.75rem;">
+                            <path d="M7,6H6a3,3,0,0,0-3,3V8a1,1,0,0,0,2,0V9a1,1,0,0,1,1-1H7a1,1,0,0,0,0-2ZM5,15a1,1,0,0,0-2,0v1a3,3,0,0,0,3,3H7a1,1,0,0,0,0-2H6a1,1,0,0,1-1-1ZM18,6h1a1,1,0,0,1,1,1V8a1,1,0,0,0,2,0V7a3,3,0,0,0-3-3H18a1,1,0,0,0,0,2Zm3,9a1,1,0,0,0-1,1v1a1,1,0,0,1-1,1H18a1,1,0,0,0,0,2h1a3,3,0,0,0,3-3V15A1,1,0,0,0,21,15ZM12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z"/>
+                        </svg>
                         مراحل درخواست تعمیرات در ستاد مرکزی
                     </h2>
                     
@@ -1758,7 +1854,9 @@
                 <!-- بخش مقایسه -->
                 <div class="comparison-section">
                     <h2 class="section-title">
-                        <i class="fas fa-table"></i>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.75rem;">
+                            <path d="M20.33,3.67A1,1,0,0,0,18.92,5.08a8,8,0,1,1-3.75-2.28A10,10,0,1,0,22,12,9.87,9.87,0,0,0,20.33,3.67ZM13,12a1,1,0,0,1-1,1H8a1,1,0,0,1,0-2h3V7A1,1,0,0,1,13,7Z"/>
+                        </svg>
                         مقایسه حدود اختیارات واحدها
                     </h2>
                     
@@ -1846,10 +1944,16 @@
                     <label>دسته‌بندی تعمیرات</label>
                     <div class="tabs">
                         <button class="tab-button active" data-repair-group="building">
-                            <i class="fas fa-building"></i> تعمیرات ساختمان
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.5rem;">
+                                <path d="M21,6H19V2a1,1,0,0,0-1-1H6A1,1,0,0,0,5,2V6H3A1,1,0,0,0,2,7v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V7h3v7H8v2H6a1,1,0,0,0-1,1v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1v-3h3v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V16a1,1,0,0,0-1-1H14v-2h3v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V10a1,1,0,0,0-1-1H18V7h2a1,1,0,0,0,1-1V7A1,1,0,0,0,21,6Z"/>
+                            </svg>
+                            تعمیرات ساختمان
                         </button>
                         <button class="tab-button" data-repair-group="furniture">
-                            <i class="fas fa-chair"></i> تعمیرات اثاثیه
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.5rem;">
+                                <path d="M20,8H18V5a1,1,0,0,0-1-1H7A1,1,0,0,0,6,5V8H4a3,3,0,0,0-3,3v8a3,3,0,0,0,3,3H20a3,3,0,0,0,3-3V11A3,3,0,0,0,20,8ZM8,5h8V8H8ZM21,19a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V16H6v1a1,1,0,0,0,2,0V16h8v1a1,1,0,0,0,2,0V16h3Zm0-5H3V11a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1Z"/>
+                            </svg>
+                            تعمیرات اثاثیه
                         </button>
                     </div>
                 </div>
@@ -1919,14 +2023,22 @@
                 <div class="result-section mt-4 d-none" id="calculationResults">
                     <div class="result-header">
                         <div class="result-title">
-                            <i class="fas fa-clipboard-check"></i> نتیجه محاسبه حدود اختیارات
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.625rem;">
+                                <path d="M11.23,20.23a1,1,0,0,1-1.46,0L3.7,14.16c-.2-.2-.3-.5-.3-.76,0-.3.1-.6.3-.8L9.78,6.5a1.89,1.89,0,0,1,2.45,0,1.65,1.65,0,0,1,0,2.4L8.7,12.55l15.3.05a1.65,1.65,0,0,1,1.7,1.7,1.65,1.65,0,0,1-1.7,1.7H8.7l3.53,3.55A1.7,1.7,0,0,1,11.23,20.23Z"/>
+                            </svg>
+                            نتیجه محاسبه حدود اختیارات
                         </div>
                         <div class="result-actions">
                             <button class="card-header-btn" id="printResultBtn" title="چاپ نتایج">
-                                <i class="fas fa-print"></i>
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M19,7H17V2a1,1,0,0,0-1-1H8A1,1,0,0,0,7,2V7H5a3,3,0,0,0-3,3v7a3,3,0,0,0,3,3h2v3a1,1,0,0,0,1,1h8a1,1,0,0,0,1-1V20h2a3,3,0,0,0,3-3V10A3,3,0,0,0,19,7ZM9,3h6V7H9Zm6,19H9V16h6Zm5-5a1,1,0,0,1-1,1H17V15a1,1,0,0,0-1-1H8a1,1,0,0,0-1,1v3H5a1,1,0,0,1-1-1V10A1,1,0,0,1,5,9H19a1,1,0,0,1,1,1Z"/>
+                                    <path d="M17,11H15a1,1,0,0,0,0,2h2a1,1,0,0,0,0-2Z"/>
+                                </svg>
                             </button>
                             <button class="card-header-btn" id="shareResultBtn" title="اشتراک‌گذاری">
-                                <i class="fas fa-share-alt"></i>
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M16.53,11.16a1.5,1.5,0,0,0-1.14.53L8.75,8.93a2.5,2.5,0,0,0,0-.86l6.64-2.76a1.5,1.5,0,1,0-.26-.86,1.46,1.46,0,0,0,.14.63L8.63,7.84A2.5,2.5,0,1,0,8.5,13a2.46,2.46,0,0,0,1.4-.43l6.29,2.57a1.5,1.5,0,1,0,.34-.94Z"/>
+                                </svg>
                             </button>
                         </div>
                     </div>
@@ -2153,22 +2265,22 @@
                 document.getElementById('resultCost').textContent = formatNumber(estimatedCost) + ' ریال';
                 
                 document.getElementById('resultQuotes').innerHTML = needsThreeQuotes ? 
-                    '<span class="badge badge-warning"><i class="fas fa-file-invoice"></i> بله - نیاز به سه استعلام</span>' : 
-                    '<span class="badge badge-primary"><i class="fas fa-file-invoice"></i> خیر - یک استعلام کافیست</span>';
+                    '<span class="badge badge-warning"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M23.119,20,13.772,2.15h0a2,2,0,0,0-3.543,0L.881,20a2,2,0,0,0,1.772,2.928H21.347A2,2,0,0,0,23.119,20ZM11,8.423a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Zm1.05,11.51h-.028a1.528,1.528,0,0,1-1.522-1.47,1.476,1.476,0,0,1,1.448-1.53h.028A1.527,1.527,0,0,1,13.5,18.4,1.475,1.475,0,0,1,12.05,19.933Z"></path></svg> بله - نیاز به سه استعلام</span>' : 
+                    '<span class="badge badge-primary"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M22.319,4.431,8.5,18.249a1,1,0,0,1-1.417,0L1.739,12.9a1,1,0,0,1,0-1.417l.119-.119a1,1,0,0,1,1.3-.116l4.72,3.777a.25.25,0,0,0,.319-.034l11.172-11.2a1,1,0,0,1,1.43,0l1.435,1.435A1,1,0,0,1,22.319,4.431Z"></path></svg> خیر - یک استعلام کافیست</span>';
                 
                 document.getElementById('resultApprovalLevel').innerHTML = approvalLevel === 'مرکزی' ? 
-                    '<span class="badge badge-danger"><i class="fas fa-building"></i> واحد مرکزی</span>' : 
+                    '<span class="badge badge-danger"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M21,6H19V2a1,1,0,0,0-1-1H6A1,1,0,0,0,5,2V6H3A1,1,0,0,0,2,7v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V7h3v7H8v2H6a1,1,0,0,0-1,1v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1v-3h3v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V16a1,1,0,0,0-1-1H14v-2h3v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V10a1,1,0,0,0-1-1H18V7h2a1,1,0,0,0,1-1V7A1,1,0,0,0,21,6Z"></path></svg> واحد مرکزی</span>' : 
                     (approvalLevel === 'منطقه' ? 
-                    '<span class="badge badge-warning"><i class="fas fa-map-marker-alt"></i> سرپرستی منطقه</span>' : 
-                    '<span class="badge badge-success"><i class="fas fa-check-circle"></i> واحد</span>');
+                    '<span class="badge badge-warning"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M12,11.5A2.5,2.5,0,1,1,14.5,9,2.5,2.5,0,0,1,12,11.5Zm0-9A6.5,6.5,0,0,0,5.5,9c0,4.171,5.5,10.144,5.5,10.144S16.5,13.171,16.5,9A6.5,6.5,0,0,0,12,2.5ZM12,12.5a3.5,3.5,0,1,1,3.5-3.5A3.5,3.5,0,0,1,12,12.5Z"></path><circle cx="12" cy="9" r="1.5"></circle></svg> سرپرستی منطقه</span>' : 
+                    '<span class="badge badge-success"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"></path></svg> واحد</span>');
                 
                 document.getElementById('resultRegionCoordination').innerHTML = needsHigherApproval ? 
-                    `<span class="badge badge-warning"><i class="fas fa-handshake"></i> بله (${formatNumber(percentOfLimit)}% از سقف مجاز)</span>` : 
-                    `<span class="badge badge-primary"><i class="fas fa-handshake"></i> خیر (${formatNumber(percentOfLimit)}% از سقف مجاز)</span>`;
+                    `<span class="badge badge-warning"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M19.87,13.1a1,1,0,0,0-1.44,0l-5.18,5.19V4a1,1,0,0,0-2,0V18.25l-5.19-5.19a1,1,0,0,0-1.44,0,1,1,0,0,0,0,1.41l6.89,6.89a1,1,0,0,0,.16.13.9.9,0,0,0,.15.09,1,1,0,0,0,.16.07,1,1,0,0,0,.18,0,.93.93,0,0,0,.19,0,1,1,0,0,0,.19,0,1.02,1.02,0,0,0,.18,0,1.09,1.09,0,0,0,.16-.07.88.88,0,0,0,.15-.09,1,1,0,0,0,.16-.13l6.89-6.89A1,1,0,0,0,19.87,13.1Z"></path></svg> بله (${formatNumber(percentOfLimit)}% از سقف مجاز)</span>` : 
+                    `<span class="badge badge-primary"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M18.3,8.59l.91-.9a1,1,0,0,0-1.42-1.42l-.9.91a8,8,0,0,0-9.79,0l-.91-.92A1,1,0,0,0,4.77,7.69l.92.91A7.92,7.92,0,0,0,4,13.5,8,8,0,1,0,18.3,8.59ZM12,19.5a6,6,0,1,1,6-6A6,6,0,0,1,12,19.5Zm-2-15h4a1,1,0,0,0,0-2H10a1,1,0,0,0,0,2Zm3,10H12a1,1,0,0,0-.71.29l-2,2a1,1,0,1,0,1.42,1.42l1.29-1.3V15.5a1,1,0,0,0,2,0Z"></path></svg> خیر (${formatNumber(percentOfLimit)}% از سقف مجاز)</span>`;
                 
                 document.getElementById('resultDocuments').innerHTML = needsThreeQuotes ? 
-                    '<span class="badge badge-warning"><i class="fas fa-file-alt"></i> سه استعلام قیمت / فاکتور</span>' : 
-                    '<span class="badge badge-primary"><i class="fas fa-file-alt"></i> یک فاکتور / پیش‌فاکتور</span>';
+                    '<span class="badge badge-warning"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M22.47,5.46h0a1,1,0,0,0,.22-0.33,1,1,0,0,0,0-.76,1,1,0,0,0-.22-0.33h0l-4-4h0a1,1,0,0,0-.33-0.22,1,1,0,0,0-.76,0,1,1,0,0,0-.33.22h0L13.06,4H6A3,3,0,0,0,3,7V24H19V10.94ZM17.06,7H15V4.94ZM5,7A1,1,0,0,1,6,6h7V9h4v13H5Z"></path></svg> سه استعلام قیمت / فاکتور</span>' : 
+                    '<span class="badge badge-primary"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;"><path d="M22.47,5.46h0a1,1,0,0,0,.22-0.33,1,1,0,0,0,0-.76,1,1,0,0,0-.22-0.33h0l-4-4h0a1,1,0,0,0-.33-0.22,1,1,0,0,0-.76,0,1,1,0,0,0-.33.22h0L13.06,4H6A3,3,0,0,0,3,7V24H19V10.94ZM17.06,7H15V4.94ZM5,7A1,1,0,0,1,6,6h7V9h4v13H5Z"></path></svg> یک فاکتور / پیش‌فاکتور</span>';
                 
                 // افزودن اطلاعات اضافی اگر وجود نداشته باشد
                 let additionalInfo = document.getElementById('additionalResultInfo');
@@ -2184,7 +2296,11 @@
                     <div class="result-label">وضعیت مصرف بودجه:</div>
                     <div class="result-value">
                         <span class="badge ${percentOfLimit > 75 ? 'badge-warning' : 'badge-success'}">
-                            <i class="fas fa-chart-pie"></i> ${formatNumber(percentOfLimit)}% از سقف سالانه
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-left: 0.375rem;">
+                                <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"/>
+                                <path d="M12,6a1,1,0,0,0-1,1v5a1,1,0,0,0,.293.707l3,3a1,1,0,0,0,1.414-1.414L13,11.586V7A1,1,0,0,0,12,6Z"/>
+                            </svg>
+                            ${formatNumber(percentOfLimit)}% از سقف سالانه
                         </span>
                     </div>
                 `;
@@ -2236,6 +2352,98 @@
                 });
             }
             
+            /* نمایش خطا */
+            function showError(fieldId, message) {
+                const field = document.getElementById(fieldId);
+                const errorElement = document.getElementById(fieldId + 'Error');
+                
+                if (field && errorElement) {
+                    field.closest('.form-group').classList.add('has-error');
+                    errorElement.textContent = message;
+                }
+            }
+            
+            /* حذف خطاها */
+            function resetErrors() {
+                document.querySelectorAll('.form-group.has-error').forEach(group => {
+                    group.classList.remove('has-error');
+                });
+            }
+            
+            /* سیستم نمایش اعلان */
+            function showToast(title, message, type = 'info') {
+                const toastContainer = document.getElementById('toastContainer');
+                if (!toastContainer) return;
+                
+                const toast = document.createElement('div');
+                toast.className = `toast ${type}`;
+                
+                let iconSvg = '';
+                switch (type) {
+                    case 'success':
+                        iconSvg = '<svg width="24" height="24" viewBox="0 0 24 24" fill="#059669"><path d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"></path></svg>';
+                        break;
+                    case 'error':
+                        iconSvg = '<svg width="24" height="24" viewBox="0 0 24 24" fill="#dc2626"><path d="M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z"></path></svg>';
+                        break;
+                    case 'warning':
+                        iconSvg = '<svg width="24" height="24" viewBox="0 0 24 24" fill="#d97706"><path d="M23.119,20,13.772,2.15h0a2,2,0,0,0-3.543,0L.881,20a2,2,0,0,0,1.772,2.928H21.347A2,2,0,0,0,23.119,20ZM11,8.423a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Zm1.05,11.51h-.028a1.528,1.528,0,0,1-1.522-1.47,1.476,1.476,0,0,1,1.448-1.53h.028A1.527,1.527,0,0,1,13.5,18.4,1.475,1.475,0,0,1,12.05,19.933Z"></path></svg>';
+                        break;
+                    default:
+                        iconSvg = '<svg width="24" height="24" viewBox="0 0 24 24" fill="#2563eb"><path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm.25,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,12.25,5ZM14.5,18.5h-4a1,1,0,0,1,0-2h.75v-5.5h-.75a1,1,0,0,1,0-2H13a1,1,0,0,1,1,1V16.5h.5a1,1,0,0,1,0,2Z"></path></svg>';
+                }
+                
+                toast.innerHTML = `
+                    <div class="toast-icon">${iconSvg}</div>
+                    <div class="toast-content">
+                        <div class="toast-title">${title}</div>
+                        <div class="toast-message">${message}</div>
+                    </div>
+                    <button class="toast-close">&times;</button>
+                    <div class="toast-progress">
+                        <div class="toast-progress-bar"></div>
+                    </div>
+                `;
+                
+                toastContainer.appendChild(toast);
+                
+                // تأخیر کوتاه برای اعمال انیمیشن
+                setTimeout(() => {
+                    toast.classList.add('show');
+                }, 10);
+                
+                // حذف اعلان پس از مدت مشخص
+                const progressBar = toast.querySelector('.toast-progress-bar');
+                let timeout;
+                
+                const duration = 5000; // مدت نمایش (5 ثانیه)
+                
+                // انیمیشن نوار پیشرفت
+                progressBar.style.transition = `width ${duration}ms linear`;
+                setTimeout(() => {
+                    progressBar.style.width = '0';
+                }, 10);
+                
+                timeout = setTimeout(() => {
+                    toast.classList.remove('show');
+                    setTimeout(() => {
+                        toastContainer.removeChild(toast);
+                    }, 300);
+                }, duration);
+                
+                // دکمه بستن اعلان
+                const closeBtn = toast.querySelector('.toast-close');
+                closeBtn.addEventListener('click', () => {
+                    clearTimeout(timeout);
+                    toast.classList.remove('show');
+                    setTimeout(() => {
+                        if (toast.parentNode) {
+                            toastContainer.removeChild(toast);
+                        }
+                    }, 300);
+                });
+            }
+            
             /* دکمه چاپ */
             const printBtn = document.getElementById('printBtn');
             if (printBtn) {
@@ -2276,8 +2484,78 @@
                     const group = activeRepairGroup.getAttribute('data-repair-group');
                     updateRepairOptions(group);
                 }
+                
+                // اضافه کردن رویدادها برای اعتبارسنجی فرم
+                const estimatedCostInput = document.getElementById('estimatedCost');
+                if (estimatedCostInput) {
+                    estimatedCostInput.addEventListener('blur', function() {
+                        validateField('estimatedCost');
+                    });
+                }
+                
+                const yearlySpentInput = document.getElementById('yearlySpent');
+                if (yearlySpentInput) {
+                    yearlySpentInput.addEventListener('blur', function() {
+                        validateField('yearlySpent');
+                    });
+                }
+                
+                const repairCategorySelect = document.getElementById('repairCategory');
+                if (repairCategorySelect) {
+                    repairCategorySelect.addEventListener('change', function() {
+                        validateField('repairCategory');
+                    });
+                }
             }
             
+            function validateField(fieldId) {
+                resetErrors();
+                
+                switch (fieldId) {
+                    case 'repairCategory':
+                        const category = document.getElementById(fieldId);
+                        if (!category.value) {
+                            showError(fieldId, 'لطفاً نوع تعمیرات را انتخاب کنید');
+                            return false;
+                        }
+                        break;
+                    
+                    case 'estimatedCost':
+                        const cost = document.getElementById(fieldId);
+                        if (!cost.value) {
+                            showError(fieldId, 'لطفاً برآورد هزینه را وارد کنید');
+                            return false;
+                        } else {
+                            const costValue = parseNumber(cost.value);
+                            if (isNaN(costValue) || costValue <= 0) {
+                                showError(fieldId, 'لطفاً مبلغ را به صورت عدد صحیح و مثبت وارد کنید');
+                                return false;
+                            }
+                        }
+                        break;
+                    
+                    case 'yearlySpent':
+                        const yearly = document.getElementById(fieldId);
+                        if (yearly.value) {
+                            const yearlyValue = parseNumber(yearly.value);
+                            if (isNaN(yearlyValue) || yearlyValue < 0) {
+                                showError(fieldId, 'لطفاً مبلغ را به صورت عدد صحیح و غیرمنفی وارد کنید');
+                                return false;
+                            }
+                        }
+                        break;
+                }
+                
+                return true;
+            }
+            
+            // تشخیص خطاهای اجرا و نمایش پیام مناسب
+            window.addEventListener('error', function(e) {
+                console.error('خطای اجرا:', e.message);
+                showToast('خطای اجرا', 'متأسفانه خطایی در اجرای برنامه رخ داده است. لطفاً صفحه را مجدداً بارگذاری نمایید.', 'error');
+                return false;
+            });
+            
             // راه‌اندازی برنامه
             initializeApp();
         });