@ossy/timesheets 3.0.6 → 3.0.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/timesheets",
-  "description": "Analytics module — workspace analytics for website traffic",
-  "version": "3.0.6",
+  "description": "Timesheets — generate, review, save, and export monthly work hours",
+  "version": "3.0.8",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
@@ -13,6 +13,23 @@
   "ossy": {
     "src": "./src"
   },
+  "dependencies": {
+    "@ossy/resources": "^3.0.8",
+    "html-to-image": "^1.11.13",
+    "nanoid": "^5.1.11",
+    "pdf-lib": "^1.17.1"
+  },
+  "peerDependencies": {
+    "@ossy/app": "*",
+    "@ossy/authentication": "*",
+    "@ossy/calendar": "*",
+    "@ossy/design-system": "*",
+    "@ossy/router-react": "*",
+    "@ossy/sdk-react": ">=1.0.0",
+    "@ossy/themes": "*",
+    "@ossy/workspaces": "*",
+    "react": "*"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
@@ -21,11 +38,5 @@
     "/src",
     "README.md"
   ],
-  "peerDependencies": {
-    "@ossy/calendar": "*",
-    "@ossy/design-system": "*",
-    "@ossy/router-react": "*",
-    "react": "*"
-  },
-  "gitHead": "3e1c558069c7738dd751e429c69b10e52d247d8c"
+  "gitHead": "980b380c9dee0de78ef3ebabe86efcec1c223a9a"
 }

package/src/Definition.js

@@ -1,7 +1,8 @@
 export const Definition = {
   id: 'timesheets',
   title: 'Timesheets',
-  description: 'Time tracking, reporting, and worklog summaries.',
+  titleKey: 'timesheets.nav.title',
+  description: 'Try a monthly timesheet free — edit and export instantly; sign up to save.',
   icon: 'calendar',
   status: ['beta'],
 }

package/src/HeroCover.jsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import { Button, View, PageSection, Text } from '@ossy/design-system'
+
+const Cover = ({
+  title,
+  titleMaxWidth = '1100px',
+  text,
+  actions = [],
+}) => (
+  <View
+    gap="l"
+    placeContent="center"
+    layout="column"
+    justifyContent="center"
+    style={{
+      height: '100%',
+      borderRadius: 'var(--space-m)',
+      padding: 'var(--space-xl) var(--space-s)',
+    }}
+  >
+    <View gap="m" alignItems="center">
+      <Text as="h1" variant="display" style={{ maxWidth: titleMaxWidth, textWrap: 'balance' }}>
+        {title}
+      </Text>
+      <Text as="h2" variant="heading-tertiary" style={{ maxWidth: '800px' }}>
+        {text}
+      </Text>
+    </View>
+    {actions.length > 0 && (
+      <View gap="m" layout="row" justifyContent="center" style={{ flexWrap: 'wrap' }}>
+        {actions.map(({ label, ...props }) => (
+          <Button {...props} key={label} label={label} />
+        ))}
+      </View>
+    )}
+  </View>
+)
+
+/**
+ * Marketing cover band (`surface="hero"`).
+ * Pass `children` to use custom cover content (e.g. free tool); otherwise renders title/text/actions.
+ */
+export const HeroCover = ({
+  title,
+  titleMaxWidth = '1100px',
+  text,
+  actions = [],
+  children,
+  id = 'hero-cover',
+  surfaceAs = 'div',
+  maxWidth = 'l',
+  surface = 'hero',
+  ...props
+}) => {
+  const { style: passthroughStyle, ...pageSectionProps } = props
+  const hasChildren = children != null
+
+  return (
+    <PageSection
+      id={id}
+      surfaceAs={surfaceAs}
+      maxWidth={maxWidth}
+      surface={surface}
+      {...pageSectionProps}
+      data-rounded
+      data-component="@ossy/timesheets/cover"
+      data-cover-with-tool={hasChildren ? 'true' : undefined}
+      style={{
+        backgroundAttachment: 'scroll',
+        boxShadow: 'inset 0 1px 0 color-mix(in srgb, var(--foreground) 6%, transparent)',
+        ...passthroughStyle,
+      }}
+    >
+      <style href="@ossy/timesheets/cover" precedence="high">
+        {`
+          [data-component="@ossy/timesheets/cover"] {
+            gap: var(--space-m);
+            min-height: min(42vh, 420px);
+            height: auto;
+          }
+
+          [data-component="@ossy/timesheets/cover"][data-cover-with-tool="true"] {
+            min-height: 0;
+            padding-block: var(--space-l);
+          }
+
+          [data-rounded] {
+            border-radius: var(--space-m);
+            overflow: hidden;
+          }
+
+          @media (min-width: 900px) {
+            [data-component="@ossy/timesheets/cover"]:not([data-cover-with-tool="true"]) {
+              min-height: min(46vh, 520px);
+            }
+
+            [data-component="@ossy/timesheets/cover"][data-cover-with-tool="true"] {
+              padding-block: var(--space-xl);
+            }
+          }
+        `}
+      </style>
+      {hasChildren ? children : (
+        <Cover
+          title={title}
+          titleMaxWidth={titleMaxWidth}
+          text={text}
+          actions={actions}
+        />
+      )}
+    </PageSection>
+  )
+}

