@open-mercato/core 0.7.1-develop.7178.1.ab93fbaf4e → 0.7.1-develop.7180.1.9717fbbb43

package/src/modules/staff/lib/timesheets-projects/computeProjectFinancials.ts

@@ -0,0 +1,142 @@
+import type { EntityManager } from '@mikro-orm/postgresql'
+import { entryAmount, round2, sumAmounts } from '../time-tracking/cost'
+
+/**
+ * Per-project hours and cost for the projects list.
+ *
+ * Cost is derived from the ROUNDED minutes of each entry (spec D-7): the amount is
+ * rounded once, at the entry, and every level above is an exact sum of already
+ * rounded values. It is therefore not `hours x rate` and may differ from a manual
+ * recalculation of the displayed hours (screen 3 note 1).
+ *
+ * Every value here is scoped to a single project. Projects can be billed in
+ * different currencies, so these numbers must never be summed across projects
+ * (screen 3 note 2) — totalling belongs to a report, which is scoped to one
+ * customer and therefore one currency.
+ */
+export type ProjectEntryGroup = {
+  projectId: string
+  isBillable: boolean
+  rateOverrideAmount: number | null
+  billingMinutes: number
+  rawMinutes: number
+  entryCount: number
+}
+
+export type ProjectFinancials = {
+  totalMinutes: number
+  billableMinutes: number
+  cost: number | null
+}
+
+export type ProjectFinancialsScope = {
+  em: EntityManager
+  tenantId: string
+  organizationId: string
+  projectIds: string[]
+  hourlyRateByProjectId: ReadonlyMap<string, number | null>
+  staffMemberId?: string | null
+}
+
+type FinancialsRow = {
+  project_id: string
+  is_billable: boolean
+  rate_override_amount: string | number | null
+  billing_minutes: string | number | null
+  raw_minutes: string | number | null
+  entry_count: string | number
+}
+
+function toNumber(value: string | number | null | undefined): number {
+  if (value === null || value === undefined) return 0
+  const parsed = typeof value === 'number' ? value : Number(value)
+  return Number.isFinite(parsed) ? parsed : 0
+}
+
+function toNullableNumber(value: string | number | null | undefined): number | null {
+  if (value === null || value === undefined) return null
+  const parsed = typeof value === 'number' ? value : Number(value)
+  return Number.isFinite(parsed) ? parsed : null
+}
+
+function emptyFinancials(): ProjectFinancials {
+  return { totalMinutes: 0, billableMinutes: 0, cost: null }
+}
+
+export function summarizeProjectEntryGroups(
+  groups: readonly ProjectEntryGroup[],
+  hourlyRateByProjectId: ReadonlyMap<string, number | null>,
+  projectIds: readonly string[],
+): Map<string, ProjectFinancials> {
+  const result = new Map<string, ProjectFinancials>()
+  for (const id of projectIds) result.set(id, emptyFinancials())
+
+  const amountsByProject = new Map<string, number[]>()
+  for (const group of groups) {
+    const bucket = result.get(group.projectId)
+    if (!bucket) continue
+    bucket.totalMinutes += group.rawMinutes
+    if (group.isBillable) bucket.billableMinutes += group.rawMinutes
+
+    const amount = entryAmount(
+      {
+        isBillable: group.isBillable,
+        roundedMinutes: group.billingMinutes,
+        rateOverrideAmount: group.rateOverrideAmount,
+      },
+      { hourlyRate: hourlyRateByProjectId.get(group.projectId) ?? null },
+    )
+    if (amount === null) continue
+    const amounts = amountsByProject.get(group.projectId) ?? []
+    amounts.push(round2(amount * group.entryCount))
+    amountsByProject.set(group.projectId, amounts)
+  }
+
+  for (const [projectId, amounts] of amountsByProject) {
+    const bucket = result.get(projectId)
+    if (!bucket) continue
+    bucket.cost = sumAmounts(amounts)
+  }
+
+  return result
+}
+
+export async function computeProjectFinancials(
+  scope: ProjectFinancialsScope,
+): Promise<Map<string, ProjectFinancials>> {
+  if (scope.projectIds.length === 0) return new Map<string, ProjectFinancials>()
+
+  const memberFilter = scope.staffMemberId ? 'AND staff_member_id = ?' : ''
+  const projectPlaceholders = scope.projectIds.map(() => '?').join(', ')
+  const params: unknown[] = [scope.organizationId, scope.tenantId, ...scope.projectIds]
+  if (scope.staffMemberId) params.push(scope.staffMemberId)
+
+  const sql = `
+    SELECT
+      time_project_id AS project_id,
+      is_billable,
+      rate_override_amount,
+      COALESCE(rounded_minutes, duration_minutes) AS billing_minutes,
+      COALESCE(SUM(duration_minutes), 0)::bigint AS raw_minutes,
+      COUNT(*)::bigint AS entry_count
+    FROM staff_time_entries
+    WHERE organization_id = ?
+      AND tenant_id = ?
+      AND time_project_id IN (${projectPlaceholders})
+      AND deleted_at IS NULL
+      ${memberFilter}
+    GROUP BY 1, 2, 3, 4
+  `
+
+  const rows = (await scope.em.getConnection().execute(sql, params)) as FinancialsRow[]
+  const groups: ProjectEntryGroup[] = rows.map((row) => ({
+    projectId: row.project_id,
+    isBillable: Boolean(row.is_billable),
+    rateOverrideAmount: toNullableNumber(row.rate_override_amount),
+    billingMinutes: toNumber(row.billing_minutes),
+    rawMinutes: toNumber(row.raw_minutes),
+    entryCount: toNumber(row.entry_count),
+  }))
+
+  return summarizeProjectEntryGroups(groups, scope.hourlyRateByProjectId, scope.projectIds)
+}

