231 lines
8.9 KiB
TypeScript
231 lines
8.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useAuth } from "@/lib/auth";
|
|
import { useTranslation } from "@/lib/i18n";
|
|
import {
|
|
getProjects,
|
|
createProject,
|
|
deleteProject,
|
|
Project,
|
|
} from "@/lib/api";
|
|
import PageActionBar from "@/components/features/PageActionBar";
|
|
import DeleteIconButton from "@/components/features/DeleteIconButton";
|
|
|
|
export default function ProjectsPage() {
|
|
const { token, user } = useAuth();
|
|
const { t, locale } = useTranslation();
|
|
const router = useRouter();
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const [formName, setFormName] = useState("");
|
|
const [formDesc, setFormDesc] = useState("");
|
|
const [formColor, setFormColor] = useState("#3B82F6");
|
|
const [formIcon, setFormIcon] = useState("\ud83d\udcc1");
|
|
|
|
const COLORS = ["#3B82F6", "#EF4444", "#10B981", "#F59E0B", "#8B5CF6", "#EC4899", "#6366F1", "#14B8A6"];
|
|
const ICONS = ["\ud83d\udcc1", "\ud83d\ude80", "\ud83d\udca1", "\ud83c\udfaf", "\ud83d\udee0\ufe0f", "\ud83c\udf1f", "\ud83d\udcca", "\ud83d\udd25"];
|
|
|
|
const loadData = useCallback(async () => {
|
|
if (!token) return;
|
|
setLoading(true);
|
|
try {
|
|
const res = await getProjects(token);
|
|
setProjects(res.data || []);
|
|
} catch (err) {
|
|
console.error("Load error:", err);
|
|
setError(t("common.error"));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [token, t]);
|
|
|
|
useEffect(() => {
|
|
if (!token) {
|
|
router.replace("/login");
|
|
return;
|
|
}
|
|
loadData();
|
|
}, [token, router, loadData]);
|
|
|
|
async function handleCreate(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!token || !formName.trim()) return;
|
|
try {
|
|
await createProject(token, {
|
|
name: formName.trim(),
|
|
description: formDesc,
|
|
color: formColor,
|
|
icon: formIcon,
|
|
owner_id: user?.id,
|
|
});
|
|
setFormName("");
|
|
setFormDesc("");
|
|
setFormColor("#3B82F6");
|
|
setFormIcon("\ud83d\udcc1");
|
|
setShowForm(false);
|
|
loadData();
|
|
} catch (err) {
|
|
console.error("Create error:", err);
|
|
setError(t("common.error"));
|
|
}
|
|
}
|
|
|
|
async function handleDelete(id: string) {
|
|
if (!token) return;
|
|
if (!confirm(t("tasks.confirmDelete"))) return;
|
|
try {
|
|
await deleteProject(token, id);
|
|
loadData();
|
|
} catch (err) {
|
|
console.error("Delete error:", err);
|
|
setError(t("common.error"));
|
|
}
|
|
}
|
|
|
|
const dateLocale = locale === "ua" ? "uk-UA" : locale === "cs" ? "cs-CZ" : locale === "he" ? "he-IL" : "ru-RU";
|
|
|
|
function formatDate(d: string) {
|
|
return new Date(d).toLocaleDateString(dateLocale, { day: "numeric", month: "short" });
|
|
}
|
|
|
|
if (!token) return null;
|
|
|
|
return (
|
|
<div className="space-y-4 pb-24 sm:pb-8 px-4 sm:px-0">
|
|
<PageActionBar
|
|
title={t("nav.projects")}
|
|
showAdd
|
|
onToggleAdd={() => setShowForm(!showForm)}
|
|
addOpen={showForm}
|
|
t={t}
|
|
/>
|
|
|
|
{error && (
|
|
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3 text-red-700 dark:text-red-300 text-sm">
|
|
{error}
|
|
<button onClick={() => setError(null)} className="ml-2 underline">{t("tasks.close")}</button>
|
|
</div>
|
|
)}
|
|
|
|
{showForm && (
|
|
<form onSubmit={handleCreate} className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 space-y-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t("tasks.form.title")}</label>
|
|
<input
|
|
type="text"
|
|
value={formName}
|
|
onChange={(e) => setFormName(e.target.value)}
|
|
placeholder={t("projects.namePlaceholder")}
|
|
className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-h-[44px]"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t("tasks.form.description")}</label>
|
|
<textarea
|
|
value={formDesc}
|
|
onChange={(e) => setFormDesc(e.target.value)}
|
|
placeholder={t("projects.descPlaceholder")}
|
|
className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white focus:ring-2 focus:ring-blue-500 min-h-[80px] resize-none"
|
|
rows={2}
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t("projects.color")}</label>
|
|
<div className="flex gap-1.5 flex-wrap">
|
|
{COLORS.map((c) => (
|
|
<button
|
|
key={c}
|
|
type="button"
|
|
onClick={() => setFormColor(c)}
|
|
className={`w-8 h-8 rounded-full border-2 transition-all ${formColor === c ? "border-gray-900 dark:border-white scale-110" : "border-transparent"}`}
|
|
style={{ backgroundColor: c }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t("projects.icon")}</label>
|
|
<div className="flex gap-1.5 flex-wrap">
|
|
{ICONS.map((ic) => (
|
|
<button
|
|
key={ic}
|
|
type="button"
|
|
onClick={() => setFormIcon(ic)}
|
|
className={`w-8 h-8 rounded-lg flex items-center justify-center text-lg border-2 transition-all ${formIcon === ic ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" : "border-gray-200 dark:border-gray-700"}`}
|
|
>
|
|
{ic}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="w-full py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors min-h-[44px]"
|
|
>
|
|
{t("projects.add")}
|
|
</button>
|
|
</form>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="flex justify-center py-12">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
|
|
</div>
|
|
) : projects.length === 0 ? (
|
|
<div className="text-center py-16">
|
|
<div className="text-5xl mb-4 opacity-50">{"\ud83d\udcc2"}</div>
|
|
<p className="text-gray-500 dark:text-gray-400 text-lg font-medium">{t("projects.empty")}</p>
|
|
<p className="text-gray-400 dark:text-gray-500 text-sm mt-1">{t("projects.createFirst")}</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{projects.map((project) => (
|
|
<div
|
|
key={project.id}
|
|
className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 transition-all hover:shadow-md"
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="flex items-start gap-3 flex-1 min-w-0">
|
|
<div
|
|
className="w-10 h-10 rounded-lg flex items-center justify-center text-xl flex-shrink-0"
|
|
style={{ backgroundColor: (project.color || "#3B82F6") + "15" }}
|
|
>
|
|
{project.icon || "\ud83d\udcc1"}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-semibold text-gray-900 dark:text-white truncate">{project.name}</h3>
|
|
{project.description && (
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 truncate mt-0.5">{project.description}</p>
|
|
)}
|
|
<div className="flex items-center gap-3 mt-1.5 text-xs text-gray-400 dark:text-gray-500">
|
|
<span>{t("projects.tasks")}: {project.task_count || 0}</span>
|
|
<span>{t("projects.members")}: {project.members?.length || 0}</span>
|
|
<span>{formatDate(project.created_at)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 flex-shrink-0">
|
|
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: project.color || "#3B82F6" }} />
|
|
<DeleteIconButton
|
|
onClick={() => handleDelete(project.id)}
|
|
label={t("tasks.delete")}
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|