fix: 8 improvements — calendar overlaps, legend, nav, tech tasks photos/sort/modal, hk history active maintenance

2026-03-24 19:32:46 +03:00
parent 8b55bc58f1
commit 9a2e45b4c4
5 changed files with 162 additions and 73 deletions
--- a/src/pages/HousekeepingPage.tsx
+++ b/src/pages/HousekeepingPage.tsx
@@ -134,8 +134,16 @@ export function HousekeepingPage() {
  useEffect(() => {
    if (activeTab !== 'history' || !slug) return
    setHistoryLoading(true)
-    api.housekeeping.list(slug, { status: 'done', date: historyDate })
-      .then(setHistoryTasks)
+    Promise.all([
+      api.housekeeping.list(slug, { status: 'done', date: historyDate }),
+      api.housekeeping.list(slug, { category: 'maintenance', status: 'active', date: historyDate }),
+    ]).then(([done, activeMaint]) => {
+      const merged = [...done]
+      for (const t of activeMaint) {
+        if (!merged.some(x => x.id === t.id)) merged.push(t)
+      }
+      setHistoryTasks(merged)
+    })
      .catch(console.error)
      .finally(() => setHistoryLoading(false))
  }, [activeTab, historyDate, slug])
@@ -866,6 +874,7 @@ 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 isActive = task.status === 'pending' || task.status === 'in_progress'

  const completedTime = task.completedAt
    ? new Date(task.completedAt).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
@@ -879,10 +888,10 @@ function HistoryCard({ task }: { task: HousekeepingTask }) {
  const photos = task.photos ?? []

  return (
-    <div className={cn('card p-3.5 opacity-90', isMaintenance && 'border-l-4 border-l-orange-400 dark:border-l-orange-500')}>
+    <div className={cn('card p-3.5', isMaintenance && 'border-l-4 border-l-orange-400 dark:border-l-orange-500', !isActive && 'opacity-90')}>
      <div className="flex items-start gap-3">
        {isMaintenance
-          ? <Wrench size={16} className="text-orange-500 shrink-0 mt-0.5" />
+          ? <Wrench size={16} className={cn('shrink-0 mt-0.5', isActive ? 'text-orange-400' : 'text-orange-500')} />
          : <CheckCircle2 size={16} className="text-emerald-500 shrink-0 mt-0.5" />
        }
        <div className="flex-1 min-w-0">
@@ -894,7 +903,17 @@ function HistoryCard({ task }: { task: HousekeepingTask }) {
            <Badge className={PRIORITY_COLORS[task.priority] ?? PRIORITY_COLORS.medium}>
              {PRIORITY_LABELS[task.priority] ?? task.priority}
            </Badge>
+            {isActive && isMaintenance && (
+              <span className="text-[10px] font-semibold px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300">
+                {task.status === 'in_progress' ? 'В работе' : 'Ожидает'}
+              </span>
+            )}
          </div>
+          {isActive && isMaintenance && (
+            <p className="text-[11px] text-amber-700 dark:text-amber-400 mt-1 flex items-center gap-1">
+              <AlertTriangle size={10} className="shrink-0" /> Замечание по номеру — тех. задача не выполнена
+            </p>
+          )}
          {task.notes && (
            <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}
--- a/src/pages/TechnicalPage.tsx
+++ b/src/pages/TechnicalPage.tsx
@@ -126,12 +126,28 @@ export function TechnicalPage() {
    }
  }

-  const filtered = tasks.filter(t => {
-    const s = t.status as string
-    if (filterStatus === 'active') return s !== 'done' && s !== 'cancelled'
-    if (filterStatus === 'done') return s === 'done'
-    return true
-  })
+  const filtered = tasks
+    .filter(t => {
+      const s = t.status as string
+      if (filterStatus === 'active') return s !== 'done' && s !== 'cancelled'
+      if (filterStatus === 'done') return s === 'done'
+      return true
+    })
+    .sort((a, b) => {
+      const aRec = a as unknown as Record<string, string>
+      const bRec = b as unknown as Record<string, string>
+      // Done tasks: sort by completedAt DESC
+      if (a.status === 'done' && b.status === 'done') {
+        const aT = aRec.completedAt ?? aRec.completed_at ?? ''
+        const bT = bRec.completedAt ?? bRec.completed_at ?? ''
+        return bT.localeCompare(aT)
+      }
+      // Active tasks: urgent first, then by dueDate
+      const priorityOrder: Record<string, number> = { urgent: 0, medium: 1, low: 2 }
+      const pa = priorityOrder[String(aRec.priority ?? 'medium')] ?? 1
+      const pb = priorityOrder[String(bRec.priority ?? 'medium')] ?? 1
+      return pa - pb
+    })

  return (
    <div className="p-4 md:p-6 max-w-4xl mx-auto">
@@ -278,19 +294,9 @@ export function TechnicalPage() {
                  {(problemPhotos.length > 0 || !isDone) && (
                    <div className="flex flex-wrap gap-2 items-center">
                      {problemPhotos.map(url => (
-                        <div key={url} className="relative group">
-                          <a 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-90 transition-opacity" />
-                          </a>
-                          {!isDone && (
-                            <button
-                              onClick={() => handlePhotoRemove(task.id, url)}
-                              className="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-red-500 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
-                            >
-                              <XIcon size={10} />
-                            </button>
-                          )}
-                        </div>
+                        <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-90 transition-opacity" />
+                        </a>
                      ))}
                      {!isDone && (
                        <PhotoUploadButton isUploading={isUploading} onFile={file => handlePhotoUpload(task.id, file)} />
@@ -406,12 +412,25 @@ function TaskCreateModal({
  const [rooms, setRooms] = useState<{ id: string; number: string }[]>([])
  const [users, setUsers] = useState<{ id: string; name: string }[]>([])
  const [saving, setSaving] = useState(false)
+  const [photos, setPhotos] = useState<string[]>([])
+  const [photoUploading, setPhotoUploading] = useState(false)
+  const photoRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    api.rooms.list(slug).then(r => setRooms(r.map(rm => ({ id: rm.id, number: rm.number })))).catch(() => {})
    api.users.list(slug).then(u => setUsers(u)).catch(() => {})
  }, [slug])

+  const handlePhotoUpload = async (file: File) => {
+    setPhotoUploading(true)
+    try {
+      const url = await api.upload.photo(file, 'tasks')
+      setPhotos(prev => [...prev, url])
+    } catch { /* ignore */ } finally {
+      setPhotoUploading(false)
+    }
+  }
+
  const handleSave = async () => {
    if (!form.notes.trim()) return
    setSaving(true)
@@ -424,6 +443,7 @@ function TaskCreateModal({
        due_date: form.due_date || undefined,
        assignee_id: form.assignee_id || undefined,
        category: 'maintenance',
+        photos,
      })
      onCreated(task)
    } catch (err) {
@@ -450,7 +470,7 @@ function TaskCreateModal({
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Приоритет</label>
            <select className="input" value={form.priority} onChange={e => setForm(p => ({ ...p, priority: e.target.value }))}>
-              <option value="urgent">Срочно</option>
+              <option value="urgent">Экстренно!</option>
              <option value="medium">Средний</option>
              <option value="low">Низкий</option>
            </select>
@@ -474,9 +494,33 @@ function TaskCreateModal({
            {users.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
          </select>
        </div>
+        <div>
+          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Фото (необязательно)</label>
+          <input ref={photoRef} type="file" accept="image/*" className="hidden"
+            onChange={e => { const f = e.target.files?.[0]; if (f) { handlePhotoUpload(f); e.target.value = '' } }} />
+          <div className="flex flex-wrap gap-2 items-center">
+            {photos.map((url, i) => (
+              <div key={i} className="relative group">
+                <img src={url} alt="" className="w-16 h-16 object-cover rounded-lg border border-slate-200 dark:border-slate-600" />
+                <button
+                  onClick={() => setPhotos(prev => prev.filter((_, j) => j !== i))}
+                  className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                ><XIcon size={11} /></button>
+              </div>
+            ))}
+            <button
+              onClick={() => photoRef.current?.click()}
+              disabled={photoUploading}
+              className="w-16 h-16 rounded-lg border-2 border-dashed border-slate-300 dark:border-slate-600 flex flex-col items-center justify-center gap-1 text-slate-400 hover:border-brand-400 hover:text-brand-500 transition-colors disabled:opacity-50"
+            >
+              {photoUploading ? <Loader2 size={16} className="animate-spin" /> : <Camera size={16} />}
+              {!photoUploading && <span className="text-[10px]">Фото</span>}
+            </button>
+          </div>
+        </div>
        <div className="flex justify-end gap-2 pt-2">
          <button onClick={onClose} className="btn-secondary">Отмена</button>
-          <button onClick={handleSave} disabled={saving || !form.notes.trim()} className="btn-primary">
+          <button onClick={handleSave} disabled={saving || !form.notes.trim() || photoUploading} className="btn-primary">
            {saving ? 'Создание...' : 'Создать'}
          </button>
        </div>