@ossy/timesheets 3.0.6 → 3.0.8

package/src/timesheet-detail.page.jsx

@@ -0,0 +1,209 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { Text, View, Button, Page, useLocale, Alert, Dropdown, ContextMenu } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+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 { metadata as GetTimesheet } from './get.action.js'
+import { metadata as SaveTimesheet } from './save.action.js'
+
+export const metadata = {
+  id: 'timesheets/detail',
+  path: {
+    sv: '/tidrapporter/:timesheetId',
+    en: '/timesheets/:timesheetId',
+  },
+}
+
+export default function TimesheetDetailPage () {
+  const { t } = useLocale()
+  const sdk = useSdk()
+  const router = useRouter()
+  const timesheetId = router.params?.timesheetId
+  const captureRef = useRef(null)
+
+  const [timesheet, setTimesheet] = useState(null)
+  const [lines, setLines] = useState([])
+  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)
+    try {
+      const data = await sdk.invoke(GetTimesheet, { timesheetId })
+      if (!data) {
+        setError(t('timesheets.errorNotFound'))
+        setTimesheet(null)
+        setLines([])
+        return
+      }
+      setTimesheet(data)
+      setLines(data.lines ?? [])
+    } catch (err) {
+      setError(await invokeErrorMessage(err, t('timesheets.errorLoad')))
+      setTimesheet(null)
+      setLines([])
+    } 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,
+      })
+      setTimesheet(data)
+      setLines(data?.lines ?? lines)
+      setMessage(t('timesheets.saved'))
+    } catch (err) {
+      setError(await invokeErrorMessage(err, t('timesheets.errorSave')))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const exportPayload = {
+    ...timesheet,
+    lines,
+    status: timesheet?.status,
+  }
+
+  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)
+    }
+  }
+
+  const homeHref = router.getHref({ id: 'timesheets/home' })
+  const exportDisabled = !lines.length || loading || exporting
+
+  return (
+    <Page
+      title={(
+        <View layout="row" gap="s" alignItems="center">
+          <Button
+            prefix="chevron-left"
+            variant="command"
+            href={homeHref || undefined}
+            aria-label="timesheets.backToList"
+            onClick={homeHref ? undefined : () => router.back()}
+          />
+          <Text variant="heading-default" as="h1" text="timesheets.detail.title" />
+        </View>
+      )}
+      description="timesheets.detail.description"
+      far={(
+        <View layout="row" gap="s" alignItems="center">
+          <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
+            id={SaveTimesheet.id}
+            variant="cta"
+            prefix="check"
+            disabled={!timesheet?.id || saving || loading}
+            onClick={handleSave}
+          >
+            {saving ? t('timesheets.saving') : t('timesheets.save')}
+          </Button>
+        </View>
+      )}
+    >
+      <View 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}
+            />
+            {/* Off-screen light-theme card for PNG/PDF capture (no inputs). */}
+            <div
+              aria-hidden
+              style={{
+                position: 'fixed',
+                left: 0,
+                top: 0,
+                transform: 'translateX(-200vw)',
+                pointerEvents: 'none',
+                zIndex: -1,
+              }}
+            >
+              <TimesheetExportCard
+                lines={lines}
+                periodStart={timesheet.periodStart}
+                captureRef={captureRef}
+              />
+            </div>
+          </>
+        ) : null}
+      </View>
+    </Page>
+  )
+}

package/src/timesheet-resources.js

@@ -0,0 +1,28 @@
+import { ResourcesQueries } from '@ossy/resources/server'
+
+/**
+ * List timesheet resources by schema id (and optional workspace).
+ */
+export function getTimesheetResources ({ schemaId, belongsTo } = {}) {
+  const query = { type: schemaId }
+  if (belongsTo) query.belongsTo = belongsTo
+  return ResourcesQueries.GetResources(query)
+}
+
+export function findTimesheetForPeriod (resources, periodStart) {
+  return (resources || []).find((r) => r.content?.periodStart === periodStart) ?? null
+}
+
+export function toTimesheetDto (resource) {
+  if (!resource) return null
+  return {
+    id: resource.id,
+    periodStart: resource.content?.periodStart,
+    periodEnd: resource.content?.periodEnd,
+    status: resource.content?.status ?? 'draft',
+    holidayLocale: resource.content?.holidayLocale ?? null,
+    lines: resource.content?.lines ?? [],
+    createdAt: resource.createdAt,
+    updatedAt: resource.updatedAt,
+  }
+}

