done

2026-08-30 11:09:14 +05:30
parent 07a4c8b8e3
commit 9f95d01196
57 changed files with 5705 additions and 681 deletions
@@ -244,3 +244,160 @@
    }
  }
 }
+
+/* One toolbar per table: search on the left where the eye lands first, the row count next to it so
+   a narrowed table says how much it is hiding, and Refresh pushed to the far right. */
+.dd-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 12px 16px;
+
+  &__count {
+    margin-left: auto;
+    font-size: 12.5px;
+    color: #475569;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+}
+
+.dd-search {
+  position: relative;
+  flex: 1 1 260px;
+  max-width: 360px;
+
+  &__input {
+    width: 100%;
+    padding: 7px 30px 7px 11px;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    font-size: 13px;
+    color: #0f172a;
+    background: #fff;
+
+    &::placeholder {
+      color: #94a3b8;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: #2563eb;
+      box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
+    }
+
+    /* The browser's own clear affordance would sit under ours. */
+    &::-webkit-search-cancel-button {
+      appearance: none;
+    }
+  }
+
+  /* Only rendered while there is something to clear, so it never reads as a dead control. */
+  &__clear {
+    position: absolute;
+    top: 50%;
+    right: 6px;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: #64748b;
+    font-size: 17px;
+    line-height: 1;
+    cursor: pointer;
+
+    &:hover {
+      background: #e2e8f0;
+      color: #0f172a;
+    }
+  }
+}
+
+/* The share account number under the member's name — the thing a clerk matches against the
+   passbook in front of them, so it has to be readable but must not outweigh the name. */
+.dd-account-no {
+  margin-top: 2px;
+  font-size: 11.5px;
+  color: #64748b;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Horizontal tab strip: one list on screen at a time, chosen here.
+   Scrolls rather than wraps on a narrow window, so the strip stays one line and the tab positions
+   a clerk has learned do not move. */
+.dd-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 16px;
+  padding-bottom: 2px;
+  border-bottom: 1px solid #e2e8f0;
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.dd-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  flex: 0 0 auto;
+  padding: 9px 14px;
+  border: 0;
+  /* The active marker is this underline, so every tab reserves the space for it — otherwise the
+     strip would shift by 2px each time the selection moved. */
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #64748b;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover {
+    color: #1e40af;
+  }
+
+  &--active {
+    color: #1e40af;
+    border-bottom-color: #2563eb;
+  }
+}
+
+.dd-tab__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 9999px;
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 11px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+
+  /* A member blocked by an overdue EMI, or a claim waiting on a manager, is work outstanding —
+     coloured so it reads as something to open rather than a neutral tally. */
+  &--alert {
+    background: #fef3c7;
+    color: #92400e;
+  }
+}
+
+/* The draft number a member's dividend was paid out on. Monospaced-by-figure so a clerk reading it
+   against the counterfoil can compare digit by digit. */
+.dd-dd-number {
+  font-size: 12.5px;
+  font-weight: 700;
+  color: #0f172a;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+}