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

package/src/modules/staff/lib/time-tracking-ui/TaskBoardScreen.tsx

@@ -0,0 +1,243 @@
+"use client"
+
+import * as React from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useQueryClient } from '@tanstack/react-query'
+import { LayoutGrid, List, Plus, SlidersHorizontal } from 'lucide-react'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { PageBody, PageHeader } from '@open-mercato/ui/backend/Page'
+import { useBackendChrome } from '@open-mercato/ui/backend/BackendChromeProvider'
+import { hasFeature } from '@open-mercato/shared/security/features'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { BOARD_QUERY_ROOT, useBoardSelf, useBoardStatuses } from './boardDirectory'
+import { countActiveBoardFilters } from './boardFilters'
+import { BoardFilterChips, AddBoardFilterPopover } from './BoardFilterChips'
+import { EMPTY_BOARD_SUMMARY, type BoardSummary } from './boardSummary'
+import { KanbanBoard, MANAGE_TASKS_FEATURE } from './KanbanBoard'
+import { formatBoardMinutes } from './kanbanBoardData'
+import { NewTaskDialog } from './NewTaskDialog'
+import { TaskDrawer } from './TaskDrawer'
+import { TaskListView } from './TaskListView'
+import { useBoardFilters, useBoardViewMode } from './useBoardFilters'
+
+/**
+ * Screen 6 in one piece — the page head, the filter chip row and whichever view is
+ * selected.
+ *
+ * Both board routes (the module-level `?projectId=` one and the per-project one) render
+ * this, so the chrome cannot drift between them. The head's subtitle is reported upward
+ * by the active view rather than fetched again here: the count and the hours then always
+ * describe the rows on screen, filters included.
+ */
+export function TaskBoardScreen({
+  timeProjectId,
+  projectName,
+  headerActions,
+}: {
+  timeProjectId: string
+  projectName?: string | null
+  /** Route-specific controls (the project picker, "back to project") placed before the switch. */
+  headerActions?: React.ReactNode
+}): React.ReactElement {
+  const t = useT()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const queryClient = useQueryClient()
+  const { payload } = useBackendChrome()
+  const canManageTasks = hasFeature(payload?.grantedFeatures, MANAGE_TASKS_FEATURE)
+
+  const selfQuery = useBoardSelf()
+  const statusesQuery = useBoardStatuses(timeProjectId)
+  const statuses = React.useMemo(() => statusesQuery.data ?? [], [statusesQuery.data])
+
+  const [filters, setFilters] = useBoardFilters({ timeProjectId })
+  const [view, setView] = useBoardViewMode()
+  const [summary, setSummary] = React.useState<BoardSummary>(EMPTY_BOARD_SUMMARY)
+  const [newTaskOpen, setNewTaskOpen] = React.useState(false)
+
+  const handleSummaryChange = React.useCallback((next: BoardSummary) => {
+    setSummary((previous) =>
+      previous.taskCount === next.taskCount && previous.loggedMinutes === next.loggedMinutes
+        ? previous
+        : next,
+    )
+  }, [])
+
+  const openTask = React.useCallback(
+    (taskId: string) => {
+      const params = new URLSearchParams(searchParams?.toString() ?? '')
+      params.set('task', taskId)
+      router.push(`?${params.toString()}`, { scroll: false })
+    },
+    [router, searchParams],
+  )
+
+  const closeTask = React.useCallback(() => {
+    const params = new URLSearchParams(searchParams?.toString() ?? '')
+    params.delete('task')
+    params.delete('panel')
+    const query = params.toString()
+    router.push(query.length > 0 ? `?${query}` : '?', { scroll: false })
+  }, [router, searchParams])
+
+  const invalidateTasks = React.useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: [...BOARD_QUERY_ROOT] }).catch(() => {})
+  }, [queryClient])
+
+  const description = React.useMemo(() => {
+    const parts = [
+      projectName ?? null,
+      t('staff.time_tracking.board.summary.tasks', '{count} tasks', { count: summary.taskCount }),
+      t('staff.time_tracking.board.summary.logged', '{hours} logged', {
+        hours: formatBoardMinutes(summary.loggedMinutes),
+      }),
+    ].filter((part): part is string => !!part && part.length > 0)
+    return parts.join(' · ')
+  }, [projectName, summary, t])
+
+  const activeFilterCount = countActiveBoardFilters(filters)
+  const boardLabel = t('staff.time_tracking.board.view.board', 'Board')
+  const listLabel = t('staff.time_tracking.board.view.list', 'List')
+
+  const drawerTaskId = searchParams?.get('task') ?? null
+  const drawerPanel = searchParams?.get('panel') ?? null
+
+  return (
+    <>
+      <PageHeader
+        title={t('staff.time_tracking.nav.tasks', 'Tasks')}
+        description={description}
+        actions={
+          <>
+            {headerActions}
+            <div
+              role="group"
+              aria-label={t('staff.time_tracking.board.view.label', 'View')}
+              className="inline-flex items-center rounded-md border border-border p-0.5"
+            >
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                aria-pressed={view === 'board'}
+                data-testid="board-view-board"
+                className={`h-auto gap-1.5 px-2.5 py-1 text-xs ${
+                  view === 'board'
+                    ? 'bg-foreground text-background hover:bg-foreground'
+                    : 'text-muted-foreground hover:bg-muted'
+                }`}
+                onClick={() => setView('board')}
+              >
+                <LayoutGrid className="size-3.5" aria-hidden="true" />
+                {boardLabel}
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                aria-pressed={view === 'list'}
+                data-testid="board-view-list"
+                className={`h-auto gap-1.5 px-2.5 py-1 text-xs ${
+                  view === 'list'
+                    ? 'bg-foreground text-background hover:bg-foreground'
+                    : 'text-muted-foreground hover:bg-muted'
+                }`}
+                onClick={() => setView('list')}
+              >
+                <List className="size-3.5" aria-hidden="true" />
+                {listLabel}
+              </Button>
+            </div>
+
+            <AddBoardFilterPopover
+              filters={filters}
+              onChange={setFilters}
+              self={selfQuery.data ?? null}
+              statuses={statuses}
+              testId="board-filters-button"
+              trigger={
+                <Button type="button" variant="outline" size="sm" data-testid="board-filters-button">
+                  <SlidersHorizontal className="size-3.5" aria-hidden="true" />
+                  {t('staff.time_tracking.board.filters.cta', 'Filters')}
+                  {activeFilterCount > 0 ? (
+                    <Badge variant="neutral" size="sm" data-testid="board-filters-count">
+                      {activeFilterCount}
+                    </Badge>
+                  ) : null}
+                </Button>
+              }
+            />
+
+            {canManageTasks ? (
+              <Button
+                type="button"
+                size="sm"
+                onClick={() => setNewTaskOpen(true)}
+                data-testid="board-new-task"
+              >
+                <Plus className="size-3.5" aria-hidden="true" />
+                {t('staff.time_tracking.board.newTask.cta', 'New task')}
+              </Button>
+            ) : null}
+          </>
+        }
+      />
+
+      <PageBody>
+        <BoardFilterChips
+          filters={filters}
+          onChange={setFilters}
+          self={selfQuery.data ?? null}
+          statuses={statuses}
+        />
+
+        {view === 'board' ? (
+          <KanbanBoard
+            timeProjectId={timeProjectId}
+            projectName={projectName ?? null}
+            filters={filters}
+            onSummaryChange={handleSummaryChange}
+          />
+        ) : (
+          <TaskListView
+            timeProjectId={timeProjectId}
+            filters={filters}
+            statuses={statuses}
+            onOpenTask={openTask}
+            onSummaryChange={handleSummaryChange}
+          />
+        )}
+      </PageBody>
+
+      {canManageTasks ? (
+        <NewTaskDialog
+          open={newTaskOpen}
+          onOpenChange={setNewTaskOpen}
+          timeProjectId={timeProjectId}
+          statuses={statuses}
+          assigneeStaffMemberId={selfQuery.data?.id ?? null}
+          onCreated={(taskId) => {
+            invalidateTasks()
+            if (taskId) openTask(taskId)
+          }}
+        />
+      ) : null}
+
+      {view === 'list' && drawerTaskId ? (
+        <TaskDrawer
+          taskId={drawerTaskId}
+          open
+          onOpenChange={(next) => {
+            if (!next) closeTask()
+          }}
+          projectName={projectName ?? null}
+          focusPanel={drawerPanel}
+          onChanged={invalidateTasks}
+        />
+      ) : null}
+    </>
+  )
+}
+
+export default TaskBoardScreen

