@open-mercato/core 0.6.4-develop.4217.1.c9aa050183 → 0.6.4-develop.4236.1.9fa6806b34

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

@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from 'react'
+
+export type AvatarMember = {
+  id: string
+  name: string
+  initials: string
+  avatarUrl?: string | null
+}
+
+export type ProjectMembersAvatarStackProps = {
+  members: AvatarMember[]
+  total: number
+  peopleCountLabel: string
+  className?: string
+}
+
+const AVATAR_PALETTE = [
+  'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-200',
+  'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200',
+  'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200',
+  'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-200',
+  'bg-violet-100 text-violet-800 dark:bg-violet-900/40 dark:text-violet-200',
+  'bg-cyan-100 text-cyan-800 dark:bg-cyan-900/40 dark:text-cyan-200',
+]
+
+function pickPalette(id: string): string {
+  let hash = 0
+  for (let i = 0; i < id.length; i++) {
+    hash = (hash * 31 + id.charCodeAt(i)) | 0
+  }
+  return AVATAR_PALETTE[Math.abs(hash) % AVATAR_PALETTE.length]
+}
+
+export function ProjectMembersAvatarStack({
+  members,
+  total,
+  peopleCountLabel,
+  className,
+}: ProjectMembersAvatarStackProps) {
+  const visible = members.slice(0, 4)
+  const overflow = Math.max(0, total - visible.length)
+
+  if (total === 0) {
+    return <span className={`text-xs text-muted-foreground ${className ?? ''}`}>—</span>
+  }
+
+  return (
+    <div className={`flex items-center gap-2 ${className ?? ''}`}>
+      <div className="flex -space-x-1.5">
+        {visible.map((member) => (
+          <span
+            key={member.id}
+            title={member.name}
+            className={`inline-flex h-6 w-6 items-center justify-center rounded-full border border-background text-[10px] font-semibold ${pickPalette(member.id)}`}
+          >
+            {member.initials}
+          </span>
+        ))}
+        {overflow > 0 ? (
+          <span
+            className="inline-flex h-6 w-6 items-center justify-center rounded-full border border-background bg-muted text-[10px] font-semibold text-foreground"
+            title={`+${overflow}`}
+          >
+            +{overflow}
+          </span>
+        ) : null}
+      </div>
+      <span className="text-xs text-muted-foreground">{peopleCountLabel}</span>
+    </div>
+  )
+}

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

