@ossy/timesheets 3.0.6 → 3.0.8

package/src/TimesheetsProductHome.jsx

@@ -0,0 +1,229 @@
+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 { useSdk } from '@ossy/sdk-react'
+import { Definition } from './Definition.js'
+import { TimesheetCard } from './TimesheetCard.jsx'
+import { monthPeriodBounds } from './build-prefilled-lines.js'
+import { invokeErrorMessage } from './invoke-error-message.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'
+
+function buildMonthOptions (language, yearsBack = 1, yearsForward = 0) {
+  let locale = 'en-GB'
+  try {
+    locale = new Intl.Locale(language || 'en').toString()
+  } catch {
+    locale = language === 'sv' ? 'sv-SE' : 'en-GB'
+  }
+  const now = new Date()
+  const options = []
+
+  for (let y = now.getFullYear() - yearsBack; y <= now.getFullYear() + yearsForward; y++) {
+    for (let m = 0; m < 12; m++) {
+      const label = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' })
+        .format(new Date(y, m, 1))
+      options.push({
+        value: `${y}-${m}`,
+        label: label.charAt(0).toUpperCase() + label.slice(1),
+        year: y,
+        monthIndex: m,
+      })
+    }
+  }
+
+  return options
+}
+
+export default function TimesheetsProductHome () {
+  const { t, language } = useLocale()
+  const sdk = useSdk()
+  const router = useRouter()
+
+  const monthOptions = useMemo(() => buildMonthOptions(language), [language])
+  const [periodKey, setPeriodKey] = useState(() => {
+    const n = new Date()
+    return `${n.getFullYear()}-${n.getMonth()}`
+  })
+  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 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)
+    try {
+      const data = await sdk.invoke(ListTimesheets, {})
+      setSheets(Array.isArray(data) ? data : [])
+    } catch (err) {
+      setError(await invokeErrorMessage(err, t('timesheets.errorLoad')))
+      setSheets([])
+    } finally {
+      setLoading(false)
+    }
+  }, [sdk, t])
+
+  useEffect(() => {
+    loadList()
+  }, [loadList])
+
+  const openDetail = (timesheetId) => {
+    const href = router.getHref({
+      id: 'timesheets/detail',
+      params: { timesheetId },
+    })
+    if (href) window.location.href = href
+  }
+
+  const closeCreateModal = () => {
+    if (generating) return
+    setCreating(false)
+    setCreateError(null)
+  }
+
+  const openCreateModal = () => {
+    setCreating(true)
+    setCreateError(null)
+    const n = new Date()
+    setPeriodKey(`${n.getFullYear()}-${n.getMonth()}`)
+  }
+
+  const handleGenerate = async () => {
+    if (!selected) return
+    setGenerating(true)
+    setCreateError(null)
+    try {
+      const data = await sdk.invoke(GenerateTimesheet, {
+        year: selected.year,
+        monthIndex: selected.monthIndex,
+        locale: language,
+      })
+      if (data?.id) {
+        openDetail(data.id)
+        return
+      }
+      await loadList()
+      setCreating(false)
+    } catch (err) {
+      setCreateError(await invokeErrorMessage(err, t('timesheets.errorGenerate')))
+    } finally {
+      setGenerating(false)
+    }
+  }
+
+  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)}
+                  />
+                ))}
+              </List>
+            </View>
+          )}
+        </View>
+      </View>
+
+      <Overlay isVisible={creating} onClose={closeCreateModal}>
+        <View layout="off-center-m" 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">
+                <Text variant="heading-tertiary" as="h3" text="timesheets.createTitle" />
+                <Text color="secondary" text="timesheets.createDescription" />
+              </View>
+
+              {createError && <Alert variant="danger">{createError}</Alert>}
+
+              <View gap="xs">
+                <Text variant="small" weight="medium" text="timesheets.period" />
+                <Select
+                  value={periodKey}
+                  onChange={(e) => setPeriodKey(e.target.value)}
+                  disabled={generating}
+                >
+                  {monthOptions.map((o) => (
+                    <option key={o.value} value={o.value}>{o.label}</option>
+                  ))}
+                </Select>
+              </View>
+
+              {periodAlreadyExists && (
+                <Text variant="small" color="secondary" text="timesheets.periodExistsHint" />
+              )}
+
+              <View layout="row" gap="s" justifyContent="flex-end" style={{ flexWrap: 'wrap' }}>
+                <Button
+                  variant="neutral"
+                  disabled={generating}
+                  label="timesheets.cancel"
+                  onClick={closeCreateModal}
+                />
+                <Button
+                  id={GenerateTimesheet.id}
+                  variant="cta"
+                  disabled={generating || !selected}
+                  onClick={handleGenerate}
+                >
+                  {generating
+                    ? t('timesheets.loading')
+                    : periodAlreadyExists
+                      ? t('timesheets.openExisting')
+                      : t('timesheets.generate')}
+                </Button>
+              </View>
+            </View>
+          </View>
+        </View>
+      </Overlay>
+    </Page>
+  )
+}

