feat(week): add day strip with per-day progress bars and status
- New DayChip.svelte component: weekday label, date number, progress bar (worked/expected), kind badge (H/V/S), closed checkmark, today highlight, selected state, accessible role=tab/aria-selected - Week page: replace days-grid with horizontal scroll-snap chip strip - Per-day workedMs: uses closed_days.worked_ms when closed, else sums open entries for that day (so in-progress work shows immediately) - dailyExpectedMs: evenly split hours_per_week across workdays; 0 for weekends (no progress bar rendered for non-workdays) - Progress bar turns amber when worked > expected (overtime) - weekEntries stored in state (was discarded after computing set); daysWithEntries now derived from weekEntries
This commit is contained in:
183
web/src/lib/components/DayChip.svelte
Normal file
183
web/src/lib/components/DayChip.svelte
Normal file
@@ -0,0 +1,183 @@
|
||||
<script lang="ts">
|
||||
import { formatDurationShort } from '$lib/utils';
|
||||
|
||||
interface Props {
|
||||
dayKey: string;
|
||||
weekdayLabel: string; // e.g. 'Mon'
|
||||
workedMs: number;
|
||||
expectedMs: number;
|
||||
kind: 'work' | 'holiday' | 'vacation' | 'sick' | null; // null = open/untracked
|
||||
closed: boolean;
|
||||
isToday: boolean;
|
||||
selected: boolean;
|
||||
isWorkday: boolean;
|
||||
onclick?: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
dayKey,
|
||||
weekdayLabel,
|
||||
workedMs,
|
||||
expectedMs,
|
||||
kind,
|
||||
closed,
|
||||
isToday,
|
||||
selected,
|
||||
isWorkday,
|
||||
onclick
|
||||
}: Props = $props();
|
||||
|
||||
const dateNum = $derived(dayKey.slice(8)); // DD
|
||||
|
||||
// Progress bar fill: clamp to [0,1]. Non-workdays have expectedMs=0 → no bar.
|
||||
const progress = $derived(expectedMs > 0 ? Math.min(workedMs / expectedMs, 1) : 0);
|
||||
|
||||
// Kind icons (emoji-free: text labels used for kind badges)
|
||||
const KIND_ICON: Record<string, string> = {
|
||||
holiday: 'H',
|
||||
vacation: 'V',
|
||||
sick: 'S'
|
||||
};
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="day-chip"
|
||||
class:today={isToday}
|
||||
class:selected
|
||||
class:weekend={!isWorkday}
|
||||
class:closed
|
||||
role="tab"
|
||||
aria-selected={selected}
|
||||
tabindex={selected ? 0 : -1}
|
||||
{onclick}
|
||||
>
|
||||
<span class="wd-label">{weekdayLabel}</span>
|
||||
<span class="date-num">{dateNum}</span>
|
||||
|
||||
{#if expectedMs > 0}
|
||||
<div class="progress-track" title="{formatDurationShort(workedMs)} / {formatDurationShort(expectedMs)}">
|
||||
<div class="progress-fill" class:over={workedMs > expectedMs} style="width: {progress * 100}%"></div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="progress-track weekend-track"></div>
|
||||
{/if}
|
||||
|
||||
<div class="badges">
|
||||
{#if kind && kind !== 'work'}
|
||||
<span class="kind-badge" data-kind={kind}>{KIND_ICON[kind]}</span>
|
||||
{/if}
|
||||
{#if closed}
|
||||
<span class="closed-badge" title="Closed">✓</span>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.day-chip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
padding: 0.4rem 0.3rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
min-width: 2.8rem;
|
||||
flex: 1;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
scroll-snap-align: start;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.day-chip:hover {
|
||||
border-color: #adb5bd;
|
||||
}
|
||||
|
||||
.day-chip.today {
|
||||
border-color: #2c7be5;
|
||||
}
|
||||
|
||||
.day-chip.selected {
|
||||
border-color: #2c7be5;
|
||||
box-shadow: 0 0 0 2px #cce5ff;
|
||||
background: #f0f7ff;
|
||||
}
|
||||
|
||||
.day-chip.weekend {
|
||||
background: #f8f9fa;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.day-chip.closed {
|
||||
background: #f0f9f0;
|
||||
}
|
||||
|
||||
.wd-label {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.date-num {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.today .date-num {
|
||||
color: #2c7be5;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: #e9ecef;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin: 0.15rem 0;
|
||||
}
|
||||
|
||||
.weekend-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #27ae60;
|
||||
border-radius: 2px;
|
||||
transition: width 0.2s;
|
||||
}
|
||||
|
||||
.progress-fill.over {
|
||||
background: #f39c12;
|
||||
}
|
||||
|
||||
.badges {
|
||||
display: flex;
|
||||
gap: 0.15rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
.kind-badge {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
padding: 0.05rem 0.25rem;
|
||||
border-radius: 3px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.kind-badge[data-kind="holiday"] { background: #fff3cd; color: #856404; }
|
||||
.kind-badge[data-kind="vacation"] { background: #cce5ff; color: #004085; }
|
||||
.kind-badge[data-kind="sick"] { background: #f8d7da; color: #721c24; }
|
||||
|
||||
.closed-badge {
|
||||
font-size: 0.65rem;
|
||||
color: #27ae60;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user