@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from 'react'
+import { ArrowDownRight, ArrowUpRight, Minus } from 'lucide-react'
+
+type Delta = { current: number; previous: number; deltaPct: number | null }
+
+export type PmKpis = {
+  role: 'pm'
+  totals: { total: number; active: number; onHold: number; completed: number }
+  hoursWeek: Delta
+  hoursMonth: Delta
+  teamActive: { count: number }
+  assignedToMe: { total: number; active: number }
+}
+
+export type CollabKpis = {
+  role: 'collab'
+  myProjects: { total: number; active: number }
+  myHoursWeek: Delta
+  myHoursMonth: Delta
+}
+
+type KpiLabels = {
+  totalProjects: string
+  totalProjectsSub: (args: { active: number; onHold: number }) => string
+  hoursWeek: string
+  hoursWeekSub: string
+  assignedToMe: string
+  assignedToMeSub: (active: number) => string
+  hoursMonth: string
+  hoursMonthSub: string
+  teamActive: string
+  teamActiveSub: string
+  myProjects: string
+  myProjectsSub: (active: number) => string
+  myHoursWeek: string
+  myHoursMonth: string
+  deltaUp: (pct: number) => string
+  deltaDown: (pct: number) => string
+  deltaFlat: string
+  noPrevious: string
+}
+
+function DeltaBadge({ pct, labels }: { pct: number | null; labels: KpiLabels }) {
+  if (pct === null) {
+    return <span className="text-[11px] text-muted-foreground/70">{labels.noPrevious}</span>
+  }
+  if (pct > 0) {
+    return (
+      <span
+        className="inline-flex items-center gap-0.5 text-[11px] font-medium text-emerald-600 tabular-nums"
+        aria-label={labels.deltaUp(pct)}
+      >
+        <ArrowUpRight className="h-3 w-3" aria-hidden="true" />
+        {pct}%
+      </span>
+    )
+  }
+  if (pct < 0) {
+    return (
+      <span
+        className="inline-flex items-center gap-0.5 text-[11px] font-medium text-rose-600 tabular-nums"
+        aria-label={labels.deltaDown(Math.abs(pct))}
+      >
+        <ArrowDownRight className="h-3 w-3" aria-hidden="true" />
+        {Math.abs(pct)}%
+      </span>
+    )
+  }
+  return (
+    <span
+      className="inline-flex items-center gap-0.5 text-[11px] text-muted-foreground/70"
+      aria-label={labels.deltaFlat}
+    >
+      <Minus className="h-3 w-3" aria-hidden="true" />
+      0%
+    </span>
+  )
+}
+
+function KpiCard({
+  label,
+  value,
+  subtext,
+  delta,
+  labels,
+}: {
+  label: string
+  value: React.ReactNode
+  subtext?: string
+  delta?: Delta
+  labels: KpiLabels
+}) {
+  return (
+    <div className="flex flex-col gap-1 rounded-lg border border-border bg-card p-4">
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-[11px] uppercase tracking-wide text-muted-foreground">{label}</p>
+        {delta ? <DeltaBadge pct={delta.deltaPct} labels={labels} /> : null}
+      </div>
+      <p className="text-2xl font-semibold tabular-nums text-foreground">{value}</p>
+      {subtext ? <p className="text-xs text-muted-foreground">{subtext}</p> : null}
+    </div>
+  )
+}
+
+export type ProjectsKpiStripProps = {
+  kpis: PmKpis | CollabKpis | null
+  labels: KpiLabels
+  isLoading?: boolean
+}
+
+export function ProjectsKpiStrip({ kpis, labels, isLoading }: ProjectsKpiStripProps) {
+  if (isLoading || !kpis) {
+    return (
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-5">
+        {Array.from({ length: 5 }).map((_, idx) => (
+          <div key={idx} className="h-[88px] animate-pulse rounded-lg border border-border bg-muted/40" />
+        ))}
+      </div>
+    )
+  }
+
+  if (kpis.role === 'pm') {
+    return (
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-5">
+        <KpiCard
+          label={labels.totalProjects}
+          value={kpis.totals.total}
+          subtext={labels.totalProjectsSub({ active: kpis.totals.active, onHold: kpis.totals.onHold })}
+          labels={labels}
+        />
+        <KpiCard
+          label={labels.hoursWeek}
+          value={`${kpis.hoursWeek.current}h`}
+          subtext={labels.hoursWeekSub}
+          delta={kpis.hoursWeek}
+          labels={labels}
+        />
+        <KpiCard
+          label={labels.hoursMonth}
+          value={`${kpis.hoursMonth.current}h`}
+          subtext={labels.hoursMonthSub}
+          delta={kpis.hoursMonth}
+          labels={labels}
+        />
+        <KpiCard
+          label={labels.assignedToMe}
+          value={kpis.assignedToMe.total}
+          subtext={labels.assignedToMeSub(kpis.assignedToMe.active)}
+          labels={labels}
+        />
+        <KpiCard
+          label={labels.teamActive}
+          value={kpis.teamActive.count}
+          subtext={labels.teamActiveSub}
+          labels={labels}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+      <KpiCard
+        label={labels.myProjects}
+        value={kpis.myProjects.total}
+        subtext={labels.myProjectsSub(kpis.myProjects.active)}
+        labels={labels}
+      />
+      <KpiCard
+        label={labels.myHoursWeek}
+        value={`${kpis.myHoursWeek.current}h`}
+        delta={kpis.myHoursWeek}
+        labels={labels}
+      />
+      <KpiCard
+        label={labels.myHoursMonth}
+        value={`${kpis.myHoursMonth.current}h`}
+        delta={kpis.myHoursMonth}
+        labels={labels}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+export type SavedViewTab = {
+  id: string
+  label: string
+  count?: number
+}
+
+export type SavedViewTabsProps = {
+  tabs: SavedViewTab[]
+  activeId: string
+  onSelect: (id: string) => void
+  className?: string
+  ariaLabel?: string
+}
+
+export function SavedViewTabs({ tabs, activeId, onSelect, className, ariaLabel }: SavedViewTabsProps) {
+  return (
+    <div
+      role="tablist"
+      aria-label={ariaLabel ?? 'Saved views'}
+      className={`flex items-center gap-1 border-b border-border ${className ?? ''}`}
+    >
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeId
+        return (
+          <Button
+            key={tab.id}
+            type="button"
+            variant="ghost"
+            size="sm"
+            role="tab"
+            aria-selected={isActive}
+            className={`h-auto rounded-none px-3 py-2 text-sm hover:bg-transparent ${
+              isActive
+                ? 'border-b-2 border-foreground font-medium text-foreground'
+                : 'border-b-2 border-transparent text-muted-foreground hover:text-foreground'
+            }`}
+            onClick={() => onSelect(tab.id)}
+          >
+            {tab.label}
+            {typeof tab.count === 'number' ? (
+              <span className="ml-1.5 text-xs text-muted-foreground/70 tabular-nums">{tab.count}</span>
+            ) : null}
+          </Button>
+        )
+      })}
+    </div>
+  )
+}

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

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from 'react'
+import { LayoutGrid, List } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import type { ProjectsViewMode } from './useProjectsViewMode'
+
+export type ViewModeToggleProps = {
+  mode: ProjectsViewMode
+  onChange: (mode: ProjectsViewMode) => void
+  tableLabel: string
+  cardsLabel: string
+  className?: string
+  ariaLabel?: string
+}
+
+export function ViewModeToggle({
+  mode,
+  onChange,
+  tableLabel,
+  cardsLabel,
+  className,
+  ariaLabel,
+}: ViewModeToggleProps) {
+  return (
+    <div
+      role="group"
+      aria-label={ariaLabel ?? 'View mode'}
+      className={`inline-flex items-center rounded-md border border-border p-0.5 ${className ?? ''}`}
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        aria-pressed={mode === 'table'}
+        className={`h-auto gap-1.5 px-2.5 py-1 text-xs ${
+          mode === 'table'
+            ? 'bg-foreground text-background hover:bg-foreground'
+            : 'text-muted-foreground hover:bg-muted'
+        }`}
+        onClick={() => onChange('table')}
+      >
+        <List className="h-3.5 w-3.5" aria-hidden="true" />
+        {tableLabel}
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        aria-pressed={mode === 'cards'}
+        className={`h-auto gap-1.5 px-2.5 py-1 text-xs ${
+          mode === 'cards'
+            ? 'bg-foreground text-background hover:bg-foreground'
+            : 'text-muted-foreground hover:bg-muted'
+        }`}
+        onClick={() => onChange('cards')}
+      >
+        <LayoutGrid className="h-3.5 w-3.5" aria-hidden="true" />
+        {cardsLabel}
+      </Button>
+    </div>
+  )
+}

