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>

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>
+  );
+}