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/.eslintrc.json
+++ b/apps/tasks/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off"
+  }
+}
--- a/apps/tasks/.gitignore
+++ b/apps/tasks/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/apps/tasks/README.md
+++ b/apps/tasks/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
--- 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>
+  );
+}
--- a/apps/tasks/components/AuthProvider.tsx
+++ b/apps/tasks/components/AuthProvider.tsx
@@ -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>
+  );
+}
--- a/apps/tasks/components/GroupSelector.tsx
+++ b/apps/tasks/components/GroupSelector.tsx
@@ -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>
+  );
+}
--- a/apps/tasks/components/Header.tsx
+++ b/apps/tasks/components/Header.tsx
@@ -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>
+  );
+}
--- a/apps/tasks/components/StatusBadge.tsx
+++ b/apps/tasks/components/StatusBadge.tsx
@@ -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>
+  );
+}
--- a/apps/tasks/components/TaskCard.tsx
+++ b/apps/tasks/components/TaskCard.tsx
@@ -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>
+  );
+}
--- a/apps/tasks/components/TaskForm.tsx
+++ b/apps/tasks/components/TaskForm.tsx
@@ -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>
+  );
+}
--- a/apps/tasks/components/ThemeProvider.tsx
+++ b/apps/tasks/components/ThemeProvider.tsx
@@ -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>
+  );
+}
--- a/apps/tasks/lib/api.ts
+++ b/apps/tasks/lib/api.ts
@@ -0,0 +1,145 @@
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
+
+interface ApiOptions {
+  method?: string;
+  body?: unknown;
+  token?: string;
+}
+
+async function apiFetch<T>(path: string, opts: ApiOptions = {}): Promise<T> {
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+  if (opts.token) {
+    headers["Authorization"] = `Bearer ${opts.token}`;
+  }
+
+  const res = await fetch(`${API_BASE}${path}`, {
+    method: opts.method || "GET",
+    headers,
+    body: opts.body ? JSON.stringify(opts.body) : undefined,
+  });
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ message: res.statusText }));
+    throw new Error(err.message || `HTTP ${res.status}`);
+  }
+
+  return res.json();
+}
+
+// Auth
+export function register(data: { email: string; name: string; phone?: string }) {
+  return apiFetch<{ token: string; user: User }>("/api/v1/auth/register", {
+    method: "POST",
+    body: data,
+  });
+}
+
+export function login(data: { email: string; password?: string }) {
+  return apiFetch<{ token: string; user: User }>("/api/v1/auth/login", {
+    method: "POST",
+    body: data,
+  });
+}
+
+export function getMe(token: string) {
+  return apiFetch<{ user: User }>("/api/v1/auth/me", { token });
+}
+
+// Tasks
+export function getTasks(token: string, params?: Record<string, string>) {
+  const qs = params ? "?" + new URLSearchParams(params).toString() : "";
+  return apiFetch<{ data: Task[]; total: number }>(`/api/v1/tasks${qs}`, { token });
+}
+
+export function getTask(token: string, id: string) {
+  return apiFetch<Task>(`/api/v1/tasks/${id}`, { token });
+}
+
+export function createTask(token: string, data: Partial<Task>) {
+  return apiFetch<Task>("/api/v1/tasks", { method: "POST", body: data, token });
+}
+
+export function updateTask(token: string, id: string, data: Partial<Task>) {
+  return apiFetch<Task>(`/api/v1/tasks/${id}`, { method: "PUT", body: data, token });
+}
+
+export function deleteTask(token: string, id: string) {
+  return apiFetch<void>(`/api/v1/tasks/${id}`, { method: "DELETE", token });
+}
+
+// Groups
+export function getGroups(token: string) {
+  return apiFetch<{ data: Group[] }>("/api/v1/groups", { token });
+}
+
+export function createGroup(token: string, data: Partial<Group>) {
+  return apiFetch<Group>("/api/v1/groups", { method: "POST", body: data, token });
+}
+
+export function updateGroup(token: string, id: string, data: Partial<Group>) {
+  return apiFetch<Group>(`/api/v1/groups/${id}`, { method: "PUT", body: data, token });
+}
+
+export function deleteGroup(token: string, id: string) {
+  return apiFetch<void>(`/api/v1/groups/${id}`, { method: "DELETE", token });
+}
+
+export function reorderGroups(token: string, ids: string[]) {
+  return apiFetch<void>("/api/v1/groups/reorder", { method: "PUT", body: { ids }, token });
+}
+
+// Connectors
+export function getConnectors(token: string) {
+  return apiFetch<{ data: Connector[] }>("/api/v1/connectors", { token });
+}
+
+export function createConnector(token: string, data: Partial<Connector>) {
+  return apiFetch<Connector>("/api/v1/connectors", { method: "POST", body: data, token });
+}
+
+// Types
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  phone?: string;
+}
+
+export interface Task {
+  id: string;
+  user_id: string | null;
+  group_id: string | null;
+  title: string;
+  description: string;
+  status: "pending" | "in_progress" | "done" | "cancelled";
+  priority: "low" | "medium" | "high" | "urgent";
+  scheduled_at: string | null;
+  due_at: string | null;
+  completed_at: string | null;
+  assigned_to: string[];
+  attachments: string[];
+  external_id: string | null;
+  external_source: string | null;
+  created_at: string;
+  updated_at: string;
+  group_name: string | null;
+  group_color: string | null;
+  group_icon: string | null;
+}
+
+export interface Group {
+  id: string;
+  name: string;
+  color: string;
+  icon: string | null;
+  sort_order: number;
+}
+
+export interface Connector {
+  id: string;
+  name: string;
+  type: string;
+  config: Record<string, unknown>;
+}
--- a/apps/tasks/lib/auth.ts
+++ b/apps/tasks/lib/auth.ts
@@ -0,0 +1,56 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import { User } from "./api";
+
+export interface AuthState {
+  token: string | null;
+  user: User | null;
+  setAuth: (token: string | null, user: User | null) => void;
+  logout: () => void;
+}
+
+export const AuthContext = createContext<AuthState>({
+  token: null,
+  user: null,
+  setAuth: () => {},
+  logout: () => {},
+});
+
+export function useAuth() {
+  return useContext(AuthContext);
+}
+
+export function getStoredToken(): string | null {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem("taskteam_token");
+}
+
+export function setStoredToken(token: string | null) {
+  if (typeof window === "undefined") return;
+  if (token) {
+    localStorage.setItem("taskteam_token", token);
+  } else {
+    localStorage.removeItem("taskteam_token");
+  }
+}
+
+export function getStoredUser(): User | null {
+  if (typeof window === "undefined") return null;
+  const raw = localStorage.getItem("taskteam_user");
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+export function setStoredUser(user: User | null) {
+  if (typeof window === "undefined") return;
+  if (user) {
+    localStorage.setItem("taskteam_user", JSON.stringify(user));
+  } else {
+    localStorage.removeItem("taskteam_user");
+  }
+}
--- a/apps/tasks/next.config.mjs
+++ b/apps/tasks/next.config.mjs
@@ -0,0 +1,15 @@
+/** @type {import("next").NextConfig} */
+const nextConfig = {
+  output: "standalone",
+  reactStrictMode: true,
+  async rewrites() {
+    return [
+      {
+        source: "/api/:path*",
+        destination: "http://localhost:3000/api/:path*",
+      },
+    ];
+  },
+};
+
+export default nextConfig;
--- a/apps/tasks/package-lock.json
+++ b/apps/tasks/package-lock.json
--- a/apps/tasks/package.json
+++ b/apps/tasks/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "tasks",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.2.35"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.35"
+  }
+}
--- a/apps/tasks/postcss.config.mjs
+++ b/apps/tasks/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
--- a/apps/tasks/public/manifest.json
+++ b/apps/tasks/public/manifest.json
@@ -0,0 +1,22 @@
+{
+  "name": "Task Team",
+  "short_name": "Tasks",
+  "description": "Sprava ukolu pro tym",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#3b82f6",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
--- a/apps/tasks/tailwind.config.ts
+++ b/apps/tasks/tailwind.config.ts
@@ -0,0 +1,34 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        card: "var(--card)",
+        "card-border": "var(--card-border)",
+        muted: "var(--muted)",
+        group: {
+          prace: "#3B82F6",
+          nakup: "#10B981",
+          study: "#8B5CF6",
+          plany: "#F59E0B",
+          sport: "#F97316",
+          duchovni: "#D4A017",
+          domaci: "#92400E",
+          relax: "#06B6D4",
+        },
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
--- a/apps/tasks/tsconfig.json
+++ b/apps/tasks/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}