package/src/modules/staff/lib/timesheets-projects-ui/useProjectsViewMode.ts

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from 'react'
+
+export type ProjectsViewMode = 'table' | 'cards'
+
+const STORAGE_KEY_PREFIX = 'staff.timesheets.projects.viewMode'
+
+function storageKey(userKey: string | null | undefined): string {
+  return userKey ? `${STORAGE_KEY_PREFIX}:${userKey}` : STORAGE_KEY_PREFIX
+}
+
+function readStoredMode(userKey: string | null | undefined): ProjectsViewMode | null {
+  if (typeof window === 'undefined') return null
+  try {
+    const raw = window.localStorage.getItem(storageKey(userKey))
+    return raw === 'cards' || raw === 'table' ? raw : null
+  } catch {
+    return null
+  }
+}
+
+function writeStoredMode(userKey: string | null | undefined, mode: ProjectsViewMode): void {
+  if (typeof window === 'undefined') return
+  try {
+    window.localStorage.setItem(storageKey(userKey), mode)
+  } catch {
+    // ignore — quota errors etc. are non-critical
+  }
+}
+
+export function useProjectsViewMode({
+  userKey,
+  urlOverride,
+  fallback = 'table',
+}: {
+  userKey: string | null | undefined
+  urlOverride?: string | null
+  fallback?: ProjectsViewMode
+}): [ProjectsViewMode, (next: ProjectsViewMode) => void] {
+  const initial = React.useMemo<ProjectsViewMode>(() => {
+    if (urlOverride === 'cards' || urlOverride === 'table') return urlOverride
+    return readStoredMode(userKey) ?? fallback
+  }, [urlOverride, userKey, fallback])
+
+  const [mode, setMode] = React.useState<ProjectsViewMode>(initial)
+
+  React.useEffect(() => {
+    if (urlOverride === 'cards' || urlOverride === 'table') {
+      setMode(urlOverride)
+    }
+  }, [urlOverride])
+
+  const update = React.useCallback(
+    (next: ProjectsViewMode) => {
+      setMode(next)
+      writeStoredMode(userKey, next)
+    },
+    [userKey],
+  )
+
+  return [mode, update]
+}

package/src/modules/staff/lib/timesheets-ui/AddRowDropdown.tsx