package/src/TimesheetsSalesPage.jsx

@@ -0,0 +1,50 @@
+import React, { useState, useCallback } from 'react'
+import { EnableService } from '@ossy/workspaces'
+import { View, useLocale } from '@ossy/design-system'
+import SalesSection from './SalesSection.jsx'
+import { TimesheetsFreeTool } from './TimesheetsFreeTool.jsx'
+import { useTimesheetsHomeContent } from './timesheets-home-content.js'
+import { TIMESHEETS_SERVICE } from './timesheets-auth-return.js'
+
+/**
+ * Public sales surface. Anonymous → sign up; signed-in but not entitled → enable.
+ */
+export default function TimesheetsSalesPage ({ isAuthenticated, onEnable }) {
+  const { t } = useLocale()
+  const [enableError, setEnableError] = useState(null)
+  const { cover, features } = useTimesheetsHomeContent()
+
+  const handleEnable = useCallback(() => {
+    if (typeof onEnable !== 'function') return Promise.resolve()
+    setEnableError(null)
+    return onEnable().catch(() => {
+      setEnableError(t('timesheets.sales.enableError'))
+    })
+  }, [onEnable, t])
+
+  const enableAction = {
+    ...EnableService,
+    'data-service': TIMESHEETS_SERVICE,
+    variant: 'cta',
+    label: 'timesheets.sales.enable',
+    onClick: handleEnable,
+  }
+
+  return (
+    <View data-timesheets-status="off">
+      <SalesSection
+        features={features}
+        tool={(
+          <TimesheetsFreeTool
+            title={cover.title}
+            text={cover.text}
+            isAuthenticated={!!isAuthenticated}
+            onEnable={handleEnable}
+            enableAction={enableAction}
+            enableError={enableError}
+          />
+        )}
+      />
+    </View>
+  )
+}

package/src/build-prefilled-lines.js

@@ -0,0 +1,60 @@
+import { CalendarClient } from '@ossy/calendar'
+import { DEFAULT_HOLIDAY_LOCALE, resolveHolidayLocale } from './holiday-locale.js'
+
+/** Prefill hours for a workday (SPEC). */
+export const WORKDAY_HOURS = 8
+
+/**
+ * Calendar-month period bounds as local midnights, returned as Unix ms.
+ * @param {number} year
+ * @param {number} monthIndex 0–11
+ */
+export function monthPeriodBounds (year, monthIndex) {
+  const start = new Date(year, monthIndex, 1)
+  const end = new Date(year, monthIndex + 1, 0)
+  start.setHours(0, 0, 0, 0)
+  end.setHours(0, 0, 0, 0)
+  return {
+    periodStart: start.getTime(),
+    periodEnd: end.getTime(),
+  }
+}
+
+/**
+ * Build prefilled timesheet lines for an inclusive period.
+ * Workdays → 8h; non-workdays → 0h. `isWorkday` is snapshotted.
+ *
+ * @param {number} periodStartMs
+ * @param {number} periodEndMs
+ * @param {string} [locale] ISO country code or BCP 47 tag (resolved via holiday-locale)
+ */
+export function buildPrefilledLines (periodStartMs, periodEndMs, locale) {
+  const holidayLocale = resolveHolidayLocale(locale, DEFAULT_HOLIDAY_LOCALE)
+  const days = CalendarClient.getAllDaysInDateSpan(
+    new Date(periodStartMs),
+    new Date(periodEndMs),
+  )
+
+  return days.map((day) => {
+    const date = new Date(day)
+    date.setHours(0, 0, 0, 0)
+    const isWorkday = CalendarClient.isWorkDay(date, holidayLocale)
+    return {
+      date: date.getTime(),
+      hours: isWorkday ? WORKDAY_HOURS : 0,
+      isWorkday,
+    }
+  })
+}
+
+/**
+ * @param {number} ms
+ * @returns {string} YYYY-MM-DD in local time
+ */
+export function formatDateKey (ms) {
+  const d = new Date(ms)
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}

