Phase 3-4: Goals AI planner, Team tasks, Push notifications, i18n (CZ/HE/RU/UA)
- Goals CRUD API + AI study plan generator + progress reports - Goals frontend page with progress bars - Team tasks: assign, transfer, collaborate endpoints - Push notifications: web-push, VAPID, subscribe/send - i18n: 4 languages (cs, he, ru, ua) translation files - notifications.js + goals.js routes Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude CLI Agent
482
apps/tasks/app/goals/page.tsx
Normal file
482
apps/tasks/app/goals/page.tsx
Normal file
@@ -0,0 +1,482 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAuth } from "@/lib/auth";
|
||||
import {
|
||||
getGoals,
|
||||
getGoal,
|
||||
createGoal,
|
||||
updateGoal,
|
||||
deleteGoal,
|
||||
generateGoalPlan,
|
||||
getGoalReport,
|
||||
getGroups,
|
||||
Goal,
|
||||
GoalPlanResult,
|
||||
GoalReport,
|
||||
Group,
|
||||
} from "@/lib/api";
|
||||
|
||||
export default function GoalsPage() {
|
||||
const { token } = useAuth();
|
||||
const router = useRouter();
|
||||
const [goals, setGoals] = useState<Goal[]>([]);
|
||||
const [groups, setGroups] = useState<Group[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [selectedGoal, setSelectedGoal] = useState<(Goal & { tasks?: unknown[] }) | null>(null);
|
||||
const [planResult, setPlanResult] = useState<GoalPlanResult | null>(null);
|
||||
const [report, setReport] = useState<GoalReport | null>(null);
|
||||
const [aiLoading, setAiLoading] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Form state
|
||||
const [formTitle, setFormTitle] = useState("");
|
||||
const [formDate, setFormDate] = useState("");
|
||||
const [formGroup, setFormGroup] = useState("");
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
if (!token) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const [goalsRes, groupsRes] = await Promise.all([
|
||||
getGoals(token),
|
||||
getGroups(token),
|
||||
]);
|
||||
setGoals(goalsRes.data || []);
|
||||
setGroups(groupsRes.data || []);
|
||||
} catch (err) {
|
||||
console.error("Chyba pri nacitani:", err);
|
||||
setError("Nepodarilo se nacist data");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) {
|
||||
router.replace("/login");
|
||||
return;
|
||||
}
|
||||
loadData();
|
||||
}, [token, router, loadData]);
|
||||
|
||||
async function handleCreate(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!token || !formTitle.trim()) return;
|
||||
try {
|
||||
await createGoal(token, {
|
||||
title: formTitle.trim(),
|
||||
target_date: formDate || null,
|
||||
group_id: formGroup || null,
|
||||
});
|
||||
setFormTitle("");
|
||||
setFormDate("");
|
||||
setFormGroup("");
|
||||
setShowForm(false);
|
||||
loadData();
|
||||
} catch (err) {
|
||||
console.error("Chyba pri vytvareni:", err);
|
||||
setError("Nepodarilo se vytvorit cil");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSelectGoal(goal: Goal) {
|
||||
if (!token) return;
|
||||
try {
|
||||
const res = await getGoal(token, goal.id);
|
||||
setSelectedGoal(res.data);
|
||||
setPlanResult(null);
|
||||
setReport(null);
|
||||
} catch (err) {
|
||||
console.error("Chyba pri nacitani cile:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleGeneratePlan(goalId: string) {
|
||||
if (!token) return;
|
||||
setAiLoading("plan");
|
||||
setError(null);
|
||||
try {
|
||||
const res = await generateGoalPlan(token, goalId);
|
||||
setPlanResult(res.data);
|
||||
// Reload goal to get updated plan
|
||||
const updated = await getGoal(token, goalId);
|
||||
setSelectedGoal(updated.data);
|
||||
loadData();
|
||||
} catch (err) {
|
||||
console.error("Chyba pri generovani planu:", err);
|
||||
setError("Nepodarilo se vygenerovat plan. Zkuste to znovu.");
|
||||
} finally {
|
||||
setAiLoading(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleGetReport(goalId: string) {
|
||||
if (!token) return;
|
||||
setAiLoading("report");
|
||||
setError(null);
|
||||
try {
|
||||
const res = await getGoalReport(token, goalId);
|
||||
setReport(res.data);
|
||||
} catch (err) {
|
||||
console.error("Chyba pri ziskavani reportu:", err);
|
||||
setError("Nepodarilo se ziskat report. Zkuste to znovu.");
|
||||
} finally {
|
||||
setAiLoading(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUpdateProgress(goalId: string, pct: number) {
|
||||
if (!token) return;
|
||||
try {
|
||||
await updateGoal(token, goalId, { progress_pct: pct } as Partial<Goal>);
|
||||
loadData();
|
||||
if (selectedGoal && selectedGoal.id === goalId) {
|
||||
setSelectedGoal({ ...selectedGoal, progress_pct: pct });
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Chyba pri aktualizaci:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(goalId: string) {
|
||||
if (!token) return;
|
||||
if (!confirm("Opravdu chcete smazat tento cil?")) return;
|
||||
try {
|
||||
await deleteGoal(token, goalId);
|
||||
setSelectedGoal(null);
|
||||
loadData();
|
||||
} catch (err) {
|
||||
console.error("Chyba pri mazani:", err);
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(d: string | null) {
|
||||
if (!d) return "Bez terminu";
|
||||
return new Date(d).toLocaleDateString("cs-CZ", { day: "numeric", month: "short", year: "numeric" });
|
||||
}
|
||||
|
||||
function progressColor(pct: number) {
|
||||
if (pct >= 80) return "bg-green-500";
|
||||
if (pct >= 50) return "bg-blue-500";
|
||||
if (pct >= 20) return "bg-yellow-500";
|
||||
return "bg-gray-400";
|
||||
}
|
||||
|
||||
if (!token) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-4 pb-24 sm:pb-8 px-4 sm:px-0">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-bold dark:text-white">Cile</h1>
|
||||
<button
|
||||
onClick={() => setShowForm(!showForm)}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors min-h-[44px]"
|
||||
>
|
||||
{showForm ? "Zrusit" : "+ Novy cil"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{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">Zavrrit</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create form */}
|
||||
{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">Nazev cile</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formTitle}
|
||||
onChange={(e) => setFormTitle(e.target.value)}
|
||||
placeholder="Napr. Naucit se TypeScript"
|
||||
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 className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Termin</label>
|
||||
<input
|
||||
type="date"
|
||||
value={formDate}
|
||||
onChange={(e) => setFormDate(e.target.value)}
|
||||
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-[44px]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Skupina</label>
|
||||
<select
|
||||
value={formGroup}
|
||||
onChange={(e) => setFormGroup(e.target.value)}
|
||||
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-[44px]"
|
||||
>
|
||||
<option value="">-- Bez skupiny --</option>
|
||||
{groups.map((g) => (
|
||||
<option key={g.id} value={g.id}>{g.icon ? g.icon + " " : ""}{g.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</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]"
|
||||
>
|
||||
Vytvorit cil
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Goals list */}
|
||||
{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>
|
||||
) : goals.length === 0 ? (
|
||||
<div className="text-center py-16">
|
||||
<div className="text-5xl mb-4 opacity-50">🎯</div>
|
||||
<p className="text-gray-500 dark:text-gray-400 text-lg font-medium">Zadne cile</p>
|
||||
<p className="text-gray-400 dark:text-gray-500 text-sm mt-1">Vytvorte svuj prvni cil</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{goals.map((goal) => (
|
||||
<button
|
||||
key={goal.id}
|
||||
onClick={() => handleSelectGoal(goal)}
|
||||
className={`w-full text-left bg-white dark:bg-gray-900 rounded-xl border p-4 transition-all hover:shadow-md ${
|
||||
selectedGoal?.id === goal.id
|
||||
? "border-blue-500 ring-2 ring-blue-200 dark:ring-blue-800"
|
||||
: "border-gray-200 dark:border-gray-800"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
{goal.group_icon && <span className="text-lg">{goal.group_icon}</span>}
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white truncate">{goal.title}</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>{formatDate(goal.target_date)}</span>
|
||||
{goal.group_name && (
|
||||
<span className="px-2 py-0.5 rounded-full text-xs" style={{ backgroundColor: (goal.group_color || "#6b7280") + "20", color: goal.group_color || "#6b7280" }}>
|
||||
{goal.group_name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-700 dark:text-gray-300 whitespace-nowrap">
|
||||
{goal.progress_pct}%
|
||||
</span>
|
||||
</div>
|
||||
{/* Progress bar */}
|
||||
<div className="mt-3 h-2 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all duration-500 ${progressColor(goal.progress_pct)}`}
|
||||
style={{ width: `${goal.progress_pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Goal detail panel */}
|
||||
{selectedGoal && (
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 space-y-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold dark:text-white">{selectedGoal.title}</h2>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{formatDate(selectedGoal.target_date)} | Progres: {selectedGoal.progress_pct}%
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedGoal(null)}
|
||||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 p-1 min-h-[44px] min-w-[44px] flex items-center justify-center"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Progress slider */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Progres: {selectedGoal.progress_pct}%
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={selectedGoal.progress_pct}
|
||||
onChange={(e) => handleUpdateProgress(selectedGoal.id, parseInt(e.target.value))}
|
||||
className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* AI Action buttons */}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleGeneratePlan(selectedGoal.id)}
|
||||
disabled={aiLoading === "plan"}
|
||||
className="flex-1 py-2.5 bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400 text-white rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2 min-h-[44px]"
|
||||
>
|
||||
{aiLoading === "plan" ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white" />
|
||||
Generuji plan...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
Generovat plan (AI)
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleGetReport(selectedGoal.id)}
|
||||
disabled={aiLoading === "report"}
|
||||
className="flex-1 py-2.5 bg-green-600 hover:bg-green-700 disabled:bg-green-400 text-white rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2 min-h-[44px]"
|
||||
>
|
||||
{aiLoading === "report" ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white" />
|
||||
Generuji report...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
Report (AI)
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Plan result */}
|
||||
{planResult && (
|
||||
<div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-3">
|
||||
<h3 className="font-semibold text-purple-800 dark:text-purple-300 mb-2">
|
||||
Vygenerovany plan ({planResult.tasks_created} ukolu vytvoreno)
|
||||
</h3>
|
||||
{planResult.plan.weeks ? (
|
||||
<div className="space-y-2">
|
||||
{(planResult.plan.weeks as Array<{ week_number: number; focus: string; tasks: Array<{ title: string; duration_hours?: number; day_of_week?: string }> }>).map((week, i) => (
|
||||
<div key={i} className="bg-white dark:bg-gray-800 rounded-lg p-2">
|
||||
<p className="text-sm font-medium text-purple-700 dark:text-purple-300">
|
||||
Tyden {week.week_number}: {week.focus}
|
||||
</p>
|
||||
<ul className="mt-1 space-y-0.5">
|
||||
{(week.tasks || []).map((t, j) => (
|
||||
<li key={j} className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
|
||||
<span className="w-1 h-1 bg-purple-400 rounded-full flex-shrink-0" />
|
||||
{t.title}
|
||||
{t.duration_hours && <span className="text-gray-400 ml-1">({t.duration_hours}h)</span>}
|
||||
{t.day_of_week && <span className="text-gray-400 ml-1">[{t.day_of_week}]</span>}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<pre className="text-xs text-gray-600 dark:text-gray-400 whitespace-pre-wrap overflow-auto max-h-64">
|
||||
{JSON.stringify(planResult.plan, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* AI Report */}
|
||||
{report && (
|
||||
<div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="font-semibold text-green-800 dark:text-green-300">AI Report</h3>
|
||||
<span className="text-sm text-green-600 dark:text-green-400">
|
||||
{report.stats.done}/{report.stats.total} splneno ({report.stats.pct}%)
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{report.report}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Existing plan */}
|
||||
{selectedGoal.plan && Object.keys(selectedGoal.plan).length > 0 && !planResult && (
|
||||
<div className="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
||||
<h3 className="font-semibold text-gray-700 dark:text-gray-300 mb-2">Ulozeny plan</h3>
|
||||
{(selectedGoal.plan as Record<string, unknown>).weeks ? (
|
||||
<div className="space-y-2">
|
||||
{((selectedGoal.plan as Record<string, unknown>).weeks as Array<{ week_number: number; focus: string; tasks: Array<{ title: string; duration_hours?: number; day_of_week?: string }> }>).map((week, i) => (
|
||||
<div key={i} className="bg-white dark:bg-gray-900 rounded-lg p-2">
|
||||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Tyden {week.week_number}: {week.focus}
|
||||
</p>
|
||||
<ul className="mt-1 space-y-0.5">
|
||||
{(week.tasks || []).map((t, j) => (
|
||||
<li key={j} className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
|
||||
<span className="w-1 h-1 bg-gray-400 rounded-full flex-shrink-0" />
|
||||
{t.title}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<pre className="text-xs text-gray-600 dark:text-gray-400 whitespace-pre-wrap overflow-auto max-h-40">
|
||||
{JSON.stringify(selectedGoal.plan, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Related tasks */}
|
||||
{selectedGoal.tasks && selectedGoal.tasks.length > 0 && (
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-700 dark:text-gray-300 mb-2">
|
||||
Souvisejici ukoly ({selectedGoal.tasks.length})
|
||||
</h3>
|
||||
<div className="space-y-1 max-h-48 overflow-y-auto">
|
||||
{(selectedGoal.tasks as Array<{ id: string; title: string; status: string }>).map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className="flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-800 rounded-lg"
|
||||
>
|
||||
<span className={`w-2 h-2 rounded-full flex-shrink-0 ${
|
||||
task.status === "done" || task.status === "completed" ? "bg-green-500" :
|
||||
task.status === "in_progress" ? "bg-blue-500" :
|
||||
"bg-gray-400"
|
||||
}`} />
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300 truncate">{task.title}</span>
|
||||
<span className="text-xs text-gray-400 ml-auto flex-shrink-0">{task.status}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete button */}
|
||||
<button
|
||||
onClick={() => handleDelete(selectedGoal.id)}
|
||||
className="w-full py-2 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg text-sm font-medium transition-colors min-h-[44px]"
|
||||
>
|
||||
Smazat cil
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user