@ossy/timesheets 3.8.0 → 3.10.0

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

package/src/TimesheetsProductHome.jsx

@@ -1,14 +1,21 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { Text, View, Button, Page, useLocale, Tags, Alert, Select, List, Overlay } from '@ossy/design-system'
-import { useRouter } from '@ossy/router-react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Text, View, Button, Page, useLocale, Tags, Alert, Select, List, Overlay, ContextMenu, Guide } from '@ossy/design-system'
 import { useSdk } from '@ossy/sdk-react'
+import { useSelectedResourceId } from '@ossy/resources'
 import { Definition } from './Definition.js'
 import { TimesheetCard } from './TimesheetCard.jsx'
-import { monthPeriodBounds } from './build-prefilled-lines.js'
+import { TimesheetPanel } from './TimesheetPanel.jsx'
+import { TimesheetExportCard } from './TimesheetExportCard.jsx'
+import { TimesheetPartyFields, useTimesheetParties } from './TimesheetPartyFields.jsx'
+import { contractBillingMeta, labelForContract, labelForEmployee } from './timesheet-parties.js'
 import { invokeErrorMessage } from './invoke-error-message.js'
+import { downloadTimesheetCsv } from './download-timesheet-csv.js'
+import { downloadTimesheetImage } from './download-timesheet-image.js'
+import { downloadTimesheetPdf } from './download-timesheet-pdf.js'
 import { metadata as ListTimesheets } from './list.action.js'
 import { metadata as GenerateTimesheet } from './generate.action.js'
 import { metadata as OpenNewTimesheet } from './open-new.action.js'
+import { metadata as DeleteTimesheet } from './delete.action.js'
 import { HolidayLocaleSelect } from './HolidayLocaleSelect.jsx'
 import { resolveHolidayLocale } from './holiday-locale.js'
 
@@ -41,7 +48,8 @@ function buildMonthOptions (language, yearsBack = 1, yearsForward = 0) {
 export default function TimesheetsProductHome () {
   const { t, language } = useLocale()
   const sdk = useSdk()
-  const router = useRouter()
+  const { employees, contracts } = useTimesheetParties()
+  const { selectedResourceId, setSelectedResourceId, clearSelectedResourceId } = useSelectedResourceId()
 
   const monthOptions = useMemo(() => buildMonthOptions(language), [language])
   const [periodKey, setPeriodKey] = useState(() => {
@@ -49,51 +57,112 @@ export default function TimesheetsProductHome () {
     return `${n.getFullYear()}-${n.getMonth()}`
   })
   const [holidayLocale, setHolidayLocale] = useState(() => resolveHolidayLocale(language))
+  const [employeeId, setEmployeeId] = useState(null)
+  const [contractId, setContractId] = useState(null)
   const [creating, setCreating] = useState(false)
   const [sheets, setSheets] = useState([])
   const [loading, setLoading] = useState(true)
   const [generating, setGenerating] = useState(false)
   const [error, setError] = useState(null)
   const [createError, setCreateError] = useState(null)
+  const [sheetToDelete, setSheetToDelete] = useState(null)
+  const [deleting, setDeleting] = useState(false)
+  const [exportJob, setExportJob] = useState(null)
+  const exportCaptureRef = useRef(null)
 
   const selected = useMemo(
     () => monthOptions.find((o) => o.value === periodKey) ?? monthOptions[0],
     [monthOptions, periodKey],
   )
 
-  const existingPeriodStarts = useMemo(
-    () => new Set(sheets.map((s) => s.periodStart)),
-    [sheets],
-  )
-
   const statusTags = (Definition.status ?? [])
     .map((s) => ({ beta: 'Beta', 'coming-soon': 'Coming Soon' }[s]))
     .filter(Boolean)
 
-  const loadList = useCallback(async () => {
-    setLoading(true)
-    setError(null)
+  const refreshList = useCallback(async () => {
     try {
       const data = await sdk.invoke(ListTimesheets, {})
       setSheets(Array.isArray(data) ? data : [])
     } catch (err) {
       setError(await invokeErrorMessage(err, t('timesheets.errorLoad')))
       setSheets([])
+    }
+  }, [sdk, t])
+
+  const loadList = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      await refreshList()
     } finally {
       setLoading(false)
     }
-  }, [sdk, t])
+  }, [refreshList])
 
   useEffect(() => {
     loadList()
   }, [loadList])
 