package/src/timesheet.schema.js

@@ -0,0 +1,29 @@
+export default {
+  name: 'Timesheet',
+  id: '@ossy/timesheets/schema/timesheet',
+  categoryName: 'Timesheets',
+  icon: 'calendar',
+  fields: [
+    {
+      name: 'periodStart',
+      type: 'timestamp',
+      description: 'UTC midnight of the first day of the period (inclusive)',
+    },
+    {
+      name: 'periodEnd',
+      type: 'timestamp',
+      description: 'UTC midnight of the last day of the period (inclusive)',
+    },
+    {
+      // draft | saved
+      name: 'status',
+      type: 'text',
+    },
+    {
+      name: 'holidayLocale',
+      type: 'text',
+      description: 'ISO 3166-1 alpha-2 country used for workday/public-holiday prefill',
+    },
+    // `lines` is stored in content (array of day rows) — same nested-content pattern as booking availability.
+  ],
+}

package/src/timesheets-auth-return.js

@@ -0,0 +1,23 @@
+import { withRedirectLink } from '@ossy/authentication'
+
+export const TIMESHEETS_SERVICE = '@ossy/timesheets'
+
+/**
+ * Path to land on after verify, with enable intent for the sales page.
+ * Keep the query value literal here — `withRedirectLink` encodes once.
+ *
+ * @param {string} timesheetsHomePath locale-aware `/timesheets` or `/tidrapporter`
+ */
+export function timesheetsEnableReturnPath (timesheetsHomePath = '/timesheets') {
+  const path = (timesheetsHomePath.startsWith('/') ? timesheetsHomePath : `/${timesheetsHomePath}`)
+    .split('?')[0]
+  return `${path}?enable=${TIMESHEETS_SERVICE}`
+}
+
+/**
+ * @param {string} authPath `/sign-up` or `/sign-in`
+ * @param {string} timesheetsHomePath
+ */
+export function timesheetsAuthHref (authPath, timesheetsHomePath) {
+  return withRedirectLink(authPath, timesheetsEnableReturnPath(timesheetsHomePath))
+}

package/src/timesheets-home-content.js

@@ -0,0 +1,54 @@
+import { useLocale } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { OpenSignUp } from '@ossy/authentication'
+import { timesheetsAuthHref } from './timesheets-auth-return.js'
+
+export function useTimesheetsHomeContent () {
+  const { t } = useLocale()
+  const router = useRouter()
+
+  const timesheetsHome = router.getHref('timesheets/home') || '/timesheets'
+  const signUpHref = timesheetsAuthHref(
+    router.getHref('sign-up') || router.getHref('@sign-up') || '/sign-up',
+    timesheetsHome,
+  )
+
+  const cover = {
+    title: t('timesheets.home.cover.title'),
+    text: t('timesheets.home.cover.text'),
+    // CTAs live in the free-tool cover (export + save / enable).
+    actions: [
+      {
+        ...OpenSignUp,
+        variant: 'cta',
+        href: signUpHref,
+        label: 'timesheets.home.cover.ctaPrimary',
+      },
+    ],
+  }
+
+  const features = [
+    {
+      title: t('timesheets.home.features.prefill.title'),
+      icon: 'calendar',
+      text: t('timesheets.home.features.prefill.text'),
+    },
+    {
+      title: t('timesheets.home.features.review.title'),
+      icon: 'pen',
+      text: t('timesheets.home.features.review.text'),
+    },
+    {
+      title: t('timesheets.home.features.export.title'),
+      icon: 'software-download',
+      text: t('timesheets.home.features.export.text'),
+    },
+    {
+      title: t('timesheets.home.features.calendar.title'),
+      icon: 'globe',
+      text: t('timesheets.home.features.calendar.text'),
+    },
+  ]
+
+  return { cover, features }
+}

package/src/timesheets.page.jsx

