@ossy/timesheets 3.0.6 → 3.0.7

package/src/TimesheetExportCard.jsx

@@ -0,0 +1,212 @@
+import React, { useMemo } from 'react'
+import { useLocale } from '@ossy/design-system'
+import { buildMonthGrid, dateKeyFromMs } from '@ossy/calendar'
+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 ACCENT = 'hsl(167, 89%, 43%)'
+const CELL_BG = '#ffffff'
+const OFF_BG = 'color-mix(in srgb, hsl(350 32% 58%) 9%, #ffffff)'
+const OFF_FG = 'color-mix(in srgb, hsl(350 28% 46%) 45%, hsl(199, 90%, 10%))'
+
+const calendarGrid = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(7, minmax(44px, 56px))',
+  gap: '1px',
+  justifyItems: 'stretch',
+  alignItems: 'stretch',
+  width: 'fit-content',
+  maxWidth: '100%',
+}
+
+const dayCell = {
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  gap: 4,
+  width: '100%',
+  minHeight: 72,
+  borderRadius: 2,
+  padding: '6px 4px',
+  background: CELL_BG,
+}
+
+const WEEKDAY_KEYS = [
+  'timesheets.weekday.mon',
+  'timesheets.weekday.tue',
+  'timesheets.weekday.wed',
+  'timesheets.weekday.thu',
+  'timesheets.weekday.fri',
+  'timesheets.weekday.sat',
+  'timesheets.weekday.sun',
+]
+
+/**
+ * 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 }) {
+  const { t, language } = useLocale()
+
+  const lineByKey = useMemo(() => {
+    const map = new Map()
+    for (const line of lines) {
+      map.set(dateKeyFromMs(line.date), line)
+    }
+    return map
+  }, [lines])
+
+  const anchorMs = periodStart ?? lines[0]?.date ?? Date.now()
+  const cells = useMemo(() => buildMonthGrid(anchorMs), [anchorMs])
+  const totalHours = useMemo(
+    () => lines.reduce((sum, line) => sum + (Number(line.hours) || 0), 0),
+    [lines],
+  )
+  const monthLabel = useMemo(() => {
+    const locale = language === 'sv' ? 'sv-SE' : 'en-GB'
+    return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' })
+      .format(new Date(anchorMs))
+  }, [anchorMs, language])
+
+  if (!lines.length) return null
+
+  return (
+    <div
+      ref={captureRef}
+      data-timesheet-export-root
+      style={{
+        width: 'fit-content',
+        boxSizing: 'border-box',
+        padding: 16,
+        background: '#ffffff',
+        color: FG,
+        fontFamily: TIMESHEET_EXPORT_FONT_FAMILY,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+      }}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            alignItems: 'baseline',
+            justifyContent: 'space-between',
+            gap: 16,
+          }}
+        >
+          <span
+            style={{
+              margin: 0,
+              fontFamily: TIMESHEET_EXPORT_FONT_FAMILY,
+              fontSize: 20,
+              fontWeight: 600,
+              lineHeight: 1.3,
+              color: FG,
+            }}
+          >
+            {monthLabel}
+          </span>
+          <span
+            style={{
+              fontFamily: TIMESHEET_EXPORT_FONT_FAMILY,
+              fontSize: 13,
+              fontWeight: 500,
+              color: FG_MUTED,
+            }}
+          >
+            {t('timesheets.totalHours', { hours: totalHours })}
+          </span>
+        </div>
+        <div
+          role="separator"
+          style={{
+            height: 0,
+            border: 'none',
+            borderTop: `1px solid ${ACCENT}`,
+            width: '100%',
+          }}
+        />
+      </div>
+
+      <div style={calendarGrid}>
+        {WEEKDAY_KEYS.map((key) => (
+          <span
+            key={key}
+            style={{
+              display: 'block',
+              textAlign: 'center',
+              fontFamily: TIMESHEET_EXPORT_FONT_FAMILY,
+              fontSize: 13,
+              fontWeight: 500,
+              color: FG_MUTED,
+            }}
+          >
+            {t(key)}
+          </span>
+        ))}
+      </div>
+
+      <div style={calendarGrid}>
+        {cells.map((cell, idx) => {
+          if (!cell) return <div key={`pad-${idx}`} />
+          const line = lineByKey.get(cell.dateKey)
+          if (!line) return <div key={cell.dateKey} />
+          const off = !line.isWorkday
+
+          return (
+            <div
+              key={cell.dateKey}
+              data-ossy-calendar-day
+              data-day-off={off}
+              style={{
+                ...dayCell,
+                fontFamily: TIMESHEET_EXPORT_FONT_FAMILY,
+                color: off ? OFF_FG : FG,
+                background: off ? OFF_BG : CELL_BG,
+              }}
+            >
+              <span
+                style={{
+                  display: 'block',
+                  fontFamily: TIMESHEET_EXPORT_FONT_FAMILY,
+                  fontSize: 13,
+                  fontWeight: 600,
+                  lineHeight: 1.2,
+                  color: 'inherit',
+                }}
+              >
+                {cell.day}
+              </span>
+              <span
+                style={{
+                  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,
+                  color: 'inherit',
+                }}
+              >
+                {Number(line.hours) || 0}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/TimesheetsFreeTool.jsx

@@ -0,0 +1,319 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  Alert,
+  Button,
+  ContextMenu,
+  Dropdown,
+  Text,
+  useLocale,
+  View,
+} from '@ossy/design-system'
+import { useRouter } from '@ossy/router-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 { sampleShowcaseTimesheet } from './sample-showcase-timesheet.js'
+import { timesheetsAuthHref } from './timesheets-auth-return.js'
+
+/**
+ * Client-only timesheet for the sales page — prefilled, editable, exportable.
+ * Never persists; Save routes to sign-up or enable-service.
+ * When `title` / `text` are passed, they replace the section heading (cover copy).
+ */
+export function TimesheetsFreeTool ({
+  title,
+  text,
+  isAuthenticated = false,
+  onEnable,
+  enableAction,
+  enableError = null,
+}) {
+  const { t, language } = useLocale()
+  const router = useRouter()
+  const captureRef = useRef(null)
+  const heading = title ?? t('timesheets.freeTool.sectionTitle')
+  const description = text ?? t('timesheets.freeTool.sectionDescription')
+  const isCoverCopy = Boolean(title)
+
+  const sample = useMemo(() => sampleShowcaseTimesheet(language), [language])
+  const [lines, setLines] = useState(sample.lines)
+  const [periodStart, setPeriodStart] = useState(sample.periodStart)
+  const [exporting, setExporting] = useState(false)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    setLines(sample.lines)
+    setPeriodStart(sample.periodStart)
+  }, [sample])
+
+  const exportPayload = {
+    periodStart,
+    lines,
+    status: 'draft',
+  }
+
+  const runExport = async (kind) => {
+    if (!lines.length) return
+    setExporting(true)
+    setError(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)
+    }
+  }
+
+  const timesheetsHome = router.getHref('timesheets/home') || '/timesheets'
+  const signUpHref = timesheetsAuthHref(
+    router.getHref('sign-up') || router.getHref('@sign-up') || '/sign-up',
+    timesheetsHome,
+  )
+  const signInHref = timesheetsAuthHref(
+    router.getHref('sign-in') || router.getHref('@sign-in') || '/sign-in',
+    timesheetsHome,
+  )
+
+  const handleSave = () => {
+    if (isAuthenticated) {
+      if (typeof onEnable === 'function') onEnable()
+      else if (enableAction?.onClick) enableAction.onClick()
+      return
+    }
+    window.location.href = signUpHref
+  }
+
+  const exportDisabled = !lines.length || exporting
+
+  return (
+    <div data-timesheets-free-tool data-cover-copy={isCoverCopy ? 'true' : undefined}>
+      <style href="@ossy/timesheets/free-tool" precedence="high">
+        {`
+          [data-timesheets-free-tool] {
+            width: 100%;
+          }
+
+          /* Even split; stack on narrow viewports (design-system split-even auto-flow is unreliable). */
+          [data-timesheets-free-tool] > [data-layout="split-even"] {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-auto-flow: row;
+            align-items: center;
+            width: 100%;
+          }
+
+          /* Column: text above, calendar below (matches DOM order). */
+          [data-timesheets-free-tool] [data-timesheets-free-tool-copy] {
+            order: 1;
+            text-align: center;
+            align-items: center !important;
+            justify-self: center;
+            width: 100%;
+            max-width: 420px;
+          }
+
+          [data-timesheets-free-tool][data-cover-copy="true"] [data-timesheets-free-tool-copy] {
+            max-width: 520px;
+          }
+
+          [data-timesheets-free-tool] [data-timesheets-free-tool-copy] > [data-view] {
+            text-align: center;
+            align-items: center !important;
+          }
+
+          [data-timesheets-free-tool] [data-timesheets-free-tool-actions] {
+            justify-content: center !important;
+          }
+
+          [data-timesheets-free-tool] [data-timesheets-free-tool-sheet] {
+            order: 2;
+            width: fit-content;
+            max-width: 100%;
+            justify-self: center;
+            border-radius: var(--space-m);
+            /* Black-based shadow — foreground is near-white on Cloud Dark and reads as a glow. */
+            box-shadow:
+              0 18px 40px color-mix(in srgb, #000 22%, transparent),
+              0 2px 8px color-mix(in srgb, #000 12%, transparent);
+          }
+
+          [data-timesheets-free-tool] [data-timesheets-free-tool-sheet] [data-timesheet-root] {
+            width: fit-content;
+            max-width: 100%;
+          }
+
+          /* Row: calendar left, text beside it (not a stretched 50/50 split). */
+          @media (min-width: 900px) {
+            [data-timesheets-free-tool] > [data-layout="split-even"] {
+              grid-template-columns: auto minmax(0, 36rem);
+              justify-content: start;
+              column-gap: var(--space-xl);
+            }
+
+            [data-timesheets-free-tool] [data-timesheets-free-tool-sheet] {
+              order: 1;
+              justify-self: start;
+            }
+
+            [data-timesheets-free-tool] [data-timesheets-free-tool-copy] {
+              order: 2;
+              justify-self: start;
+              max-width: 36rem;
+              text-align: start;
+              align-items: flex-start !important;
+            }
+
+            [data-timesheets-free-tool][data-cover-copy="true"] [data-timesheets-free-tool-copy] {
+              max-width: 36rem;
+              justify-self: start;
+            }
+
+            [data-timesheets-free-tool] [data-timesheets-free-tool-copy] > [data-view] {
+              text-align: start;
+              align-items: flex-start !important;
+            }
+
+            [data-timesheets-free-tool] [data-timesheets-free-tool-actions] {
+              justify-content: flex-start !important;
+            }
+          }
+        `}
+      </style>
+
+      <View
+        layout="split-even"
+        gap="l"
+        alignItems="center"
+        style={{ width: '100%' }}
+      >
+        <View
+          gap="m"
+          alignItems="center"
+          data-timesheets-free-tool-copy
+          style={{ minWidth: 0 }}
+        >
+          <View gap="s" alignItems="center" style={{ width: '100%' }}>
+            <Text
+              variant={isCoverCopy ? 'display' : 'heading-secondary'}
+              as={isCoverCopy ? 'h1' : 'h2'}
+              style={isCoverCopy ? { textWrap: 'balance', maxWidth: '100%' } : undefined}
+            >
+              {heading}
+            </Text>
+            <Text
+              variant={isCoverCopy ? 'heading-tertiary' : 'default'}
+              color="secondary"
+              style={isCoverCopy ? { maxWidth: '36rem' } : undefined}
+            >
+              {description}
+            </Text>
+          </View>
+
+          <View
+            layout="row"
+            gap="s"
+            alignItems="center"
+            justifyContent="center"
+            data-timesheets-free-tool-actions
+            style={{ flexWrap: 'wrap' }}
+          >
+            <Dropdown
+              trigger={(
+                <Button
+                  variant="secondary"
+                  prefix="software-download"
+                  suffix="chevron-down"
+                  disabled={exportDisabled}
+                >
+                  {exporting ? t('timesheets.exporting') : t('timesheets.export')}
+                </Button>
+              )}
+            >
+              <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
+              variant="cta"
+              prefix={isAuthenticated ? 'check' : 'user-add'}
+              disabled={exporting}
+              onClick={handleSave}
+              label={isAuthenticated ? 'timesheets.sales.enable' : 'timesheets.freeTool.saveCta'}
+              {...(isAuthenticated && enableAction
+                ? { id: enableAction.id, 'data-service': enableAction['data-service'] }
+                : {})}
+            />
+          </View>
+
+          <View gap="xs" alignItems="center" style={{ width: '100%' }}>
+            <Text variant="small" color="secondary">
+              {isAuthenticated
+                ? t('timesheets.freeTool.saveHintAuthenticated')
+                : t('timesheets.freeTool.saveHint')}
+            </Text>
+            {!isAuthenticated && (
+              <Button variant="link" href={signInHref} label="timesheets.freeTool.signInLink" />
+            )}
+          </View>
+
+          {(error || enableError) && (
+            <Alert variant="danger">
+              {error || enableError}
+            </Alert>
+          )}
+        </View>
+
+        <div data-timesheets-free-tool-sheet>
+          <Timesheet
+            lines={lines}
+            onChange={setLines}
+            disabled={exporting}
+            periodStart={periodStart}
+          />
+        </div>
+      </View>
+
+      <div
+        aria-hidden
+        style={{
+          position: 'fixed',
+          left: 0,
+          top: 0,
+          transform: 'translateX(-200vw)',
+          pointerEvents: 'none',
+          zIndex: -1,
+        }}
+      >
+        <TimesheetExportCard
+          lines={lines}
+          periodStart={periodStart}
+          captureRef={captureRef}
+        />
+      </div>
+    </div>
+  )
+}