package/src/SalesSection.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { Text, View, Icon, PageSection } from '@ossy/design-system'
+import { HeroCover } from './HeroCover.jsx'
+
+export default function SalesSection ({ cover = {}, features, tool = null }) {
+  return (
+    <PageSection maxWidth="xl" gap="l">
+      <View
+        gap="l"
+        surface="primary"
+        style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
+      >
+        {tool ? (
+          <View
+            id="timesheets-free-tool"
+            surface="base"
+            roundness="m"
+            inset="l"
+            data-timesheets-free-tool-section
+            style={{ width: '100%' }}
+          >
+            {tool}
+          </View>
+        ) : (
+          <HeroCover {...cover} />
+        )}
+
+        <View gap="m" inset="s">
+          <Text variant="heading-secondary" as="h2" text="timesheets.sales.overview" />
+          <View gap="m" layout="row-wrap">
+            {features.map((x) => (
+              <View
+                key={x.title}
+                roundness="m"
+                surface="primary"
+                inset="m"
+                gap="m"
+                style={{
+                  width: 200,
+                  border: '1px solid var(--separator)',
+                }}
+              >
+                <View justifyContent="center" alignItems="center">
+                  <Icon name={x.icon} size="m" />
+                </View>
+                <Text variant="small" style={{ fontWeight: 'bold', textAlign: 'center' }}>{x.title}</Text>
+                <Text variant="small" style={{ textAlign: 'center' }}>{x.text}</Text>
+              </View>
+            ))}
+          </View>
+        </View>
+
+        <View gap="m" inset="s">
+          <Text variant="heading-secondary" as="h2" text="timesheets.sales.features" />
+          {features.map((x) => (
+            <View
+              key={x.title}
+              roundness="m"
+              gap="m"
+              inset="l"
+              style={{ border: '1px solid var(--separator)' }}
+            >
+              <View layout="row" gap="s" alignItems="center">
+                <View justifyContent="center" alignItems="center">
+                  <Icon name={x.icon} size="m" />
+                </View>
+                <Text variant="heading-tertiary" as="h3">{x.title}</Text>
+              </View>
+              <Text>{x.text}</Text>
+            </View>
+          ))}
+        </View>
+      </View>
+    </PageSection>
+  )
+}

package/src/Timesheet.jsx

@@ -1,76 +1,191 @@
-import React from 'react';
-import { View, Text } from '@ossy/design-system';
-import { CalendarDaySurfaceStyles, useCalendarMonths } from '@ossy/calendar';
-
-const grid = {
-    width: '100%',
-    height: '100vh',
-    display: 'grid',
-    overflow: 'hidden',
-    gridTemplateColumns: 'repeat(6, minmax(390px, 425px))',
-    gridTemplateRows: '1fr 1fr',
-    gap: '1px',
-}
+import React, { useMemo } from 'react'
+import { View, Text, Input, DateDisplay, Separator, useLocale } from '@ossy/design-system'
+import { buildMonthGrid, dateKeyFromMs } from '@ossy/calendar'
 
 const calendarGrid = {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(7, 1fr)',
-    gridAutoRows: 'auto',
-    gap: '8px',
-    padding: '24px',
-    justifyItems: 'center',
-    alignItems: 'center',
+  display: 'grid',
+  gridTemplateColumns: 'repeat(7, minmax(44px, 56px))',
+  gap: '1px',
+  justifyItems: 'stretch',
+  alignItems: 'stretch',
+  width: 'fit-content',
+  maxWidth: '100%',
 }
 
