@ossy/timesheets 3.7.1 → 3.9.0

package/package.json

@@ -1,20 +1,23 @@
 {
   "name": "@ossy/timesheets",
   "description": "Timesheets — generate, review, save, and export monthly work hours",
-  "version": "3.7.1",
+  "version": "3.9.0",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
   "exports": {
     ".": "./src/index.js"
   },
+  "scripts": {
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest --verbose"
+  },
   "author": "Ossy <yourfriends@ossy.se> (https://ossy.se)",
   "license": "MIT",
   "ossy": {
     "src": "./src"
   },
   "dependencies": {
-    "@ossy/resources": "^3.7.1",
+    "@ossy/resources": "^3.9.0",
     "html-to-image": "^1.11.13",
     "nanoid": "^5.1.11",
     "pdf-lib": "^1.17.1"
@@ -38,5 +41,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "1ee220424da6b065034a7f52f52aa4a6ce7c88d5"
+  "gitHead": "f404be69becb27a1fd853a6ff1903554e76e7d17"
 }

package/src/HolidayLocaleSelect.jsx

@@ -0,0 +1,32 @@
+import React, { useMemo } from 'react'
+import { Select, Text, useLocale, View } from '@ossy/design-system'
+import { HOLIDAY_COUNTRY_CODES } from '@ossy/calendar/holiday-locale'
+
+export function HolidayLocaleSelect ({ value, onChange, disabled }) {
+  const { language, t } = useLocale()
+  const displayNames = useMemo(() => {
+    try {
+      return new Intl.DisplayNames([language || 'en'], { type: 'region' })
+    } catch {
+      return null
+    }
+  }, [language])
+
+  return (
+    <View gap="xs">
+      <Text variant="small" weight="medium" text="timesheets.holidayLocale" />
+      <Select
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        aria-label={t('timesheets.holidayLocale')}
+      >
+        {HOLIDAY_COUNTRY_CODES.map((code) => (
+          <option key={code} value={code}>
+            {displayNames?.of(code) || code}
+          </option>
+        ))}
+      </Select>
+    </View>
+  )
+}

package/src/Timesheet.jsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import { View, Text, Input, DateDisplay, Separator, useLocale } from '@ossy/design-system'
 import { buildMonthGrid, dateKeyFromMs } from '@ossy/calendar'
+import { TimesheetPartyRows } from './TimesheetPartyRows.jsx'
 
 const calendarGrid = {
   display: 'grid',
@@ -13,25 +14,39 @@ const calendarGrid = {
 }
 
 const dayCell = {
+  position: 'relative',
   boxSizing: 'border-box',
   display: 'flex',
-  flexDirection: 'column',
   alignItems: 'center',
-  justifyContent: 'flex-start',
-  gap: 4,
+  justifyContent: 'center',
   width: '100%',
   minHeight: 72,
+  margin: 0,
   borderRadius: 'var(--space-xxs, 2px)',
-  padding: '6px 4px',
+  padding: '18px 4px 8px',
+  cursor: 'text',
+}
+
+const dateNumber = {
+  position: 'absolute',
+  top: 4,
+  right: 5,
+  fontSize: 11,
+  fontWeight: 500,
+  lineHeight: 1,
+  letterSpacing: 0,
+  fontFamily: 'var(--text-default-font-family, sans-serif)',
+  pointerEvents: 'none',
 }
 
 const hoursInput = {
   width: '100%',
-  maxWidth: 48,
-  minHeight: 32,
-  padding: '6px 4px',
+  minHeight: 28,
+  padding: 0,
   textAlign: 'center',
-  fontSize: 13,
+  fontSize: 14,
+  fontWeight: 700,
+  lineHeight: 1,
   borderRadius: 'var(--space-xxs, 2px)',
   background: 'transparent',
   borderColor: 'transparent',
@@ -39,6 +54,8 @@ const hoursInput = {
   borderStyle: 'solid',
   boxShadow: 'none',
   outline: 'none',
+  appearance: 'textfield',
+  MozAppearance: 'textfield',
 }
 
 const WEEKDAY_KEYS = [
@@ -56,7 +73,17 @@ const WEEKDAY_KEYS = [
  * Non-workdays use CalendarDaySurfaceStyles (red).
  * Pass `captureRef` only if capturing this live card; prefer {@link TimesheetExportCard} for PNG/PDF.
  */
-export function Timesheet ({ lines = [], onChange, disabled = false, periodStart, captureRef }) {
+export function Timesheet ({
+  lines = [],
+  onChange,
+  disabled = false,
+  periodStart,
+  captureRef,
+  employeeId,
+  contractId,
+  onEmployeeChange,
+  onContractChange,
+}) {
   const { t } = useLocale()
 
   const lineByKey = useMemo(() => {
@@ -90,6 +117,11 @@ export function Timesheet ({ lines = [], onChange, disabled = false, periodStart
     <>
       <style href="@ossy/timesheets/day-surface" precedence="high">
         {`
+          [data-timesheet-root] [data-timesheet-day-number] {
+            color: var(--foreground);
+            font-family: var(--text-default-font-family, sans-serif);
+          }
+
           [data-timesheet-root] [data-ossy-calendar-day] {
             background: var(--surface-primary);
           }
@@ -102,6 +134,40 @@ export function Timesheet ({ lines = [], onChange, disabled = false, periodStart
           [data-timesheet-root] [data-ossy-calendar-day][data-day-off="true"]:hover {
             background: color-mix(in srgb, hsl(350 32% 55%) 13%, var(--surface-primary));
           }
+
+          [data-timesheet-root] [data-ossy-calendar-day][data-day-off="true"] [data-timesheet-day-number] {
+            color: color-mix(in srgb, hsl(350 28% 38%) 72%, var(--foreground));
+          }
+
+          [data-timesheet-root] [data-ossy-calendar-day]:focus-within {
+            background: color-mix(in srgb, var(--color-accent, #3dcf9a) 16%, var(--surface-primary));
+            box-shadow: inset 0 0 0 2px var(--color-accent, #3dcf9a);
+          }
+
+          [data-timesheet-root] [data-ossy-calendar-day][data-day-off="true"]:focus-within {
+            background: color-mix(in srgb, var(--color-accent, #3dcf9a) 14%, color-mix(in srgb, hsl(350 32% 58%) 9%, var(--surface-primary)));
+          }
+
+          [data-timesheet-root] [data-ossy-calendar-day] [data-component="input"] {
+            font-weight: 700;
+            font-size: 14px;
+            text-align: center;
+            appearance: textfield;
+            -moz-appearance: textfield;
+          }
+
+          [data-timesheet-root] [data-ossy-calendar-day] [data-component="input"]::-webkit-outer-spin-button,
+          [data-timesheet-root] [data-ossy-calendar-day] [data-component="input"]::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+            display: none;
+          }
+
+          [data-timesheet-root] [data-ossy-calendar-day] [data-component="input"]:focus {
+            outline: none;
+            border-color: transparent;
+            box-shadow: none;
+          }
         `}
       </style>
       <div
@@ -134,6 +200,19 @@ export function Timesheet ({ lines = [], onChange, disabled = false, periodStart
             />
           </View>
 
+          {typeof onEmployeeChange === 'function' && typeof onContractChange === 'function' ? (
+            <div style={{ width: 0, minWidth: '100%' }}>
+              <TimesheetPartyRows
+                employeeId={employeeId}
+                contractId={contractId}
+                onEmployeeChange={onEmployeeChange}
+                onContractChange={onContractChange}
+                disabled={disabled}
+                totalHours={totalHours}
+              />
+            </div>
+          ) : null}
+
           <div style={calendarGrid}>
             {WEEKDAY_KEYS.map((key) => (
               <Text key={key} variant="small" color="secondary" style={{ textAlign: 'center' }}>
@@ -152,23 +231,20 @@ export function Timesheet ({ lines = [], onChange, disabled = false, periodStart
               const off = !line.isWorkday
 
               return (
-                <div
+                <label
                   key={cell.dateKey}
                   data-ossy-calendar-day
                   data-day-off={off}
                   style={dayCell}
                 >
-                  <Text
+                  <DateDisplay
+                    value={line.date}
+                    formatOptions={{ day: 'numeric' }}
                     variant="small"
-                    style={{
-                      fontWeight: 600,
-                      fontSize: 13,
-                      lineHeight: 1.2,
-                      color: 'var(--foreground)',
-                    }}
-                  >
-                    {cell.day}
-                  </Text>
+                    as="span"
+                    data-timesheet-day-number
+                    style={dateNumber}
+                  />
                   <Input
                     type="number"
                     min={0}
@@ -180,7 +256,7 @@ export function Timesheet ({ lines = [], onChange, disabled = false, periodStart
                     style={hoursInput}
                     aria-label="timesheets.hours"
                   />
-                </div>
+                </label>
               )
             })}
           </div>

package/src/TimesheetCard.jsx

@@ -1,36 +1,75 @@
-import React, { useMemo } from 'react'
-import { View, Text, DateDisplay, List, Icon, useLocale } from '@ossy/design-system'
+import React, { useCallback, useMemo, useState } from 'react'
+import { Button, ContextMenu, DateDisplay, Dropdown, Icon, List, Text, View, useLocale } from '@ossy/design-system'
 
 /**
- * List row for a timesheet period.
+ * Storage-style list row for a timesheet period.
  */
-export function TimesheetCard ({ timesheet, onClick }) {
+export function TimesheetCard ({ timesheet, onClick, selected = false, actions }) {
   const { t } = useLocale()
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [menuPosition, setMenuPosition] = useState(null)
   const totalHours = useMemo(
     () => (timesheet?.lines ?? []).reduce((sum, line) => sum + (Number(line.hours) || 0), 0),
     [timesheet?.lines],
   )
   const status = timesheet?.status ?? 'draft'
 
+  const handleMenuOpenChange = useCallback((open) => {
+    setMenuOpen(open)
+    if (!open) setMenuPosition(null)
+  }, [])
+
+  const handleContextMenu = useCallback((event) => {
+    if (!actions) return
+    event.preventDefault()
+    event.stopPropagation()
+    setMenuPosition({ top: event.clientY, left: event.clientX })
+    setMenuOpen(true)
+  }, [actions])
+
   return (
     <List.Item
       selectable
-      density="comfortable"
+      selected={selected}
       onClick={onClick}
-      trailing={<Icon name="chevron-right" size="s" />}
-    >
-      <View gap="xxs" style={{ minWidth: 0 }}>
-        <DateDisplay
-          value={timesheet.periodStart}
-          formatOptions={{ month: 'long', year: 'numeric' }}
-          weight="medium"
-        />
-        <Text variant="small" color="secondary">
-          {t('timesheets.statusLabel', { status: t(`timesheets.status.${status}`) })}
-          {' · '}
-          {t('timesheets.totalHours', { hours: totalHours })}
+      onContextMenu={handleContextMenu}
+      leading={(
+        <Icon size="s" name="calendar" style={{ fill: 'hsl(0, 0%, 80%)' }} />
+      )}
+      meta={(
+        <Text variant="small">
+          {t('timesheets.meta.hoursValue', { hours: totalHours })} {t(`timesheets.status.${status}`)}
         </Text>
-      </View>
+      )}
+      trailing={actions ? (
+        <Dropdown
+          trigger={(
+            <Button
+              prefix="more-vertical-alt"
+              variant="command"
+              aria-label={t('timesheets.rowActions')}
+              onClick={(event) => {
+                event.stopPropagation()
+                setMenuPosition(null)
+              }}
+            />
+          )}
+          open={menuOpen}
+          onOpenChange={handleMenuOpenChange}
+          position={menuPosition}
+        >
+          <View inset="xs" surface="primary" roundness="s">
+            <ContextMenu roundness="s" surface="primary">
+              {actions}
+            </ContextMenu>
+          </View>
+        </Dropdown>
+      ) : undefined}
+    >
+      <DateDisplay
+        value={timesheet.periodStart}
+        formatOptions={{ month: 'long', year: 'numeric' }}
+      />
     </List.Item>
   )
 }

package/src/TimesheetExportCard.jsx

@@ -6,6 +6,8 @@ import { TIMESHEET_EXPORT_FONT_FAMILY } from './export-capture.js'
 /** Matches on-screen Timesheet.jsx — solid colors for html-to-image capture. */
 const FG = 'hsl(199, 90%, 10%)'
 const FG_MUTED = 'hsl(182, 15%, 42%)'
+const DATE_FG = 'hsl(182, 23%, 30%)'
+const DATE_OFF_FG = 'hsl(350, 28%, 38%)'
 const ACCENT = 'hsl(167, 89%, 43%)'
 const CELL_BG = '#ffffff'
 const OFF_BG = 'color-mix(in srgb, hsl(350 32% 58%) 9%, #ffffff)'
@@ -22,16 +24,15 @@ const calendarGrid = {
 }
 
 const dayCell = {
+  position: 'relative',
   boxSizing: 'border-box',
   display: 'flex',
-  flexDirection: 'column',
   alignItems: 'center',
-  justifyContent: 'flex-start',
-  gap: 4,
+  justifyContent: 'center',
   width: '100%',
   minHeight: 72,
   borderRadius: 2,
-  padding: '6px 4px',
+  padding: '18px 4px 8px',
   background: CELL_BG,
 }
 
@@ -45,12 +46,42 @@ const WEEKDAY_KEYS = [
   'timesheets.weekday.sun',
 ]
 
+function ExportMetaRow ({ label, value }) {
+  if (value == null || value === '') return null
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16 }}>
+      <span style={{ fontFamily: TIMESHEET_EXPORT_FONT_FAMILY, fontSize: 13, fontWeight: 400, color: FG_MUTED }}>
+        {label}
+      </span>
+      <span style={{ fontFamily: TIMESHEET_EXPORT_FONT_FAMILY, fontSize: 13, fontWeight: 400, color: FG }}>
+        {value}
+      </span>
+    </div>
+  )
+}
+
+function formatSek (value, language) {
+  if (value == null || value === '' || !Number.isFinite(Number(value))) return ''
+  return new Intl.NumberFormat(language === 'sv' ? 'sv-SE' : 'en-SE', {
+    style: 'currency',
+    currency: 'SEK',
+  }).format(Number(value))
+}
+
 /**
  * Print-ready timesheet (hours as text — no inputs).
  * Matches on-screen {@link Timesheet} layout; white background, no card chrome.
  * Mount off-screen and pass `captureRef` for PNG/PDF via html-to-image.
  */
-export function TimesheetExportCard ({ lines = [], periodStart, captureRef }) {
+export function TimesheetExportCard ({
+  lines = [],
+  periodStart,
+  captureRef,
+  employeeLabel,
+  contractLabel,
+  clientName,
+  hourlyRate,
+}) {
   const { t, language } = useLocale()
 
   const lineByKey = useMemo(() => {
@@ -73,6 +104,12 @@ export function TimesheetExportCard ({ lines = [], periodStart, captureRef }) {
       .format(new Date(anchorMs))
   }, [anchorMs, language])
 
+  const rate = hourlyRate == null || hourlyRate === '' ? null : Number(hourlyRate)
+  const totalCost = rate != null && Number.isFinite(rate) ? totalHours * rate : null
+  const hasPartyMeta = Boolean(
+    employeeLabel || contractLabel || clientName || (rate != null && Number.isFinite(rate)),
+  )
+
   if (!lines.length) return null
 
   return (
@@ -134,6 +171,25 @@ export function TimesheetExportCard ({ lines = [], periodStart, captureRef }) {
             width: '100%',
           }}
         />
+        {hasPartyMeta ? (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <ExportMetaRow label={t('timesheets.employee')} value={employeeLabel} />
+            <ExportMetaRow label={t('timesheets.meta.client')} value={clientName} />
+            <ExportMetaRow label={t('timesheets.contract')} value={contractLabel} />
+            <ExportMetaRow
+              label={t('timesheets.meta.hourlyRate')}
+              value={
+                rate != null && Number.isFinite(rate)
+                  ? `${formatSek(rate, language)}${t('timesheets.meta.perHour')}`
+                  : ''
+              }
+            />
+            <ExportMetaRow
+              label={t('timesheets.meta.totalCost')}
+              value={totalCost != null && Number.isFinite(totalCost) ? formatSek(totalCost, language) : ''}
+            />
+          </div>
+        ) : null}
       </div>
 
       <div style={calendarGrid}>
@@ -175,12 +231,14 @@ export function TimesheetExportCard ({ lines = [], periodStart, captureRef }) {
             >
               <span
                 style={{
-                  display: 'block',
+                  position: 'absolute',
+                  top: 4,
+                  right: 5,
                   fontFamily: TIMESHEET_EXPORT_FONT_FAMILY,
-                  fontSize: 13,
-                  fontWeight: 600,
-                  lineHeight: 1.2,
-                  color: 'inherit',
+                  fontSize: 11,
+                  fontWeight: 500,
+                  lineHeight: 1,
+                  color: off ? DATE_OFF_FG : DATE_FG,
                 }}
               >
                 {cell.day}
@@ -190,14 +248,11 @@ export function TimesheetExportCard ({ lines = [], periodStart, captureRef }) {
                   display: 'block',
                   boxSizing: 'border-box',
                   width: '100%',
-                  maxWidth: 48,
-                  minHeight: 32,
-                  padding: '6px 4px',
                   textAlign: 'center',
                   fontFamily: TIMESHEET_EXPORT_FONT_FAMILY,
-                  fontSize: 13,
-                  fontWeight: 600,
-                  lineHeight: 1.2,
+                  fontSize: 14,
+                  fontWeight: 700,
+                  lineHeight: 1,
                   color: 'inherit',
                 }}
               >