package/src/modules/staff/lib/timesheets-projects/reportSelection.ts

@@ -0,0 +1,82 @@
+export type ReportSelectionProject = {
+  id: string
+  name: string
+  customerId: string | null
+  customerName: string | null
+  currencyCode: string | null
+}
+
+export type ReportSelectionBlockedReason =
+  | 'empty'
+  | 'missing_customer'
+  | 'multiple_customers'
+  | 'multiple_currencies'
+
+export type ReportSelection =
+  | {
+      ok: true
+      customerId: string
+      customerName: string | null
+      currencyCode: string | null
+      projectIds: string[]
+    }
+  | {
+      ok: false
+      reason: ReportSelectionBlockedReason
+      offenders: string[]
+    }
+
+/**
+ * A customer report covers exactly one customer and exactly one currency
+ * (screen 3 note 4, risk R2). The projects list therefore refuses to open a
+ * report for a selection that spans customers or currencies, and names the
+ * offenders so the user can fix the selection instead of guessing.
+ */
+export function resolveReportSelection(
+  projects: readonly ReportSelectionProject[],
+): ReportSelection {
+  if (projects.length === 0) return { ok: false, reason: 'empty', offenders: [] }
+
+  const withoutCustomer = projects.filter((project) => !project.customerId)
+  if (withoutCustomer.length > 0) {
+    return {
+      ok: false,
+      reason: 'missing_customer',
+      offenders: withoutCustomer.map((project) => project.name),
+    }
+  }
+
+  const customerNameById = new Map<string, string>()
+  for (const project of projects) {
+    if (!project.customerId) continue
+    if (customerNameById.has(project.customerId)) continue
+    customerNameById.set(project.customerId, project.customerName ?? project.customerId)
+  }
+  if (customerNameById.size > 1) {
+    return {
+      ok: false,
+      reason: 'multiple_customers',
+      offenders: Array.from(customerNameById.values()),
+    }
+  }
+
+  const currencies = Array.from(
+    new Set(
+      projects
+        .map((project) => project.currencyCode)
+        .filter((code): code is string => typeof code === 'string' && code.length > 0),
+    ),
+  )
+  if (currencies.length > 1) {
+    return { ok: false, reason: 'multiple_currencies', offenders: currencies }
+  }
+
+  const [customerId] = Array.from(customerNameById.keys())
+  return {
+    ok: true,
+    customerId,
+    customerName: customerNameById.get(customerId) ?? null,
+    currencyCode: currencies[0] ?? null,
+    projectIds: projects.map((project) => project.id),
+  }
+}

package/src/modules/staff/lib/timesheets-projects-ui/AssignMembersDialog.tsx

