feat: implement Supabase database schema and core authentication flow with registration and login pages
This commit is contained in:
Poyraz Avsever
@@ -0,0 +1,174 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import { db } from "@/lib/db";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Trash2 } from "lucide-react";
|
||||
|
||||
export default function TasksPage() {
|
||||
const [title, setTitle] = useState("");
|
||||
|
||||
const tasks = useLiveQuery(
|
||||
() => db.tasks.toArray(), // Şimdilik hepsini çekiyoruz, sıralama yapılabilir
|
||||
);
|
||||
|
||||
const handleAddTask = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!title.trim()) return;
|
||||
|
||||
const now = new Date().toISOString();
|
||||
|
||||
try {
|
||||
await db.tasks.add({
|
||||
id: uuidv4(),
|
||||
title,
|
||||
status: "todo",
|
||||
ai_generated: false,
|
||||
date: now.split("T")[0],
|
||||
created_at: now,
|
||||
});
|
||||
setTitle("");
|
||||
} catch (error) {
|
||||
console.error("Görev eklenemedi:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTaskStatus = async (id: string, currentStatus: string) => {
|
||||
await db.tasks.update(id, {
|
||||
status: currentStatus === "todo" ? "completed" : "todo",
|
||||
});
|
||||
};
|
||||
|
||||
const deleteTask = async (id: string) => {
|
||||
await db.tasks.delete(id);
|
||||
};
|
||||
|
||||
const pendingTasks = tasks?.filter((t) => t.status === "todo") || [];
|
||||
const completedTasks = tasks?.filter((t) => t.status === "completed") || [];
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-4xl mx-auto animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
Görevler & Planlar
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Kişisel hedeflerin ve YZ tarafından önerilen aksiyonlar.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Yeni Görev</CardTitle>
|
||||
<CardDescription>Aklındakini aksiyona dönüştür.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleAddTask} className="flex gap-2">
|
||||
<Input
|
||||
placeholder="Örn: 15 dakika yürüyüş yap..."
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button type="submit">Ekle</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 pt-4">
|
||||
{/* Yapılacaklar */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold flex items-center gap-2">
|
||||
Yapılacaklar{" "}
|
||||
<span className="text-sm px-2 py-0.5 rounded-full bg-primary/20 text-primary">
|
||||
{pendingTasks.length}
|
||||
</span>
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{pendingTasks.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Bekleyen görev yok.
|
||||
</p>
|
||||
) : (
|
||||
pendingTasks.map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className="flex items-center gap-3 p-3 rounded-lg border bg-card shadow-sm group transition-all hover:border-primary/50"
|
||||
>
|
||||
<Checkbox
|
||||
checked={false}
|
||||
onCheckedChange={() =>
|
||||
toggleTaskStatus(task.id, task.status)
|
||||
}
|
||||
className="w-5 h-5"
|
||||
/>
|
||||
<span className="flex-1 text-sm font-medium">
|
||||
{task.title}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => deleteTask(task.id)}
|
||||
className="opacity-0 group-hover:opacity-100 p-1.5 text-muted-foreground hover:text-red-500 transition-all rounded-md hover:bg-red-500/10"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tamamlananlar */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold opacity-70 flex items-center gap-2">
|
||||
Tamamlananlar{" "}
|
||||
<span className="text-sm px-2 py-0.5 rounded-full bg-muted text-muted-foreground">
|
||||
{completedTasks.length}
|
||||
</span>
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{completedTasks.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Hiç görev tamamlanmadı.
|
||||
</p>
|
||||
) : (
|
||||
completedTasks.map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className="flex items-center gap-3 p-3 rounded-lg border bg-muted/40 shadow-sm group"
|
||||
>
|
||||
<Checkbox
|
||||
checked={true}
|
||||
onCheckedChange={() =>
|
||||
toggleTaskStatus(task.id, task.status)
|
||||
}
|
||||
className="w-5 h-5 data-[state=checked]:bg-muted-foreground data-[state=checked]:border-muted-foreground"
|
||||
/>
|
||||
<span className="flex-1 text-sm line-through text-muted-foreground">
|
||||
{task.title}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => deleteTask(task.id)}
|
||||
className="opacity-0 group-hover:opacity-100 p-1.5 text-muted-foreground hover:text-red-500 transition-all rounded-md hover:bg-red-500/10"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user