Sergei Poljanski
9128867a33
Add /admin/invoices/stats with a year filter: invoiced, received and outstanding totals in GEL at each invoice's captured rate (the one currency every invoice has), overdue count, average days to pay, money received per month by payment date as a bar chart with the same figures in a table, per-currency totals, top clients and crypto option usage. Cancelled invoices are left out of every amount; hidden ones follow the usual superuser-only visibility. Assisted-by: Claude:opus-5
645 lines
16 KiB
CSS
645 lines
16 KiB
CSS
/* Self-hosted fonts (no CDN). Latin subsets; Georgian falls back to the
|
||
vendored Noto, downloaded only when Georgian glyphs are on the page. */
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
src: url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
src: url('/fonts/ibm-plex-sans-latin-400-italic.woff2') format('woff2');
|
||
font-weight: 400;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
src: url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
src: url('/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
@font-face {
|
||
font-family: 'IBM Plex Mono';
|
||
src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
@font-face {
|
||
font-family: 'Noto Sans Georgian';
|
||
src: url('/fonts/NotoSansGeorgian-Regular.woff2') format('woff2');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
|
||
}
|
||
|
||
/* Design tokens — shared palette with blog.asxp.io */
|
||
:root {
|
||
--bg: #121212;
|
||
--surface: #1A1A1A;
|
||
--surface-alt: #222222;
|
||
--surface-hover: #333333;
|
||
--border-subtle: #1E1E1E;
|
||
--border: #2A2A2A;
|
||
--border-strong: #3A3A3A;
|
||
--text: #AAAAAA;
|
||
--text-bright: #EEEEEE;
|
||
--text-strong: #DDDDDD;
|
||
--text-soft: #CCCCCC;
|
||
--text-link: #BBBBBB;
|
||
--text-dim: #999999;
|
||
--text-dimmer: #888888;
|
||
--text-faint: #777777;
|
||
--text-muted: #666666;
|
||
--text-ghost: #555555;
|
||
--text-hover: #FFFFFF;
|
||
--link-underline: #444444;
|
||
--danger: #C97070;
|
||
--danger-border: #4A1F1F;
|
||
--danger-bg: #2A1414;
|
||
--pending: #C9A86A;
|
||
--pending-border: #4A3E1F;
|
||
--pending-bg: #2A2414;
|
||
--paid: #7AB97A;
|
||
--paid-border: #234A23;
|
||
--paid-bg: #142A14;
|
||
--chart-bar: #5B8FD9; /* single-series bars; validated vs --surface (dark) */
|
||
--font-sans: 'IBM Plex Sans', 'Noto Sans Georgian', sans-serif;
|
||
--font-mono: 'IBM Plex Mono', monospace;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--bg);
|
||
color: var(--text);
|
||
font-family: var(--font-sans);
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
}
|
||
main {
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
padding: 40px 20px 80px;
|
||
}
|
||
.site-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
border-bottom: 1px solid var(--border);
|
||
padding-bottom: 12px;
|
||
margin-bottom: 36px;
|
||
}
|
||
.site-title {
|
||
font-family: var(--font-mono);
|
||
font-size: 1.1rem;
|
||
color: var(--text-bright);
|
||
border-bottom: none;
|
||
}
|
||
.site-header nav a {
|
||
color: var(--text-faint);
|
||
border-bottom: none;
|
||
margin-left: 18px;
|
||
font-size: 0.9rem;
|
||
}
|
||
.site-header nav a:hover,
|
||
.site-header nav a.active,
|
||
.site-title:hover {
|
||
color: var(--text-bright);
|
||
border-bottom: none;
|
||
}
|
||
.home-intro {
|
||
max-width: 480px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
color: var(--text);
|
||
}
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
}
|
||
.monogram {
|
||
display: inline-block;
|
||
width: 56px;
|
||
height: 56px;
|
||
margin-bottom: 14px;
|
||
line-height: 0;
|
||
}
|
||
.header h1 {
|
||
font-size: 1.8rem;
|
||
font-weight: 600;
|
||
color: var(--text-bright);
|
||
margin: 0;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.header .tagline {
|
||
font-size: 1rem;
|
||
color: var(--text-dim);
|
||
margin: 8px 0 0;
|
||
}
|
||
.header .ka {
|
||
display: block;
|
||
font-size: 0.85rem;
|
||
color: var(--text-muted);
|
||
margin-top: 6px;
|
||
}
|
||
.section {
|
||
margin: 36px 0;
|
||
}
|
||
.section h2 {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: var(--text-strong);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
border-bottom: 1px solid var(--border);
|
||
padding-bottom: 6px;
|
||
margin: 0 0 16px;
|
||
}
|
||
ul.services {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: grid;
|
||
/* Column count derives from available width — no breakpoint needed,
|
||
behaves at any zoom level. */
|
||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
gap: 10px 24px;
|
||
align-items: start;
|
||
}
|
||
ul.services li {
|
||
padding-left: 14px;
|
||
position: relative;
|
||
}
|
||
ul.services li::before {
|
||
content: '›';
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--text-ghost);
|
||
}
|
||
.svc-tools {
|
||
display: block;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.8rem;
|
||
color: var(--text-muted);
|
||
margin-top: 2px;
|
||
}
|
||
dl.kv {
|
||
display: grid;
|
||
grid-template-columns: max-content 1fr;
|
||
gap: 6px 18px;
|
||
margin: 0;
|
||
}
|
||
dl.kv dt {
|
||
color: var(--text-faint);
|
||
font-size: 0.9rem;
|
||
}
|
||
dl.kv dd {
|
||
margin: 0;
|
||
color: var(--text-soft);
|
||
}
|
||
dl.kv dd.mono,
|
||
.mono {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.92rem;
|
||
}
|
||
.ka-note {
|
||
color: var(--text-muted);
|
||
font-size: 0.85rem;
|
||
margin-top: 4px;
|
||
}
|
||
pre {
|
||
position: relative;
|
||
background: var(--surface-alt);
|
||
padding: 10px;
|
||
font-size: 14px;
|
||
font-family: var(--font-mono);
|
||
word-wrap: break-word;
|
||
white-space: pre-wrap;
|
||
border: 1px solid #020202;
|
||
margin: 8px 0;
|
||
}
|
||
.copy-button {
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 10px;
|
||
cursor: pointer;
|
||
color: #424242;
|
||
background: #111111;
|
||
border-radius: 0.5em;
|
||
padding: 2px 7px;
|
||
}
|
||
.copy-button:hover {
|
||
color: #000;
|
||
}
|
||
a {
|
||
color: var(--text-link);
|
||
text-decoration: none;
|
||
border-bottom: 1px dotted var(--link-underline);
|
||
}
|
||
a:hover {
|
||
color: var(--text-hover);
|
||
border-bottom-color: var(--text-dimmer);
|
||
}
|
||
.footer {
|
||
text-align: center;
|
||
color: var(--text-ghost);
|
||
font-size: 0.8rem;
|
||
padding: 24px 20px;
|
||
border-top: 1px solid var(--border-subtle);
|
||
}
|
||
.footer-line {
|
||
margin-bottom: 12px;
|
||
}
|
||
.footer-links {
|
||
display: flex;
|
||
gap: 18px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.footer-links a {
|
||
color: var(--text-ghost);
|
||
border-bottom: none;
|
||
line-height: 0;
|
||
}
|
||
.footer-links a:hover {
|
||
color: var(--text-hover);
|
||
}
|
||
.footer-links svg {
|
||
display: block;
|
||
}
|
||
|
||
/* Form errors (admin invoice form) */
|
||
.form-error {
|
||
display: block;
|
||
color: var(--danger);
|
||
font-size: 0.85rem;
|
||
margin-top: 4px;
|
||
}
|
||
.form-error-base {
|
||
background: var(--danger-bg);
|
||
border: 1px solid var(--danger-border);
|
||
padding: 10px;
|
||
border-radius: 3px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.contact-intro {
|
||
color: var(--text-dim);
|
||
margin: 0 0 16px;
|
||
}
|
||
.contact-direct {
|
||
margin-top: 18px;
|
||
}
|
||
|
||
/* Keys */
|
||
.key-block {
|
||
margin-bottom: 20px;
|
||
}
|
||
.key-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
margin-bottom: 4px;
|
||
}
|
||
.key-label {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.8rem;
|
||
color: var(--text-faint);
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.key-file {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
/* Demoted Legal section — visible but quiet */
|
||
.section.legal {
|
||
margin-top: 56px;
|
||
color: var(--text-dimmer);
|
||
font-size: 0.9rem;
|
||
}
|
||
.section.legal h2 {
|
||
font-size: 0.85rem;
|
||
color: var(--text-dimmer);
|
||
border-bottom-color: var(--border-subtle);
|
||
text-transform: none;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.section.legal .legal-intro {
|
||
margin: 0 0 14px;
|
||
color: var(--text-faint);
|
||
}
|
||
.section.legal dl.kv dt {
|
||
color: var(--text-muted);
|
||
font-size: 0.85rem;
|
||
}
|
||
.section.legal dl.kv dd {
|
||
color: var(--text-dim);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* Admin nav + dashboard */
|
||
.admin-nav {
|
||
display: flex;
|
||
gap: 16px;
|
||
justify-content: center;
|
||
margin-bottom: 24px;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.85rem;
|
||
}
|
||
.admin-nav a { color: var(--text-dim); text-decoration: none; }
|
||
.admin-nav-user { display: flex; gap: 8px; align-items: baseline; margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--border); }
|
||
.admin-nav-user form { display: inline; }
|
||
.auth-form { max-width: 360px; margin: 0 auto; }
|
||
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
|
||
.admin-nav a.active,
|
||
.admin-nav a:hover { color: var(--text-bright); }
|
||
.dash { display: grid; gap: 24px; }
|
||
.dash-tile h2 a { color: inherit; text-decoration: none; }
|
||
.stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 12px;
|
||
margin: 12px 0 16px;
|
||
}
|
||
.stats div {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 4px;
|
||
padding: 12px;
|
||
text-align: center;
|
||
}
|
||
.stats b { display: block; font-size: 1.4rem; color: var(--text-bright); font-variant-numeric: tabular-nums; }
|
||
.stats span { font-size: 0.75rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
|
||
|
||
/* Invoice statistics */
|
||
.year-filter { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 24px; }
|
||
.year-filter a { padding: 2px 10px; border: 1px solid var(--border); border-radius: 3px; text-decoration: none; color: var(--text-dim); font-family: var(--font-mono); font-size: 0.85rem; }
|
||
.year-filter a.active { color: var(--text-bright); border-color: var(--text-ghost); background: var(--surface); }
|
||
.stats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||
.stats b small { font-size: 0.7rem; color: var(--text-faint); font-weight: 400; }
|
||
.bar-chart { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin: 12px 0 0; height: 200px; }
|
||
.bar-axis { display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-mono); font-size: 0.7rem; line-height: 1; color: var(--text-faint); text-align: right; }
|
||
.bar-axis span:first-child { transform: translateY(-50%); } /* centre on the top gridline */
|
||
.bar-axis span:last-child { transform: translateY(50%); } /* centre on the baseline */
|
||
.bars { display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--border); position: relative; }
|
||
.bar-col { flex: 1 1 0; position: relative; display: flex; flex-direction: column; justify-content: flex-end; outline: none; padding-bottom: 20px; margin-bottom: -20px; }
|
||
.bar { background: var(--chart-bar); border-radius: 4px 4px 0 0; min-height: 0; }
|
||
.bar-label { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 0.65rem; color: var(--text-faint); overflow: hidden; white-space: nowrap; }
|
||
.bar-col:hover .bar, .bar-col:focus .bar { filter: brightness(1.2); }
|
||
.bar-col:hover::after, .bar-col:focus::after {
|
||
content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
|
||
background: var(--surface-alt); border: 1px solid var(--border-strong); color: var(--text-bright);
|
||
padding: 4px 8px; border-radius: 3px; font-size: 0.75rem; font-family: var(--font-mono); white-space: nowrap; z-index: 2; pointer-events: none;
|
||
}
|
||
.bar-col { height: 100%; }
|
||
@media (max-width: 560px) { .stats-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||
|
||
/* Invoices */
|
||
.invoice-list {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.92rem;
|
||
}
|
||
.invoice-list th,
|
||
.invoice-list td {
|
||
text-align: left;
|
||
padding: 8px 10px;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
}
|
||
.invoice-list th {
|
||
color: var(--text-faint);
|
||
font-weight: 600;
|
||
font-size: 0.78rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
.invoice-list td.num,
|
||
.invoice-list th.num {
|
||
text-align: right;
|
||
}
|
||
.invoice-list td.actions {
|
||
text-align: right;
|
||
}
|
||
.badge {
|
||
display: inline-block;
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
padding: 2px 8px;
|
||
border-radius: 3px;
|
||
border: 1px solid;
|
||
}
|
||
.badge-pending {
|
||
color: var(--pending);
|
||
border-color: var(--pending-border);
|
||
background: var(--pending-bg);
|
||
}
|
||
.badge-cancelled {
|
||
color: var(--danger);
|
||
border-color: var(--danger-border);
|
||
background: var(--danger-bg);
|
||
}
|
||
.badge-hidden {
|
||
color: var(--text-dim);
|
||
border-color: var(--border-strong);
|
||
background: var(--surface);
|
||
}
|
||
.invoice-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px 12px;
|
||
align-items: center;
|
||
margin-top: 14px;
|
||
}
|
||
.invoice-actions .link-button { margin: 0; }
|
||
.cancel-form { display: flex; gap: 8px; flex: 1 1 320px; }
|
||
.link-button.danger:hover { color: var(--danger); border-color: var(--danger-border); }
|
||
.badge-paid {
|
||
color: var(--paid);
|
||
border-color: var(--paid-border);
|
||
background: var(--paid-bg);
|
||
}
|
||
.invoice-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 0 16px;
|
||
}
|
||
.items-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 8px 0 12px;
|
||
}
|
||
.items-table th,
|
||
.items-table td {
|
||
padding: 4px;
|
||
border: none;
|
||
vertical-align: top;
|
||
}
|
||
.items-table th {
|
||
color: var(--text-faint);
|
||
font-weight: 600;
|
||
font-size: 0.78rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
text-align: left;
|
||
}
|
||
.items-table th.num {
|
||
text-align: right;
|
||
}
|
||
.items-table input {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background: var(--surface);
|
||
color: var(--text-strong);
|
||
border: 1px solid var(--border);
|
||
border-radius: 3px;
|
||
padding: 6px 8px;
|
||
font-family: inherit;
|
||
font-size: 0.9rem;
|
||
}
|
||
.items-table td.num input {
|
||
text-align: right;
|
||
font-family: var(--font-mono);
|
||
}
|
||
.items-table td.actions {
|
||
width: 32px;
|
||
text-align: center;
|
||
}
|
||
.items-table .remove-row {
|
||
background: transparent;
|
||
border: 1px solid var(--border);
|
||
color: var(--text-faint);
|
||
border-radius: 3px;
|
||
padding: 4px 8px;
|
||
cursor: pointer;
|
||
line-height: 1;
|
||
}
|
||
.items-table .remove-row:hover {
|
||
color: var(--danger);
|
||
border-color: var(--danger-border);
|
||
}
|
||
.link-button {
|
||
background: transparent;
|
||
border: 1px dashed var(--border);
|
||
color: var(--text-dimmer);
|
||
padding: 6px 12px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
margin-bottom: 18px;
|
||
}
|
||
.link-button:hover {
|
||
color: var(--text-strong);
|
||
border-color: var(--text-ghost);
|
||
}
|
||
.invoice-form .field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 6px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.invoice-form label {
|
||
color: var(--text-dim);
|
||
font-size: 0.85rem;
|
||
}
|
||
.invoice-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
|
||
.invoice-form select,
|
||
.invoice-form textarea {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background: var(--surface);
|
||
color: var(--text-strong);
|
||
border: 1px solid var(--border);
|
||
border-radius: 3px;
|
||
padding: 8px 10px;
|
||
font-family: inherit;
|
||
font-size: 0.95rem;
|
||
color-scheme: dark;
|
||
}
|
||
.invoice-form input[type="date"],
|
||
.invoice-form input[inputmode="decimal"] {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.92rem;
|
||
}
|
||
.invoice-form textarea {
|
||
resize: vertical;
|
||
min-height: 72px;
|
||
}
|
||
.invoice-form input::placeholder,
|
||
.invoice-form textarea::placeholder {
|
||
color: var(--text-ghost);
|
||
}
|
||
.invoice-form input:focus,
|
||
.invoice-form select:focus,
|
||
.invoice-form textarea:focus {
|
||
outline: none;
|
||
border-color: var(--text-ghost);
|
||
background: var(--surface-alt);
|
||
}
|
||
.invoice-form input[type="file"] {
|
||
padding: 6px;
|
||
color: var(--text-dim);
|
||
}
|
||
.invoice-form label:has(> input[type="checkbox"]) {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
color: var(--text-strong);
|
||
}
|
||
.invoice-form .field .link-button {
|
||
align-self: flex-start;
|
||
margin: 2px 0 0;
|
||
}
|
||
.invoice-form h2 {
|
||
margin-top: 32px;
|
||
}
|
||
.invoice-form fieldset[disabled] input,
|
||
.invoice-form fieldset[disabled] select,
|
||
.invoice-form fieldset[disabled] textarea {
|
||
opacity: 0.7;
|
||
}
|
||
.invoice-form > .download-button,
|
||
.invoice-form fieldset > .download-button {
|
||
margin-top: 8px;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
}
|
||
.download-button {
|
||
display: inline-block;
|
||
background: var(--border);
|
||
color: var(--text-strong);
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: 3px;
|
||
padding: 12px 32px;
|
||
font-size: 1rem;
|
||
text-decoration: none;
|
||
}
|
||
.download-button:hover {
|
||
background: var(--surface-hover);
|
||
border-color: var(--text-ghost);
|
||
color: var(--text-hover);
|
||
}
|
||
|
||
@media (max-width: 560px) {
|
||
.invoice-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
dl.kv {
|
||
grid-template-columns: 1fr;
|
||
gap: 2px 0;
|
||
}
|
||
dl.kv dd {
|
||
margin-bottom: 8px;
|
||
}
|
||
}
|