feat(cashier): add end-of-day report, my work, and cashier updates
This commit is contained in:
@@ -0,0 +1,294 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user