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>
2026-03-29 10:02:32 +00:00
parent 9d075455e3
commit b5a6dd6d6f
29 changed files with 7541 additions and 0 deletions
--- a/apps/tasks/app/favicon.ico
+++ b/apps/tasks/app/favicon.ico
--- a/apps/tasks/app/fonts/GeistMonoVF.woff
+++ b/apps/tasks/app/fonts/GeistMonoVF.woff
--- a/apps/tasks/app/fonts/GeistVF.woff
+++ b/apps/tasks/app/fonts/GeistVF.woff
--- a/apps/tasks/app/globals.css
+++ b/apps/tasks/app/globals.css
@@ -0,0 +1,37 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+  --card: #f9fafb;
+  --card-border: #e5e7eb;
+  --muted: #6b7280;
+  --primary: #3b82f6;
+}
+
+.dark {
+  --background: #0a0a0a;
+  --foreground: #ededed;
+  --card: #1a1a2e;
+  --card-border: #2d2d44;
+  --muted: #9ca3af;
+  --primary: #60a5fa;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+@layer utilities {
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+}
--- a/apps/tasks/app/layout.tsx
+++ b/apps/tasks/app/layout.tsx
@@ -0,0 +1,47 @@
+import type { Metadata, Viewport } from "next";
+import "./globals.css";
+import ThemeProvider from "@/components/ThemeProvider";
+import AuthProvider from "@/components/AuthProvider";
+import Header from "@/components/Header";
+
+export const metadata: Metadata = {
+  title: "Task Team",
+  description: "Sprava ukolu pro tym",
+  manifest: "/manifest.json",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: "Task Team",
+  },
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
+    { media: "(prefers-color-scheme: dark)", color: "#0a0a0a" },
+  ],
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="cs" suppressHydrationWarning>
+      <body className="antialiased min-h-screen">
+        <ThemeProvider>
+          <AuthProvider>
+            <Header />
+            <main className="max-w-4xl mx-auto px-4 py-6">
+              {children}
+            </main>
+          </AuthProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
--- a/apps/tasks/app/login/page.tsx
+++ b/apps/tasks/app/login/page.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { login } from "@/lib/api";
+import { useAuth } from "@/lib/auth";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const { setAuth } = useAuth();
+  const router = useRouter();
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!email.trim()) {
+      setError("Zadejte email");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      const result = await login({ email: email.trim() });
+      setAuth(result.token, result.user);
+      router.push("/tasks");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Chyba prihlaseni");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-[70vh] flex items-center justify-center">
+      <div className="w-full max-w-sm">
+        <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-6 shadow-sm">
+          <h1 className="text-2xl font-bold text-center mb-6">Prihlaseni</h1>
+
+          {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 mb-4">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">Email</label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full px-3 py-2.5 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="vas@email.cz"
+                autoFocus
+                autoComplete="email"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors disabled:opacity-50"
+            >
+              {loading ? "Prihlasuji..." : "Prihlasit se"}
+            </button>
+          </form>
+
+          <p className="text-center text-sm text-muted mt-4">
+            Nemate ucet?{" "}
+            <Link href="/register" className="text-blue-600 hover:underline">
+              Registrovat se
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/tasks/app/page.tsx
+++ b/apps/tasks/app/page.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/lib/auth";
+
+export default function Home() {
+  const { token } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (token) {
+      router.replace("/tasks");
+    } else {
+      router.replace("/login");
+    }
+  }, [token, router]);
+
+  return (
+    <div className="flex items-center justify-center min-h-[60vh]">
+      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+    </div>
+  );
+}
--- a/apps/tasks/app/register/page.tsx
+++ b/apps/tasks/app/register/page.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { register } from "@/lib/api";
+import { useAuth } from "@/lib/auth";
+
+export default function RegisterPage() {
+  const [email, setEmail] = useState("");
+  const [name, setName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const { setAuth } = useAuth();
+  const router = useRouter();
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!email.trim() || !name.trim()) {
+      setError("Email a jmeno jsou povinne");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      const result = await register({
+        email: email.trim(),
+        name: name.trim(),
+        phone: phone.trim() || undefined,
+      });
+      setAuth(result.token, result.user);
+      router.push("/tasks");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Chyba registrace");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-[70vh] flex items-center justify-center">
+      <div className="w-full max-w-sm">
+        <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-6 shadow-sm">
+          <h1 className="text-2xl font-bold text-center mb-6">Registrace</h1>
+
+          {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 mb-4">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">Jmeno *</label>
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="w-full px-3 py-2.5 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="Vase jmeno"
+                autoFocus
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">Email *</label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full px-3 py-2.5 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="vas@email.cz"
+                autoComplete="email"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">Telefon</label>
+              <input
+                type="tel"
+                value={phone}
+                onChange={(e) => setPhone(e.target.value)}
+                className="w-full px-3 py-2.5 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="+420 123 456 789"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors disabled:opacity-50"
+            >
+              {loading ? "Registruji..." : "Registrovat se"}
+            </button>
+          </form>
+
+          <p className="text-center text-sm text-muted mt-4">
+            Jiz mate ucet?{" "}
+            <Link href="/login" className="text-blue-600 hover:underline">
+              Prihlasit se
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/tasks/app/tasks/[id]/page.tsx
+++ b/apps/tasks/app/tasks/[id]/page.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useRouter, useParams } from "next/navigation";
+import { useAuth } from "@/lib/auth";
+import { getTask, getGroups, updateTask, deleteTask, Task, Group } from "@/lib/api";
+import TaskForm from "@/components/TaskForm";
+import StatusBadge from "@/components/StatusBadge";
+
+export default function TaskDetailPage() {
+  const { token } = useAuth();
+  const router = useRouter();
+  const params = useParams();
+  const id = params.id as string;
+  const [task, setTask] = useState<Task | null>(null);
+  const [groups, setGroups] = useState<Group[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [editing, setEditing] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState("");
+
+  const loadTask = useCallback(async () => {
+    if (!token || !id) return;
+    setLoading(true);
+    try {
+      const [taskData, groupsData] = await Promise.all([
+        getTask(token, id),
+        getGroups(token),
+      ]);
+      setTask(taskData);
+      setGroups(groupsData.data || []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Chyba pri nacitani ukolu");
+    } finally {
+      setLoading(false);
+    }
+  }, [token, id]);
+
+  useEffect(() => {
+    if (!token) {
+      router.replace("/login");
+      return;
+    }
+    loadTask();
+  }, [token, router, loadTask]);
+
+  async function handleUpdate(data: Partial<Task>) {
+    if (!token || !id) return;
+    await updateTask(token, id, data);
+    setEditing(false);
+    loadTask();
+  }
+
+  async function handleDelete() {
+    if (!token || !id) return;
+    if (!confirm("Opravdu smazat tento ukol?")) return;
+    setDeleting(true);
+    try {
+      await deleteTask(token, id);
+      router.push("/tasks");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Chyba pri mazani");
+      setDeleting(false);
+    }
+  }
+
+  async function handleQuickStatus(newStatus: Task["status"]) {
+    if (!token || !id) return;
+    try {
+      await updateTask(token, id, { status: newStatus });
+      loadTask();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Chyba pri zmene stavu");
+    }
+  }
+
+  if (!token) return null;
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+      </div>
+    );
+  }
+
+  if (error || !task) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-red-500">{error || "Ukol nenalezen"}</p>
+        <button
+          onClick={() => router.push("/tasks")}
+          className="mt-4 text-blue-600 hover:underline"
+        >
+          Zpet na ukoly
+        </button>
+      </div>
+    );
+  }
+
+  if (editing) {
+    return (
+      <div className="max-w-lg mx-auto">
+        <h1 className="text-xl font-bold mb-4">Upravit ukol</h1>
+        <TaskForm
+          groups={groups}
+          initial={task}
+          onSubmit={handleUpdate}
+          onCancel={() => setEditing(false)}
+          submitLabel="Ulozit zmeny"
+        />
+      </div>
+    );
+  }
+
+  const PRIORITY_LABELS: Record<string, string> = {
+    low: "Nizka",
+    medium: "Stredni",
+    high: "Vysoka",
+    urgent: "Urgentni",
+  };
+
+  return (
+    <div className="max-w-lg mx-auto space-y-6">
+      {/* Back button */}
+      <button
+        onClick={() => router.push("/tasks")}
+        className="text-sm text-muted hover:text-foreground flex items-center gap-1"
+      >
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+        </svg>
+        Zpet
+      </button>
+
+      {/* Task detail card */}
+      <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-6">
+        <div className="flex items-start justify-between gap-4 mb-4">
+          <h1 className={`text-xl font-bold ${task.status === "done" ? "line-through text-muted" : ""}`}>
+            {task.title}
+          </h1>
+          <StatusBadge status={task.status} size="md" />
+        </div>
+
+        {task.description && (
+          <p className="text-muted mb-4 whitespace-pre-wrap">{task.description}</p>
+        )}
+
+        <div className="grid grid-cols-2 gap-3 text-sm">
+          <div>
+            <span className="text-muted">Priorita:</span>
+            <span className="ml-2 font-medium">{PRIORITY_LABELS[task.priority]}</span>
+          </div>
+          {task.group_name && (
+            <div>
+              <span className="text-muted">Skupina:</span>
+              <span
+                className="ml-2 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>
+            </div>
+          )}
+          {task.due_at && (
+            <div>
+              <span className="text-muted">Termin:</span>
+              <span className="ml-2">{new Date(task.due_at).toLocaleString("cs-CZ")}</span>
+            </div>
+          )}
+          <div>
+            <span className="text-muted">Vytvoreno:</span>
+            <span className="ml-2">{new Date(task.created_at).toLocaleString("cs-CZ")}</span>
+          </div>
+          {task.completed_at && (
+            <div>
+              <span className="text-muted">Dokonceno:</span>
+              <span className="ml-2">{new Date(task.completed_at).toLocaleString("cs-CZ")}</span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Quick status buttons */}
+      <div className="flex gap-2 flex-wrap">
+        {task.status !== "done" && (
+          <button
+            onClick={() => handleQuickStatus("done")}
+            className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm font-medium transition-colors"
+          >
+            Oznacit jako hotove
+          </button>
+        )}
+        {task.status === "pending" && (
+          <button
+            onClick={() => handleQuickStatus("in_progress")}
+            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors"
+          >
+            Zahajit
+          </button>
+        )}
+        {task.status === "done" && (
+          <button
+            onClick={() => handleQuickStatus("pending")}
+            className="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg text-sm font-medium transition-colors"
+          >
+            Znovu otevrit
+          </button>
+        )}
+      </div>
+
+      {/* Action buttons */}
+      <div className="flex gap-3">
+        <button
+          onClick={() => setEditing(true)}
+          className="flex-1 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors font-medium"
+        >
+          Upravit
+        </button>
+        <button
+          onClick={handleDelete}
+          disabled={deleting}
+          className="px-6 py-2.5 border border-red-300 dark:border-red-800 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors font-medium disabled:opacity-50"
+        >
+          {deleting ? "Mazu..." : "Smazat"}
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/apps/tasks/app/tasks/page.tsx
+++ b/apps/tasks/app/tasks/page.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/lib/auth";
+import { getTasks, getGroups, createTask, Task, Group } from "@/lib/api";
+import TaskCard from "@/components/TaskCard";
+import GroupSelector from "@/components/GroupSelector";
+import TaskForm from "@/components/TaskForm";
+
+type StatusFilter = "all" | "pending" | "in_progress" | "done" | "cancelled";
+
+export default function TasksPage() {
+  const { token } = useAuth();
+  const router = useRouter();
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [groups, setGroups] = useState<Group[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
+  const [showForm, setShowForm] = useState(false);
+
+  const loadData = useCallback(async () => {
+    if (!token) return;
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      if (selectedGroup) params.group_id = selectedGroup;
+      if (statusFilter !== "all") params.status = statusFilter;
+
+      const [tasksRes, groupsRes] = await Promise.all([
+        getTasks(token, Object.keys(params).length > 0 ? params : undefined),
+        getGroups(token),
+      ]);
+      setTasks(tasksRes.data || []);
+      setGroups(groupsRes.data || []);
+    } catch (err) {
+      console.error("Chyba pri nacitani:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [token, selectedGroup, statusFilter]);
+
+  useEffect(() => {
+    if (!token) {
+      router.replace("/login");
+      return;
+    }
+    loadData();
+  }, [token, router, loadData]);
+
+  async function handleCreateTask(data: Partial<Task>) {
+    if (!token) return;
+    await createTask(token, data);
+    setShowForm(false);
+    loadData();
+  }
+
+  const statusOptions: { value: StatusFilter; label: string }[] = [
+    { value: "all", label: "Vse" },
+    { value: "pending", label: "Ceka" },
+    { value: "in_progress", label: "Probiha" },
+    { value: "done", label: "Hotovo" },
+    { value: "cancelled", label: "Zruseno" },
+  ];
+
+  if (!token) return null;
+
+  return (
+    <div className="space-y-4">
+      {/* Group tabs */}
+      <GroupSelector groups={groups} selected={selectedGroup} onSelect={setSelectedGroup} />
+
+      {/* Status filter */}
+      <div className="flex gap-1.5 overflow-x-auto scrollbar-hide pb-1">
+        {statusOptions.map((opt) => (
+          <button
+            key={opt.value}
+            onClick={() => setStatusFilter(opt.value)}
+            className={`flex-shrink-0 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+              statusFilter === opt.value
+                ? "bg-gray-800 text-white dark:bg-white dark:text-gray-900"
+                : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
+            }`}
+          >
+            {opt.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Task creation form */}
+      {showForm && (
+        <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
+          <h2 className="text-lg font-semibold mb-4">Novy ukol</h2>
+          <TaskForm
+            groups={groups}
+            onSubmit={handleCreateTask}
+            onCancel={() => setShowForm(false)}
+            submitLabel="Vytvorit"
+          />
+        </div>
+      )}
+
+      {/* Task 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>
+        </div>
+      ) : tasks.length === 0 ? (
+        <div className="text-center py-16">
+          <div className="text-4xl mb-3">&#9744;</div>
+          <p className="text-muted text-lg">Zadne ukoly</p>
+          <p className="text-muted text-sm mt-1">Vytvorte prvni ukol pomoci tlacitka +</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {tasks.map((task) => (
+            <TaskCard key={task.id} task={task} />
+          ))}
+        </div>
+      )}
+
+      {/* Floating add button */}
+      {!showForm && (
+        <button
+          onClick={() => setShowForm(true)}
+          className="fixed bottom-6 right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all flex items-center justify-center text-2xl font-light"
+          aria-label="Pridat ukol"
+        >
+          +
+        </button>
+      )}
+    </div>
+  );
+}