DDS: approvals tab, vouchers, payout & close, Sundry GL search, closure tab, fixes

src/app/deposits/daily-transaction-entry/daily-transaction-entry.component.scss

@@ -160,13 +160,14 @@ $primary: #0f766e;
 .dte-collection-row {
   display: grid;
   grid-template-columns:
-    minmax(0, 2.2fr)  /* Party       */
-    minmax(0, 1fr)    /* TRTP        */
-    minmax(0, 1fr)    /* AC Type     */
-    minmax(0, 1.4fr)  /* A/C No.     */
-    minmax(0, 1fr)    /* Amount      */
-    minmax(0, 1.6fr)  /* Description */
-    auto;             /* remove      */
+    minmax(0, 2.2fr) /* Party       */
+    minmax(0, 1fr) /* TRTP        */
+    minmax(0, 1fr) /* AC Type     */
+    minmax(0, 1.4fr) /* A/C No.     */
+    minmax(0, 1fr) /* Amount      */
+    minmax(0, 1.6fr) /* Description */
+    auto; /* remove      */
+
   gap: 8px 12px;
   align-items: start;
   padding: 10px 0;
@@ -275,7 +276,6 @@ $primary: #0f766e;
   color: rgb(0 0 0 / 45%);
 }
 
-
 /*
  * Marks a party this agent has already collected from today, on the row where it is picked.
  *
@@ -334,7 +334,6 @@ $primary: #0f766e;
   font-weight: 500;
 }
 
-
 /*
   The agent's written-down round, as the counter reads it.
 
@@ -347,12 +346,19 @@ $primary: #0f766e;
   align-items: baseline;
   gap: 12px;
   padding: 10px 2px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  border-bottom: 1px solid rgb(0 0 0 / 8%);
 
   &:last-of-type {
     border-bottom: none;
   }
 
+  /* First, and in the quieter weight: the date is context for the line, not what is being read. */
+  &__date {
+    min-width: 96px;
+    opacity: 0.7;
+    font-variant-numeric: tabular-nums;
+  }
+
   &__code {
     font-weight: 600;
     min-width: 84px;
@@ -393,3 +399,90 @@ $primary: #0f766e;
     font-variant-numeric: tabular-nums;
   }
 }
+
+/* Quieter than the figure above it: a note about how the screen behaves, not part of the count. */
+.dte-expected--note {
+  font-size: 13px;
+  opacity: 0.65;
+  margin-top: 4px;
+}
+
+.dte-apply-receipt {
+  margin-left: 8px;
+}
+
+/* Agent Tran: what the agent owes, what the cashier has taken in, and what is left. */
+.dte-money {
+  display: flex;
+  gap: 12px;
+  margin: 8px 0 12px;
+  flex-wrap: wrap;
+
+  &__box {
+    flex: 1;
+    min-width: 160px;
+    padding: 10px 14px;
+    border: 1px solid rgb(0 0 0 / 10%);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-variant-numeric: tabular-nums;
+
+    strong {
+      font-size: 18px;
+    }
+
+    &--due {
+      border-color: rgb(198 40 40 / 40%);
+      background: rgb(198 40 40 / 4%);
+    }
+  }
+
+  &__label {
+    font-size: 12px;
+    opacity: 0.7;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+}
+
+.dte-subhead {
+  margin: 16px 0 4px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.dte-pending-row--day {
+  cursor: pointer;
+}
+
+.dte-day-lines {
+  margin-left: 24px;
+  max-height: 280px;
+  overflow-y: auto;
+  border-left: 3px solid rgb(25 118 210 / 30%);
+  padding-left: 10px;
+}
+
+.dte-status {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: rgb(237 108 2 / 12%);
+  color: #b45309;
+
+  &--ok {
+    background: rgb(46 125 50 / 12%);
+    color: #2e7d32;
+  }
+}
+
+.dte-list-arrow {
+  cursor: pointer;
+}
+
+.dte-same-party {
+  color: #c62828;
+  font-weight: 600;
+}