fix: room number + photos in task cards; time tracking for tasks

- Backend POST housekeeping: include photos in INSERT, return task with room JOIN - Backend PATCH housekeeping: set started_at on in_progress, return task with room JOIN - WS broadcasts now include room_number/assignee_name from JOIN - Frontend: normalizeTask() helper maps snake_case WS fields to camelCase - TechnicalPage: fix room number display (roomNumber || room_number) - TechnicalPage: show time spent (started_at → completed_at) on task cards - HousekeepingPage: history tab now includes maintenance reports (no category filter) - HousekeepingPage: HistoryCard shows photos, notes, time spent, maintenance styling - Migration 028: started_at TIMESTAMPTZ column on housekeeping_tasks - types: add startedAt? to HousekeepingTask Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-24 11:24:49 +03:00
parent 2ebef940b9
commit 96961046ed
5 changed files with 124 additions and 29 deletions
--- a/backend/migrations/028_task_started_at.sql
+++ b/backend/migrations/028_task_started_at.sql
@@ -0,0 +1 @@
+ALTER TABLE housekeeping_tasks ADD COLUMN IF NOT EXISTS started_at TIMESTAMPTZ;
--- a/backend/src/routes/housekeeping.ts
+++ b/backend/src/routes/housekeeping.ts
@@ -60,7 +60,7 @@ const housekeeping: FastifyPluginAsync = async (fastify) => {
  // ── POST /api/hotels/:slug/housekeeping ────────────────────────────────────
  fastify.post<SlugParam & { Body: {
    room_id?: string; type: string; priority?: string
-    assignee_id?: string; notes?: string; due_date?: string; category?: string
+    assignee_id?: string; notes?: string; due_date?: string; category?: string; photos?: string[]
  } }>(
    '/api/hotels/:slug/housekeeping',
    { onRequest: [fastify.authenticate] },
@@ -72,13 +72,21 @@ const housekeeping: FastifyPluginAsync = async (fastify) => {
      const hotelId = await getHotelId(slug)
      if (!hotelId) return reply.code(404).send({ error: 'Hotel not found' })

-      const { room_id, type, priority = 'medium', assignee_id, notes, due_date, category = 'housekeeping' } = request.body
-      const { rows } = await db.query(
+      const { room_id, type, priority = 'medium', assignee_id, notes, due_date, category = 'housekeeping', photos = [] } = request.body
+      const { rows: inserted } = await db.query(
        `INSERT INTO housekeeping_tasks
-           (hotel_id, room_id, type, priority, assignee_id, notes, due_date, category)
-         VALUES ($1,$2,$3,$4,$5,$6,$7,$8) RETURNING *`,
+           (hotel_id, room_id, type, priority, assignee_id, notes, due_date, category, photos)
+         VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9) RETURNING id`,
        [hotelId, room_id ?? null, type, priority,
-         assignee_id ?? null, notes ?? null, due_date ?? null, category],
+         assignee_id ?? null, notes ?? null, due_date ?? null, category, photos],
+      )
+      const { rows } = await db.query(
+        `SELECT t.*, r.number AS room_number, r.type AS room_type, u.name AS assignee_name
+           FROM housekeeping_tasks t
+           LEFT JOIN rooms r ON r.id = t.room_id
+           LEFT JOIN users u ON u.id = t.assignee_id
+          WHERE t.id = $1`,
+        [inserted[0].id],
      )
      return reply.code(201).send(rows[0])
    },
@@ -109,7 +117,10 @@ const housekeeping: FastifyPluginAsync = async (fastify) => {
        }
      }

-      // Auto-set completed_at when marking done
+      // Auto-set timestamps based on status transitions
+      if (request.body.status === 'in_progress') {
+        updates.push(`started_at = COALESCE(started_at, NOW())`)
+      }
      if (request.body.status === 'done') {
        updates.push(`completed_at = NOW()`)
      } else if (request.body.status && request.body.status !== 'done') {
@@ -119,12 +130,21 @@ const housekeeping: FastifyPluginAsync = async (fastify) => {
      if (updates.length === 0) return reply.code(400).send({ error: 'Nothing to update' })
      values.push(id, hotelId)

-      const { rows } = await db.query(
+      const { rows: updated } = await db.query(
        `UPDATE housekeeping_tasks SET ${updates.join(', ')}
-          WHERE id = $${idx} AND hotel_id = $${idx + 1} RETURNING *`,
+          WHERE id = $${idx} AND hotel_id = $${idx + 1} RETURNING id`,
        values,
      )
-      if (!rows[0]) return reply.code(404).send({ error: 'Task not found' })
+      if (!updated[0]) return reply.code(404).send({ error: 'Task not found' })
+
+      const { rows } = await db.query(
+        `SELECT t.*, r.number AS room_number, r.type AS room_type, u.name AS assignee_name
+           FROM housekeeping_tasks t
+           LEFT JOIN rooms r ON r.id = t.room_id
+           LEFT JOIN users u ON u.id = t.assignee_id
+          WHERE t.id = $1`,
+        [updated[0].id],
+      )
      const task = rows[0]

      // When task is marked in_progress → room becomes 'cleaning'
--- a/src/pages/HousekeepingPage.tsx
+++ b/src/pages/HousekeepingPage.tsx
@@ -12,6 +12,19 @@ import { useNotifications } from '../contexts/NotificationsContext'
 import { format, subDays, addDays, parseISO } from 'date-fns'
 import { ru } from 'date-fns/locale'

+// Normalize snake_case WS task objects to camelCase
+function normalizeTask(raw: Record<string, unknown>): Record<string, unknown> {
+  return {
+    ...raw,
+    roomNumber:  raw.roomNumber  ?? raw.room_number,
+    roomId:      raw.roomId      ?? raw.room_id,
+    assigneeName: raw.assigneeName ?? raw.assignee_name,
+    dueDate:     raw.dueDate     ?? raw.due_date,
+    completedAt: raw.completedAt ?? raw.completed_at,
+    startedAt:   raw.startedAt   ?? raw.started_at,
+  }
+}
+
 function Toggle({ on, onChange }: { on: boolean; onChange: () => void }) {
  return (
    <button
@@ -67,18 +80,17 @@ export function HousekeepingPage() {

  const handleWsMessage = useCallback((msg: WsMessage) => {
    if (msg.type === 'housekeeping_task_created') {
-      const task = msg.task as unknown as HousekeepingTask & { category?: string }
+      const task = normalizeTask(msg.task as Record<string, unknown>)
      if (task.category !== 'maintenance') {
-        setActiveTasks(prev => prev.some(t => t.id === task.id) ? prev : [task, ...prev])
+        setActiveTasks(prev => prev.some(t => t.id === task.id) ? prev : [task as unknown as HousekeepingTask, ...prev])
      }
    } else if (msg.type === 'housekeeping_updated') {
-      const task = msg.task as unknown as HousekeepingTask & { category?: string }
+      const task = normalizeTask(msg.task as Record<string, unknown>)
      if (task.category !== 'maintenance') {
-        // If task is now done → remove from active, add to history if same date
        if (task.status === 'done') {
          setActiveTasks(prev => prev.filter(t => t.id !== task.id))
        } else {
-          setActiveTasks(prev => prev.map(t => t.id === task.id ? task : t))
+          setActiveTasks(prev => prev.map(t => t.id === task.id ? task as unknown as HousekeepingTask : t))
        }
      }
    }
@@ -109,7 +121,7 @@ export function HousekeepingPage() {
  useEffect(() => {
    if (activeTab !== 'history' || !slug) return
    setHistoryLoading(true)
-    api.housekeeping.list(slug, { status: 'done', date: historyDate, category: 'housekeeping' })
+    api.housekeeping.list(slug, { status: 'done', date: historyDate })
      .then(setHistoryTasks)
      .catch(console.error)
      .finally(() => setHistoryLoading(false))
@@ -741,14 +753,26 @@ function TaskCard({ task, onStatusChange, onReport }: {

 function HistoryCard({ task }: { task: HousekeepingTask }) {
  const taskAny = task as unknown as Record<string, string>
+  const isMaintenance = task.type === 'maintenance' || (taskAny.category === 'maintenance')
+
  const completedTime = task.completedAt
    ? new Date(task.completedAt).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
    : null

+  // Duration: started_at → completed_at
+  const durationMin = task.startedAt && task.completedAt
+    ? Math.round((new Date(task.completedAt).getTime() - new Date(task.startedAt).getTime()) / 60000)
+    : null
+
+  const photos = task.photos ?? []
+
  return (
-    <div className="card p-3.5 opacity-90">
-      <div className="flex items-center gap-3">
-        <CheckCircle2 size={16} className="text-emerald-500 shrink-0" />
+    <div className={cn('card p-3.5 opacity-90', isMaintenance && 'border-l-4 border-l-orange-400 dark:border-l-orange-500')}>
+      <div className="flex items-start gap-3">
+        {isMaintenance
+          ? <Wrench size={16} className="text-orange-500 shrink-0 mt-0.5" />
+          : <CheckCircle2 size={16} className="text-emerald-500 shrink-0 mt-0.5" />
+        }
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="font-semibold text-slate-900 dark:text-slate-100">№{task.roomNumber}</span>
@@ -760,9 +784,11 @@ function HistoryCard({ task }: { task: HousekeepingTask }) {
            </Badge>
          </div>
          {task.notes && (
-            <p className="text-xs text-slate-500 dark:text-slate-400 mt-1 truncate">{task.notes}</p>
+            <p className="text-xs text-slate-600 dark:text-slate-300 mt-1.5 bg-slate-50 dark:bg-slate-700/40 rounded-lg px-2 py-1.5">
+              {task.notes}
+            </p>
          )}
-          <div className="flex items-center gap-3 mt-1.5 text-xs text-slate-500 dark:text-slate-400">
+          <div className="flex items-center gap-3 mt-1.5 text-xs text-slate-500 dark:text-slate-400 flex-wrap">
            {(task.assignedToName || taskAny.assigneeName) && (
              <span className="flex items-center gap-1">
                <User size={11} />
@@ -772,10 +798,31 @@ function HistoryCard({ task }: { task: HousekeepingTask }) {
            {completedTime && (
              <span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
                <CheckCircle2 size={11} />
-                Завершено в {completedTime}
+                {isMaintenance ? 'Выполнено' : 'Завершено'} в {completedTime}
+              </span>
+            )}
+            {durationMin !== null && durationMin > 0 && (
+              <span className="flex items-center gap-1 text-slate-400 dark:text-slate-500">
+                <Clock size={11} />
+                {durationMin < 60
+                  ? `${durationMin} мин`
+                  : `${Math.floor(durationMin / 60)} ч ${durationMin % 60} мин`}
              </span>
            )}
          </div>
+          {photos.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mt-2">
+              {photos.map(url => (
+                <a key={url} href={url} target="_blank" rel="noreferrer">
+                  <img
+                    src={url}
+                    alt=""
+                    className="w-14 h-14 object-cover rounded-lg border border-slate-200 dark:border-slate-600 hover:opacity-80 transition-opacity"
+                  />
+                </a>
+              ))}
+            </div>
+          )}
        </div>
      </div>
    </div>
--- a/src/pages/TechnicalPage.tsx
+++ b/src/pages/TechnicalPage.tsx
@@ -10,6 +10,18 @@ import type { HousekeepingTask } from '../types'
 import { cn } from '../lib/utils'
 import { Modal } from '../components/ui/Modal'

+function normalizeTask(raw: Record<string, unknown>): Record<string, unknown> {
+  return {
+    ...raw,
+    roomNumber:  raw.roomNumber  ?? raw.room_number,
+    roomId:      raw.roomId      ?? raw.room_id,
+    assigneeName: raw.assigneeName ?? raw.assignee_name,
+    dueDate:     raw.dueDate     ?? raw.due_date,
+    completedAt: raw.completedAt ?? raw.completed_at,
+    startedAt:   raw.startedAt   ?? raw.started_at,
+  }
+}
+
 const PRIORITY_LABELS: Record<string, { label: string; color: string }> = {
  urgent: { label: 'Срочно',  color: 'text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400 border border-red-200 dark:border-red-800' },
  medium: { label: 'Средний', color: 'text-yellow-600 bg-yellow-50 dark:bg-yellow-900/20 dark:text-yellow-400 border border-yellow-200 dark:border-yellow-800' },
@@ -52,14 +64,14 @@ export function TechnicalPage() {

  const handleWsMessage = useCallback((msg: WsMessage) => {
    if (msg.type === 'housekeeping_task_created') {
-      const task = msg.task as unknown as HousekeepingTask & { category?: string }
+      const task = normalizeTask(msg.task as Record<string, unknown>)
      if (task.category === 'maintenance') {
-        setTasks(prev => prev.some(t => t.id === task.id) ? prev : [task, ...prev])
+        setTasks(prev => prev.some(t => t.id === task.id) ? prev : [task as unknown as HousekeepingTask, ...prev])
      }
    } else if (msg.type === 'housekeeping_updated') {
-      const task = msg.task as unknown as HousekeepingTask & { category?: string }
+      const task = normalizeTask(msg.task as Record<string, unknown>)
      if (task.category === 'maintenance') {
-        setTasks(prev => prev.map(t => t.id === task.id ? task : t))
+        setTasks(prev => prev.map(t => t.id === task.id ? task as unknown as HousekeepingTask : t))
      }
    }
  }, [])
@@ -169,12 +181,18 @@ export function TechnicalPage() {
          const pMeta = PRIORITY_LABELS[taskRecord.priority ?? 'medium'] ?? PRIORITY_LABELS.medium
          const sMeta = STATUS_LABELS[task.status ?? 'pending']
          const SIcon = sMeta.icon
-          const roomLabel = taskRecord.roomNumber
-            ? `Номер ${taskRecord.roomNumber}`
+          const roomLabel = (taskRecord.roomNumber || taskRecord.room_number)
+            ? `Номер ${taskRecord.roomNumber ?? taskRecord.room_number}`
            : 'Без номера'
          const photos = task.photos ?? []
          const isUploading = uploadingFor === task.id

+          const startedAt = task.startedAt ?? (taskRecord as Record<string, string>).started_at
+          const completedAt = task.completedAt ?? (taskRecord as Record<string, string>).completed_at
+          const durationMin = startedAt && completedAt
+            ? Math.round((new Date(completedAt).getTime() - new Date(startedAt).getTime()) / 60000)
+            : null
+
          return (
            <div key={task.id} className="card p-4 space-y-3">
              <div className="flex items-start gap-3">
@@ -190,7 +208,7 @@ export function TechnicalPage() {
                      {pMeta.label}
                    </span>
                  </div>
-                  <div className="flex items-center gap-3 mt-1 text-xs text-slate-500 dark:text-slate-400">
+                  <div className="flex items-center gap-3 mt-1 text-xs text-slate-500 dark:text-slate-400 flex-wrap">
                    <span>{roomLabel}</span>
                    {task.dueDate && (
                      <span>{format(new Date(task.dueDate), 'd MMM', { locale: ru })}</span>
@@ -198,6 +216,14 @@ export function TechnicalPage() {
                    {taskRecord.assigneeName && (
                      <span>→ {taskRecord.assigneeName}</span>
                    )}
+                    {durationMin !== null && durationMin > 0 && (
+                      <span className="flex items-center gap-1 text-slate-400">
+                        <Clock size={10} />
+                        {durationMin < 60
+                          ? `${durationMin} мин`
+                          : `${Math.floor(durationMin / 60)} ч ${durationMin % 60} мин`}
+                      </span>
+                    )}
                  </div>
                </div>
                <div className="flex items-center gap-1 shrink-0">
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -211,6 +211,7 @@ export interface HousekeepingTask {
  maintenanceSeverity?: 'low' | 'medium' | 'high'
  roomBlocked?: boolean
  dueDate: string
+  startedAt?: string
  completedAt?: string
  type: 'cleaning' | 'inspection' | 'maintenance'
  photos?: string[]
				`@@ -0,0 +1 @@`
				`ALTER TABLE housekeeping_tasks ADD COLUMN IF NOT EXISTS started_at TIMESTAMPTZ;`