@ossy/timesheets 3.7.1 → 3.9.0

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>
+    </>
+  )
+}

package/src/TimesheetPartyRows.jsx

@@ -0,0 +1,101 @@
+import React, { useMemo } from 'react'
+import { Text, View, useLocale } from '@ossy/design-system'
+import { TimesheetPartyFields, useTimesheetParties } from './TimesheetPartyFields.jsx'
+import { findByRef, partyContent } from './timesheet-parties.js'
+
+const metaTextStyle = {
+  marginBottom: 0,
+  minWidth: 0,
+  fontWeight: 400,
+  '--font-weight': '400',
+}
+
+function MetaRow ({ label, children }) {
+  return (
+    <View layout="row" gap="s" style={{ justifyContent: 'space-between', alignItems: 'baseline', minWidth: 0 }}>
+      <Text variant="m" style={metaTextStyle} text={label} />
+      <Text variant="m" style={{ ...metaTextStyle, textAlign: 'right' }}>
+        {children}
+      </Text>
+    </View>
+  )
+}
+
+/**
+ * Employee/contract selects plus rate and total cost under the timesheet header divider.
+ */
+export function TimesheetPartyRows ({
+  employeeId,
+  contractId,
+  onEmployeeChange,
+  onContractChange,
+  disabled,
+  totalHours = 0,
+}) {
+  const { t, language } = useLocale()
+  const { employees, contracts } = useTimesheetParties()
+  const contract = partyContent(findByRef(contracts, contractId))
+  const dash = t('timesheets.meta.dash')
+
+  const money = useMemo(
+    () => (value) => {
+      if (value == null || value === '') return dash
+      return new Intl.NumberFormat(language === 'sv' ? 'sv-SE' : 'en-SE', {
+        style: 'currency',
+        currency: 'SEK',
+      }).format(Number(value))
+    },
+    [dash, language],
+  )
+
+  const hourlyRate = contract?.hourlyCompensation == null || contract?.hourlyCompensation === ''
+    ? null
+    : Number(contract.hourlyCompensation)
+  const totalCost = hourlyRate != null && Number.isFinite(hourlyRate)
+    ? Number(totalHours) * hourlyRate
+    : null
+
+  return (
+    <View
+      gap="s"
+      style={{
+        minWidth: 0,
+        fontWeight: 400,
+        '--font-weight': '400',
+        '--text-default-font-weight': '400',
+        '--text-m-font-weight': '400',
+        '--text-small-font-weight': '400',
+      }}
+    >
+      <TimesheetPartyFields
+        layout="rows"
+        employeeId={employeeId}
+        contractId={contractId}
+        onEmployeeChange={onEmployeeChange}
+        onContractChange={onContractChange}
+        disabled={disabled}
+        employees={employees}
+        contracts={contracts}
+      >
+        {contract ? (
+          <MetaRow label="timesheets.meta.client">
+            {contract.clientName || dash}
+          </MetaRow>
+        ) : null}
+      </TimesheetPartyFields>
+
+      {contract ? (
+        <>
+          <MetaRow label="timesheets.meta.hourlyRate">
+            {hourlyRate == null || !Number.isFinite(hourlyRate)
+              ? dash
+              : `${money(hourlyRate)}${t('timesheets.meta.perHour')}`}
+          </MetaRow>
+          <MetaRow label="timesheets.meta.totalCost">
+            {totalCost == null || !Number.isFinite(totalCost) ? dash : money(totalCost)}
+          </MetaRow>
+        </>
+      ) : null}
+    </View>
+  )
+}