import { useState, useEffect, useRef } from "react"; import { useQuery } from "@tanstack/react-query"; import { useApiMutation } from "../lib/queries/mutations"; import { useAlert } from "../context/AlertContext"; import { useAuth } from "../context/AuthContext"; import { useParams, useNavigate, Link } from "react-router-dom"; import { motion } from "framer-motion"; import { projectDetailOptions, type ProjectData, type ProjectNote, } from "../lib/queries/projects"; import { userListOptions, type User as ApiUser } from "../lib/queries/users"; import Forbidden from "../components/Forbidden"; import ConfirmModal from "../components/ConfirmModal"; import FormField from "../components/FormField"; import AdminDatePicker from "../components/AdminDatePicker"; import ProjectFileManager from "../components/ProjectFileManager"; import apiFetch from "../utils/api"; const API_BASE = "/api/admin"; const STATUS_LABELS: Record = { aktivni: "Aktivní", dokonceny: "Dokončený", zruseny: "Zrušený", }; function formatNoteDate(dateStr: string) { if (!dateStr) return ""; const d = new Date(dateStr); const day = d.getDate(); const month = d.getMonth() + 1; const year = d.getFullYear(); const hours = String(d.getHours()).padStart(2, "0"); const mins = String(d.getMinutes()).padStart(2, "0"); return `${day}. ${month}. ${year} ${hours}:${mins}`; } interface User { id: number; name: string; } interface ProjectForm { name: string; status: string; start_date: string; end_date: string; responsible_user_id: string; } export default function ProjectDetail() { const { id } = useParams(); const alert = useAlert(); const { hasPermission, isAdmin } = useAuth(); const navigate = useNavigate(); const [saving, setSaving] = useState(false); const [form, setForm] = useState({ name: "", status: "aktivni", start_date: "", end_date: "", responsible_user_id: "", }); const [deleteConfirm, setDeleteConfirm] = useState(false); const [deleting, setDeleting] = useState(false); const [deleteFiles, setDeleteFiles] = useState(false); // Dynamic notes const [newNote, setNewNote] = useState(""); const [addingNote, setAddingNote] = useState(false); const [deletingNoteId, setDeletingNoteId] = useState(null); const projectQuery = useQuery(projectDetailOptions(id)); const project = projectQuery.data; const isPending = projectQuery.isPending; const notes: ProjectNote[] = project?.project_notes || []; const { data: usersData } = useQuery(userListOptions("projects.view")); // Only active users with projects.view — but keep the project's CURRENT // assignee in the list even if they're now inactive, so the select still // reflects the saved value (marked "(neaktivní)" so it's clear). const assignedUserId = project?.responsible_user_id || ""; const users: User[] = (usersData ?? []) .filter((u: ApiUser) => u.is_active || String(u.id) === assignedUserId) .map((u: ApiUser) => ({ id: u.id, name: (`${u.first_name || ""} ${u.last_name || ""}`.trim() || u.username) + (u.is_active ? "" : " (neaktivní)"), })); // Reset form sync when navigating to a different project const formInitialized = useRef(false); useEffect(() => { formInitialized.current = false; }, [id]); // Sync project data to local form state on first load useEffect(() => { if (project && !formInitialized.current) { setForm({ name: project.name || "", status: project.status || "aktivni", start_date: (project.start_date || "").substring(0, 10), end_date: (project.end_date || "").substring(0, 10), responsible_user_id: project.responsible_user_id || "", }); formInitialized.current = true; } }, [project]); // Navigate away on fetch error useEffect(() => { if (projectQuery.error) { alert.error("Nepodařilo se načíst projekt"); navigate("/projects"); } }, [projectQuery.error]); // eslint-disable-line react-hooks/exhaustive-deps if (!hasPermission("projects.view")) return ; const projectSaveMutation = useApiMutation< { name: string; status: string; start_date: string | null; end_date: string | null; responsible_user_id: string | null; }, unknown >({ url: () => `${API_BASE}/projects/${id}`, method: () => "PUT", invalidate: ["projects", "warehouse"], }); const projectDeleteMutation = useApiMutation< { delete_files: boolean }, unknown >({ url: () => `${API_BASE}/projects/${id}`, method: () => "DELETE", invalidate: ["projects", "warehouse"], }); const projectAddNoteMutation = useApiMutation<{ content: string }, unknown>({ url: () => `${API_BASE}/projects/${id}/notes`, method: () => "POST", invalidate: ["projects", "warehouse"], }); const projectDeleteNoteMutation = useApiMutation({ url: (noteId) => `${API_BASE}/projects/${id}/notes/${noteId}`, method: () => "DELETE", invalidate: ["projects", "warehouse"], }); const updateForm = (field: keyof ProjectForm, value: string) => setForm((prev) => ({ ...prev, [field]: value })); const handleSave = async () => { if (!form.name.trim()) { alert.error("Název projektu je povinný"); return; } setSaving(true); try { await projectSaveMutation.mutateAsync({ name: form.name, status: form.status, start_date: form.start_date || null, end_date: form.end_date || null, responsible_user_id: form.responsible_user_id || null, }); alert.success("Projekt byl aktualizován"); } catch (e) { alert.error(e instanceof Error ? e.message : "Chyba připojení"); } finally { setSaving(false); } }; const handleDelete = async () => { setDeleting(true); try { await projectDeleteMutation.mutateAsync({ delete_files: deleteFiles }); navigate("/projects"); setTimeout(() => alert.success("Projekt byl smazán"), 300); } catch (e) { alert.error(e instanceof Error ? e.message : "Chyba připojení"); } finally { setDeleting(false); } }; const handleAddNote = async () => { if (!newNote.trim()) return; setAddingNote(true); try { await projectAddNoteMutation.mutateAsync({ content: newNote.trim() }); setNewNote(""); alert.success("Poznámka byla přidána"); } catch (e) { alert.error(e instanceof Error ? e.message : "Chyba připojení"); } finally { setAddingNote(false); } }; const handleDeleteNote = async (noteId: number) => { setDeletingNoteId(noteId); try { await projectDeleteNoteMutation.mutateAsync(noteId); alert.success("Poznámka byla smazána"); } catch (e) { alert.error(e instanceof Error ? e.message : "Chyba připojení"); } finally { setDeletingNoteId(null); } }; if (!project) return null; const canEdit = hasPermission("projects.edit"); if (isPending) { return (
); } return (
{/* Header */}

Projekt {project.project_number}

{canEdit && (
{!project.order_id && ( )}
)} {/* Form */}

Základní údaje

updateForm("name", e.target.value)} className="admin-form-input" placeholder="Název projektu" disabled={!canEdit} />
updateForm("start_date", val)} disabled={!canEdit} /> updateForm("end_date", val)} disabled={!canEdit} />
{/* Notes */}

Poznámky

{/* Add note */}