cbsnexora/src/app/cashier/my-work/my-work.component.scss

/**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

/* Who and when, above the day's figures. */
.mw-who {
  font-size: 13px;
  color: #475569;
  margin: 0 0 12px;

  strong {
    color: #0f172a;
  }

  &__sep {
    margin: 0 6px;
    color: #cbd5e1;
  }
}

/* The day at a glance: the two sides a branch balances, then what the user's part was. */
.mw-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.mw-tile {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;

  &__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 4px;
  }

  &__value {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;

    /* Received green, paid-out red — the convention a passbook already uses, so the two totals
       are told apart without reading the labels. */
    &--cr {
      color: #15803d;
    }

    &--dr {
      color: #b91c1c;
    }
  }
}

.mw-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}

.mw-count {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;

  &__total {
    float: right;
    font-weight: 600;
    color: #0f172a;
  }
}

.mw-table {
  font-size: 13px;
}

/* Money cells use the shared `.num` from cashier-shared.scss, which right-aligns and
   tabular-figures the heading as well as the cell. A local class only reached the cells, leaving
   every heading left-aligned over right-aligned figures. */

.mw-vno {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: nowrap;
}

.mw-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  white-space: nowrap;
}

.mw-time {
  white-space: nowrap;
  color: #64748b;
}

/* The account number or the maker's name, under the party it belongs to. */
.mw-acct {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.mw-more {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
}

.mw-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;

  &--CR {
    background: #dcfce7;
    color: #15803d;
  }

  &--DR {
    background: #fee2e2;
    color: #b91c1c;
  }

  &--JV {
    background: #e0e7ff;
    color: #4338ca;
  }
}

/* Whose work the row is, marked on the row itself.
   A coloured left edge and a faint tint, rather than a different text colour: the eye finds the
   edge while scanning a column of figures, which is how a day's list is actually read. Kept faint
   so the amounts stay the thing being read. */
.mw-row {
  border-left: 3px solid transparent;

  &--RAISED {
    border-left-color: #86efac;
  }

  /* Somebody else's entry that this person passed. The row a reviewer came looking for, so it
     carries the darker of the two greens. */
  &--VERIFIED {
    border-left-color: #15803d;
    background: #f0fdf4;
  }

  /* Entered and approved by the same person. Legitimate in a small branch, but the one combination
     an auditor stops on, so it is the only row given a warm tint. */
  &--RAISED_AND_VERIFIED {
    border-left-color: #d97706;
    background: #fffbf3;
  }
}

.mw-row--clickable {
  cursor: pointer;

  &:hover {
    background: #f8fafc;
  }
}

.mw-vno__spinner {
  margin-left: 4px;
  font-size: 14px;
  vertical-align: middle;
  color: #94a3b8;
}

/* One section per part played. The heading carries the section's own count and total, so a maker's
   tally and a checker's are each readable without adding rows up. */
.mw-group {
  margin-bottom: 16px;

  /* Two shades of one colour rather than two colours: entering and approving are stages of the
     same piece of work, and the darker edge reads as the later one. */
  border-left: 3px solid #86efac;

  /* Same shades the row edges use, so a section and its rows read as one thing. */
  &--VERIFIED {
    border-left-color: #15803d;
  }

  &--RAISED_AND_VERIFIED {
    border-left-color: #d97706;
  }

  &__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;

    strong {
      font-size: 13px;
      color: #0f172a;
    }
  }

  &__hint {
    font-size: 11px;
    color: #64748b;
  }

  &__count {
    margin-left: auto;
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
  }

  &__total {
    margin-left: 8px;
    font-weight: 700;
    color: #0f172a;
  }
}

/* Where the voucher stands. Three states, because there are three things a reader does: nothing
   (done), chase it (pending), or look into it (bad). */
.mw-status {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;

  /* Approved, posted — settled but nothing handed over. Lighter than 'paid' but still dark enough
     to read as body text; a pale green on white fails at this size. */
  &--done {
    color: #16a34a;
  }

  /* Cash actually gone. Darker and filled, the same way the day book marks it. */
  &--paid {
    background: #15803d;
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
  }

  &--pending {
    color: #b45309;
  }

  &--bad {
    color: #b91c1c;
  }
}

/* The part played, as a small pill with its own glyph. */
.mw-part {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px 2px 6px;
  border-radius: 10px;
  white-space: nowrap;

  &__icon {
    font-size: 13px;
    width: 13px;
    height: 13px;
    line-height: 13px;
  }

  &--RAISED {
    background: #dcfce7;
    color: #166534;
  }

  &--VERIFIED {
    background: #15803d;
    color: #fff;
  }

  &--RAISED_AND_VERIFIED {
    background: #fef3c7;
    color: #b45309;
  }
}