@@ -1,8 +1,12 @@
-import React from 'react'
-import { Text, View, Button, Page, useLocale, Tags } from '@ossy/design-system'
-import { Timesheet } from './Timesheet.jsx'
-import { DataLoader } from '@ossy/calendar'
-import { Definition } from '@ossy/timesheets'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useApp, useShellWorkspace } from '@ossy/app/shell'
+import { GetWorkspace, EnableService } from '@ossy/workspaces'
+import { isServiceEntitled } from '@ossy/workspaces/entitlements'
+import { AsyncStatus, useSdk, cacheKey } from '@ossy/sdk-react'
+import { useRouter } from '@ossy/router-react'
+import TimesheetsSalesPage from './TimesheetsSalesPage.jsx'
+import TimesheetsProductHome from './TimesheetsProductHome.jsx'
+import { TIMESHEETS_SERVICE } from './timesheets-auth-return.js'
 
 export const metadata = {
   id: 'timesheets/home',
@@ -12,29 +16,84 @@ export const metadata = {
   },
 }
 
-export const TimesheetsPage = () => {
-  const { t } = useLocale()
-  const statusTags = (Definition.status ?? [])
-    .map((s) => ({ beta: 'Beta', 'coming-soon': 'Coming Soon' }[s]))
-    .filter(Boolean)
+export default function TimesheetsHomePage () {
+  const app = useApp()
+  const router = useRouter()
+  const { workspace: shellWorkspace } = useShellWorkspace()
+  const { read, invoke, invalidate } = useSdk()
+  const isAuthenticated = !!app?.isAuthenticated
+  const {
+    data: workspaceFromSdk,
+    status: workspaceStatus,
+  } = read(GetWorkspace, undefined, { enabled: isAuthenticated })
+  const autoEnableStarted = useRef(false)
+
+  // Once GetWorkspace succeeds, trust only the live workspace — cookie/bootstrap
+  // can be stale and would skip the sales enable CTA.
+  const services = useMemo(() => {
+    if (workspaceStatus === AsyncStatus.Success) {
+      return workspaceFromSdk?.services ?? {}
+    }
+    return workspaceFromSdk?.services
+      ?? app?.workspaceServices
+      ?? shellWorkspace?.services
+  }, [
+    workspaceStatus,
+    workspaceFromSdk?.services,
+    app?.workspaceServices,
+    shellWorkspace?.services,
+  ])
+
+  const entitled = isServiceEntitled(services, TIMESHEETS_SERVICE)
+  const enableRequested = router.searchParams.enable === TIMESHEETS_SERVICE
+
+  const entitlementsPending = isAuthenticated
+    && workspaceStatus !== AsyncStatus.Success
+    && workspaceStatus !== AsyncStatus.Error
+    && app?.workspaceServices == null
+
+  const enableService = useCallback(() => {
+    return invoke(EnableService, { service: TIMESHEETS_SERVICE })
+      .then(() => invalidate(cacheKey(GetWorkspace)))
+  }, [invoke, invalidate])
+
+  useEffect(() => {
+    if (!isAuthenticated || !enableRequested || autoEnableStarted.current) return
+    if (entitlementsPending) return
+    if (entitled) {
+      const home = router.getHref('timesheets/home') || '/timesheets'
+      window.history.replaceState({}, '', home)
+      return
+    }
+
+    autoEnableStarted.current = true
+    const home = router.getHref('timesheets/home') || '/timesheets'
+    window.history.replaceState({}, '', home)
+
+    enableService().catch(() => {
+      // Sales page surfaces a manual enable CTA + error if this fails.
+    })
+  }, [
+    isAuthenticated,
+    enableRequested,
+    entitlementsPending,
+    entitled,
+    enableService,
+    router,
+  ])
+
+  if (entitlementsPending) {
+    return null
+  }
+
+  if (isAuthenticated && entitled) {
+    return <TimesheetsProductHome />
+  }
 
   return (
-    <Page
-      title="timesheets.home.title"
-      near={statusTags.length > 0 ? <Tags tags={statusTags} size="s" /> : undefined}
-      description="timesheets.home.description"
-      far={(
-        <Button variant="cta" disabled prefix="add">
-          {t('design-system.add')}
-        </Button>
-      )}
-    >
-      <View gap="m">
-        <Text variant="heading-secondary" as="h2" text="design-system.overview" />
-        <DataLoader content={<Timesheet />} />
-      </View>
-    </Page>
+    <TimesheetsSalesPage
+      isAuthenticated={isAuthenticated}
+      onEnable={enableService}
+    />
   )
 }
-
-export default TimesheetsPage