@@ -0,0 +1,188 @@
+"use client"
+
+import * as React from 'react'
+import { createPortal } from 'react-dom'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Plus, Search } from 'lucide-react'
+import { ProjectColorDot } from './ProjectColorDot'
+
+type ProjectOption = {
+  id: string
+  name: string
+  code: string | null
+  color?: string | null
+}
+
+type AddRowDropdownProps = {
+  assignedProjects: ProjectOption[]
+  visibleProjectIds: Set<string>
+  canCreateProject: boolean
+  onAddProject: (project: ProjectOption) => void
+  onCreateProject: () => void
+}
+
+const DROPDOWN_WIDTH = 280
+const DROPDOWN_OFFSET = 4
+
+export function AddRowDropdown({
+  assignedProjects,
+  visibleProjectIds,
+  canCreateProject,
+  onAddProject,
+  onCreateProject,
+}: AddRowDropdownProps) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const [search, setSearch] = React.useState('')
+  const [position, setPosition] = React.useState<{ top: number; left: number } | null>(null)
+  const triggerRef = React.useRef<HTMLDivElement>(null)
+  const dropdownRef = React.useRef<HTMLDivElement>(null)
+  const searchInputRef = React.useRef<HTMLInputElement>(null)
+
+  const availableProjects = assignedProjects.filter(
+    (project) => !visibleProjectIds.has(project.id),
+  )
+
+  const filteredProjects = availableProjects.filter((project) =>
+    project.name.toLowerCase().includes(search.toLowerCase()),
+  )
+
+  React.useLayoutEffect(() => {
+    if (!open) return
+    const updatePosition = () => {
+      const node = triggerRef.current
+      if (!node) return
+      const rect = node.getBoundingClientRect()
+      const left = Math.max(8, Math.min(rect.left, window.innerWidth - DROPDOWN_WIDTH - 8))
+      setPosition({ top: rect.bottom + DROPDOWN_OFFSET, left })
+    }
+    updatePosition()
+    window.addEventListener('scroll', updatePosition, true)
+    window.addEventListener('resize', updatePosition)
+    return () => {
+      window.removeEventListener('scroll', updatePosition, true)
+      window.removeEventListener('resize', updatePosition)
+    }
+  }, [open])
+
+  React.useEffect(() => {
+    if (!open) return
+    function handleClickOutside(event: MouseEvent) {
+      const target = event.target as Node
+      if (
+        triggerRef.current && !triggerRef.current.contains(target) &&
+        dropdownRef.current && !dropdownRef.current.contains(target)
+      ) {
+        setOpen(false)
+        setSearch('')
+      }
+    }
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setOpen(false)
+        setSearch('')
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [open])
+
+  React.useEffect(() => {
+    if (open && searchInputRef.current) {
+      searchInputRef.current.focus()
+    }
+  }, [open])
+
+  function handleToggle() {
+    setOpen((prev) => !prev)
+    setSearch('')
+  }
+
+  function handleSelectProject(project: ProjectOption) {
+    onAddProject(project)
+    setOpen(false)
+    setSearch('')
+  }
+
+  function handleCreateProject() {
+    onCreateProject()
+    setOpen(false)
+    setSearch('')
+  }
+
+  const dropdown = open && position && typeof document !== 'undefined' ? createPortal(
+    <div
+      ref={dropdownRef}
+      className="fixed z-50 rounded-lg border bg-popover shadow-lg"
+      style={{ top: position.top, left: position.left, width: DROPDOWN_WIDTH }}
+    >
+      <div className="flex items-center border-b px-3">
+        <Search className="h-4 w-4 text-muted-foreground shrink-0" />
+        <input
+          ref={searchInputRef}
+          type="text"
+          className="w-full px-3 py-2 text-sm bg-transparent outline-none placeholder:text-muted-foreground"
+          placeholder={t('staff.timesheets.my.addRow.searchPlaceholder', 'Search by project')}
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+        />
+      </div>
+
+      <div className="max-h-[200px] overflow-y-auto">
+        {filteredProjects.length === 0 ? (
+          <div className="px-3 py-4 text-sm text-muted-foreground text-center">
+            {t('staff.timesheets.my.addRow.noProjects', 'No projects assigned')}
+          </div>
+        ) : (
+          filteredProjects.map((project) => (
+            <Button
+              key={project.id}
+              type="button"
+              variant="ghost"
+              className="w-full justify-start rounded-none px-3 py-2 text-sm cursor-pointer hover:bg-muted transition-colors"
+              onClick={() => handleSelectProject(project)}
+            >
+              <ProjectColorDot colorKey={project.color} projectName={project.name} size="sm" />
+              <span className="ml-1.5">{project.name}</span>
+            </Button>
+          ))
+        )}
+      </div>
+
+      {canCreateProject && (
+        <Button
+          type="button"
+          variant="ghost"
+          className="w-full justify-start rounded-none px-3 py-2 text-sm text-primary cursor-pointer hover:bg-muted border-t"
+          onClick={handleCreateProject}
+        >
+          <Plus className="h-4 w-4 mr-1" />
+          {t('staff.timesheets.my.addRow.createProject', 'Create a new project')}
+        </Button>
+      )}
+    </div>,
+    document.body,
+  ) : null
+
+  return (
+    <>
+      <div ref={triggerRef} className="inline-block">
+        <Button
+          type="button"
+          variant="ghost"
+          className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground cursor-pointer px-3 py-2"
+          onClick={handleToggle}
+        >
+          <Plus className="h-4 w-4" />
+          {t('staff.timesheets.my.addRow.trigger', 'Add row')}
+        </Button>
+      </div>
+      {dropdown}
+    </>
+  )
+}