package/src/modules/staff/lib/time-tracking-ui/TaskCommentThread.tsx

@@ -0,0 +1,137 @@
+"use client"
+
+import * as React from 'react'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Kbd } from '@open-mercato/ui/primitives/kbd'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { ErrorMessage, LoadingMessage } from '@open-mercato/ui/backend/detail'
+import { formatDateTime } from '@open-mercato/shared/lib/time'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { DrawerComment } from './taskDrawerData'
+
+export type TaskCommentThreadProps = {
+  comments: readonly DrawerComment[]
+  loading: boolean
+  loadError: boolean
+  posting: boolean
+  canComment: boolean
+  /** Resolves `true` when the comment was written, which is when the box clears. */
+  onPost: (body: string) => Promise<boolean>
+}
+
+/**
+ * The comment thread of screen 7 (US-C4).
+ *
+ * Deliberately not `NotesSection`: that component is a detail-page *tab* —
+ * markdown toolbar, appearance dialog, deal linking, sort control, ~1400 lines —
+ * and screen 7 asks for a conversation strip with a two-line composer. The API is
+ * task-scoped (`/tasks/{id}/comments`) rather than the shared notes adapter, so
+ * reusing it would mean adapting a large surface to hide most of it.
+ *
+ * Oldest first, because the drawer is read top to bottom; ⌘↵ posts, which is the
+ * shortcut the mockup prints under the box.
+ */
+export function TaskCommentThread({
+  comments,
+  loading,
+  loadError,
+  posting,
+  canComment,
+  onPost,
+}: TaskCommentThreadProps) {
+  const t = useT()
+  const [draft, setDraft] = React.useState('')
+
+  const submit = React.useCallback(async () => {
+    const body = draft.trim()
+    if (!body || posting || !canComment) return
+    const saved = await onPost(body)
+    if (saved) setDraft('')
+  }, [canComment, draft, onPost, posting])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (event.key !== 'Enter' || !(event.metaKey || event.ctrlKey)) return
+      event.preventDefault()
+      // Stops the drawer-level handler from seeing the same chord twice.
+      event.stopPropagation()
+      void submit()
+    },
+    [submit],
+  )
+
+  return (
+    <section className="flex flex-col gap-3" data-testid="task-drawer-comments">
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+        {t('staff.time_tracking.taskDrawer.comments.title', 'Comments ({count})', { count: comments.length })}
+      </h3>
+
+      {loading ? (
+        <LoadingMessage label={t('staff.time_tracking.taskDrawer.comments.loading', 'Loading the thread…')} />
+      ) : loadError ? (
+        <ErrorMessage label={t('staff.time_tracking.taskDrawer.comments.loadError', 'Could not load the comments.')} />
+      ) : comments.length === 0 ? (
+        <p className="text-xs text-muted-foreground">
+          {t('staff.time_tracking.taskDrawer.comments.empty', 'No comments yet.')}
+        </p>
+      ) : (
+        <ul className="flex flex-col gap-3">
+          {comments.map((comment) => {
+            const author =
+              comment.authorName
+              ?? comment.authorEmail
+              ?? t('staff.time_tracking.taskDrawer.comments.unknownAuthor', 'Unknown author')
+            return (
+              <li key={comment.id} className="flex items-start gap-2.5" data-comment-id={comment.id}>
+                <Avatar label={author} size="sm" />
+                <div className="flex min-w-0 flex-1 flex-col gap-1">
+                  <div className="flex flex-wrap items-baseline gap-2">
+                    <span className="text-sm font-medium text-foreground">{author}</span>
+                    <span className="text-xs text-muted-foreground">{formatDateTime(comment.createdAt) ?? ''}</span>
+                  </div>
+                  <p className="whitespace-pre-wrap break-words text-sm leading-normal text-foreground">
+                    {comment.body}
+                  </p>
+                </div>
+              </li>
+            )
+          })}
+        </ul>
+      )}
+
+      {canComment ? (
+        <div className="flex flex-col gap-2">
+          <Textarea
+            rows={2}
+            value={draft}
+            disabled={posting}
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={t('staff.time_tracking.taskDrawer.comments.placeholder', 'Write a comment…')}
+            aria-label={t('staff.time_tracking.taskDrawer.comments.placeholder', 'Write a comment…')}
+            data-testid="task-drawer-comment-input"
+          />
+          <div className="flex items-center gap-3">
+            <Button
+              type="button"
+              size="sm"
+              disabled={posting || draft.trim().length === 0}
+              onClick={() => { void submit() }}
+              data-testid="task-drawer-comment-submit"
+            >
+              {t('staff.time_tracking.taskDrawer.comments.submit', 'Comment')}
+            </Button>
+            <span className="flex items-center gap-1 text-xs text-muted-foreground">
+              <Kbd>⌘</Kbd>
+              <Kbd>↵</Kbd>
+              {t('staff.time_tracking.taskDrawer.comments.hint', 'posts')}
+            </span>
+          </div>
+        </div>
+      ) : null}
+    </section>
+  )
+}
+
+export default TaskCommentThread