@ossy/timesheets 3.8.0 → 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.8.0",
+  "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.8.0",
+    "@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": "14548dfc2019e7258e8c75db527acbf66fe829bd"
+  "gitHead": "f404be69becb27a1fd853a6ff1903554e76e7d17"
 }

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',
@@ -53,6 +54,8 @@ const hoursInput = {
   borderStyle: 'solid',
   boxShadow: 'none',
   outline: 'none',
+  appearance: 'textfield',
+  MozAppearance: 'textfield',
 }
 
 const WEEKDAY_KEYS = [
@@ -70,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(() => {
@@ -139,6 +152,15 @@ export function Timesheet ({ lines = [], onChange, disabled = false, periodStart
             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 {
@@ -178,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' }}>

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

@@ -46,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(() => {
@@ -74,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 (
@@ -135,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}>

package/src/TimesheetPanel.jsx

@@ -0,0 +1,249 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { Text, View, Button, useLocale, Alert, Dropdown, ContextMenu, DateDisplay } from '@ossy/design-system'
+import { useSdk } from '@ossy/sdk-react'
+import { Timesheet } from './Timesheet.jsx'
+import { TimesheetExportCard } from './TimesheetExportCard.jsx'
+import { downloadTimesheetCsv } from './download-timesheet-csv.js'
+import { downloadTimesheetImage } from './download-timesheet-image.js'
+import { downloadTimesheetPdf } from './download-timesheet-pdf.js'
+import { invokeErrorMessage } from './invoke-error-message.js'
+import { useTimesheetParties } from './TimesheetPartyFields.jsx'
+import { contractBillingMeta, labelForContract, labelForEmployee } from './timesheet-parties.js'
+import { metadata as GetTimesheet } from './get.action.js'
+import { metadata as SaveTimesheet } from './save.action.js'
+
+/**
+ * Storage-style side panel for reviewing and saving a timesheet.
+ */
+export function TimesheetPanel ({ timesheetId, onClose, onSaved, width = '50%' }) {
+  const { t } = useLocale()
+  const sdk = useSdk()
+  const captureRef = useRef(null)
+  const { employees, contracts } = useTimesheetParties()
+
+  const [timesheet, setTimesheet] = useState(null)
+  const [lines, setLines] = useState([])
+  const [employeeId, setEmployeeId] = useState(null)
+  const [contractId, setContractId] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [exporting, setExporting] = useState(false)
+  const [error, setError] = useState(null)
+  const [message, setMessage] = useState(null)
+
+  const load = useCallback(async () => {
+    if (!timesheetId) return
+    setLoading(true)
+    setError(null)
+    setMessage(null)
+    try {
+      const data = await sdk.invoke(GetTimesheet, { timesheetId })
+      if (!data) {
+        setError(t('timesheets.errorNotFound'))
+        setTimesheet(null)
+        setLines([])
+        setEmployeeId(null)
+        setContractId(null)
+        return
+      }
+      setTimesheet(data)
+      setLines(data.lines ?? [])
+      setEmployeeId(data.employeeId ?? null)
+      setContractId(data.contractId ?? null)
+    } catch (err) {
+      setError(await invokeErrorMessage(err, t('timesheets.errorLoad')))
+      setTimesheet(null)
+      setLines([])
+      setEmployeeId(null)
+      setContractId(null)
+    } finally {
+      setLoading(false)
+    }
+  }, [sdk, t, timesheetId])
+
+  useEffect(() => {
+    load()
+  }, [load])
+
+  const handleSave = async () => {
+    if (!timesheet?.id) return
+    setSaving(true)
+    setError(null)
+    setMessage(null)
+    try {
+      const data = await sdk.invoke(SaveTimesheet, {
+        timesheetId: timesheet.id,
+        lines,
+        employeeId,
+        contractId,
+      })
+      setTimesheet(data)
+      setLines(data?.lines ?? lines)
+      setEmployeeId(data?.employeeId ?? null)
+      setContractId(data?.contractId ?? null)
+      setMessage(t('timesheets.saved'))
+      onSaved?.(data)
+    } catch (err) {
+      setError(await invokeErrorMessage(err, t('timesheets.errorSave')))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const billing = contractBillingMeta(contracts, contractId)
+
+  const exportPayload = {
+    ...timesheet,
+    lines,
+    status: timesheet?.status,
+    clientName: billing.clientName,
+    hourlyRate: billing.hourlyRate,
+  }
+
+  const runExport = async (kind) => {
+    if (!lines.length) return
+    setExporting(true)
+    setError(null)
+    setMessage(null)
+    try {
+      if (kind === 'csv') {
+        downloadTimesheetCsv(exportPayload)
+      } else if (kind === 'png') {
+        await downloadTimesheetImage(captureRef.current, exportPayload)
+      } else if (kind === 'pdf') {
+        await downloadTimesheetPdf(captureRef.current, exportPayload)
+      }
+    } catch (err) {
+      setError(await invokeErrorMessage(err, t('timesheets.errorExport')))
+    } finally {
+      setExporting(false)
+    }
+  }
+
+  if (!timesheetId) return null
+
+  const exportDisabled = !lines.length || loading || exporting
+
+  return (
+    <View
+      stack
+      surface="primary"
+      bordered
+      roundness="xs"
+      style={{ height: '100%', width, minHeight: 0, minWidth: 0, flexShrink: 0 }}
+    >
+      <View.Item>
+        <View stack horizontal style={{ minHeight: '48px', alignItems: 'center', gap: '4px' }}>
+          <View.Item fill surface="primary" style={{ padding: '4px 8px', minWidth: 0 }}>
+            {timesheet?.periodStart != null ? (
+              <DateDisplay
+                value={timesheet.periodStart}
+                formatOptions={{ month: 'long', year: 'numeric' }}
+                as="h3"
+                variant="small"
+                weight="medium"
+              />
+            ) : (
+              <Text as="h3" variant="small" weight="medium" text="timesheets.detail.title" />
+            )}
+          </View.Item>
+
+          <Dropdown
+            trigger={(
+              <Button
+                variant="command"
+                prefix="software-download"
+                disabled={exportDisabled}
+                aria-label={t('timesheets.export')}
+              />
+            )}
+          >
+            <ContextMenu roundness="s" surface="primary">
+              <ContextMenu.Item
+                prefix="list"
+                label="timesheets.exportCsv"
+                onClick={() => runExport('csv')}
+              />
+              <ContextMenu.Item
+                prefix="image"
+                label="timesheets.exportPng"
+                onClick={() => runExport('png')}
+              />
+              <ContextMenu.Item
+                prefix="file-document"
+                label="timesheets.exportPdf"
+                onClick={() => runExport('pdf')}
+              />
+            </ContextMenu>
+          </Dropdown>
+
+          <Button
+            id={SaveTimesheet.id}
+            variant="command"
+            prefix="check"
+            disabled={!timesheet?.id || saving || loading}
+            aria-label={saving ? t('timesheets.saving') : t('timesheets.save')}
+            onClick={handleSave}
+          />
+
+          {onClose && (
+            <Button
+              prefix="close"
+              variant="command"
+              aria-label={t('timesheets.closePanel')}
+              onClick={onClose}
+            />
+          )}
+        </View>
+      </View.Item>
+
+      <View.Item
+        fill
+        style={{ display: 'flex', flexDirection: 'column', minHeight: 0, overflowY: 'auto' }}
+      >
+        <View inset="m" gap="m">
+          {error && <Alert variant="danger">{error}</Alert>}
+          {message && !error && <Alert variant="success">{message}</Alert>}
+
+          {loading ? (
+            <Text color="secondary" text="timesheets.loading" />
+          ) : timesheet ? (
+            <>
+              <Timesheet
+                lines={lines}
+                onChange={setLines}
+                disabled={loading || saving || exporting}
+                periodStart={timesheet.periodStart}
+                employeeId={employeeId}
+                contractId={contractId}
+                onEmployeeChange={setEmployeeId}
+                onContractChange={setContractId}
+              />
+              <div
+                aria-hidden
+                style={{
+                  position: 'fixed',
+                  left: 0,
+                  top: 0,
+                  transform: 'translateX(-200vw)',
+                  pointerEvents: 'none',
+                  zIndex: -1,
+                }}
+              >
+                <TimesheetExportCard
+                  lines={lines}
+                  periodStart={timesheet.periodStart}
+                  employeeLabel={labelForEmployee(employees, employeeId)}
+                  contractLabel={labelForContract(contracts, contractId)}
+                  clientName={billing.clientName}
+                  hourlyRate={billing.hourlyRate}
+                  captureRef={captureRef}
+                />
+              </div>
+            </>
+          ) : null}
+        </View>
+      </View.Item>
+    </View>
+  )
+}

package/src/TimesheetPartyFields.jsx

@@ -0,0 +1,121 @@
+import React, { useMemo } from 'react'
+import { Select, Text, useLocale, View } from '@ossy/design-system'
+import { useSdk } from '@ossy/sdk-react'
+import { SearchResources } from '@ossy/resources'
+import { TimesheetRefs } from './schema-ids.js'
+import { contractLabel, employeeLabel, resourceIdOf } from './timesheet-parties.js'
+
+export function useTimesheetParties () {
+  const sdk = useSdk()
+  const { data: employees = [] } = sdk.read(SearchResources, { type: TimesheetRefs.employee })
+  const { data: contracts = [] } = sdk.read(SearchResources, { type: TimesheetRefs.contract })
+  return { employees, contracts }
+}
+
+export function TimesheetPartyFields ({
+  employeeId,
+  contractId,
+  onEmployeeChange,
+  onContractChange,
+  disabled,
+  layout = 'stack',
+  employees: employeesProp,
+  contracts: contractsProp,
+  children,
+}) {
+  const { t } = useLocale()
+  const loaded = useTimesheetParties()
+  const employees = employeesProp ?? loaded.employees
+  const contracts = contractsProp ?? loaded.contracts
+  const selectedEmployeeId = resourceIdOf(employeeId) ?? ''
+  const selectedContractId = resourceIdOf(contractId) ?? ''
+
+  const contractOptions = useMemo(() => {
+    if (!selectedEmployeeId) return contracts
+    return contracts.filter((contract) => {
+      const owner = resourceIdOf(contract.content?.employeeId)
+      return !owner || owner === selectedEmployeeId || contract.id === selectedContractId
+    })
+  }, [contracts, selectedEmployeeId, selectedContractId])
+
+  const setEmployee = (event) => {
+    const next = event.target.value
+    onEmployeeChange(next ? { resourceId: next } : null)
+    if (!next || !selectedContractId) return
+    const current = contracts.find((contract) => contract.id === selectedContractId)
+    const owner = resourceIdOf(current?.content?.employeeId)
+    if (owner && owner !== next) onContractChange(null)
+  }
+
+  const setContract = (event) => {
+    const next = event.target.value
+    onContractChange(next ? { resourceId: next } : null)
+  }
+
+  const rowSelectStyle = layout === 'rows'
+    ? { width: '10rem', maxWidth: '10rem', minWidth: 0, fontWeight: 400 }
+    : undefined
+
+  const employeeSelect = (
+    <Select
+      value={selectedEmployeeId}
+      onChange={setEmployee}
+      disabled={disabled}
+      aria-label={t('timesheets.employee')}
+      style={rowSelectStyle}
+    >
+      <option value="">{t('timesheets.employeeNone')}</option>
+      {employees.map((employee) => (
+        <option key={employee.id} value={employee.id}>
+          {employeeLabel(employee)}
+        </option>
+      ))}
+    </Select>
+  )
+
+  const contractSelect = (
+    <Select
+      value={selectedContractId}
+      onChange={setContract}
+      disabled={disabled}
+      aria-label={t('timesheets.contract')}
+      style={rowSelectStyle}
+    >
+      <option value="">{t('timesheets.contractNone')}</option>
+      {contractOptions.map((contract) => (
+        <option key={contract.id} value={contract.id}>
+          {contractLabel(contract)}
+        </option>
+      ))}
+    </Select>
+  )
+
+  if (layout === 'rows') {
+    return (
+      <>
+        <View layout="row" gap="s" style={{ justifyContent: 'space-between', alignItems: 'center', minWidth: 0 }}>
+          <Text variant="m" style={{ marginBottom: 0, minWidth: 0, fontWeight: 400, '--font-weight': '400' }} text="timesheets.employee" />
+          {employeeSelect}
+        </View>
+        {children}
+        <View layout="row" gap="s" style={{ justifyContent: 'space-between', alignItems: 'center', minWidth: 0 }}>
+          <Text variant="m" style={{ marginBottom: 0, minWidth: 0, fontWeight: 400, '--font-weight': '400' }} text="timesheets.contract" />
+          {contractSelect}
+        </View>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <View gap="xs">
+        <Text variant="small" weight="medium" text="timesheets.employee" />
+        {employeeSelect}
+      </View>
+      <View gap="xs">
+        <Text variant="small" weight="medium" text="timesheets.contract" />
+        {contractSelect}
+      </View>
+    </>
+  )
+}