Timesheet

'use client'

import { useState } from 'react'
import './timesheet.css'

const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
const parse = (s: string): number | null => { const t = s.trim(); if (!t) return 0; const m = t.match(/^(\d{1,2}):([0-5]\d)$/); if (m) return Number(m[1]) + Number(m[2]) / 60; const n = Number(t.replace(',', '.')); return isFinite(n) && n >= 0 && n <= 24 ? n : null }
const fmt = (n: number) => (Math.round(n * 100) / 100).toString()

export interface TimesheetProps {
  target?: number
  projects?: string[]
  fill?: 'dark' | 'light'
  className?: string
}

/** Weekly hours grid with totals. */
export function Timesheet({ target = 40, projects = ['Client portal', 'Mobile app', 'Internal'], fill = 'dark', className }: TimesheetProps) {
  const [cells, setCells] = useState<string[][]>(() => [['6', '7', '5', '', ''], ['2', '1', '3', '', ''], ['', '0:30', '', '', '']].slice(0, projects.length))
  const [bill, setBill] = useState<boolean[]>(projects.map((_, i) => i < 2))
  const num = cells.map((r) => r.map((c) => parse(c) ?? 0))
  const rowT = num.map((r) => r.reduce((a, b) => a + b, 0))
  const colT = DAYS.map((_, d) => num.reduce((a, r) => a + r[d], 0))
  const tot = rowT.reduce((a, b) => a + b, 0)
  const billable = rowT.reduce((a, t, i) => a + (bill[i] ? t : 0), 0)
  const set = (r: number, d: number, v: string) => setCells(cells.map((row, i) => (i === r ? row.map((c, j) => (j === d ? v : c)) : row)))
  const move = (e: React.KeyboardEvent<HTMLInputElement>, r: number, d: number) => {
    const k = e.key; let nr = r, nd = d
    if (k === 'ArrowRight' && e.currentTarget.selectionStart === e.currentTarget.value.length) nd++
    else if (k === 'ArrowLeft' && e.currentTarget.selectionStart === 0) nd--
    else if (k === 'ArrowDown' || k === 'Enter') nr++
    else if (k === 'ArrowUp') nr--
    else return
    if (nr < 0 || nd < 0 || nr >= cells.length || nd >= DAYS.length) return
    e.preventDefault()
    const el = e.currentTarget.closest('table')?.querySelector<HTMLInputElement>(`input[data-c="${nr}-${nd}"]`)
    el?.focus(); el?.select()
  }
  return (
    <div className={['sd-tms', className].filter(Boolean).join(' ')} data-fill={fill}>
      <div className="sd-tms__wk">Week 45<span>Tap a dot to mark billable</span></div>
      <table>
        <thead><tr><th>Project</th>{DAYS.map((d) => <th key={d}>{d}</th>)}<th>Total</th></tr></thead>
        <tbody>{projects.map((p, r) => <tr key={p}>
          <th><button type="button" aria-pressed={bill[r]} aria-label={`${p}, billable`} onClick={() => setBill(bill.map((b, i) => (i === r ? !b : b)))}><i>●</i><span>{p}</span></button></th>
          {DAYS.map((d, j) => <td key={d}><input inputMode="decimal" data-c={`${r}-${j}`} aria-label={`${p} ${d} hours`} value={cells[r][j]} data-bad={parse(cells[r][j]) === null || undefined} onChange={(e) => set(r, j, e.target.value)} onKeyDown={(e) => move(e, r, j)} onFocus={(e) => e.target.select()} /></td>)}
          <td className="t">{fmt(rowT[r])}</td>
        </tr>)}</tbody>
        <tfoot><tr><td>Day</td>{colT.map((t, i) => <td key={i}>{fmt(t)}</td>)}<td>{fmt(tot)}</td></tr></tfoot>
      </table>
      <div className="sd-tms__bar" aria-hidden><i style={{ width: `${Math.min(100, (billable / Math.max(target, tot)) * 100)}%` }} /><i style={{ width: `${Math.min(100, ((tot - billable) / Math.max(target, tot)) * 100)}%` }} /></div>
      <div className="sd-tms__f" aria-live="polite"><span><b>{fmt(tot)}</b> / {target} h{tot > target ? ` · ${fmt(tot - target)} overtime` : ` · ${fmt(target - tot)} to go`}</span><span>Billable <b>{tot ? Math.round((billable / tot) * 100) : 0}%</b></span></div>
    </div>
  )
}

.sd-tms { --bg: #1c1c1c; --fg: #f6f6f6; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.1); --soft: rgb(255 255 255 / 0.07); --strong: #fafafa; --on: #111; 
  color: var(--fg); font-size: 14px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.sd-tms[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.09); --soft: rgb(0 0 0 / 0.05); --strong: #111; --on: #fff; }
.sd-tms :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-tms :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-tms .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-tms { width: min(100%, 350px); padding: 14px; grid-template-columns: minmax(0, 1fr); border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; }
.sd-tms__wk { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; }
.sd-tms__wk span { font-size: 11px; color: var(--mute); font-weight: 400; }
.sd-tms table { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; margin: -3px; width: calc(100% + 6px); }
.sd-tms th { font-size: 10px; font-weight: 500; color: var(--mute); text-align: center; padding: 0 0 2px; }
.sd-tms th:first-child { width: 30%; text-align: left; }
.sd-tms th:last-child, .sd-tms td:last-child { width: 14%; }
.sd-tms tbody th { text-align: left; font-size: 11.5px; color: var(--fg); font-weight: 500; }
.sd-tms tbody th button { display: flex; align-items: center; gap: 5px; text-align: left; max-width: 100%; }
.sd-tms tbody th button i { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--mute); font-size: 0; }
.sd-tms tbody th button[aria-pressed='true'] i { box-shadow: inset 0 0 0 5px var(--fg); }
.sd-tms tbody th button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-tms td input { width: 100%; height: 32px; border: 0; border-radius: 7px; background: var(--soft); color: var(--fg); font: inherit; font-size: 12px; text-align: center; padding: 0; outline: 0; font-variant-numeric: tabular-nums; }
.sd-tms td input:focus { box-shadow: inset 0 0 0 1.5px var(--fg); }
.sd-tms td input[data-bad] { box-shadow: inset 0 0 0 1.5px var(--mute); text-decoration: underline wavy; }
.sd-tms td.t, .sd-tms tfoot td { text-align: center; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sd-tms tfoot td { color: var(--mute); font-weight: 500; padding-top: 2px; }
.sd-tms tfoot td:first-child { text-align: left; }
.sd-tms__bar { height: 8px; border-radius: 4px; background: var(--soft); display: flex; overflow: hidden; }
.sd-tms__bar i { height: 100%; background: var(--fg); transition: width 200ms; }
.sd-tms__bar i + i { background: var(--mute); }
.sd-tms__f { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--mute); }
.sd-tms__f b { color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .sd-tms *, .sd-tms *::before, .sd-tms *::after { animation: none !important; transition: none !important; } }