Add balance adjustments (M8)
- New balance_adjustments table with CRUD store, sync logging, and service methods
- SQL migrations restructured: embed fs.FS from internal/store/migrations/, apply in order via user_version
- WeekService.Balance combines closed-weeks delta + adjustments delta; BalanceSummary breakdown
- Four REST routes: GET/POST /api/balance/adjustments, PUT/DELETE /api/balance/adjustments/{id}
- Dexie schema v2 + sync apply cases for balance_adjustments
- API client: BalanceAdjustment type, balance namespace (list/create/update/delete)
- utils: composeDeltaMs / decomposeDeltaMs helpers + 8 new Vitest tests (19 total, all passing)
- History page: balance card breakdown line + full adjustments section with inline add/edit/delete
This commit is contained in:
@@ -81,6 +81,23 @@ export interface Settings {
|
||||
created_at: number;
|
||||
}
|
||||
|
||||
export interface BalanceAdjustment {
|
||||
id: string;
|
||||
delta_ms: number;
|
||||
note: string;
|
||||
effective_at: number; // unix ms
|
||||
created_at: number;
|
||||
updated_at: number;
|
||||
}
|
||||
|
||||
export interface BalanceSummary {
|
||||
total_delta_ms: number;
|
||||
weeks_delta_ms: number;
|
||||
adjustments_delta_ms: number;
|
||||
closed_week_count: number;
|
||||
adjustment_count: number;
|
||||
}
|
||||
|
||||
// ─── Entries ─────────────────────────────────────────────────────────────────
|
||||
|
||||
export const entries = {
|
||||
@@ -125,7 +142,18 @@ export const weeks = {
|
||||
},
|
||||
close: (weekKey: string) => request<ClosedWeek>('POST', `/weeks/${weekKey}/close`),
|
||||
reopen: (weekKey: string) => request<void>('DELETE', `/weeks/${weekKey}/close`),
|
||||
balance: () => request<{ total_delta_ms: number; closed_week_count: number }>('GET', '/weeks/balance')
|
||||
balance: () => request<BalanceSummary>('GET', '/weeks/balance')
|
||||
};
|
||||
|
||||
// ─── Balance adjustments ─────────────────────────────────────────────────────
|
||||
|
||||
export const balance = {
|
||||
list: () => request<BalanceAdjustment[]>('GET', '/balance/adjustments'),
|
||||
create: (body: { delta_ms: number; note?: string; effective_at?: number }) =>
|
||||
request<BalanceAdjustment>('POST', '/balance/adjustments', body),
|
||||
update: (id: string, body: { delta_ms: number; note?: string; effective_at?: number }) =>
|
||||
request<BalanceAdjustment>('PUT', `/balance/adjustments/${id}`, body),
|
||||
delete: (id: string) => request<void>('DELETE', `/balance/adjustments/${id}`)
|
||||
};
|
||||
|
||||
// ─── Settings ────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import Dexie, { type Table } from 'dexie';
|
||||
import type { Entry, ClosedDay, ClosedWeek, Settings } from '$lib/api/client';
|
||||
import type { Entry, ClosedDay, ClosedWeek, Settings, BalanceAdjustment } from '$lib/api/client';
|
||||
|
||||
export interface OutboxItem {
|
||||
id?: number; // auto-increment
|
||||
entity: string; // 'entries' | 'closed_days' | 'closed_weeks' | 'settings'
|
||||
entity: string; // 'entries' | 'closed_days' | 'closed_weeks' | 'settings' | 'balance_adjustments'
|
||||
entity_id: string;
|
||||
op: 'upsert' | 'delete';
|
||||
payload: string; // JSON
|
||||
@@ -15,6 +15,7 @@ export class WotraDB extends Dexie {
|
||||
closed_days!: Table<ClosedDay, string>;
|
||||
closed_weeks!: Table<ClosedWeek, string>;
|
||||
settings_history!: Table<Settings, number>;
|
||||
balance_adjustments!: Table<BalanceAdjustment, string>;
|
||||
outbox!: Table<OutboxItem, number>;
|
||||
meta!: Table<{ key: string; value: string }, string>;
|
||||
|
||||
@@ -28,6 +29,9 @@ export class WotraDB extends Dexie {
|
||||
outbox: '++id, entity, entity_id',
|
||||
meta: 'key'
|
||||
});
|
||||
this.version(2).stores({
|
||||
balance_adjustments: 'id, effective_at, updated_at'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -67,6 +67,7 @@ async function applyUpsert(entity: string, data: unknown) {
|
||||
case 'closed_days': await db.closed_days.put(data as any); break;
|
||||
case 'closed_weeks': await db.closed_weeks.put(data as any); break;
|
||||
case 'settings_history': await db.settings_history.put(data as any); break;
|
||||
case 'balance_adjustments': await db.balance_adjustments.put(data as any); break;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,6 +76,7 @@ async function applyDelete(entity: string, id: string) {
|
||||
case 'entries': await db.entries.delete(id); break;
|
||||
case 'closed_days': await db.closed_days.delete(id); break;
|
||||
case 'closed_weeks': await db.closed_weeks.delete(id); break;
|
||||
case 'balance_adjustments': await db.balance_adjustments.delete(id); break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { dayCapabilities, weekDayKeys, isWorkday } from './utils';
|
||||
import { dayCapabilities, weekDayKeys, isWorkday, composeDeltaMs, decomposeDeltaMs } from './utils';
|
||||
|
||||
describe('dayCapabilities', () => {
|
||||
const today = '2026-04-30';
|
||||
@@ -82,3 +82,35 @@ describe('isWorkday', () => {
|
||||
it('Saturday is not a workday', () => expect(isWorkday('2026-05-02', monToFri)).toBe(false));
|
||||
it('Sunday is not a workday', () => expect(isWorkday('2026-05-03', monToFri)).toBe(false));
|
||||
});
|
||||
|
||||
describe('composeDeltaMs', () => {
|
||||
it('positive: 2h 30m → +9000000', () => {
|
||||
expect(composeDeltaMs('+', 2, 30)).toBe(9_000_000);
|
||||
});
|
||||
it('negative: 1h 15m → -4500000', () => {
|
||||
expect(composeDeltaMs('-', 1, 15)).toBe(-4_500_000);
|
||||
});
|
||||
it('zero hours and minutes → 0', () => {
|
||||
expect(composeDeltaMs('+', 0, 0)).toBe(0);
|
||||
});
|
||||
it('negative zero → 0 (no negative zero)', () => {
|
||||
expect(composeDeltaMs('-', 0, 0)).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('decomposeDeltaMs', () => {
|
||||
it('positive 3h 24m', () => {
|
||||
expect(decomposeDeltaMs(12_240_000)).toEqual({ sign: '+', hours: 3, minutes: 24 });
|
||||
});
|
||||
it('negative 1h 30m', () => {
|
||||
expect(decomposeDeltaMs(-5_400_000)).toEqual({ sign: '-', hours: 1, minutes: 30 });
|
||||
});
|
||||
it('zero', () => {
|
||||
expect(decomposeDeltaMs(0)).toEqual({ sign: '+', hours: 0, minutes: 0 });
|
||||
});
|
||||
it('round-trips through compose', () => {
|
||||
const original = -7_320_000; // -2h 2m
|
||||
const { sign, hours, minutes } = decomposeDeltaMs(original);
|
||||
expect(composeDeltaMs(sign, hours, minutes)).toBe(original);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -71,6 +71,28 @@ export function formatDelta(ms: number): string {
|
||||
return `${sign}${formatDurationShort(Math.abs(ms))}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compose a signed delta_ms from UI inputs.
|
||||
* sign: '+' for credit, '-' for debit.
|
||||
* hours and minutes must be non-negative integers.
|
||||
*/
|
||||
export function composeDeltaMs(sign: '+' | '-', hours: number, minutes: number): number {
|
||||
const magnitude = (Math.floor(hours) * 3_600_000) + (Math.floor(minutes) * 60_000);
|
||||
if (magnitude === 0) return 0;
|
||||
return sign === '-' ? -magnitude : magnitude;
|
||||
}
|
||||
|
||||
/**
|
||||
* Decompose a signed delta_ms into UI-friendly parts.
|
||||
* Returns sign, whole hours, and remaining minutes (0–59).
|
||||
*/
|
||||
export function decomposeDeltaMs(ms: number): { sign: '+' | '-'; hours: number; minutes: number } {
|
||||
const sign: '+' | '-' = ms < 0 ? '-' : '+';
|
||||
const abs = Math.abs(ms);
|
||||
const totalMinutes = Math.floor(abs / 60_000);
|
||||
return { sign, hours: Math.floor(totalMinutes / 60), minutes: totalMinutes % 60 };
|
||||
}
|
||||
|
||||
/** Parse "HH:MM" time string on a given dayKey (YYYY-MM-DD) into unix ms (local time). */
|
||||
export function parseTimeInput(dayKey: string, hhmm: string): number | null {
|
||||
if (!/^\d{2}:\d{2}$/.test(hhmm)) return null;
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { days, weeks, type ClosedDay, type ClosedWeek, ApiError } from '$lib/api/client';
|
||||
import { formatDurationShort, formatDelta } from '$lib/utils';
|
||||
import {
|
||||
days, weeks, balance as balanceApi,
|
||||
type ClosedDay, type ClosedWeek, type BalanceAdjustment, type BalanceSummary,
|
||||
ApiError
|
||||
} from '$lib/api/client';
|
||||
import { formatDurationShort, formatDelta, composeDeltaMs, decomposeDeltaMs, todayKey } from '$lib/utils';
|
||||
|
||||
// Show last 12 weeks
|
||||
function pastWeekKeys(n: number): string[] {
|
||||
@@ -22,29 +26,153 @@
|
||||
let weekKeys = pastWeekKeys(12);
|
||||
let closedWeeksMap: Record<string, ClosedWeek> = $state({});
|
||||
let closedDaysMap: Record<string, ClosedDay> = $state({});
|
||||
let balance: { total_delta_ms: number; closed_week_count: number } | null = $state(null);
|
||||
let summary: BalanceSummary | null = $state(null);
|
||||
let adjustments: BalanceAdjustment[] = $state([]);
|
||||
let error = $state('');
|
||||
let loading = $state(false);
|
||||
|
||||
onMount(async () => {
|
||||
// ── Add form state ────────────────────────────────────────────────────────
|
||||
let showAddForm = $state(false);
|
||||
let addSign: '+' | '-' = $state('+');
|
||||
let addHours = $state(0);
|
||||
let addMinutes = $state(0);
|
||||
let addNote = $state('');
|
||||
let addEffectiveAt = $state(todayKey());
|
||||
let addError = $state('');
|
||||
let addSaving = $state(false);
|
||||
|
||||
// ── Edit form state ───────────────────────────────────────────────────────
|
||||
let editingId: string | null = $state(null);
|
||||
let editSign: '+' | '-' = $state('+');
|
||||
let editHours = $state(0);
|
||||
let editMinutes = $state(0);
|
||||
let editNote = $state('');
|
||||
let editEffectiveAt = $state('');
|
||||
let editError = $state('');
|
||||
let editSaving = $state(false);
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
error = '';
|
||||
try {
|
||||
const from = weekKeys[0];
|
||||
const to = weekKeys[weekKeys.length - 1];
|
||||
const [ws, ds, bal] = await Promise.all([
|
||||
const [ws, ds, sum, adjs] = await Promise.all([
|
||||
weeks.list(from, to),
|
||||
days.list('2000-01-01', '2100-01-01'),
|
||||
weeks.balance()
|
||||
weeks.balance(),
|
||||
balanceApi.list()
|
||||
]);
|
||||
closedWeeksMap = Object.fromEntries((ws ?? []).map((w) => [w.week_key, w]));
|
||||
closedDaysMap = Object.fromEntries((ds ?? []).map((d) => [d.day_key, d]));
|
||||
balance = bal;
|
||||
summary = sum;
|
||||
adjustments = adjs ?? [];
|
||||
} catch (e) {
|
||||
error = e instanceof ApiError ? e.message : String(e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMount(load);
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────────────────
|
||||
|
||||
function msToDateInput(ms: number): string {
|
||||
return new Date(ms).toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
function dateInputToMs(dateStr: string): number {
|
||||
return new Date(dateStr + 'T00:00:00').getTime();
|
||||
}
|
||||
|
||||
// ── Add ───────────────────────────────────────────────────────────────────
|
||||
|
||||
function openAddForm() {
|
||||
showAddForm = true;
|
||||
addSign = '+';
|
||||
addHours = 0;
|
||||
addMinutes = 0;
|
||||
addNote = '';
|
||||
addEffectiveAt = todayKey();
|
||||
addError = '';
|
||||
}
|
||||
|
||||
function cancelAdd() {
|
||||
showAddForm = false;
|
||||
addError = '';
|
||||
}
|
||||
|
||||
async function saveAdd() {
|
||||
addError = '';
|
||||
const deltaMs = composeDeltaMs(addSign, addHours, addMinutes);
|
||||
if (deltaMs === 0) { addError = 'Delta must be non-zero.'; return; }
|
||||
addSaving = true;
|
||||
try {
|
||||
await balanceApi.create({
|
||||
delta_ms: deltaMs,
|
||||
note: addNote,
|
||||
effective_at: dateInputToMs(addEffectiveAt)
|
||||
});
|
||||
showAddForm = false;
|
||||
await load();
|
||||
} catch (e) {
|
||||
addError = e instanceof ApiError ? e.message : String(e);
|
||||
} finally {
|
||||
addSaving = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Edit ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function startEdit(a: BalanceAdjustment) {
|
||||
const { sign, hours, minutes } = decomposeDeltaMs(a.delta_ms);
|
||||
editingId = a.id;
|
||||
editSign = sign;
|
||||
editHours = hours;
|
||||
editMinutes = minutes;
|
||||
editNote = a.note;
|
||||
editEffectiveAt = msToDateInput(a.effective_at);
|
||||
editError = '';
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
editingId = null;
|
||||
editError = '';
|
||||
}
|
||||
|
||||
async function saveEdit(id: string) {
|
||||
editError = '';
|
||||
const deltaMs = composeDeltaMs(editSign, editHours, editMinutes);
|
||||
if (deltaMs === 0) { editError = 'Delta must be non-zero.'; return; }
|
||||
editSaving = true;
|
||||
try {
|
||||
await balanceApi.update(id, {
|
||||
delta_ms: deltaMs,
|
||||
note: editNote,
|
||||
effective_at: dateInputToMs(editEffectiveAt)
|
||||
});
|
||||
editingId = null;
|
||||
await load();
|
||||
} catch (e) {
|
||||
editError = e instanceof ApiError ? e.message : String(e);
|
||||
} finally {
|
||||
editSaving = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Delete ────────────────────────────────────────────────────────────────
|
||||
|
||||
async function deleteAdj(id: string) {
|
||||
if (!confirm('Delete this adjustment?')) return;
|
||||
error = '';
|
||||
try {
|
||||
await balanceApi.delete(id);
|
||||
await load();
|
||||
} catch (e) {
|
||||
error = e instanceof ApiError ? e.message : String(e);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="history">
|
||||
@@ -52,19 +180,26 @@
|
||||
{#if error}<p class="error">{error}</p>{/if}
|
||||
{#if loading}<p>Loading…</p>{/if}
|
||||
|
||||
<!-- Overall balance card -->
|
||||
<!-- Balance card -->
|
||||
<div class="balance-card">
|
||||
<span class="balance-label">Overall balance</span>
|
||||
{#if balance !== null}
|
||||
<span class="balance-value" class:positive={balance.total_delta_ms > 0} class:negative={balance.total_delta_ms < 0}>
|
||||
{formatDelta(balance.total_delta_ms)}
|
||||
{#if summary !== null}
|
||||
<span class="balance-value" class:positive={summary.total_delta_ms > 0} class:negative={summary.total_delta_ms < 0}>
|
||||
{formatDelta(summary.total_delta_ms)}
|
||||
</span>
|
||||
<span class="balance-meta">
|
||||
across {summary.closed_week_count} closed {summary.closed_week_count === 1 ? 'week' : 'weeks'}
|
||||
{#if summary.adjustment_count > 0}
|
||||
· {summary.adjustment_count} {summary.adjustment_count === 1 ? 'adjustment' : 'adjustments'}
|
||||
(weeks {formatDelta(summary.weeks_delta_ms)}, adj {formatDelta(summary.adjustments_delta_ms)})
|
||||
{/if}
|
||||
</span>
|
||||
<span class="balance-meta">across {balance.closed_week_count} closed {balance.closed_week_count === 1 ? 'week' : 'weeks'}</span>
|
||||
{:else}
|
||||
<span class="balance-value">—</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Closed weeks table -->
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -91,6 +226,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Recent Days -->
|
||||
<h2>Recent Days</h2>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -110,53 +246,185 @@
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Balance adjustments -->
|
||||
<div class="section-header">
|
||||
<h2>Balance adjustments</h2>
|
||||
{#if !showAddForm}
|
||||
<button class="btn-add" onclick={openAddForm}>+ Add adjustment</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if showAddForm}
|
||||
<div class="adj-form card">
|
||||
{#if addError}<p class="form-error">{addError}</p>{/if}
|
||||
<div class="form-row">
|
||||
<label class="field">
|
||||
<span>Sign</span>
|
||||
<select bind:value={addSign}>
|
||||
<option value="+">+ Credit</option>
|
||||
<option value="-">− Debit</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Hours</span>
|
||||
<input type="number" min="0" step="1" bind:value={addHours} />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Minutes</span>
|
||||
<input type="number" min="0" max="59" step="1" bind:value={addMinutes} />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Effective date</span>
|
||||
<input type="date" bind:value={addEffectiveAt} />
|
||||
</label>
|
||||
<label class="field wide">
|
||||
<span>Note (optional)</span>
|
||||
<input type="text" placeholder="Reason…" bind:value={addNote} />
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="btn save" onclick={saveAdd} disabled={addSaving}>Save</button>
|
||||
<button class="btn cancel" onclick={cancelAdd}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if adjustments.length > 0}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Effective</th>
|
||||
<th>Delta</th>
|
||||
<th>Note</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each adjustments as a (a.id)}
|
||||
{#if editingId === a.id}
|
||||
<tr>
|
||||
<td colspan="4" class="edit-cell">
|
||||
{#if editError}<p class="form-error">{editError}</p>{/if}
|
||||
<div class="form-row">
|
||||
<label class="field">
|
||||
<span>Sign</span>
|
||||
<select bind:value={editSign}>
|
||||
<option value="+">+ Credit</option>
|
||||
<option value="-">− Debit</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Hours</span>
|
||||
<input type="number" min="0" step="1" bind:value={editHours} />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Minutes</span>
|
||||
<input type="number" min="0" max="59" step="1" bind:value={editMinutes} />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Effective date</span>
|
||||
<input type="date" bind:value={editEffectiveAt} />
|
||||
</label>
|
||||
<label class="field wide">
|
||||
<span>Note (optional)</span>
|
||||
<input type="text" placeholder="Reason…" bind:value={editNote} />
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="btn save" onclick={() => saveEdit(a.id)} disabled={editSaving}>Save</button>
|
||||
<button class="btn cancel" onclick={cancelEdit}>Cancel</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{:else}
|
||||
<tr>
|
||||
<td>{msToDateInput(a.effective_at)}</td>
|
||||
<td class:positive={a.delta_ms > 0} class:negative={a.delta_ms < 0}>{formatDelta(a.delta_ms)}</td>
|
||||
<td class="note-cell">{a.note}</td>
|
||||
<td class="row-actions">
|
||||
<button class="action-btn" onclick={() => startEdit(a)} title="Edit">✎</button>
|
||||
<button class="action-btn delete" onclick={() => deleteAdj(a.id)} title="Delete">✕</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{:else if !showAddForm}
|
||||
<p class="empty">No adjustments yet.</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h1 { margin: 0 0 1rem; }
|
||||
h2 { margin: 2rem 0 0.5rem; }
|
||||
h2 { margin: 0; font-size: 1rem; color: #495057; }
|
||||
.error { color: #c0392b; background: #fde8e4; padding: 0.5rem; border-radius: 6px; }
|
||||
|
||||
/* Balance card */
|
||||
.balance-card {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.75rem;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.balance-label {
|
||||
font-size: 0.85rem;
|
||||
color: #6c757d;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.balance-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #6c757d;
|
||||
letter-spacing: -0.5px;
|
||||
display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
|
||||
background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||
padding: 1rem 1.25rem; margin-bottom: 1.25rem;
|
||||
}
|
||||
.balance-label { font-size: 0.85rem; color: #6c757d; font-weight: 500; white-space: nowrap; }
|
||||
.balance-value { font-size: 1.5rem; font-weight: 700; color: #6c757d; letter-spacing: -0.5px; }
|
||||
.balance-value.positive { color: #27ae60; }
|
||||
.balance-value.negative { color: #c0392b; }
|
||||
.balance-meta {
|
||||
font-size: 0.8rem;
|
||||
color: #adb5bd;
|
||||
}
|
||||
.balance-meta { font-size: 0.8rem; color: #adb5bd; }
|
||||
|
||||
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 1rem; }
|
||||
th { background: #f8f9fa; padding: 0.6rem 1rem; text-align: left; font-size: 0.85rem; color: #6c757d; border-bottom: 1px solid #dee2e6; }
|
||||
td { padding: 0.5rem 1rem; border-bottom: 1px solid #f1f3f5; font-size: 0.9rem; }
|
||||
/* Tables */
|
||||
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px;
|
||||
overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 1rem; }
|
||||
th { background: #f8f9fa; padding: 0.6rem 1rem; text-align: left;
|
||||
font-size: 0.85rem; color: #6c757d; border-bottom: 1px solid #dee2e6; }
|
||||
td { padding: 0.5rem 1rem; border-bottom: 1px solid #f1f3f5; font-size: 0.9rem; vertical-align: middle; }
|
||||
tr.closed td { color: #495057; }
|
||||
.positive { color: #27ae60; font-weight: 600; }
|
||||
.negative { color: #c0392b; font-weight: 600; }
|
||||
.note-cell { color: #6c757d; font-style: italic; }
|
||||
|
||||
/* Section header */
|
||||
.section-header { display: flex; align-items: center; justify-content: space-between;
|
||||
margin: 2rem 0 0.75rem; }
|
||||
.btn-add { padding: 0.35rem 0.9rem; background: #2c7be5; color: #fff;
|
||||
border: none; border-radius: 6px; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
|
||||
|
||||
/* Adjustment form */
|
||||
.adj-form { padding: 1rem 1.25rem; margin-bottom: 1rem; }
|
||||
.card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
.form-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
|
||||
.field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; font-weight: 500; }
|
||||
.field.wide { flex: 1; min-width: 180px; }
|
||||
.field input, .field select {
|
||||
padding: 0.35rem 0.6rem; border: 1px solid #ced4da; border-radius: 6px;
|
||||
font-size: 0.9rem; background: #fff;
|
||||
}
|
||||
.field input[type="number"] { width: 5rem; }
|
||||
.form-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
|
||||
.btn { padding: 0.4rem 1rem; border: none; border-radius: 6px;
|
||||
font-size: 0.875rem; font-weight: 600; cursor: pointer; }
|
||||
.btn.save { background: #2c7be5; color: #fff; }
|
||||
.btn.save:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
.btn.cancel { background: #e9ecef; color: #343a40; }
|
||||
.form-error { color: #c0392b; font-size: 0.85rem; margin: 0 0 0.5rem; }
|
||||
|
||||
/* Edit cell */
|
||||
.edit-cell { background: #f8f9fa; padding: 0.75rem 1rem; }
|
||||
|
||||
/* Row actions */
|
||||
.row-actions { display: flex; gap: 0.25rem; white-space: nowrap; }
|
||||
.action-btn { background: none; border: none; cursor: pointer; padding: 0.2rem 0.35rem;
|
||||
border-radius: 4px; font-size: 0.95rem; color: #adb5bd; transition: color 0.15s; }
|
||||
.action-btn:hover { color: #2c7be5; }
|
||||
.action-btn.delete:hover { color: #e74c3c; }
|
||||
|
||||
/* Misc */
|
||||
.empty { color: #adb5bd; font-size: 0.9rem; margin: 0.5rem 0 1.5rem; }
|
||||
|
||||
.badge { font-size: 0.75rem; padding: 0.15rem 0.4rem; border-radius: 4px; }
|
||||
.badge[data-kind="work"] { background: #d4edda; color: #155724; }
|
||||
.badge[data-kind="holiday"] { background: #fff3cd; color: #856404; }
|
||||
.badge[data-kind="vacation"] { background: #cce5ff; color: #004085; }
|
||||
.badge[data-kind="sick"] { background: #f8d7da; color: #721c24; }
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user