feat(cashier): integrate expected balance, settlement verification, and reconciliation checks

src/app/cashier/reconciliation/reconciliation.component.html

@@ -175,6 +175,35 @@
             }
           </div>
 
+          @if (totalVariance !== 0) {
+            <div
+              class="settle-variance-banner"
+              [class.settle-variance-banner--excess]="totalVariance > 0"
+              [class.settle-variance-banner--short]="totalVariance < 0"
+              style="margin: 8px 0 0"
+            >
+              <mat-icon>{{ totalVariance > 0 ? 'add_circle_outline' : 'remove_circle_outline' }}</mat-icon>
+              <div class="settle-variance-text">
+                <strong
+                  >{{ totalVariance > 0 ? 'Excess' : 'Shortage' }}: ₹{{
+                    (totalVariance < 0 ? -totalVariance : totalVariance) | number: '1.2-2'
+                  }}</strong
+                >
+                <span>Variance reason is required to save reconciliation.</span>
+              </div>
+              <mat-form-field appearance="outline" subscriptSizing="dynamic" style="flex-shrink: 0; width: 300px">
+                <mat-label>Variance Reason *</mat-label>
+                <input
+                  matInput
+                  type="text"
+                  [value]="varianceReason"
+                  (input)="varianceReason = $any($event.target).value"
+                  placeholder="e.g. Rounding, soiled note returned"
+                />
+              </mat-form-field>
+            </div>
+          }
+
           <div class="pg-total-bar">
             <span>
               Expected: <strong>₹{{ totalExpected | number: '1.2-2' }}</strong> &nbsp;|&nbsp; Physical:
@@ -184,9 +213,14 @@
               </strong>
               <span class="badge" [ngClass]="statusClass(statusLabel)">{{ statusLabel }}</span>
             </span>
-            <button type="button" class="pg-btn pg-btn--primary" [disabled]="!valid || saving" (click)="submit()">
-              <mat-icon>save</mat-icon> Save Reconciliation
-            </button>
+            <div style="display: flex; align-items: center; gap: 10px">
+              @if (totalVariance !== 0 && !varianceReason.trim()) {
+                <span style="font-size: 12px; color: #d97706; font-weight: 600">Enter variance reason to save</span>
+              }
+              <button type="button" class="pg-btn pg-btn--primary" [disabled]="!valid || saving" (click)="submit()">
+                <mat-icon>save</mat-icon> Save Reconciliation
+              </button>
+            </div>
           </div>
         }