-const calendarDayLayout = {
-    boxSizing: 'border-box',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '50%',
-    padding: '8px',
-    fontSize: '.6rem',
-    margin: 0,
+const dayCell = {
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  gap: 4,
+  width: '100%',
+  minHeight: 72,
+  borderRadius: 'var(--space-xxs, 2px)',
+  padding: '6px 4px',
 }
 
-const monthCard = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '16px',
-    padding: '8px',
-    boxSizing: 'border-box',
+const hoursInput = {
+  width: '100%',
+  maxWidth: 48,
+  minHeight: 32,
+  padding: '6px 4px',
+  textAlign: 'center',
+  fontSize: 13,
+  borderRadius: 'var(--space-xxs, 2px)',
+  background: 'transparent',
+  borderColor: 'transparent',
+  borderWidth: 1,
+  borderStyle: 'solid',
+  boxShadow: 'none',
+  outline: 'none',
 }
 
-export const Timesheet = () => {
-    const months = useCalendarMonths()
-    return (
-        <>
-        <CalendarDaySurfaceStyles />
-        <div style={grid}>
-
-            {months.map(month => (
-                <div key={month.month} data-surface="primary" style={monthCard}>
-                    <Text variant="heading-tertiary" as="h3">{month.month}</Text>
-                    <View gap="s" style={{ flexGrow: '1' }}>
-
-                    </View>
-
-                    <div style={calendarGrid}>
-                        {month.days.map(day => (
-                            <Text
-                                key={`${month.month}-${day.monthDay}`}
-                                variant="small"
-                                data-ossy-calendar-day
-                                data-day-off={!day.isWorkday}
-                                style={calendarDayLayout}
-                            >
-                                {day.monthDay}
-                            </Text>
-                        ))}
-                    </div>
-                </div>
+const WEEKDAY_KEYS = [
+  'timesheets.weekday.mon',
+  'timesheets.weekday.tue',
+  'timesheets.weekday.wed',
+  'timesheets.weekday.thu',
+  'timesheets.weekday.fri',
+  'timesheets.weekday.sat',
+  'timesheets.weekday.sun',
+]
+
+/**
+ * Month calendar card for reviewing/editing timesheet hours.
+ * 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 }) {
+  const { t } = 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 updateHours = (dateMs, hours) => {
+    if (disabled || !onChange) return
+    onChange(lines.map((line) => (
+      line.date === dateMs ? { ...line, hours: Number(hours) || 0 } : line
+    )))
+  }
+
+  if (!lines.length) {
+    return <Text color="secondary" text="timesheets.empty" />
+  }
+
+  return (
+    <>
+      <style href="@ossy/timesheets/day-surface" precedence="high">
+        {`
+          [data-timesheet-root] [data-ossy-calendar-day] {
+            background: var(--surface-primary);
+          }
+
+          [data-timesheet-root] [data-ossy-calendar-day][data-day-off="true"] {
+            background: color-mix(in srgb, hsl(350 32% 58%) 9%, var(--surface-primary));
+            color: color-mix(in srgb, hsl(350 28% 46%) 45%, var(--foreground));
+          }
+
+          [data-timesheet-root] [data-ossy-calendar-day][data-day-off="true"]:hover {
+            background: color-mix(in srgb, hsl(350 32% 55%) 13%, var(--surface-primary));
+          }
+        `}
+      </style>
+      <div
+        ref={captureRef}
+        data-timesheet-root
+        style={{ width: 'fit-content', maxWidth: '100%' }}
+      >
+        <View
+          gap="m"
+          surface="primary"
+          roundness="m"
+          inset="m"
+          style={{ width: 'fit-content', maxWidth: '100%', boxSizing: 'border-box' }}
+        >
+          <View gap="s">
+            <View layout="row" gap="m" alignItems="baseline" style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+              <DateDisplay
+                value={anchorMs}
+                formatOptions={{ month: 'long', year: 'numeric' }}
+                variant="heading-tertiary"
+                as="h3"
+              />
+              <Text variant="small" color="secondary">
+                {t('timesheets.totalHours', { hours: totalHours })}
+              </Text>
+            </View>
+            <Separator
+              variant="accent"
+              style={{ borderColor: 'var(--color-accent, #3dcf9a)' }}
+            />
+          </View>
+
+          <div style={calendarGrid}>
+            {WEEKDAY_KEYS.map((key) => (
+              <Text key={key} variant="small" color="secondary" style={{ textAlign: 'center' }}>
+                {t(key)}
+              </Text>
             ))}
-        </div>
-        </>
-    )
+          </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}
+                >
+                  <Text
+                    variant="small"
+                    style={{
+                      fontWeight: 600,
+                      fontSize: 13,
+                      lineHeight: 1.2,
+                      color: 'var(--foreground)',
+                    }}
+                  >
+                    {cell.day}
+                  </Text>
+                  <Input
+                    type="number"
+                    min={0}
+                    max={24}
+                    step={0.5}
+                    value={line.hours}
+                    disabled={disabled}
+                    onChange={(e) => updateHours(line.date, e.target.value)}
+                    style={hoursInput}
+                    aria-label="timesheets.hours"
+                  />
+                </div>
+              )
+            })}
+          </div>
+        </View>
+      </div>
+    </>
+  )
 }

package/src/TimesheetCard.jsx

@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react'
+import { View, Text, DateDisplay, List, Icon, useLocale } from '@ossy/design-system'
+
+/**
+ * List row for a timesheet period.
+ */
+export function TimesheetCard ({ timesheet, onClick }) {
+  const { t } = useLocale()
+  const totalHours = useMemo(
+    () => (timesheet?.lines ?? []).reduce((sum, line) => sum + (Number(line.hours) || 0), 0),
+    [timesheet?.lines],
+  )
+  const status = timesheet?.status ?? 'draft'
+
+  return (
+    <List.Item
+      selectable
+      density="comfortable"
+      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 })}
+        </Text>
+      </View>
+    </List.Item>
+  )
+}