admin/task-team
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add Next.js frontend PWA

Browse Source 
- 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
2026-03-29 10:02:32 +00:00
parent 9d075455e3
commit b5a6dd6d6f
29 changed files with 7541 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/tasks/.eslintrc.json Normal file
View File

@@ -0,0 +1,6 @@
{
"extends": "next/core-web-vitals",
"rules": {
"@typescript-eslint/no-explicit-any": "off"
}
}

36
apps/tasks/.gitignore vendored Normal file
View File

@@ -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

36
apps/tasks/README.md Normal file
View File

@@ -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.

BIN
apps/tasks/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
apps/tasks/app/fonts/GeistMonoVF.woff Normal file
View File

Binary file not shown.

BIN
apps/tasks/app/fonts/GeistVF.woff Normal file
View File

Binary file not shown.

37
apps/tasks/app/globals.css Normal file
View File

@@ -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;
}
}

47
apps/tasks/app/layout.tsx Normal file
View File

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

80
apps/tasks/app/login/page.tsx Normal file
View File

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

24
apps/tasks/app/page.tsx Normal file
View File

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

108
apps/tasks/app/register/page.tsx Normal file
View File

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

230
apps/tasks/app/tasks/[id]/page.tsx Normal file
View File

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

135
apps/tasks/app/tasks/page.tsx Normal file
View File

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

42
apps/tasks/components/AuthProvider.tsx Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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>
);
}

145
apps/tasks/lib/api.ts Normal file
View File

@@ -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>;
}

56
apps/tasks/lib/auth.ts Normal file
View File

@@ -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");
}
}

15
apps/tasks/next.config.mjs Normal file
View File

@@ -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;

6014
apps/tasks/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

26
apps/tasks/package.json Normal file
View File

@@ -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"
}
}

8
apps/tasks/postcss.config.mjs Normal file
View File

@@ -0,0 +1,8 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};
export default config;

22
apps/tasks/public/manifest.json Normal file
View File

@@ -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"
}
]
}

34
apps/tasks/tailwind.config.ts Normal file
View File

@@ -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;

26
apps/tasks/tsconfig.json Normal file
View File

@@ -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"]
}