@open-mercato/core 0.10.1-develop.7717.1.2befe9c634 → 0.10.1-develop.7721.1.b5c4a00a68

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

@@ -11,12 +11,14 @@ import {
   useStaffMemberDirectory,
   useTagDirectory,
   useTagLabels,
+  useUnassignedTaskCount,
   type BoardSelf,
 } from './boardDirectory'
 import {
   countActiveBoardFilters,
   withAssigneeFilter,
   withStatusFilter,
+  withUnassignedFilter,
   withTagFilter,
   withoutTagFilter,
   type BoardFilters,
@@ -43,6 +45,7 @@ type BoardFilterSurfaceProps = {
   onChange: (next: BoardFilters) => void
   self: BoardSelf | null
   statuses: readonly BoardStatus[]
+  timeProjectId?: string | null
 }
 
 function chipClassName(dashed: boolean): string {
@@ -122,6 +125,7 @@ export function AddBoardFilterPopover({
   onChange,
   self,
   statuses,
+  timeProjectId,
   trigger,
   testId = 'board-filter-add',
 }: BoardFilterSurfaceProps & {
@@ -140,6 +144,11 @@ export function AddBoardFilterPopover({
   )
 
   const assignedToMeLabel = t('staff.time_tracking.board.filters.assignedToMe', 'Assigned to me')
+  const unassignedCount = useUnassignedTaskCount(timeProjectId)
+  const unassignedLabel =
+    typeof unassignedCount.data === 'number'
+      ? t('staff.time_tracking.board.filters.unassignedWithCount', 'Unassigned ({count})', { count: unassignedCount.data })
+      : t('staff.time_tracking.board.filters.unassigned', 'Unassigned')
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -164,6 +173,16 @@ export function AddBoardFilterPopover({
             />
           ) : null}
 
+          <PickerRow
+            label={unassignedLabel}
+            selected={filters.unassigned}
+            testId="board-filter-unassigned"
+            onSelect={() => {
+              onChange(withUnassignedFilter(filters, !filters.unassigned))
+              setOpen(false)
+            }}
+          />
+
           {otherMembers.length > 0 ? (
             <div className="mt-2 flex flex-col gap-0.5">
               <span className="px-2.5 py-1 text-xs font-semibold uppercase leading-normal tracking-wide text-muted-foreground">
@@ -256,8 +275,10 @@ export function BoardFilterChips({
   onChange,
   self,
   statuses,
+  timeProjectId,
 }: BoardFilterSurfaceProps): React.ReactElement {
   const t = useT()
+  const unassignedCount = useUnassignedTaskCount(filters.unassigned ? timeProjectId : null)
 
   const assigneeIds = React.useMemo(
     () =>
@@ -300,6 +321,19 @@ export function BoardFilterChips({
         />
       ) : null}
 
+      {filters.unassigned ? (
+        <FilterChip
+          label={
+            typeof unassignedCount.data === 'number'
+              ? t('staff.time_tracking.board.filters.unassignedWithCount', 'Unassigned ({count})', { count: unassignedCount.data })
+              : t('staff.time_tracking.board.filters.unassigned', 'Unassigned')
+          }
+          removeLabel={removeLabel(t('staff.time_tracking.board.filters.unassigned', 'Unassigned'))}
+          testId="board-filter-chip-unassigned"
+          onRemove={() => onChange(withUnassignedFilter(filters, false))}
+        />
+      ) : null}
+
       {activeStatus ? (
         <FilterChip
           label={activeStatus.name}
@@ -327,6 +361,7 @@ export function BoardFilterChips({
         onChange={onChange}
         self={self}
         statuses={statuses}
+        timeProjectId={timeProjectId}
         trigger={
           <Button
             type="button"
@@ -346,7 +381,7 @@ export function BoardFilterChips({
           type="button"
           variant="link"
           size="2xs"
-          onClick={() => onChange({ assigneeStaffMemberId: null, taskStatusId: null, tagIds: [] })}
+          onClick={() => onChange({ assigneeStaffMemberId: null, taskStatusId: null, tagIds: [], unassigned: false })}
           data-testid="board-filter-clear"
           className="h-auto px-1 text-xs leading-normal text-muted-foreground hover:text-foreground"
         >

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

@@ -71,6 +71,7 @@ import {
   type BoardApiRow,
   type BoardTask,
 } from './kanbanBoardData'
+import { SUPPORT_ACTIVITY_EVENT } from './supportTicketData'
 
 const logger = createLogger('staff').child({ component: 'KanbanBoard' })
 
@@ -81,6 +82,7 @@ export const CREATE_MUTATION_CONTEXT_ID = 'staff.time_tracking.board.create'
 export const MANAGE_COLUMNS_FEATURE = 'staff.timesheets.projects.manage'
 export const MANAGE_TASKS_FEATURE = 'staff.timesheets.tasks.manage'
 export const TASK_STATUS_CHANGED_EVENT = 'staff.timesheets.time_task.status_changed'
+export const TASK_ASSIGNEE_CHANGED_EVENT = 'staff.timesheets.time_task.assignee_changed'
 
 /** Window a locally-originated move stays "mine" for, so a lost SSE cannot wedge the filter. */
 const OWN_MOVE_ECHO_TTL_MS = 15_000
@@ -364,6 +366,10 @@ export function KanbanBoard({
     queryClient.invalidateQueries({ queryKey: [...BOARD_QUERY_ROOT, 'children'] }).catch(() => {})
   }, [queryClient])
 
+  const invalidateUnassignedCount = React.useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: [...BOARD_QUERY_ROOT, 'unassigned-count'] }).catch(() => {})
+  }, [queryClient])
+
   const invalidateStatuses = React.useCallback(() => {
     queryClient.invalidateQueries({ queryKey: [...BOARD_QUERY_ROOT, 'statuses'] }).catch(() => {})
   }, [queryClient])
@@ -406,6 +412,30 @@ export function KanbanBoard({
     [consumeOwnMove, invalidateBoard, timeProjectId],
   )
 
+  useAppEvent(
+    TASK_ASSIGNEE_CHANGED_EVENT,
+    (event) => {
+      const eventPayload = event.payload as Record<string, unknown> | null | undefined
+      const projectId = typeof eventPayload?.timeProjectId === 'string' ? eventPayload.timeProjectId : null
+      if (projectId && projectId !== timeProjectId) return
+      invalidateBoard()
+      invalidateUnassignedCount()
+    },
+    [invalidateBoard, invalidateUnassignedCount, timeProjectId],
+  )
+
+  useAppEvent(
+    SUPPORT_ACTIVITY_EVENT,
+    (event) => {
+      const eventPayload = event.payload as Record<string, unknown> | null | undefined
+      const projectId = typeof eventPayload?.projectId === 'string' ? eventPayload.projectId : null
+      if (projectId && projectId !== timeProjectId) return
+      invalidateBoard()
+      invalidateUnassignedCount()
+    },
+    [invalidateBoard, invalidateUnassignedCount, timeProjectId],
+  )
+
   const setTaskPending = React.useCallback((taskId: string, pending: boolean) => {
     setPendingTaskIds((previous) => {
       const next = new Set(previous)

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

@@ -227,6 +227,15 @@ function KanbanCardImpl({
     >
       <div className="text-sm font-semibold leading-normal text-foreground">{task.title}</div>
 
+      {task.supportReference ? (
+        <div className="flex flex-wrap items-center gap-1" data-testid="task-card-support">
+          <Badge variant="brand" size="sm">
+            {t('staff.time_tracking.board.card.customerRequest', 'Customer request')}
+          </Badge>
+          <span className="text-xs font-medium text-muted-foreground">{task.supportReference}</span>
+        </div>
+      ) : null}
+
       {tags.length > 0 ? (
         <div className="flex flex-wrap gap-1">
           {tags.map((tag) => (

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

@@ -8,9 +8,21 @@ import { Avatar } from '@open-mercato/ui/primitives/avatar'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Label } from '@open-mercato/ui/primitives/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
 import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
 import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { ErrorMessage } from '@open-mercato/ui/backend/detail'
+import { resolveGraceDays } from './projectTeamAssignment'
+import {
+  DEFAULT_ASSIGNEE_PAGE_SIZE,
+  chunkIds,
+  classifyDefaultAssigneeCandidates,
+  collectProjectMemberships,
+  readProjectMembershipPage,
+  resolveSelectedDefaultAssignee,
+  type ProjectMemberRow,
+} from './projectDefaultAssignee'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
 
@@ -122,12 +134,7 @@ export function ProjectBudgetSection({
   )
 }
 
-type ProjectMemberRow = {
-  id?: unknown
-  staffMemberId?: unknown
-  staff_member_id?: unknown
-  status?: unknown
-}
+export { isUsableDefaultAssigneeMembership } from './projectDefaultAssignee'
 
 type TeamMemberRow = {
   id?: unknown
@@ -321,3 +328,175 @@ export function ProjectRoundingNotice() {
 
 /** Exported for unit tests only. */
 export const __testing = { memberLabel }
+
+const NO_DEFAULT_ASSIGNEE = '__none__'
+
+export type ProjectDefaultAssigneeFieldProps = {
+  projectId: string | null
+  value: string | null
+  onChange: (value: string | null) => void
+  disabled?: boolean
+}
+
+type DefaultAssigneeOption = { id: string; label: string; active: boolean }
+
+/**
+ * The project's default assignee for customer portal tickets. Only active project
+ * members are offered; a stored default whose membership has since gone inactive or
+ * been removed stays visible with a warning, because new tickets then fall to the
+ * project's assigners instead of failing.
+ */
+export function ProjectDefaultAssigneeField({ projectId, value, onChange, disabled }: ProjectDefaultAssigneeFieldProps) {
+  const t = useT()
+  const [options, setOptions] = React.useState<DefaultAssigneeOption[]>([])
+  const [loadState, setLoadState] = React.useState<'loading' | 'loaded' | 'failed'>('loading')
+  const [reloadToken, setReloadToken] = React.useState(0)
+  const [truncated, setTruncated] = React.useState(false)
+  const [extraLabels, setExtraLabels] = React.useState<Map<string, string>>(new Map())
+  const valueRef = React.useRef(value)
+  valueRef.current = value
+
+  React.useEffect(() => {
+    if (!projectId) {
+      setOptions([])
+      setTruncated(false)
+      setExtraLabels(new Map())
+      setLoadState('loaded')
+      return
+    }
+    let cancelled = false
+    setLoadState('loading')
+    async function load() {
+      try {
+        const [collection, settingsRes] = await Promise.all([
+          collectProjectMemberships(async (page) => {
+            const membersRes = await apiCall<{ items?: unknown; totalPages?: unknown }>(
+              `/api/staff/timesheets/time-projects/${projectId}/employees?page=${page}&pageSize=${DEFAULT_ASSIGNEE_PAGE_SIZE}`,
+            )
+            return readProjectMembershipPage(membersRes)
+          }),
+          apiCall<{ access?: { assignmentGraceDays?: unknown } | null }>('/api/staff/timesheets/settings'),
+        ])
+        const graceDays = resolveGraceDays(settingsRes.ok ? settingsRes.result?.access?.assignmentGraceDays : null)
+        const candidates = classifyDefaultAssigneeCandidates(collection.rows, graceDays)
+        if (!cancelled) setTruncated(collection.truncated)
+        const selectedId = valueRef.current
+        const labelIds = Array.from(new Set([
+          ...candidates.map((candidate) => candidate.staffMemberId),
+          ...(selectedId ? [selectedId] : []),
+        ]))
+        if (labelIds.length === 0) {
+          if (!cancelled) {
+            setOptions([])
+            setExtraLabels(new Map())
+            setLoadState('loaded')
+          }
+          return
+        }
+        const staffResults = await Promise.all(
+          chunkIds(labelIds).map((ids) =>
+            apiCall<{ items?: TeamMemberRow[] }>(
+              `/api/staff/team-members?ids=${ids.join(',')}&pageSize=${DEFAULT_ASSIGNEE_PAGE_SIZE}`,
+            ),
+          ),
+        )
+        const staffRows = staffResults.flatMap((staffRes) => (Array.isArray(staffRes.result?.items) ? staffRes.result.items : []))
+        const labels = new Map(
+          staffRows
+            .map((row) => [readString(row.id), memberLabel(row)] as const)
+            .filter((entry): entry is readonly [string, string] => entry[0] !== null),
+        )
+        if (!cancelled) {
+          setOptions(candidates.map((candidate) => ({
+            id: candidate.staffMemberId,
+            label: labels.get(candidate.staffMemberId) || candidate.staffMemberId,
+            active: candidate.active,
+          })))
+          setExtraLabels(labels)
+          setLoadState('loaded')
+        }
+      } catch {
+        if (!cancelled) setLoadState('failed')
+      }
+    }
+    void load()
+    return () => { cancelled = true }
+  }, [projectId, reloadToken])
+
+  const retryLoad = React.useCallback(() => setReloadToken((token) => token + 1), [])
+
+  const selection = resolveSelectedDefaultAssignee(
+    options.map((option) => ({ staffMemberId: option.id, active: option.active })),
+    value,
+    truncated,
+  )
+  const selected = value ? options.find((option) => option.id === value) ?? null : null
+  const selectedLabel = selected?.label ?? (value ? extraLabels.get(value) || value : null)
+  const loadFailed = loadState === 'failed'
+  const activeOptions = loadFailed ? [] : options.filter((option) => option.active)
+  const showWarning = loadState === 'loaded' && selection.unusable
+
+  return (
+    <div className="flex flex-col gap-2" data-testid="project-default-assignee">
+      <Label htmlFor="project-default-assignee-select">
+        {t('staff.time_tracking.assigners.defaultAssignee', 'Default assignee for portal tickets')}
+      </Label>
+      <Select
+        value={value ?? NO_DEFAULT_ASSIGNEE}
+        disabled={disabled || !projectId}
+        onValueChange={(next) => onChange(next === NO_DEFAULT_ASSIGNEE ? null : next)}
+      >
+        <SelectTrigger id="project-default-assignee-select" data-testid="project-default-assignee-select">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value={NO_DEFAULT_ASSIGNEE}>
+            {t('staff.time_tracking.assigners.defaultAssigneeNone', 'No default assignee')}
+          </SelectItem>
+          {activeOptions.map((option) => (
+            <SelectItem key={option.id} value={option.id}>
+              {option.label}
+            </SelectItem>
+          ))}
+          {value && (loadFailed || !selected || !selected.active) ? (
+            <SelectItem value={value}>{selectedLabel ?? value}</SelectItem>
+          ) : null}
+        </SelectContent>
+      </Select>
+      <p className="text-xs text-muted-foreground">
+        {t(
+          'staff.time_tracking.assigners.defaultAssigneeHelp',
+          'New customer portal tickets routed to this project are assigned to this member. Tasks created on the board stay assigned to their creator.',
+        )}
+      </p>
+      {loadFailed ? (
+        <ErrorMessage
+          label={t(
+            'staff.time_tracking.assigners.defaultAssigneeLoadFailed',
+            'Could not load the project members, so the default assignee cannot be checked right now.',
+          )}
+          action={(
+            <Button type="button" variant="outline" size="sm" onClick={retryLoad} data-testid="project-default-assignee-retry">
+              {t('staff.time_tracking.assigners.defaultAssigneeRetry', 'Retry')}
+            </Button>
+          )}
+        />
+      ) : null}
+      {showWarning ? (
+        <Alert status="warning">
+          <AlertDescription>
+            {t(
+              'staff.time_tracking.assigners.defaultAssigneeInactive',
+              'This member is no longer an active project member. New tickets will be left unassigned and the assigners notified.',
+            )}
+          </AlertDescription>
+        </Alert>
+      ) : null}
+      {!projectId ? (
+        <p className="text-xs text-muted-foreground">
+          {t('staff.time_tracking.assigners.defaultAssigneeAfterCreate', 'Save the project and add members to choose a default assignee.')}
+        </p>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,188 @@
+"use client"
+
+import * as React from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { Download, Paperclip } from 'lucide-react'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { ErrorMessage, LoadingMessage } from '@open-mercato/ui/backend/detail'
+import { useBackendChrome } from '@open-mercato/ui/backend/BackendChromeProvider'
+import { hasFeature } from '@open-mercato/shared/security/features'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
+import { TASK_DRAWER_QUERY_ROOT } from './taskDrawerData'
+
+const ENTITY_ID = 'staff:staff_time_task'
+const CUSTOMER_VISIBLE_TAG = 'customer-visible'
+const CUSTOMER_UPLOAD_PREFIX = 'customer-upload:'
+const MUTATION_CONTEXT_ID = 'staff.task_drawer.support_attachments'
+const ATTACHMENTS_MANAGE_FEATURE = 'attachments.manage'
+
+type StaffAttachment = {
+  id: string
+  url: string
+  fileName: string
+  fileSize: number
+  tags?: string[]
+}
+
+type SupportAttachmentsSectionProps = {
+  taskId: string
+}
+
+function formatSize(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return '0 B'
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+/**
+ * Files on a portal ticket. Customer uploads and files staff chose to share carry
+ * the `customer-visible` tag and are the only ones the portal lists; everything
+ * else stays internal. "Share with customer" is unchecked by default.
+ */
+export function SupportAttachmentsSection({ taskId }: SupportAttachmentsSectionProps) {
+  const t = useT()
+  const { runMutation, retryLastMutation } = useGuardedMutation<Record<string, unknown>>({
+    contextId: MUTATION_CONTEXT_ID,
+    blockedMessage: t('staff.support.attachments.uploadFailed', 'Could not upload the file.'),
+  })
+  const { payload } = useBackendChrome()
+  const canUpload = hasFeature(payload?.grantedFeatures, ATTACHMENTS_MANAGE_FEATURE)
+  const queryClient = useQueryClient()
+  const scopeVersion = useOrganizationScopeVersion()
+  const [uploading, setUploading] = React.useState(false)
+  const [share, setShare] = React.useState(false)
+  const inputRef = React.useRef<HTMLInputElement | null>(null)
+
+  const attachmentsQueryKey = React.useMemo(
+    () => [...TASK_DRAWER_QUERY_ROOT, 'attachments', `scope:${scopeVersion}`, taskId],
+    [scopeVersion, taskId],
+  )
+  const attachmentsQuery = useQuery<StaffAttachment[]>({
+    queryKey: attachmentsQueryKey,
+    enabled: taskId.length > 0,
+    queryFn: async () => {
+      const response = await apiCall<{ items?: StaffAttachment[] }>(
+        `/api/attachments?entityId=${encodeURIComponent(ENTITY_ID)}&recordId=${encodeURIComponent(taskId)}`,
+      )
+      if (!response.ok) throw new Error('[internal] attachments request failed')
+      return response.result?.items ?? []
+    },
+  })
+  const items = attachmentsQuery.data ?? []
+
+  const refreshAttachments = React.useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey: attachmentsQueryKey })
+  }, [attachmentsQueryKey, queryClient])
+
+  const upload = React.useCallback(async (list: FileList | null) => {
+    if (!list || !list.length || !canUpload) return
+    setUploading(true)
+    try {
+      for (const file of Array.from(list)) {
+        const form = new FormData()
+        form.set('entityId', ENTITY_ID)
+        form.set('recordId', taskId)
+        form.set('file', file)
+        if (share) form.set('tags', JSON.stringify([CUSTOMER_VISIBLE_TAG]))
+        const result = await runMutation({
+          operation: () => apiCall('/api/attachments', { method: 'POST', body: form }),
+          // Like the rest of the task drawer, an upload carries no record-lock
+          // resource: it adds a row rather than editing one.
+          context: {
+            formId: `${MUTATION_CONTEXT_ID}:${taskId}`,
+            retryLastMutation,
+          },
+          mutationPayload: { taskId, fileName: file.name, shared: share },
+        })
+        if (!result.ok) flash(t('staff.support.attachments.uploadFailed', 'Could not upload the file.'), 'error')
+      }
+      await refreshAttachments()
+    } catch {
+      flash(t('staff.support.attachments.uploadFailed', 'Could not upload the file.'), 'error')
+    } finally {
+      setUploading(false)
+      if (inputRef.current) inputRef.current.value = ''
+    }
+  }, [canUpload, refreshAttachments, retryLastMutation, runMutation, share, t, taskId])
+
+  return (
+    <section className="space-y-2" data-testid="support-attachments-section">
+      <div className="flex items-center justify-between gap-2">
+        <h3 className="text-sm font-semibold text-foreground">{t('staff.support.attachments.title', 'Ticket files')}</h3>
+        {canUpload ? (
+          <div className="flex items-center gap-3">
+            <label className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Checkbox
+                checked={share}
+                onCheckedChange={(value) => setShare(value === true)}
+                aria-label={t('staff.support.attachments.shareWithCustomer', 'Share with customer')}
+              />
+              {t('staff.support.attachments.shareWithCustomer', 'Share with customer')}
+            </label>
+            <input
+              ref={inputRef}
+              type="file"
+              multiple
+              className="sr-only"
+              data-testid="support-attachments-input"
+              onChange={(event) => void upload(event.target.files)}
+            />
+            <Button type="button" variant="outline" size="sm" disabled={uploading} onClick={() => inputRef.current?.click()}>
+              {uploading ? <Spinner className="mr-2 h-4 w-4" /> : <Paperclip className="mr-2 h-4 w-4" />}
+              {t('staff.support.attachments.upload', 'Upload')}
+            </Button>
+          </div>
+        ) : null}
+      </div>
+      {attachmentsQuery.isLoading ? (
+        <LoadingMessage label={t('staff.support.attachments.loading', 'Loading files…')} />
+      ) : attachmentsQuery.isError ? (
+        <ErrorMessage
+          label={t('staff.support.attachments.loadFailed', 'Could not load the ticket files.')}
+          action={(
+            <Button type="button" variant="outline" size="sm" onClick={() => { void attachmentsQuery.refetch() }}>
+              {t('staff.support.attachments.retry', 'Try again')}
+            </Button>
+          )}
+        />
+      ) : items.length === 0 ? (
+        <p className="text-sm text-muted-foreground">{t('staff.support.attachments.empty', 'No files on this ticket.')}</p>
+      ) : (
+        <ul className="space-y-1">
+          {items.map((item) => {
+            const tags = item.tags ?? []
+            const visible = tags.includes(CUSTOMER_VISIBLE_TAG)
+            const fromCustomer = tags.some((tag) => tag.startsWith(CUSTOMER_UPLOAD_PREFIX))
+            return (
+              <li key={item.id} className="flex items-center justify-between gap-2 text-sm">
+                <a className="flex min-w-0 items-center gap-2 text-foreground hover:underline" href={item.url}>
+                  <Download className="h-4 w-4 shrink-0" />
+                  <span className="truncate">{item.fileName}</span>
+                  <span className="shrink-0 text-muted-foreground">{formatSize(item.fileSize)}</span>
+                </a>
+                <div className="flex shrink-0 gap-1">
+                  {fromCustomer ? (
+                    <Badge variant="outline">{t('staff.support.attachments.fromCustomer', 'From customer')}</Badge>
+                  ) : null}
+                  <Badge variant={visible ? 'secondary' : 'outline'}>
+                    {visible
+                      ? t('staff.support.attachments.visible', 'Visible to customer')
+                      : t('staff.support.attachments.internal', 'Internal')}
+                  </Badge>
+                </div>
+              </li>
+            )
+          })}
+        </ul>
+      )}
+    </section>
+  )
+}

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

@@ -0,0 +1,102 @@
+"use client"
+
+import * as React from 'react'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { SUPPORT_PORTAL_STATUS_VARIANT, type SupportTicketView } from './supportTicketData'
+
+export function supportPortalStatusLabel(
+  t: ReturnType<typeof useT>,
+  status: SupportTicketView['portalStatus'],
+): string {
+  if (status === 'resolved') return t('staff.support.tickets.status.resolved', 'Resolved')
+  if (status === 'in_progress') return t('staff.support.tickets.status.inProgress', 'In progress')
+  return t('staff.support.tickets.status.received', 'Received')
+}
+
+type SupportRequestPanelProps = {
+  ticket: SupportTicketView
+}
+
+/**
+ * The customer request behind a portal ticket, as the customer wrote it. The task
+ * title and description above are staff-editable working copies; the portal only
+ * ever shows this original.
+ */
+export function SupportRequestPanel({ ticket }: SupportRequestPanelProps) {
+  const t = useT()
+  const rows: Array<{ label: string; value: React.ReactNode }> = [
+    { label: t('staff.time_tracking.taskDrawer.support.reference', 'Ticket'), value: ticket.supportReference },
+    {
+      label: t('staff.time_tracking.taskDrawer.support.customer', 'Customer'),
+      value: ticket.customerName ?? t('staff.time_tracking.taskDrawer.support.unknown', 'Unknown'),
+    },
+    {
+      label: t('staff.time_tracking.taskDrawer.support.reporter', 'Reported by'),
+      value: ticket.reporterName ?? t('staff.time_tracking.taskDrawer.support.unknown', 'Unknown'),
+    },
+    { label: t('staff.time_tracking.taskDrawer.support.category', 'Category'), value: ticket.categoryLabel },
+    {
+      label: t('staff.time_tracking.taskDrawer.support.routedVia', 'Routed by'),
+      value:
+        ticket.routedVia === 'category'
+          ? t('staff.time_tracking.taskDrawer.support.routedViaCategory', 'Category rule')
+          : t('staff.time_tracking.taskDrawer.support.routedViaFallback', 'Fallback project'),
+    },
+    {
+      label: t('staff.time_tracking.taskDrawer.support.portalStatus', 'Customer sees'),
+      value: (
+        <StatusBadge variant={SUPPORT_PORTAL_STATUS_VARIANT[ticket.portalStatus]} dot>
+          {supportPortalStatusLabel(t, ticket.portalStatus)}
+        </StatusBadge>
+      ),
+    },
+  ]
+  return (
+    <section
+      className="flex flex-col gap-3 rounded-lg border border-border bg-muted px-4 py-3"
+      data-testid="task-drawer-support-panel"
+    >
+      <div className="flex flex-wrap items-center gap-2">
+        <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          {t('staff.time_tracking.taskDrawer.support.title', 'Customer request')}
+        </h3>
+        {ticket.unnotifiedAt ? (
+          <Badge variant="warning" size="sm">
+            {t('staff.support.tickets.nobodyNotified', 'Nobody notified')}
+          </Badge>
+        ) : null}
+      </div>
+      <dl className="grid grid-cols-1 gap-x-4 gap-y-2 text-sm sm:grid-cols-2">
+        {rows.map((row) => (
+          <div key={row.label} className="flex flex-col gap-0.5">
+            <dt className="text-xs text-muted-foreground">{row.label}</dt>
+            <dd className="text-foreground">{row.value}</dd>
+          </div>
+        ))}
+      </dl>
+      {ticket.requestSubject || ticket.requestBody ? (
+        <div className="flex flex-col gap-1 border-t border-border pt-3">
+          <span className="text-xs text-muted-foreground">
+            {t('staff.time_tracking.taskDrawer.support.originalRequest', 'Original request')}
+          </span>
+          {ticket.requestSubject ? (
+            <p className="text-sm font-medium text-foreground">{ticket.requestSubject}</p>
+          ) : null}
+          {ticket.requestBody ? (
+            <p className="whitespace-pre-wrap break-words text-sm text-foreground">{ticket.requestBody}</p>
+          ) : null}
+        </div>
+      ) : null}
+      <p className="text-xs text-muted-foreground" data-testid="task-drawer-support-hint">
+        {t(
+          'staff.time_tracking.taskDrawer.support.titleHint',
+          'The customer sees their original request, not the task title and description.',
+        )}
+      </p>
+    </section>
+  )
+}
+
+export default SupportRequestPanel