Add Next.js frontend PWA
- Pages: login, register, tasks list, task detail - Components: TaskCard, TaskForm, GroupSelector, StatusBadge, Header - Tailwind CSS, dark/light mode, PWA manifest - Running on :3001 via systemd Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude CLI Agent
42
apps/tasks/components/AuthProvider.tsx
Normal file
42
apps/tasks/components/AuthProvider.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, ReactNode } from "react";
|
||||
import { AuthContext, getStoredToken, getStoredUser, setStoredToken, setStoredUser } from "@/lib/auth";
|
||||
import { User } from "@/lib/api";
|
||||
|
||||
export default function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const [token, setToken] = useState<string | null>(null);
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setToken(getStoredToken());
|
||||
setUser(getStoredUser());
|
||||
setLoaded(true);
|
||||
}, []);
|
||||
|
||||
function setAuth(newToken: string | null, newUser: User | null) {
|
||||
setToken(newToken);
|
||||
setUser(newUser);
|
||||
setStoredToken(newToken);
|
||||
setStoredUser(newUser);
|
||||
}
|
||||
|
||||
function logout() {
|
||||
setAuth(null, null);
|
||||
}
|
||||
|
||||
if (!loaded) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ token, user, setAuth, logout }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
43
apps/tasks/components/GroupSelector.tsx
Normal file
43
apps/tasks/components/GroupSelector.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
"use client";
|
||||
|
||||
import { Group } from "@/lib/api";
|
||||
|
||||
interface GroupSelectorProps {
|
||||
groups: Group[];
|
||||
selected: string | null;
|
||||
onSelect: (id: string | null) => void;
|
||||
}
|
||||
|
||||
export default function GroupSelector({ groups, selected, onSelect }: GroupSelectorProps) {
|
||||
return (
|
||||
<div className="flex gap-2 overflow-x-auto scrollbar-hide py-2 px-1">
|
||||
<button
|
||||
onClick={() => onSelect(null)}
|
||||
className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||||
selected === null
|
||||
? "bg-gray-800 text-white dark:bg-white dark:text-gray-900"
|
||||
: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
|
||||
}`}
|
||||
>
|
||||
Vse
|
||||
</button>
|
||||
{groups.map((g) => (
|
||||
<button
|
||||
key={g.id}
|
||||
onClick={() => onSelect(g.id)}
|
||||
className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||||
selected === g.id
|
||||
? "text-white shadow-md"
|
||||
: "text-gray-600 dark:text-gray-400 hover:opacity-80"
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: selected === g.id ? g.color : undefined,
|
||||
border: selected !== g.id ? `2px solid ${g.color}` : undefined,
|
||||
}}
|
||||
>
|
||||
{g.icon ? `${g.icon} ` : ""}{g.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
64
apps/tasks/components/Header.tsx
Normal file
64
apps/tasks/components/Header.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
"use client";
|
||||
|
||||
import { useAuth } from "@/lib/auth";
|
||||
import { useTheme } from "./ThemeProvider";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function Header() {
|
||||
const { user, logout, token } = useAuth();
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const router = useRouter();
|
||||
|
||||
function handleLogout() {
|
||||
logout();
|
||||
router.push("/login");
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800">
|
||||
<div className="max-w-4xl mx-auto px-4 h-14 flex items-center justify-between">
|
||||
<Link href="/tasks" className="text-lg font-bold tracking-tight">
|
||||
Task Team
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
||||
aria-label="Prepnout tema"
|
||||
>
|
||||
{theme === "dark" ? (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{token && user ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted hidden sm:inline">{user.name || user.email}</span>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="text-sm px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
Odhlasit
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-sm px-3 py-1.5 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Prihlasit
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
24
apps/tasks/components/StatusBadge.tsx
Normal file
24
apps/tasks/components/StatusBadge.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
"use client";
|
||||
|
||||
interface StatusBadgeProps {
|
||||
status: string;
|
||||
size?: "sm" | "md";
|
||||
}
|
||||
|
||||
const STATUS_MAP: Record<string, { label: string; bg: string; text: string }> = {
|
||||
pending: { label: "Ceka", bg: "bg-yellow-100 dark:bg-yellow-900/30", text: "text-yellow-800 dark:text-yellow-300" },
|
||||
in_progress: { label: "Probiha", bg: "bg-blue-100 dark:bg-blue-900/30", text: "text-blue-800 dark:text-blue-300" },
|
||||
done: { label: "Hotovo", bg: "bg-green-100 dark:bg-green-900/30", text: "text-green-800 dark:text-green-300" },
|
||||
cancelled: { label: "Zruseno", bg: "bg-gray-100 dark:bg-gray-800/30", text: "text-gray-600 dark:text-gray-400" },
|
||||
};
|
||||
|
||||
export default function StatusBadge({ status, size = "sm" }: StatusBadgeProps) {
|
||||
const s = STATUS_MAP[status] || STATUS_MAP.pending;
|
||||
const sizeClass = size === "sm" ? "px-2 py-0.5 text-xs" : "px-3 py-1 text-sm";
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center rounded-full font-medium ${s.bg} ${s.text} ${sizeClass}`}>
|
||||
{s.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
64
apps/tasks/components/TaskCard.tsx
Normal file
64
apps/tasks/components/TaskCard.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
"use client";
|
||||
|
||||
import { Task } from "@/lib/api";
|
||||
import StatusBadge from "./StatusBadge";
|
||||
import Link from "next/link";
|
||||
|
||||
interface TaskCardProps {
|
||||
task: Task;
|
||||
}
|
||||
|
||||
const PRIORITY_INDICATOR: Record<string, string> = {
|
||||
urgent: "border-l-red-500",
|
||||
high: "border-l-orange-500",
|
||||
medium: "border-l-yellow-500",
|
||||
low: "border-l-green-500",
|
||||
};
|
||||
|
||||
export default function TaskCard({ task }: TaskCardProps) {
|
||||
const priorityClass = PRIORITY_INDICATOR[task.priority] || PRIORITY_INDICATOR.medium;
|
||||
|
||||
return (
|
||||
<Link href={`/tasks/${task.id}`}>
|
||||
<div
|
||||
className={`bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 border-l-4 ${priorityClass} rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3
|
||||
className={`font-medium truncate ${
|
||||
task.status === "done" ? "line-through text-muted" : ""
|
||||
}`}
|
||||
>
|
||||
{task.title}
|
||||
</h3>
|
||||
{task.description && (
|
||||
<p className="text-sm text-muted mt-1 line-clamp-2">{task.description}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 mt-2 flex-wrap">
|
||||
<StatusBadge status={task.status} />
|
||||
{task.group_name && (
|
||||
<span
|
||||
className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium text-white"
|
||||
style={{ backgroundColor: task.group_color || "#6b7280" }}
|
||||
>
|
||||
{task.group_name}
|
||||
</span>
|
||||
)}
|
||||
{task.due_at && (
|
||||
<span className="text-xs text-muted">
|
||||
{new Date(task.due_at).toLocaleDateString("cs-CZ")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<span className="text-xs text-muted">
|
||||
{task.priority === "urgent" ? "!!!" : task.priority === "high" ? "!!" : task.priority === "medium" ? "!" : ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
165
apps/tasks/components/TaskForm.tsx
Normal file
165
apps/tasks/components/TaskForm.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Group, Task } from "@/lib/api";
|
||||
|
||||
interface TaskFormProps {
|
||||
groups: Group[];
|
||||
initial?: Partial<Task>;
|
||||
onSubmit: (data: Partial<Task>) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
submitLabel?: string;
|
||||
}
|
||||
|
||||
const STATUSES = [
|
||||
{ value: "pending", label: "Ceka" },
|
||||
{ value: "in_progress", label: "Probiha" },
|
||||
{ value: "done", label: "Hotovo" },
|
||||
{ value: "cancelled", label: "Zruseno" },
|
||||
];
|
||||
|
||||
const PRIORITIES = [
|
||||
{ value: "low", label: "Nizka" },
|
||||
{ value: "medium", label: "Stredni" },
|
||||
{ value: "high", label: "Vysoka" },
|
||||
{ value: "urgent", label: "Urgentni" },
|
||||
];
|
||||
|
||||
export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLabel = "Ulozit" }: TaskFormProps) {
|
||||
const [title, setTitle] = useState(initial?.title || "");
|
||||
const [description, setDescription] = useState(initial?.description || "");
|
||||
const [status, setStatus] = useState(initial?.status || "pending");
|
||||
const [priority, setPriority] = useState(initial?.priority || "medium");
|
||||
const [groupId, setGroupId] = useState(initial?.group_id || "");
|
||||
const [dueAt, setDueAt] = useState(initial?.due_at ? initial.due_at.slice(0, 16) : "");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!title.trim()) {
|
||||
setError("Nazev je povinny");
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
await onSubmit({
|
||||
title: title.trim(),
|
||||
description: description.trim(),
|
||||
status: status as Task["status"],
|
||||
priority: priority as Task["priority"],
|
||||
group_id: groupId || null,
|
||||
due_at: dueAt ? new Date(dueAt).toISOString() : null,
|
||||
});
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Chyba pri ukladani");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{error && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Nazev *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
|
||||
placeholder="Co je treba udelat..."
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Popis</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none"
|
||||
placeholder="Podrobnosti..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Stav</label>
|
||||
<select
|
||||
value={status}
|
||||
onChange={(e) => setStatus(e.target.value as "pending" | "in_progress" | "done" | "cancelled")}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
>
|
||||
{STATUSES.map((s) => (
|
||||
<option key={s.value} value={s.value}>{s.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Priorita</label>
|
||||
<select
|
||||
value={priority}
|
||||
onChange={(e) => setPriority(e.target.value as any)}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
>
|
||||
{PRIORITIES.map((p) => (
|
||||
<option key={p.value} value={p.value}>{p.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Skupina</label>
|
||||
<select
|
||||
value={groupId}
|
||||
onChange={(e) => setGroupId(e.target.value as any)}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
>
|
||||
<option value="">-- Bez skupiny --</option>
|
||||
{groups.map((g) => (
|
||||
<option key={g.id} value={g.id}>{g.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Termin</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={dueAt}
|
||||
onChange={(e) => setDueAt(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Ukladam..." : submitLabel}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
Zrusit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
54
apps/tasks/components/ThemeProvider.tsx
Normal file
54
apps/tasks/components/ThemeProvider.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useContext, useEffect, useState, ReactNode } from "react";
|
||||
|
||||
type Theme = "light" | "dark";
|
||||
|
||||
interface ThemeContextType {
|
||||
theme: Theme;
|
||||
toggleTheme: () => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType>({
|
||||
theme: "light",
|
||||
toggleTheme: () => {},
|
||||
});
|
||||
|
||||
export function useTheme() {
|
||||
return useContext(ThemeContext);
|
||||
}
|
||||
|
||||
export default function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
const [theme, setTheme] = useState<Theme>("light");
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const stored = localStorage.getItem("taskteam_theme") as Theme | null;
|
||||
if (stored) {
|
||||
setTheme(stored);
|
||||
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
setTheme("dark");
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
document.documentElement.classList.toggle("dark", theme === "dark");
|
||||
localStorage.setItem("taskteam_theme", theme);
|
||||
}, [theme, mounted]);
|
||||
|
||||
function toggleTheme() {
|
||||
setTheme((prev) => (prev === "light" ? "dark" : "light"));
|
||||
}
|
||||
|
||||
if (!mounted) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user