@@ -0,0 +1,237 @@
+"use client"
+
+import * as React from 'react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { ErrorMessage, LoadingMessage } from '@open-mercato/ui/backend/detail'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('staff')
+
+const SEARCH_DEBOUNCE_MS = 300
+const CANDIDATE_PAGE_SIZE = 50
+
+export type AssignMembersSubmitInput = {
+  staffMemberIds: string[]
+  role: string | null
+  assignedStartDate: string
+}
+
+export type AssignMembersDialogLabels = {
+  title: string
+  description: string
+  searchPlaceholder: string
+  empty: string
+  loadError: string
+  loading: string
+  role: string
+  rolePlaceholder: string
+  startDate: string
+  cancel: string
+  confirm: string
+}
+
+export type AssignMembersDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  labels: AssignMembersDialogLabels
+  isSaving: boolean
+  onConfirm: (input: AssignMembersSubmitInput) => void
+}
+
+type StaffMemberItem = {
+  id?: unknown
+  display_name?: unknown
+  displayName?: unknown
+  team?: { name?: unknown } | null
+}
+
+type StaffMembersResponse = { items?: StaffMemberItem[] }
+
+type Candidate = { id: string; name: string; subtitle: string | null }
+
+function toCandidate(item: StaffMemberItem): Candidate | null {
+  const id = typeof item.id === 'string' ? item.id : null
+  if (!id) return null
+  const displayName =
+    typeof item.display_name === 'string'
+      ? item.display_name
+      : typeof item.displayName === 'string'
+        ? item.displayName
+        : id
+  const teamName = typeof item.team?.name === 'string' ? item.team.name : null
+  return { id, name: displayName, subtitle: teamName }
+}
+
+function todayIso(): string {
+  return new Date().toISOString().slice(0, 10)
+}
+
+export function AssignMembersDialog({
+  open,
+  onOpenChange,
+  labels,
+  isSaving,
+  onConfirm,
+}: AssignMembersDialogProps) {
+  const [search, setSearch] = React.useState('')
+  const [candidates, setCandidates] = React.useState<Candidate[]>([])
+  // The candidate list is fetched behind a debounce, so the dialog would render
+  // its "no results" copy for the whole debounce window before the first request
+  // even leaves. Seed the loading state from `open` instead.
+  const [isLoading, setIsLoading] = React.useState(open)
+  const [loadError, setLoadError] = React.useState<string | null>(null)
+  const [selectedIds, setSelectedIds] = React.useState<string[]>([])
+  const [role, setRole] = React.useState('')
+  const [startDate, setStartDate] = React.useState(todayIso)
+
+  React.useEffect(() => {
+    if (!open) return
+    setSearch('')
+    setSelectedIds([])
+    setRole('')
+    setStartDate(todayIso())
+    setLoadError(null)
+  }, [open])
+
+  React.useEffect(() => {
+    if (!open) return
+    let cancelled = false
+    setIsLoading(true)
+    const handle = window.setTimeout(() => {
+      const params = new URLSearchParams({
+        pageSize: String(CANDIDATE_PAGE_SIZE),
+        isActive: 'true',
+      })
+      if (search.trim()) params.set('search', search.trim())
+      readApiResultOrThrow<StaffMembersResponse>(
+        `/api/staff/team-members?${params.toString()}`,
+        undefined,
+        { errorMessage: labels.loadError, fallback: { items: [] } },
+      )
+        .then((payload) => {
+          if (cancelled) return
+          const items = Array.isArray(payload.items) ? payload.items : []
+          setCandidates(items.map(toCandidate).filter((item): item is Candidate => item !== null))
+          setLoadError(null)
+        })
+        .catch((error: unknown) => {
+          if (cancelled) return
+          logger.error('staff.timesheets.projects.assignMembers.candidates', { err: error })
+          setCandidates([])
+          setLoadError(labels.loadError)
+        })
+        .finally(() => {
+          if (!cancelled) setIsLoading(false)
+        })
+    }, SEARCH_DEBOUNCE_MS)
+    return () => {
+      cancelled = true
+      window.clearTimeout(handle)
+    }
+  }, [open, search, labels.loadError])
+
+  const toggleCandidate = React.useCallback((id: string, checked: boolean) => {
+    setSelectedIds((prev) => (checked ? Array.from(new Set([...prev, id])) : prev.filter((value) => value !== id)))
+  }, [])
+
+  const canSubmit = selectedIds.length > 0 && startDate.length > 0 && !isSaving
+
+  const submit = React.useCallback(() => {
+    if (selectedIds.length === 0 || !startDate) return
+    onConfirm({ staffMemberIds: selectedIds, role: role.trim() || null, assignedStartDate: startDate })
+  }, [onConfirm, role, selectedIds, startDate])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault()
+        if (canSubmit) submit()
+      }
+    },
+    [canSubmit, submit],
+  )
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md" onKeyDown={handleKeyDown}>
+        <DialogHeader>
+          <DialogTitle>{labels.title}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 pt-2">
+          <p className="text-sm text-muted-foreground">{labels.description}</p>
+          <Input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={labels.searchPlaceholder}
+            aria-label={labels.searchPlaceholder}
+          />
+          <div className="max-h-64 space-y-1 overflow-y-auto rounded-md border border-border p-1">
+            {isLoading ? (
+              <LoadingMessage label={labels.loading} />
+            ) : loadError ? (
+              <ErrorMessage label={loadError} />
+            ) : candidates.length === 0 ? (
+              <p className="px-2 py-3 text-sm text-muted-foreground">{labels.empty}</p>
+            ) : (
+              candidates.map((candidate) => (
+                <label
+                  key={candidate.id}
+                  className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted/50"
+                >
+                  <Checkbox
+                    checked={selectedIds.includes(candidate.id)}
+                    onCheckedChange={(checked) => toggleCandidate(candidate.id, Boolean(checked))}
+                  />
+                  <span className="flex min-w-0 flex-col">
+                    <span className="truncate text-sm text-foreground">{candidate.name}</span>
+                    {candidate.subtitle ? (
+                      <span className="truncate text-xs text-muted-foreground">{candidate.subtitle}</span>
+                    ) : null}
+                  </span>
+                </label>
+              ))
+            )}
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium" htmlFor="assign-members-role">
+              {labels.role}
+            </label>
+            <Input
+              id="assign-members-role"
+              value={role}
+              onChange={(event) => setRole(event.target.value)}
+              placeholder={labels.rolePlaceholder}
+            />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium" htmlFor="assign-members-start-date">
+              {labels.startDate}
+            </label>
+            <Input
+              id="assign-members-start-date"
+              type="date"
+              value={startDate}
+              onChange={(event) => setStartDate(event.target.value)}
+            />
+          </div>
+          <div className="flex justify-end gap-2 pt-2">
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              {labels.cancel}
+            </Button>
+            <Button type="button" disabled={!canSubmit} onClick={submit}>
+              {isSaving ? <Spinner className="size-4" /> : null}
+              {labels.confirm}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default AssignMembersDialog

