fix(ui): payment due date calculation, datepicker colors, scrollable tabs, optional receipt, default today date

src/assets/styles/main.scss

@@ -119,26 +119,85 @@ a {
 
   .vpd-controls {
     color: var(--text-primary) !important;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 10px;
 
-    button, span, i, svg, .vpd-month-label {
+    .vpd-next,
+    .vpd-prev,
+    button {
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      width: 32px !important;
+      height: 32px !important;
+      border-radius: 8px !important;
+      background-color: var(--surface-ground) !important;
+      border: 1px solid var(--border-color) !important;
       color: var(--text-primary) !important;
-      fill: var(--text-primary) !important;
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      svg {
+        width: 14px !important;
+        height: 14px !important;
+        fill: var(--text-primary) !important;
+
+        path {
+          fill: var(--text-primary) !important;
+        }
+      }
+
+      &:hover:not([disabled="true"]) {
+        background-color: var(--primary-color) !important;
+        border-color: var(--primary-color) !important;
+        color: #ffffff !important;
+
+        svg,
+        svg path {
+          fill: #ffffff !important;
+        }
+      }
+
+      &[disabled="true"] {
+        opacity: 0.3 !important;
+        cursor: not-allowed !important;
+      }
     }
 
-    button:hover {
-      background-color: var(--surface-hover) !important;
-      border-radius: 50%;
-    }
+    .vpd-month-label {
+      span {
+        color: var(--text-primary) !important;
+        font-weight: 600 !important;
+        padding: 4px 10px !important;
+        border-radius: 6px !important;
+        border: 1px solid var(--border-color) !important;
+        background-color: var(--surface-ground) !important;
 
-    .vpd-month-label span {
-      border-color: var(--border-color) !important;
-
-      &:hover {
-        background-color: var(--surface-hover) !important;
+        &:hover {
+          background-color: var(--surface-hover) !important;
+          border-color: var(--primary-color) !important;
+        }
       }
     }
   }
 
+  .vpd-up-arrow-btn,
+  .vpd-down-arrow-btn {
+    svg,
+    svg path {
+      fill: var(--text-primary) !important;
+    }
+    &:hover {
+      svg,
+      svg path {
+        fill: var(--primary-color) !important;
+      }
+    }
+  }
+
+
   .vpd-week {
     .vpd-weekday {
       color: var(--text-muted) !important;
@@ -272,3 +331,20 @@ a {
   }
 }
 
+/* ==========================================
+   Responsive Tabs & TabList Horizontal Scroll
+   ========================================== */
+.p-tablist {
+  max-width: 100% !important;
+  overflow-x: auto !important;
+  -webkit-overflow-scrolling: touch !important;
+  scrollbar-width: thin;
+}
+
+.p-tablist-tab-list {
+  flex-wrap: nowrap !important;
+  white-space: nowrap !important;
+  min-width: max-content !important;
+}
+
+