package/src/download-timesheet-csv.js

@@ -0,0 +1,35 @@
+import { formatDateKey } from './build-prefilled-lines.js'
+
+/**
+ * Build a CSV string for a timesheet and trigger a browser download.
+ * @param {{ periodStart?: number, periodEnd?: number, status?: string, lines?: Array<{ date: number, hours: number }> }} timesheet
+ * @param {string} [filename]
+ */
+export function downloadTimesheetCsv (timesheet, filename) {
+  const lines = timesheet?.lines ?? []
+  const headerRows = []
+
+  if (timesheet?.periodStart != null && timesheet?.periodEnd != null) {
+    headerRows.push(`# period,${formatDateKey(timesheet.periodStart)},${formatDateKey(timesheet.periodEnd)}`)
+    headerRows.push(`# status,${timesheet.status ?? ''}`)
+  }
+
+  const rows = [
+    ...headerRows,
+    'date,hours',
+    ...lines.map((line) =>
+      [formatDateKey(line.date), line.hours ?? 0].join(','),
+    ),
+  ]
+
+  const blob = new Blob([rows.join('\n')], { type: 'text/csv;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+    ?? `timesheet-${formatDateKey(timesheet?.periodStart ?? Date.now())}.csv`
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+  URL.revokeObjectURL(url)
+}

package/src/download-timesheet-image.js

@@ -0,0 +1,15 @@
+import { captureNodeAsPng, timesheetExportFilename, triggerDownload } from './export-capture.js'
+
+/**
+ * Capture the timesheet card DOM and download as PNG.
+ * @param {HTMLElement} node
+ * @param {{ periodStart?: number }} [timesheet]
+ * @param {string} [filename]
+ */
+export async function downloadTimesheetImage (node, timesheet = {}, filename) {
+  const dataUrl = await captureNodeAsPng(node)
+  triggerDownload(
+    dataUrl,
+    filename ?? timesheetExportFilename(timesheet.periodStart, 'png'),
+  )
+}

package/src/download-timesheet-pdf.js

@@ -0,0 +1,49 @@
+import { PDFDocument } from 'pdf-lib'
+import { captureNodeAsPng, timesheetExportFilename, triggerDownload } from './export-capture.js'
+
+/**
+ * Capture the timesheet card DOM and download as a single-page PDF.
+ * @param {HTMLElement} node
+ * @param {{ periodStart?: number }} [timesheet]
+ * @param {string} [filename]
+ */
+export async function downloadTimesheetPdf (node, timesheet = {}, filename) {
+  const dataUrl = await captureNodeAsPng(node)
+  const pngBytes = dataUrlToUint8Array(dataUrl)
+
+  const pdf = await PDFDocument.create()
+  const image = await pdf.embedPng(pngBytes)
+
+  const pageWidth = 595.28 // A4 pt
+  const pageHeight = 841.89
+  const margin = 36
+  const maxWidth = pageWidth - margin * 2
+  const maxHeight = pageHeight - margin * 2
+  const scale = Math.min(maxWidth / image.width, maxHeight / image.height, 1)
+  const drawWidth = image.width * scale
+  const drawHeight = image.height * scale
+
+  const page = pdf.addPage([pageWidth, pageHeight])
+  page.drawImage(image, {
+    x: (pageWidth - drawWidth) / 2,
+    y: pageHeight - margin - drawHeight,
+    width: drawWidth,
+    height: drawHeight,
+  })
+
+  const pdfBytes = await pdf.save()
+  const blob = new Blob([pdfBytes], { type: 'application/pdf' })
+  triggerDownload(
+    blob,
+    filename ?? timesheetExportFilename(timesheet.periodStart, 'pdf'),
+  )
+}
+
+function dataUrlToUint8Array (dataUrl) {
+  const base64 = dataUrl.split(',')[1]
+  if (!base64) throw new Error('Invalid image data')
+  const binary = atob(base64)
+  const bytes = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+  return bytes
+}

package/src/en.translations.json

@@ -1,5 +1,73 @@
 {
   "timesheets/home.documentTitle": "Timesheets",
+  "timesheets/detail.documentTitle": "Timesheet",
   "timesheets.home.title": "Timesheets",
-  "timesheets.home.description": "Manage timesheets for your team. You can create new timesheets, edit existing ones, and delete timesheets that you no longer need."
+  "timesheets.nav.title": "Timesheets",
+  "timesheets.home.description": "Your monthly timesheets. Create one, review hours on the calendar, save, and export.",
+  "timesheets.catalog.pitch": "Try free — edit and export monthly hours; sign up to save",
+  "timesheets.home.cover.title": "Monthly timesheets that are pre filled",
+  "timesheets.home.cover.text": "Generate a month of hours, adjust what differs, then save and export as CSV, image, or PDF.",
+  "timesheets.home.cover.ctaPrimary": "Get started free",
+  "timesheets.home.cover.ctaSecondary": "Try it free",
+  "timesheets.freeTool.sectionTitle": "Try it free",
+  "timesheets.freeTool.sectionDescription": "Edit this month’s hours and export as CSV, image, or PDF. Nothing is saved until you sign up.",
+  "timesheets.freeTool.saveCta": "Sign up to save",
+  "timesheets.freeTool.saveHint": "Edits stay in this browser until you refresh. Export anytime — save needs an account.",
+  "timesheets.freeTool.saveHintAuthenticated": "Export anytime. Enable timesheets in your workspace to save months permanently.",
+  "timesheets.freeTool.signInLink": "Already have an account? Sign in",
+  "timesheets.home.features.prefill.title": "Prefill the month",
+  "timesheets.home.features.prefill.text": "Workdays start at 8 hours. Weekends and holidays are zeroed and marked — no blank spreadsheet.",
+  "timesheets.home.features.review.title": "Review on a calendar",
+  "timesheets.home.features.review.text": "Edit hours day by day on a month card. Change only what differs from the default.",
+  "timesheets.home.features.export.title": "Export when ready",
+  "timesheets.home.features.export.text": "Download CSV for spreadsheets, or PNG and PDF that match the calendar card.",
+  "timesheets.home.features.calendar.title": "Calendar-aware",
+  "timesheets.home.features.calendar.text": "Workdays and public holidays are detected for your locale — weekends stay clear by default.",
+  "timesheets.sales.overview": "Overview",
+  "timesheets.sales.features": "Features",
+  "timesheets.sales.enable": "Enable timesheets",
+  "timesheets.sales.enableDescription": "Activate timesheets for your workspace to generate, save, and export monthly work hours.",
+  "timesheets.sales.enableError": "Could not enable timesheets. Try again or contact support.",
+  "timesheets.detail.title": "Timesheet",
+  "timesheets.detail.description": "Review and adjust hours, then save or export.",
+  "timesheets.new": "New",
+  "timesheets.createTitle": "New timesheet",
+  "timesheets.createDescription": "Choose a month to generate a prefilled timesheet.",
+  "timesheets.period": "Period",
+  "timesheets.generate": "Generate",
+  "timesheets.openExisting": "Open",
+  "timesheets.periodExistsHint": "A timesheet already exists for this period — Open loads it.",
+  "timesheets.cancel": "Cancel",
+  "timesheets.save": "Save",
+  "timesheets.saving": "Saving…",
+  "timesheets.loading": "Loading…",
+  "timesheets.export": "Export",
+  "timesheets.exporting": "Exporting…",
+  "timesheets.exportCsv": "CSV",
+  "timesheets.exportPng": "Image (PNG)",
+  "timesheets.exportPdf": "PDF",
+  "timesheets.hours": "Hours",
+  "timesheets.empty": "No days in this timesheet.",
+  "timesheets.listTitle": "Your timesheets",
+  "timesheets.listEmpty": "No timesheets yet. Click New to generate one for a month.",
+  "timesheets.open": "Open",
+  "timesheets.backToList": "← All timesheets",
+  "timesheets.saved": "Timesheet saved.",
+  "timesheets.unsaved": "Unsaved changes",
+  "timesheets.statusLabel": "Status: {status}",
+  "timesheets.status.draft": "Draft",
+  "timesheets.status.saved": "Saved",
+  "timesheets.totalHours": "Total: {hours} h",
+  "timesheets.weekday.mon": "Mon",
+  "timesheets.weekday.tue": "Tue",
+  "timesheets.weekday.wed": "Wed",
+  "timesheets.weekday.thu": "Thu",
+  "timesheets.weekday.fri": "Fri",
+  "timesheets.weekday.sat": "Sat",
+  "timesheets.weekday.sun": "Sun",
+  "timesheets.errorLoad": "Could not load timesheet.",
+  "timesheets.errorNotFound": "Timesheet not found.",
+  "timesheets.errorGenerate": "Could not generate timesheet.",
+  "timesheets.errorSave": "Could not save timesheet.",
+  "timesheets.errorExport": "Could not export timesheet."
 }

package/src/export-capture.js

@@ -0,0 +1,106 @@
+import { formatDateKey } from './build-prefilled-lines.js'
+
+/** Export canvas — plain white so PNG/PDF match a clean screenshot, not a themed card. */
+export const TIMESHEET_EXPORT_BASE_BG = '#ffffff'
+
+/** Matches Cloud Light / theme token stack. */
+export const TIMESHEET_EXPORT_FONT_FAMILY = 'Roboto, Helvetica, Arial, sans-serif'
+
+const ROBOTO_STYLESHEET_HREF =
+  'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap'
+const ROBOTO_LINK_ID = 'ossy-timesheet-export-fonts'
+
+/**
+ * @param {number | undefined} periodStart
+ * @param {string} ext
+ */
+export function timesheetExportFilename (periodStart, ext) {
+  return `timesheet-${formatDateKey(periodStart ?? Date.now())}.${ext}`
+}
+
+/**
+ * Trigger a browser download from a Blob or data URL.
+ * @param {Blob | string} data
+ * @param {string} filename
+ */
+export function triggerDownload (data, filename) {
+  const url = typeof data === 'string' ? data : URL.createObjectURL(data)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+  if (typeof data !== 'string') URL.revokeObjectURL(url)
+}
+
+/**
+ * Theme tokens name Roboto but the app never loads it as a webfont.
+ * html-to-image clones into SVG foreignObject — without @font-face embeds,
+ * the PNG falls back to a different system font than the live page.
+ */
+async function ensureExportFonts () {
+  if (typeof document === 'undefined') return
+
+  let link = document.getElementById(ROBOTO_LINK_ID)
+  if (!link) {
+    link = document.createElement('link')
+    link.id = ROBOTO_LINK_ID
+    link.rel = 'stylesheet'
+    link.href = ROBOTO_STYLESHEET_HREF
+    document.head.appendChild(link)
+    await new Promise((resolve) => {
+      link.onload = () => resolve()
+      link.onerror = () => resolve()
+      setTimeout(resolve, 4000)
+    })
+  }
+
+  if (!document.fonts?.load) return
+  try {
+    await Promise.all([
+      document.fonts.load(`400 16px Roboto`),
+      document.fonts.load(`500 16px Roboto`),
+      document.fonts.load(`600 16px Roboto`),
+      document.fonts.load(`700 16px Roboto`),
+    ])
+    await document.fonts.ready
+  } catch {
+    // Export still proceeds with system fallbacks.
+  }
+}
+
+/**
+ * Capture a DOM node as a PNG data URL (high-DPI).
+ * Client-side snapshot via html-to-image (not a server render).
+ * Always uses Cloud Light base background.
+ * @param {HTMLElement} node
+ * @returns {Promise<string>}
+ */
+export async function captureNodeAsPng (node) {
+  if (!node) throw new Error('Nothing to capture')
+
+  await ensureExportFonts()
+
+  const { toPng, getFontEmbedCSS } = await import('html-to-image')
+
+  let fontEmbedCSS
+  try {
+    fontEmbedCSS = await getFontEmbedCSS(node)
+  } catch {
+    fontEmbedCSS = undefined
+  }
+
+  return toPng(node, {
+    cacheBust: true,
+    pixelRatio: 2,
+    backgroundColor: TIMESHEET_EXPORT_BASE_BG,
+    preferredFontFormat: 'woff2',
+    ...(fontEmbedCSS ? { fontEmbedCSS } : {}),
+    // Off-screen export card uses translateX(-200vw); include full layout box.
+    style: {
+      transform: 'none',
+      fontFamily: TIMESHEET_EXPORT_FONT_FAMILY,
+    },
+  })
+}

package/src/generate.action.js

@@ -0,0 +1,5 @@
+export const metadata = {
+  id: '@ossy/timesheets/actions/generate',
+  access: 'workspace',
+  label: 'timesheets.generate',
+}