-  const openDetail = (timesheetId) => {
-    const href = router.getHref({
-      id: 'timesheets/detail',
-      params: { timesheetId },
+  const openSheet = (timesheetId) => {
+    setSelectedResourceId(timesheetId)
+  }
+
+  const requestExport = useCallback((sheet, kind) => {
+    if (!sheet?.lines?.length) return
+    const billing = contractBillingMeta(contracts, sheet.contractId)
+    const payload = {
+      ...sheet,
+      clientName: billing.clientName,
+      hourlyRate: billing.hourlyRate,
+    }
+    if (kind === 'csv') {
+      downloadTimesheetCsv(payload)
+      return
+    }
+    setExportJob({ sheet: payload, kind })
+  }, [contracts])
+
+  useEffect(() => {
+    if (!exportJob) return
+    let cancelled = false
+    const frame = requestAnimationFrame(() => {
+      requestAnimationFrame(async () => {
+        try {
+          const node = exportCaptureRef.current
+          if (!node || cancelled) return
+          if (exportJob.kind === 'png') {
+            await downloadTimesheetImage(node, exportJob.sheet)
+          } else {
+            await downloadTimesheetPdf(node, exportJob.sheet)
+          }
+        } catch (err) {
+          if (!cancelled) setError(await invokeErrorMessage(err, t('timesheets.errorExport')))
+        } finally {
+          if (!cancelled) setExportJob(null)
+        }
+      })
     })
-    if (href) window.location.href = href
+    return () => {
+      cancelled = true
+      cancelAnimationFrame(frame)
+    }
+  }, [exportJob, t])
+
+  const confirmDelete = async () => {
+    const sheet = sheetToDelete
+    if (!sheet?.id) return
+    setDeleting(true)
+    setError(null)
+    try {
+      await sdk.invoke(DeleteTimesheet, { timesheetId: sheet.id })
+      setSheetToDelete(null)
+      if (selectedResourceId === sheet.id) clearSelectedResourceId()
+      await refreshList()
+    } catch (err) {
+      setError(await invokeErrorMessage(err, t('timesheets.errorDelete')))
+    } finally {
+      setDeleting(false)
+    }
   }
 
   const closeCreateModal = () => {
@@ -108,6 +177,8 @@ export default function TimesheetsProductHome () {
     const n = new Date()
     setPeriodKey(`${n.getFullYear()}-${n.getMonth()}`)
     setHolidayLocale(resolveHolidayLocale(language))
+    setEmployeeId(null)
+    setContractId(null)
   }
 
   const handleGenerate = async () => {
@@ -119,12 +190,16 @@ export default function TimesheetsProductHome () {
         year: selected.year,
         monthIndex: selected.monthIndex,
         locale: holidayLocale,
+        ...(employeeId ? { employeeId } : {}),
+        ...(contractId ? { contractId } : {}),
       })
       if (data?.id) {
-        openDetail(data.id)
+        await refreshList()
+        setCreating(false)
+        openSheet(data.id)
         return
       }
-      await loadList()
+      await refreshList()
       setCreating(false)
     } catch (err) {
       setCreateError(await invokeErrorMessage(err, t('timesheets.errorGenerate')))
@@ -133,51 +208,164 @@ export default function TimesheetsProductHome () {
     }
   }
 
-  const periodAlreadyExists = selected
-    && existingPeriodStarts.has(monthPeriodBounds(selected.year, selected.monthIndex).periodStart)
-
   return (
-    <Page
-      title="timesheets.home.title"
-      near={statusTags.length > 0 ? <Tags tags={statusTags} size="s" /> : undefined}
-      description="timesheets.home.description"
-      far={(
-        <Button
-          id={OpenNewTimesheet.id}
-          variant="cta"
-          prefix="add"
-          label="timesheets.new"
-          onClick={openCreateModal}
-        />
-      )}
-    >
-      <View gap="m">
-        {error && <Alert variant="danger">{error}</Alert>}
-
-        <View gap="s">
-          <Text variant="heading-secondary" as="h2" text="timesheets.listTitle" />
-          {loading ? (
-            <Text color="secondary" text="timesheets.loading" />
-          ) : sheets.length === 0 ? (
-            <Text color="secondary" text="timesheets.listEmpty" />
-          ) : (
-            <View gap="s">
-              <List>
-                {sheets.map((sheet) => (
-                  <TimesheetCard
-                    key={sheet.id}
-                    timesheet={sheet}
-                    onClick={() => openDetail(sheet.id)}
+    <>
+      <Page
+        scroll
+        title="timesheets.home.title"
+        near={statusTags.length > 0 ? <Tags tags={statusTags} size="s" /> : undefined}
+        description="timesheets.home.description"
+        style={{ minHeight: 0 }}
+        contentStyle={{
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: 0,
+        }}
+      >
+        <View stack horizontal gap="xs" style={{ height: '100%', minHeight: 0, flex: '1 1 auto' }}>
+          <View.Item fill surface="primary" roundness="xs" style={{ minHeight: 0, minWidth: 0 }}>
+            <View stack bordered style={{ height: '100%', minHeight: 0 }}>
+              <View.Item>
+                <View stack horizontal style={{ minHeight: '48px', alignItems: 'center', gap: '4px' }}>
+                  <View.Item fill surface="primary" style={{ padding: '4px 8px', minWidth: 0 }}>
+                    <Text as="h2" variant="small" weight="medium" text="timesheets.listTitle" />
+                  </View.Item>
+                  <Button
+                    id={OpenNewTimesheet.id}
+                    variant="command"
+                    prefix="add"
+                    aria-label={t('timesheets.new')}
+                    onClick={openCreateModal}
                   />
-                ))}
-              </List>
+                </View>
+              </View.Item>
+
+              <View.Item fill style={{ overflowY: 'auto', minHeight: 0 }}>
+                {error && (
+                  <View inset="m">
+                    <Alert variant="danger">{error}</Alert>
+                  </View>
+                )}
+                {loading ? (
+                  <View inset="m">
+                    <Text color="secondary" text="timesheets.loading" />
+                  </View>
+                ) : sheets.length === 0 ? (
+                  <View inset="m">
+                    <Text color="secondary" text="timesheets.listEmpty" />
+                  </View>
+                ) : (
+                  <List>
+                    {sheets.map((sheet) => (
+                      <TimesheetCard
+                        key={sheet.id}
+                        timesheet={sheet}
+                        selected={sheet.id === selectedResourceId}
+                        onClick={() => openSheet(sheet.id)}
+                        actions={[
+                          <ContextMenu.Item
+                            key="view"
+                            prefix="details-more"
+                            label="timesheets.view"
+                            onClick={() => openSheet(sheet.id)}
+                          />,
+                          <ContextMenu.Item
+                            key="csv"
+                            prefix="list"
+                            label="timesheets.exportCsv"
+                            onClick={() => requestExport(sheet, 'csv')}
+                          />,
+                          <ContextMenu.Item
+                            key="png"
+                            prefix="image"
+                            label="timesheets.exportPng"
+                            onClick={() => requestExport(sheet, 'png')}
+                          />,
+                          <ContextMenu.Item
+                            key="pdf"
+                            prefix="file-document"
+                            label="timesheets.exportPdf"
+                            onClick={() => requestExport(sheet, 'pdf')}
+                          />,
+                          <ContextMenu.Separator key="separator" />,
+                          <ContextMenu.Item
+                            key="delete"
+                            variant="command-danger"
+                            prefix="trash-empty"
+                            label="timesheets.delete"
+                            onClick={() => setSheetToDelete(sheet)}
+                          />,
+                        ]}
+                      />
+                    ))}
+                  </List>
+                )}
+              </View.Item>
             </View>
-          )}
+          </View.Item>
+
+          <TimesheetPanel
+            timesheetId={selectedResourceId}
+            onClose={clearSelectedResourceId}
+            onSaved={refreshList}
+          />
         </View>
-      </View>
+      </Page>
+
+      <Overlay isVisible={Boolean(sheetToDelete)} onClose={() => !deleting && setSheetToDelete(null)}>
+        <View layout="off-center-s" style={{ height: '100%' }}>
+          <View data-region="content">
+            <View surface="primary" roundness="s" inset="l">
+              <Guide
+                title="timesheets.deleteTitle"
+                text="timesheets.deleteText"
+                actions={[
+                  {
+                    label: 'timesheets.cancel',
+                    variant: 'command',
+                    disabled: deleting,
+                    onClick: () => setSheetToDelete(null),
+                  },
+                  {
+                    label: 'timesheets.delete',
+                    variant: 'command-danger',
+                    disabled: deleting,
+                    onClick: confirmDelete,
+                  },
+                ]}
+              />
+            </View>
+          </View>
+        </View>
+      </Overlay>
+
+      {exportJob ? (
+        <div
+          aria-hidden
+          style={{
+            position: 'fixed',
+            left: 0,
+            top: 0,
+            transform: 'translateX(-200vw)',
+            pointerEvents: 'none',
+            zIndex: -1,
+          }}
+        >
+          <TimesheetExportCard
+            lines={exportJob.sheet.lines}
+            periodStart={exportJob.sheet.periodStart}
+            employeeLabel={labelForEmployee(employees, exportJob.sheet.employeeId)}
+            contractLabel={labelForContract(contracts, exportJob.sheet.contractId)}
+            clientName={exportJob.sheet.clientName}
+            hourlyRate={exportJob.sheet.hourlyRate}
+            captureRef={exportCaptureRef}
+          />
+        </div>
+      ) : null}
 
       <Overlay isVisible={creating} onClose={closeCreateModal}>
-        <View layout="off-center-m" style={{ height: '100%' }}>
+        <View layout="off-center-s" style={{ height: '100%' }}>
           <View data-region="content" style={{ width: 'min(28rem, calc(100vw - 2rem))' }}>
             <View surface="primary" roundness="m" inset="l" gap="m">
               <View gap="xs">
@@ -206,9 +394,13 @@ export default function TimesheetsProductHome () {
                 onChange={(e) => setHolidayLocale(e.target.value)}
               />
 
-              {periodAlreadyExists && (
-                <Text variant="small" color="secondary" text="timesheets.periodExistsHint" />
-              )}
+              <TimesheetPartyFields
+                employeeId={employeeId}
+                contractId={contractId}
+                onEmployeeChange={setEmployeeId}
+                onContractChange={setContractId}
+                disabled={generating}
+              />
 
               <View layout="row" gap="s" justifyContent="flex-end" style={{ flexWrap: 'wrap' }}>
                 <Button
@@ -223,17 +415,13 @@ export default function TimesheetsProductHome () {
                   disabled={generating || !selected}
                   onClick={handleGenerate}
                 >
-                  {generating
-                    ? t('timesheets.loading')
-                    : periodAlreadyExists
-                      ? t('timesheets.openExisting')
-                      : t('timesheets.generate')}
+                  {generating ? t('timesheets.loading') : t('timesheets.generate')}
                 </Button>
               </View>
             </View>
           </View>
         </View>
       </Overlay>
-    </Page>
+    </>
   )
 }

package/src/auto-generate-timesheets.js

@@ -0,0 +1,70 @@
+import { TimesheetRefs, TimesheetsSchema } from './schema-ids.js'
+import {
+  findTimesheetForContractPeriod,
+  isContractActive,
+  periodForContract,
+} from './billing-period.js'
+import { optionalReference } from './timesheet-refs.js'
+
+/** Company basic-info schema (consultancy) — used for holiday locale. */
+export const COMPANY_BASIC_INFO_SCHEMA = '@ossy/consultancy/schema/company-basic-info'
+
+/**
+ * Pick holiday locale for a workspace from company basic-info resources.
+ * @param {Array<{ belongsTo?: string, content?: { holidayLocale?: string } }>} companyResources
+ * @param {string} workspaceId
+ * @returns {string | undefined}
+ */
+export function holidayLocaleForWorkspace (companyResources, workspaceId) {
+  const match = (companyResources || []).find((r) => r.belongsTo === workspaceId)
+  return match?.content?.holidayLocale
+}
+
+/**
+ * Decide which active contracts need a new auto-generated sheet for `asOf`.
+ *
+ * @param {object} input
+ * @param {Array<{ id: string, belongsTo?: string, content?: object }>} input.contracts
+ * @param {Array<{ id: string, belongsTo?: string, createdAt?: number, content?: object }>} input.timesheets
+ * @param {Date | number} [input.asOf]
+ * @returns {Array<{
+ *   contractId: string,
+ *   workspaceId: string,
+ *   employeeId: string | null,
+ *   periodStart: number,
+ *   periodEnd: number,
+ *   billingPeriod: string,
+ * }>}
+ */
+export function contractsNeedingTimesheets ({ contracts, timesheets, asOf = Date.now() }) {
+  const needed = []
+
+  for (const contract of contracts || []) {
+    const workspaceId = contract.belongsTo
+    if (!workspaceId) continue
+    if (!isContractActive(contract.content, asOf)) continue
+
+    const { periodStart, periodEnd } = periodForContract(contract.content, asOf)
+    const existing = findTimesheetForContractPeriod(timesheets, contract.id, periodStart)
+    if (existing) continue
+
+    const employeeId = optionalReference(contract.content?.employeeId)?.resourceId ?? null
+
+    needed.push({
+      contractId: contract.id,
+      workspaceId,
+      employeeId,
+      periodStart,
+      periodEnd,
+      billingPeriod: contract.content?.billingPeriod === 'weekly' ? 'weekly' : 'monthly',
+    })
+  }
+
+  return needed
+}
+
+export const AUTO_GENERATE_QUERY = {
+  contracts: { type: TimesheetRefs.contract },
+  timesheets: { type: TimesheetsSchema.timesheet },
+  companies: { type: COMPANY_BASIC_INFO_SCHEMA },
+}

package/src/auto-generate-timesheets.spec.js

@@ -0,0 +1,90 @@
+import { describe, expect, it } from '@jest/globals'
+import {
+  contractsNeedingTimesheets,
+  holidayLocaleForWorkspace,
+} from './auto-generate-timesheets.js'
+
+describe('holidayLocaleForWorkspace', () => {
+  it('returns the company holidayLocale for the workspace', () => {
+    const companies = [
+      { belongsTo: 'ws-a', content: { holidayLocale: 'SE' } },
+      { belongsTo: 'ws-b', content: { holidayLocale: 'NO' } },
+    ]
+    expect(holidayLocaleForWorkspace(companies, 'ws-b')).toBe('NO')
+    expect(holidayLocaleForWorkspace(companies, 'ws-missing')).toBe(undefined)
+  })
+})
+
+describe('contractsNeedingTimesheets', () => {
+  const augustStart = new Date(2026, 7, 1).setHours(0, 0, 0, 0)
+  const asOf = new Date(2026, 7, 19)
+
+  it('skips inactive contracts and existing sheets', () => {
+    const contracts = [
+      {
+        id: 'c-active',
+        belongsTo: 'ws-1',
+        content: {
+          billingPeriod: 'monthly',
+          employeeId: 'emp-1',
+          startDate: new Date(2026, 0, 1).getTime(),
+        },
+      },
+      {
+        id: 'c-done',
+        belongsTo: 'ws-1',
+        content: {
+          billingPeriod: 'monthly',
+          startDate: new Date(2025, 0, 1).getTime(),
+          endDate: new Date(2026, 0, 1).getTime(),
+        },
+      },
+      {
+        id: 'c-has-sheet',
+        belongsTo: 'ws-1',
+        content: {
+          billingPeriod: 'monthly',
+          startDate: new Date(2026, 0, 1).getTime(),
+        },
+      },
+    ]
+
+    const timesheets = [
+      {
+        id: 'sheet-1',
+        createdAt: 1,
+        content: { periodStart: augustStart, contractId: 'c-has-sheet' },
+      },
+    ]
+
+    expect(contractsNeedingTimesheets({ contracts, timesheets, asOf })).toEqual([
+      {
+        contractId: 'c-active',
+        workspaceId: 'ws-1',
+        employeeId: 'emp-1',
+        periodStart: augustStart,
+        periodEnd: new Date(2026, 7, 31).setHours(0, 0, 0, 0),
+        billingPeriod: 'monthly',
+      },
+    ])
+  })
+
+  it('uses weekly period bounds when configured', () => {
+    const contracts = [{
+      id: 'c-week',
+      belongsTo: 'ws-2',
+      content: {
+        billingPeriod: 'weekly',
+        employeeId: { resourceId: 'emp-9' },
+        startDate: new Date(2026, 0, 1).getTime(),
+      },
+    }]
+
+    const [needed] = contractsNeedingTimesheets({ contracts, timesheets: [], asOf })
+    expect(needed.contractId).toBe('c-week')
+    expect(needed.employeeId).toBe('emp-9')
+    expect(needed.billingPeriod).toBe('weekly')
+    expect(new Date(needed.periodStart).getDay()).toBe(1)
+    expect(new Date(needed.periodEnd).getDay()).toBe(0)
+  })
+})