package/src/modules/staff/lib/timesheets-projects-ui/ProjectBudgetCell.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from 'react'
+import { Progress } from '@open-mercato/ui/primitives/progress'
+import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+import type { ProjectBudgetBurn } from '../timesheets-projects/budgetBurn'
+
+export type ProjectBudgetCellProps = {
+  burn: ProjectBudgetBurn | null
+  usageLabel: string | null
+  noBudgetLabel: string
+  ariaLabel: string
+}
+
+export function ProjectBudgetCell({ burn, usageLabel, noBudgetLabel, ariaLabel }: ProjectBudgetCellProps) {
+  if (!burn) {
+    return (
+      <div className="flex items-center gap-2">
+        <span className="text-xs text-muted-foreground">—</span>
+        <StatusBadge variant="neutral">{noBudgetLabel}</StatusBadge>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-w-36 space-y-1">
+      <Progress value={burn.barPercent} size="sm" tone={burn.tone} aria-label={ariaLabel} />
+      <span className="block text-xs text-muted-foreground">{usageLabel}</span>
+    </div>
+  )
+}
+
+export default ProjectBudgetCell

package/src/modules/staff/lib/timesheets-projects-ui/ProjectCard.tsx

@@ -1,6 +1,11 @@
 "use client"
 
 import * as React from 'react'
+import { z } from 'zod'
+import { registerComponent } from '@open-mercato/shared/modules/widgets/component-registry'
+import { useRegisteredComponent } from '@open-mercato/ui/backend/injection/useRegisteredComponent'
+import { extensionPoints } from '@open-mercato/core/modules/staff/extension-points'
+import { callbackProp, opaqueProp } from '../time-tracking/componentContracts'
 import Link from 'next/link'
 import { ProjectColorDot } from '../timesheets-ui/ProjectColorDot'
 import { resolveProjectColorHex } from '../timesheets-ui/colors'
@@ -45,7 +50,7 @@ const STATUS_BADGE_CLASSES: Record<string, string> = {
   completed: 'bg-muted text-muted-foreground',
 }
 
-export function ProjectCard({ data, labels, showTeam, href }: ProjectCardProps) {
+function DefaultProjectCard({ data, labels, showTeam, href }: ProjectCardProps) {
   const badgeClass = STATUS_BADGE_CLASSES[data.status] ?? 'bg-muted text-muted-foreground'
   const statusLabel = labels.statuses[data.status] ?? data.status
   const stripeColor = resolveProjectColorHex(data.color, data.name)
@@ -108,3 +113,53 @@ export function ProjectCard({ data, labels, showTeam, href }: ProjectCardProps)
     </Link>
   )
 }
+
+const projectCardDataSchema: z.ZodType<ProjectCardData> = z.object({
+  id: z.string(),
+  name: z.string(),
+  code: z.string().nullable(),
+  customerName: z.string().nullable(),
+  color: z.string().nullable(),
+  status: z.string(),
+  hoursWeek: z.number(),
+  hoursTrend: z.array(z.number()),
+  members: z.array(opaqueProp<AvatarMember>()),
+  memberCount: z.number(),
+  myRole: z.string().nullable(),
+  updatedAt: z.string().nullable(),
+})
+
+const projectCardLabelsSchema: z.ZodType<ProjectCardLabels> = z.object({
+  hoursPanelPm: z.string(),
+  hoursPanelCollab: z.string(),
+  sparklineAria: z.string(),
+  peopleCount: callbackProp<(count: number) => string>(),
+  role: z.string(),
+  noCustomer: z.string(),
+  statuses: z.record(z.string(), z.string()),
+})
+
+const projectCardPropsSchema: z.ZodType<ProjectCardProps> = z.object({
+  data: projectCardDataSchema,
+  labels: projectCardLabelsSchema,
+  showTeam: z.boolean(),
+  href: z.string(),
+})
+
+registerComponent<ProjectCardProps>({
+  id: extensionPoints.hosts.projectCardComponent.componentId,
+  component: DefaultProjectCard,
+  metadata: {
+    module: 'staff',
+    description: 'Project card of the time-tracking projects gallery view.',
+    propsSchema: projectCardPropsSchema,
+  },
+})
+
+export function ProjectCard(props: ProjectCardProps) {
+  const Resolved = useRegisteredComponent<ProjectCardProps>(
+    extensionPoints.hosts.projectCardComponent.componentId,
+    DefaultProjectCard,
+  )
+  return <Resolved {...props} />
+}

package/src/modules/staff/lib/timesheets-projects-ui/ProjectsBulkActionsBar.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from 'react'
+import { AlertTriangle, FileText, Users, X } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+export type ProjectsBulkActionsLabels = {
+  selectedCount: string
+  report: string
+  assignMembers: string
+  clear: string
+}
+
+export type ProjectsBulkActionsBarProps = {
+  selectedCount: number
+  labels: ProjectsBulkActionsLabels
+  canReport: boolean
+  canAssignMembers: boolean
+  reportBlockedReason: string | null
+  isBusy?: boolean
+  onReport: () => void
+  onAssignMembers: () => void
+  onClear: () => void
+}
+
+/**
+ * Bulk actions live inline in the toolbar row (screen 3 note 3), never in a
+ * floating bar. "Report from selected" stays visible but disabled while the
+ * selection spans more than one customer or currency, with the reason spelled
+ * out next to it (screen 3 note 4) rather than failing silently on click.
+ */
+export function ProjectsBulkActionsBar({
+  selectedCount,
+  labels,
+  canReport,
+  canAssignMembers,
+  reportBlockedReason,
+  isBusy = false,
+  onReport,
+  onAssignMembers,
+  onClear,
+}: ProjectsBulkActionsBarProps) {
+  if (selectedCount === 0) return null
+
+  return (
+    <div className="flex flex-wrap items-center gap-2" data-testid="projects-bulk-actions">
+      <span className="text-sm text-muted-foreground">{labels.selectedCount}</span>
+      {canReport ? (
+        <Button
+          type="button"
+          variant="outline"
+          disabled={isBusy || reportBlockedReason !== null}
+          onClick={onReport}
+          data-testid="projects-bulk-report"
+        >
+          <FileText className="h-4 w-4 shrink-0" aria-hidden />
+          <span>{labels.report}</span>
+        </Button>
+      ) : null}
+      {canAssignMembers ? (
+        <Button
+          type="button"
+          variant="outline"
+          disabled={isBusy}
+          onClick={onAssignMembers}
+          data-testid="projects-bulk-assign-members"
+        >
+          <Users className="h-4 w-4 shrink-0" aria-hidden />
+          <span>{labels.assignMembers}</span>
+        </Button>
+      ) : null}
+      <Button type="button" variant="ghost" disabled={isBusy} onClick={onClear}>
+        <X className="h-4 w-4 shrink-0" aria-hidden />
+        <span>{labels.clear}</span>
+      </Button>
+      {canReport && reportBlockedReason ? (
+        <span
+          className="flex items-center gap-1.5 rounded-md border border-status-warning-border bg-status-warning-bg px-2 py-1 text-xs text-status-warning-text"
+          role="status"
+          data-testid="projects-bulk-report-blocked"
+        >
+          <AlertTriangle className="h-3.5 w-3.5 shrink-0" aria-hidden />
+          {reportBlockedReason}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+export default ProjectsBulkActionsBar