feat(calendar): implement calendar event management with create, update, and delete functionalities
- Added actions for creating, updating, and deleting calendar events in `actions.ts`. - Introduced `CalendarClient` component to handle event display and interaction in `calendar-client.tsx`. - Refactored `CalendarPage` to fetch events, clients, projects, and tasks from Supabase and pass them to `CalendarClient`. - Enhanced form handling for event creation and editing with proper validation and error handling.
This commit is contained in:
Poyraz Avsever
@@ -0,0 +1,106 @@
|
||||
"use server";
|
||||
|
||||
import { createClient } from "@/lib/supabase/server";
|
||||
import { revalidatePath } from "next/cache";
|
||||
|
||||
const EVENT_TYPES = ["meeting", "focus", "deadline", "personal", "finance"] as const;
|
||||
|
||||
function cleanText(value: FormDataEntryValue | null) {
|
||||
const text = typeof value === "string" ? value.trim() : "";
|
||||
return text.length > 0 && text !== "__none" ? text : null;
|
||||
}
|
||||
|
||||
function readType(value: FormDataEntryValue | null) {
|
||||
const type = typeof value === "string" ? value : "focus";
|
||||
return EVENT_TYPES.includes(type as (typeof EVENT_TYPES)[number]) ? type : "focus";
|
||||
}
|
||||
|
||||
async function getCurrentUserId() {
|
||||
const supabase = await createClient();
|
||||
const {
|
||||
data: { user },
|
||||
error,
|
||||
} = await supabase.auth.getUser();
|
||||
|
||||
if (error || !user) {
|
||||
throw new Error("Takvim işlemi için giriş yapmış kullanıcı bulunamadı.");
|
||||
}
|
||||
|
||||
return { supabase, userId: user.id };
|
||||
}
|
||||
|
||||
function readPayload(formData: FormData) {
|
||||
return {
|
||||
title: cleanText(formData.get("title")),
|
||||
description: cleanText(formData.get("description")),
|
||||
type: readType(formData.get("type")),
|
||||
starts_at: cleanText(formData.get("starts_at")),
|
||||
ends_at: cleanText(formData.get("ends_at")),
|
||||
client_id: cleanText(formData.get("client_id")),
|
||||
project_id: cleanText(formData.get("project_id")),
|
||||
task_id: cleanText(formData.get("task_id")),
|
||||
};
|
||||
}
|
||||
|
||||
export async function createCalendarEventRecord(formData: FormData) {
|
||||
const { supabase, userId } = await getCurrentUserId();
|
||||
const payload = readPayload(formData);
|
||||
|
||||
if (!payload.title || !payload.starts_at) {
|
||||
throw new Error("Etkinlik başlığı ve başlangıç zamanı zorunludur.");
|
||||
}
|
||||
|
||||
const { error } = await supabase.from("calendar_events").insert({
|
||||
user_id: userId,
|
||||
...payload,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw new Error(`Etkinlik eklenemedi: ${error.message}`);
|
||||
}
|
||||
|
||||
revalidatePath("/calendar");
|
||||
}
|
||||
|
||||
export async function updateCalendarEventRecord(formData: FormData) {
|
||||
const { supabase, userId } = await getCurrentUserId();
|
||||
const id = cleanText(formData.get("id"));
|
||||
const payload = readPayload(formData);
|
||||
|
||||
if (!id || !payload.title || !payload.starts_at) {
|
||||
throw new Error("Etkinlik güncellemek için başlık, başlangıç ve kayıt kimliği zorunludur.");
|
||||
}
|
||||
|
||||
const { error } = await supabase
|
||||
.from("calendar_events")
|
||||
.update(payload)
|
||||
.eq("id", id)
|
||||
.eq("user_id", userId);
|
||||
|
||||
if (error) {
|
||||
throw new Error(`Etkinlik güncellenemedi: ${error.message}`);
|
||||
}
|
||||
|
||||
revalidatePath("/calendar");
|
||||
}
|
||||
|
||||
export async function deleteCalendarEventRecord(formData: FormData) {
|
||||
const { supabase, userId } = await getCurrentUserId();
|
||||
const id = cleanText(formData.get("id"));
|
||||
|
||||
if (!id) {
|
||||
throw new Error("Silinecek etkinlik bulunamadı.");
|
||||
}
|
||||
|
||||
const { error } = await supabase
|
||||
.from("calendar_events")
|
||||
.delete()
|
||||
.eq("id", id)
|
||||
.eq("user_id", userId);
|
||||
|
||||
if (error) {
|
||||
throw new Error(`Etkinlik silinemedi: ${error.message}`);
|
||||
}
|
||||
|
||||
revalidatePath("/calendar");
|
||||
}
|
||||
@@ -0,0 +1,456 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
createCalendarEventRecord,
|
||||
deleteCalendarEventRecord,
|
||||
updateCalendarEventRecord,
|
||||
} from "@/app/(dashboard)/calendar/actions";
|
||||
import { Badge, Button, Card, CardContent, Input, Label, Textarea } from "poyraz-ui/atoms";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "poyraz-ui/molecules";
|
||||
import { CalendarDays, Clock, Pencil, Plus, Trash2 } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
export type CalendarRelationOption = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type CalendarTaskOption = {
|
||||
id: string;
|
||||
title: string;
|
||||
};
|
||||
|
||||
export type CalendarEventItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string | null;
|
||||
type: "meeting" | "focus" | "deadline" | "personal" | "finance";
|
||||
starts_at: string;
|
||||
ends_at: string | null;
|
||||
client_id: string | null;
|
||||
project_id: string | null;
|
||||
task_id: string | null;
|
||||
clientName: string | null;
|
||||
projectName: string | null;
|
||||
taskTitle: string | null;
|
||||
};
|
||||
|
||||
const typeLabels = {
|
||||
meeting: "Toplantı",
|
||||
focus: "Odak",
|
||||
deadline: "Deadline",
|
||||
personal: "Kişisel",
|
||||
finance: "Finans",
|
||||
};
|
||||
|
||||
const typeClasses = {
|
||||
meeting: "border-blue-200 bg-blue-50 text-blue-700",
|
||||
focus: "border-emerald-200 bg-emerald-50 text-emerald-700",
|
||||
deadline: "border-rose-200 bg-rose-50 text-rose-700",
|
||||
personal: "border-amber-200 bg-amber-50 text-amber-700",
|
||||
finance: "border-primary/20 bg-primary/10 text-primary",
|
||||
};
|
||||
|
||||
type CalendarClientProps = {
|
||||
events: CalendarEventItem[];
|
||||
clients: CalendarRelationOption[];
|
||||
projects: CalendarRelationOption[];
|
||||
tasks: CalendarTaskOption[];
|
||||
};
|
||||
|
||||
export function CalendarClient({ events, clients, projects, tasks }: CalendarClientProps) {
|
||||
const [monthDate, setMonthDate] = useState(() => new Date());
|
||||
const [selectedDate, setSelectedDate] = useState(() => toDateKey(new Date()));
|
||||
const days = useMemo(() => buildMonthDays(monthDate), [monthDate]);
|
||||
const eventsByDay = useMemo(() => groupEventsByDay(events), [events]);
|
||||
const selectedEvents = eventsByDay.get(selectedDate) || [];
|
||||
const upcomingEvents = events
|
||||
.filter((event) => new Date(event.starts_at) >= startOfToday())
|
||||
.slice(0, 6);
|
||||
|
||||
function shiftMonth(amount: number) {
|
||||
setMonthDate((current) => new Date(current.getFullYear(), current.getMonth() + amount, 1));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-6">
|
||||
<div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<CalendarDays className="h-4 w-4" />
|
||||
Planlama
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold tracking-normal text-foreground">Takvim</h1>
|
||||
<p className="mt-1 max-w-2xl text-sm text-muted-foreground">
|
||||
Toplantı, odak bloğu, deadline, kişisel ve finans etkinliklerini yönet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CalendarEventDialog
|
||||
mode="create"
|
||||
defaultDate={selectedDate}
|
||||
clients={clients}
|
||||
projects={projects}
|
||||
tasks={tasks}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-[1fr_320px]">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-foreground">
|
||||
{formatMonth(monthDate)}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">{events.length} etkinlik</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button type="button" variant="outline" onClick={() => shiftMonth(-1)}>
|
||||
Önceki
|
||||
</Button>
|
||||
<Button type="button" variant="outline" onClick={() => setMonthDate(new Date())}>
|
||||
Bugün
|
||||
</Button>
|
||||
<Button type="button" variant="outline" onClick={() => shiftMonth(1)}>
|
||||
Sonraki
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-7 border border-border text-center text-xs font-medium uppercase text-muted-foreground">
|
||||
{["Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz"].map((day) => (
|
||||
<div key={day} className="border-r border-border px-2 py-2 last:border-r-0">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-7 border-x border-border">
|
||||
{days.map((day) => {
|
||||
const dayEvents = eventsByDay.get(day.key) || [];
|
||||
const isSelected = selectedDate === day.key;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={day.key}
|
||||
type="button"
|
||||
onClick={() => setSelectedDate(day.key)}
|
||||
className={`min-h-28 border-b border-r border-border p-2 text-left transition-colors last:border-r-0 hover:bg-muted/40 ${
|
||||
!day.inMonth ? "bg-muted/20 text-muted-foreground" : "bg-background"
|
||||
} ${isSelected ? "ring-2 ring-inset ring-primary" : ""}`}
|
||||
>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span className="text-sm font-medium">{day.date.getDate()}</span>
|
||||
{toDateKey(day.date) === toDateKey(new Date()) ? (
|
||||
<span className="h-2 w-2 rounded-full bg-primary" />
|
||||
) : null}
|
||||
</div>
|
||||
<div className="tiny-scrollbar max-h-20 space-y-1 overflow-y-auto">
|
||||
{dayEvents.slice(0, 3).map((event) => (
|
||||
<div key={event.id} className="truncate rounded-sm bg-primary/10 px-1.5 py-1 text-xs text-primary">
|
||||
{event.title}
|
||||
</div>
|
||||
))}
|
||||
{dayEvents.length > 3 ? (
|
||||
<div className="text-xs text-muted-foreground">+{dayEvents.length - 3}</div>
|
||||
) : null}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardContent className="space-y-3 p-4">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-foreground">
|
||||
{formatDateLabel(selectedDate)}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{selectedEvents.length} etkinlik
|
||||
</p>
|
||||
</div>
|
||||
<CalendarEventDialog
|
||||
mode="create"
|
||||
defaultDate={selectedDate}
|
||||
clients={clients}
|
||||
projects={projects}
|
||||
tasks={tasks}
|
||||
/>
|
||||
<EventList events={selectedEvents} clients={clients} projects={projects} tasks={tasks} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="space-y-3 p-4">
|
||||
<h2 className="text-base font-semibold text-foreground">Yaklaşan etkinlikler</h2>
|
||||
<EventList events={upcomingEvents} clients={clients} projects={projects} tasks={tasks} compact />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EventList({
|
||||
events,
|
||||
clients,
|
||||
projects,
|
||||
tasks,
|
||||
compact = false,
|
||||
}: {
|
||||
events: CalendarEventItem[];
|
||||
clients: CalendarRelationOption[];
|
||||
projects: CalendarRelationOption[];
|
||||
tasks: CalendarTaskOption[];
|
||||
compact?: boolean;
|
||||
}) {
|
||||
if (events.length === 0) {
|
||||
return <p className="text-sm text-muted-foreground">Etkinlik yok.</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{events.map((event) => (
|
||||
<div key={event.id} className="rounded-sm border border-border p-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="truncate font-medium text-foreground">{event.title}</div>
|
||||
<div className="mt-1 flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Clock className="h-3.5 w-3.5" />
|
||||
{formatTimeRange(event)}
|
||||
</div>
|
||||
{!compact ? (
|
||||
<div className="mt-2 text-sm text-muted-foreground">
|
||||
{event.projectName || event.clientName || event.taskTitle || event.description || "Bağlantı yok"}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<Badge className={typeClasses[event.type]}>{typeLabels[event.type]}</Badge>
|
||||
</div>
|
||||
{!compact ? (
|
||||
<div className="mt-3 flex gap-2">
|
||||
<CalendarEventDialog mode="edit" event={event} clients={clients} projects={projects} tasks={tasks} />
|
||||
<form action={deleteCalendarEventRecord}>
|
||||
<input type="hidden" name="id" value={event.id} />
|
||||
<Button type="submit" variant="outline" className="h-9 gap-2 text-rose-600">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
Sil
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CalendarEventDialog({
|
||||
mode,
|
||||
event,
|
||||
defaultDate,
|
||||
clients,
|
||||
projects,
|
||||
tasks,
|
||||
}: {
|
||||
mode: "create" | "edit";
|
||||
event?: CalendarEventItem;
|
||||
defaultDate?: string;
|
||||
clients: CalendarRelationOption[];
|
||||
projects: CalendarRelationOption[];
|
||||
tasks: CalendarTaskOption[];
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const action = mode === "create" ? createCalendarEventRecord : updateCalendarEventRecord;
|
||||
|
||||
async function handleSubmit(formData: FormData) {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await action(formData);
|
||||
setOpen(false);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="h-9 gap-2" variant={mode === "create" ? "default" : "outline"}>
|
||||
{mode === "create" ? <Plus className="h-4 w-4" /> : <Pencil className="h-4 w-4" />}
|
||||
{mode === "create" ? "Etkinlik ekle" : "Düzenle"}
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-h-[min(680px,calc(100dvh-6rem))] overflow-hidden sm:max-w-xl">
|
||||
<form action={handleSubmit} className="flex max-h-[min(640px,calc(100dvh-9rem))] flex-col">
|
||||
{event ? <input type="hidden" name="id" value={event.id} /> : null}
|
||||
<DialogHeader className="shrink-0 pb-5">
|
||||
<DialogTitle>{mode === "create" ? "Yeni etkinlik" : "Etkinliği düzenle"}</DialogTitle>
|
||||
<DialogDescription>Takvim etkinliğini proje, görev veya müşteriyle ilişkilendir.</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="tiny-scrollbar min-h-0 flex-1 overflow-y-auto pr-2">
|
||||
<EventFormFields event={event} defaultDate={defaultDate} clients={clients} projects={projects} tasks={tasks} />
|
||||
</div>
|
||||
|
||||
<DialogFooter className="shrink-0 border-t border-border pt-5">
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Kaydediliyor" : mode === "create" ? "Etkinliği ekle" : "Değişiklikleri kaydet"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function EventFormFields({
|
||||
event,
|
||||
defaultDate,
|
||||
clients,
|
||||
projects,
|
||||
tasks,
|
||||
}: {
|
||||
event?: CalendarEventItem;
|
||||
defaultDate?: string;
|
||||
clients: CalendarRelationOption[];
|
||||
projects: CalendarRelationOption[];
|
||||
tasks: CalendarTaskOption[];
|
||||
}) {
|
||||
const startsAt = event?.starts_at ? toDateTimeLocal(event.starts_at) : `${defaultDate || toDateKey(new Date())}T09:00`;
|
||||
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-2">
|
||||
<Label>Başlık</Label>
|
||||
<Input name="title" defaultValue={event?.title || ""} required placeholder="Örn. Müşteri toplantısı" />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>Açıklama</Label>
|
||||
<Textarea name="description" defaultValue={event?.description || ""} rows={3} />
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<SelectField name="type" label="Tür" defaultValue={event?.type || "focus"}>
|
||||
<SelectItem value="meeting">Toplantı</SelectItem>
|
||||
<SelectItem value="focus">Odak</SelectItem>
|
||||
<SelectItem value="deadline">Deadline</SelectItem>
|
||||
<SelectItem value="personal">Kişisel</SelectItem>
|
||||
<SelectItem value="finance">Finans</SelectItem>
|
||||
</SelectField>
|
||||
<SelectField name="client_id" label="Müşteri" defaultValue={event?.client_id || "__none"}>
|
||||
<SelectItem value="__none">Müşteri yok</SelectItem>
|
||||
{clients.map((client) => <SelectItem key={client.id} value={client.id}>{client.name}</SelectItem>)}
|
||||
</SelectField>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<SelectField name="project_id" label="Proje" defaultValue={event?.project_id || "__none"}>
|
||||
<SelectItem value="__none">Proje yok</SelectItem>
|
||||
{projects.map((project) => <SelectItem key={project.id} value={project.id}>{project.name}</SelectItem>)}
|
||||
</SelectField>
|
||||
<SelectField name="task_id" label="Görev" defaultValue={event?.task_id || "__none"}>
|
||||
<SelectItem value="__none">Görev yok</SelectItem>
|
||||
{tasks.map((task) => <SelectItem key={task.id} value={task.id}>{task.title}</SelectItem>)}
|
||||
</SelectField>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="grid gap-2">
|
||||
<Label>Başlangıç</Label>
|
||||
<Input name="starts_at" type="datetime-local" defaultValue={startsAt} required />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>Bitiş</Label>
|
||||
<Input name="ends_at" type="datetime-local" defaultValue={event?.ends_at ? toDateTimeLocal(event.ends_at) : ""} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectField({ name, label, defaultValue, children }: { name: string; label: string; defaultValue: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="grid gap-2">
|
||||
<Label>{label}</Label>
|
||||
<Select name={name} defaultValue={defaultValue}>
|
||||
<SelectTrigger><SelectValue placeholder={`${label} seç`} /></SelectTrigger>
|
||||
<SelectContent>{children}</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function buildMonthDays(monthDate: Date) {
|
||||
const year = monthDate.getFullYear();
|
||||
const month = monthDate.getMonth();
|
||||
const firstDay = new Date(year, month, 1);
|
||||
const offset = (firstDay.getDay() + 6) % 7;
|
||||
const start = new Date(year, month, 1 - offset);
|
||||
|
||||
return Array.from({ length: 42 }, (_, index) => {
|
||||
const date = new Date(start);
|
||||
date.setDate(start.getDate() + index);
|
||||
return { date, key: toDateKey(date), inMonth: date.getMonth() === month };
|
||||
});
|
||||
}
|
||||
|
||||
function groupEventsByDay(events: CalendarEventItem[]) {
|
||||
const map = new Map<string, CalendarEventItem[]>();
|
||||
for (const event of events) {
|
||||
const key = toDateKey(new Date(event.starts_at));
|
||||
map.set(key, [...(map.get(key) || []), event]);
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
function toDateKey(date: Date) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
function startOfToday() {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
return today;
|
||||
}
|
||||
|
||||
function formatMonth(date: Date) {
|
||||
return new Intl.DateTimeFormat("tr-TR", { month: "long", year: "numeric" }).format(date);
|
||||
}
|
||||
|
||||
function formatDateLabel(dateKey: string) {
|
||||
return new Intl.DateTimeFormat("tr-TR", { day: "2-digit", month: "long", year: "numeric" }).format(new Date(`${dateKey}T00:00:00`));
|
||||
}
|
||||
|
||||
function formatTimeRange(event: CalendarEventItem) {
|
||||
const start = new Intl.DateTimeFormat("tr-TR", { hour: "2-digit", minute: "2-digit" }).format(new Date(event.starts_at));
|
||||
const end = event.ends_at ? new Intl.DateTimeFormat("tr-TR", { hour: "2-digit", minute: "2-digit" }).format(new Date(event.ends_at)) : null;
|
||||
return end ? `${start} - ${end}` : start;
|
||||
}
|
||||
|
||||
function toDateTimeLocal(value: string) {
|
||||
const date = new Date(value);
|
||||
const offsetDate = new Date(date.getTime() - date.getTimezoneOffset() * 60_000);
|
||||
return offsetDate.toISOString().slice(0, 16);
|
||||
}
|
||||
@@ -1,339 +1,107 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import {
|
||||
ChevronLeft, ChevronRight, Plus, Search, Calendar as CalendarIcon,
|
||||
Clock, Filter, MoreHorizontal, Brain, X, Check, ArrowRight
|
||||
} from "lucide-react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
CalendarClient,
|
||||
type CalendarEventItem,
|
||||
type CalendarRelationOption,
|
||||
type CalendarTaskOption,
|
||||
} from "@/app/(dashboard)/calendar/calendar-client";
|
||||
import { createClient } from "@/lib/supabase/server";
|
||||
|
||||
// Mock Data
|
||||
const categories = [
|
||||
{ name: "Deep Work", color: "bg-[#6C5BB0]" },
|
||||
{ name: "Meetings", color: "bg-orange-500" },
|
||||
{ name: "Project Deadlines", color: "bg-blue-500" },
|
||||
{ name: "Health & Habits", color: "bg-emerald-500" },
|
||||
];
|
||||
|
||||
const mockEvents = [
|
||||
{ day: 2, title: "Q3 Planning", type: "Meetings", time: "10:00 AM", colorClass: "bg-orange-500/10 text-orange-400 border-orange-500/20" },
|
||||
{ day: 5, title: "Deep Work Session", type: "Deep Work", time: "09:00 AM", colorClass: "bg-[#6C5BB0]/10 text-[#a798e8] border-[#6C5BB0]/20" },
|
||||
{ day: 5, title: "UI Review", type: "Project Deadlines", time: "02:00 PM", colorClass: "bg-blue-500/10 text-blue-400 border-blue-500/20" },
|
||||
{ day: 12, title: "Frontend Deploy", type: "Project Deadlines", time: "11:00 AM", colorClass: "bg-blue-500/10 text-blue-400 border-blue-500/20" },
|
||||
{ day: 15, title: "1:1 with Alex", type: "Meetings", time: "01:30 PM", colorClass: "bg-orange-500/10 text-orange-400 border-orange-500/20" },
|
||||
{ day: 15, title: "Gym", type: "Health & Habits", time: "06:00 PM", colorClass: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" },
|
||||
{ day: 18, title: "Focus Block", type: "Deep Work", time: "08:00 AM", colorClass: "bg-[#6C5BB0]/10 text-[#a798e8] border-[#6C5BB0]/20" },
|
||||
{ day: 22, title: "Reading", type: "Health & Habits", time: "09:00 PM", colorClass: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" },
|
||||
{ day: 25, title: "Client Demo", type: "Project Deadlines", time: "03:00 PM", colorClass: "bg-blue-500/10 text-blue-400 border-blue-500/20" },
|
||||
{ day: 28, title: "Retrospective", type: "Meetings", time: "04:00 PM", colorClass: "bg-orange-500/10 text-orange-400 border-orange-500/20" },
|
||||
];
|
||||
|
||||
const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
|
||||
|
||||
const generateCalendarDays = () => {
|
||||
const days = [];
|
||||
days.push({ empty: true, key: "empty-0" });
|
||||
for (let i = 1; i <= 30; i++) {
|
||||
const events = mockEvents.filter((e) => e.day === i);
|
||||
days.push({ empty: false, day: i, events, isToday: i === 15 });
|
||||
}
|
||||
const remaining = 35 - days.length;
|
||||
for (let i = 1; i <= remaining; i++) {
|
||||
days.push({ empty: true, key: `empty-end-${i}` });
|
||||
}
|
||||
return days;
|
||||
type CalendarEventRow = {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string | null;
|
||||
type: CalendarEventItem["type"];
|
||||
starts_at: string;
|
||||
ends_at: string | null;
|
||||
client_id: string | null;
|
||||
project_id: string | null;
|
||||
task_id: string | null;
|
||||
clients: { name: string } | { name: string }[] | null;
|
||||
projects: { name: string } | { name: string }[] | null;
|
||||
tasks: { title: string } | { title: string }[] | null;
|
||||
};
|
||||
|
||||
export default function CalendarPage() {
|
||||
const [selectedDay, setSelectedDay] = useState<any>(null);
|
||||
const [isOptimizing, setIsOptimizing] = useState(false);
|
||||
const calendarDays = generateCalendarDays();
|
||||
export default async function CalendarPage() {
|
||||
const supabase = await createClient();
|
||||
const {
|
||||
data: { user },
|
||||
} = await supabase.auth.getUser();
|
||||
|
||||
const handleOptimize = () => {
|
||||
setIsOptimizing(true);
|
||||
setTimeout(() => setIsOptimizing(false), 2500);
|
||||
};
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [{ data: eventRows }, { data: clientRows }, { data: projectRows }, { data: taskRows }] =
|
||||
await Promise.all([
|
||||
supabase
|
||||
.from("calendar_events")
|
||||
.select("id, title, description, type, starts_at, ends_at, client_id, project_id, task_id, clients(name), projects(name), tasks(title)")
|
||||
.eq("user_id", user.id)
|
||||
.order("starts_at", { ascending: true }),
|
||||
supabase
|
||||
.from("clients")
|
||||
.select("id, name")
|
||||
.eq("user_id", user.id)
|
||||
.neq("status", "archived")
|
||||
.order("name", { ascending: true }),
|
||||
supabase
|
||||
.from("projects")
|
||||
.select("id, name")
|
||||
.eq("user_id", user.id)
|
||||
.neq("status", "cancelled")
|
||||
.order("name", { ascending: true }),
|
||||
supabase
|
||||
.from("tasks")
|
||||
.select("id, title")
|
||||
.eq("user_id", user.id)
|
||||
.neq("status", "done")
|
||||
.order("created_at", { ascending: false }),
|
||||
]);
|
||||
|
||||
const events: CalendarEventItem[] = ((eventRows || []) as unknown as CalendarEventRow[]).map((event) => ({
|
||||
id: event.id,
|
||||
title: event.title,
|
||||
description: event.description,
|
||||
type: normalizeType(event.type),
|
||||
starts_at: event.starts_at,
|
||||
ends_at: event.ends_at,
|
||||
client_id: event.client_id,
|
||||
project_id: event.project_id,
|
||||
task_id: event.task_id,
|
||||
clientName: getRelationName(event.clients),
|
||||
projectName: getRelationName(event.projects),
|
||||
taskTitle: getRelationTitle(event.tasks),
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-7xl animate-in fade-in slide-in-from-bottom-4 duration-500 h-full flex flex-col text-foreground font-sans relative">
|
||||
|
||||
{/* Optimization Overlay */}
|
||||
<AnimatePresence>
|
||||
{isOptimizing && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="absolute inset-0 z-50 bg-[#0A0710]/80 backdrop-blur-md flex flex-col items-center justify-center"
|
||||
>
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
rotate: [0, 10, -10, 0]
|
||||
}}
|
||||
transition={{ repeat: Infinity, duration: 1.5 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<Brain className="h-16 w-16 text-primary" />
|
||||
</motion.div>
|
||||
<h2 className="text-xl font-bold mb-2">AI Schedule Optimization</h2>
|
||||
<p className="text-muted-foreground text-sm">Analyzing energy trends and focus blocks...</p>
|
||||
<div className="w-48 h-1 bg-white/10 rounded-full mt-6 overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ x: "-100%" }}
|
||||
animate={{ x: "100%" }}
|
||||
transition={{ repeat: Infinity, duration: 1, ease: "linear" }}
|
||||
className="w-full h-full bg-primary"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Top Header */}
|
||||
<div className="flex items-center justify-between pb-4 border-b border-white/5 mb-6 mt-4">
|
||||
<h1 className="text-lg font-medium text-muted-foreground">
|
||||
<span className="text-foreground">Calendar</span> / Monthly View
|
||||
</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-[#150F1D] border border-white/5 rounded-sm px-3 py-1.5 flex items-center gap-2">
|
||||
<Search className="h-4 w-4 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search events..."
|
||||
className="bg-transparent border-none outline-none text-xs w-48 placeholder:text-muted-foreground/50 text-foreground"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedDay({ day: 15, events: mockEvents.filter(e => e.day === 15) })}
|
||||
className="bg-primary hover:bg-primary/90 text-primary-foreground border border-primary/20 px-4 py-1.5 rounded-sm text-xs font-semibold flex items-center gap-2 transition-all active:scale-95 shadow-lg shadow-primary/20"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
NEW EVENT
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="flex-1 grid grid-cols-1 lg:grid-cols-4 gap-6 min-h-0">
|
||||
|
||||
{/* Left Sidebar Panel */}
|
||||
<div className="hidden lg:flex flex-col gap-6">
|
||||
|
||||
{/* Mini Calendar Mock */}
|
||||
<div className="rounded-sm border border-white/5 bg-[#0A0710] p-5">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<span className="text-sm font-semibold">May 2026</span>
|
||||
<div className="flex gap-1">
|
||||
<button className="p-1 hover:bg-white/5 rounded-sm text-muted-foreground transition-colors"><ChevronLeft className="h-4 w-4" /></button>
|
||||
<button className="p-1 hover:bg-white/5 rounded-sm text-muted-foreground transition-colors"><ChevronRight className="h-4 w-4" /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-7 gap-1 text-center text-[10px] text-muted-foreground font-semibold mb-2">
|
||||
<div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div><div>S</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-7 gap-1 text-center text-xs">
|
||||
<div className="text-muted-foreground/30 py-1">27</div>
|
||||
{[...Array(30)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`py-1 rounded-sm cursor-pointer hover:bg-white/5 transition-colors ${i + 1 === 15 ? 'bg-primary/20 text-primary font-bold' : ''}`}
|
||||
>
|
||||
{i + 1}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Calendars / Categories */}
|
||||
<div className="rounded-sm border border-white/5 bg-[#0A0710] p-5 flex-1">
|
||||
<div className="flex justify-between items-center mb-5">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">My Calendars</h3>
|
||||
<button className="text-muted-foreground hover:text-foreground"><Filter className="h-3.5 w-3.5" /></button>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{categories.map((cat, idx) => (
|
||||
<label key={idx} className="flex items-center gap-3 cursor-pointer group">
|
||||
<div className={`w-3 h-3 rounded-sm ${cat.color} ring-2 ring-transparent group-hover:ring-white/10 transition-all shadow-[0_0_8px_rgba(108,91,176,0.3)]`}></div>
|
||||
<span className="text-sm text-muted-foreground group-hover:text-foreground transition-colors">{cat.name}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Optimizer Card */}
|
||||
<motion.div
|
||||
whileHover={{ y: -4 }}
|
||||
className="rounded-sm border border-primary/20 bg-primary/5 p-5 flex flex-col gap-3 relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute -right-4 -bottom-4 opacity-5 rotate-12">
|
||||
<Brain className="h-24 w-24 text-primary" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Brain className="h-4 w-4 text-primary" />
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wider text-primary">AI Optimizer</h3>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground leading-relaxed">
|
||||
Detected focus peak at 10 AM on Thursdays. Suggest moving **UI Review** to maximize alignment.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleOptimize}
|
||||
className="bg-primary/10 text-primary hover:bg-primary/20 border border-primary/20 px-3 py-1.5 rounded-sm text-[10px] font-bold uppercase tracking-widest transition-all mt-2 text-center flex justify-center w-full"
|
||||
>
|
||||
Run AI Optimization
|
||||
</button>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Main Calendar View */}
|
||||
<div className="lg:col-span-3 flex flex-col rounded-sm border border-white/5 bg-[#0A0710] overflow-hidden">
|
||||
|
||||
{/* Calendar Toolbar */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-white/5 bg-[#0F0B15]/30">
|
||||
<div className="flex items-center gap-4">
|
||||
<h2 className="text-xl font-semibold">May 2026</h2>
|
||||
<div className="flex items-center bg-[#150F1D] border border-white/5 rounded-sm p-0.5">
|
||||
<button className="p-1 hover:bg-white/5 rounded-sm transition-colors text-muted-foreground"><ChevronLeft className="h-4 w-4" /></button>
|
||||
<button className="px-3 py-1 text-xs font-medium hover:bg-white/5 rounded-sm transition-colors text-foreground">Today</button>
|
||||
<button className="p-1 hover:bg-white/5 rounded-sm transition-colors text-muted-foreground"><ChevronRight className="h-4 w-4" /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 bg-[#150F1D] border border-white/5 rounded-sm p-0.5">
|
||||
<button className="px-3 py-1.5 text-xs font-medium rounded-sm text-muted-foreground hover:text-foreground transition-colors">Day</button>
|
||||
<button className="px-3 py-1.5 text-xs font-medium rounded-sm text-muted-foreground hover:text-foreground transition-colors">Week</button>
|
||||
<button className="px-3 py-1.5 text-xs font-medium rounded-sm bg-[#2B2538] text-foreground shadow-sm">Month</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Calendar Header */}
|
||||
<div className="grid grid-cols-7 border-b border-white/5 bg-[#0F0B15]/50">
|
||||
{daysOfWeek.map((day) => (
|
||||
<div key={day} className="py-3 text-center text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Calendar Grid */}
|
||||
<div className="flex-1 grid grid-cols-7 grid-rows-5 overflow-hidden bg-white/[0.02] gap-[1px]">
|
||||
{calendarDays.map((cell, idx) => (
|
||||
<motion.div
|
||||
key={cell.key || cell.day}
|
||||
whileHover={{ backgroundColor: "rgba(15, 11, 21, 0.8)" }}
|
||||
onClick={() => !cell.empty && setSelectedDay(cell)}
|
||||
className={`bg-[#0A0710] p-2 flex flex-col gap-1 transition-all cursor-pointer relative group ${cell.empty ? 'opacity-30 pointer-events-none' : ''}`}
|
||||
>
|
||||
{!cell.empty && (
|
||||
<div className={`text-xs font-medium mb-1 w-6 h-6 flex items-center justify-center rounded-sm transition-colors ${cell.isToday ? 'bg-primary text-primary-foreground shadow-[0_0_12px_rgba(108,91,176,0.5)]' : 'text-muted-foreground group-hover:text-foreground'}`}>
|
||||
{cell.day}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 overflow-y-auto tiny-scrollbar flex flex-col gap-1 pr-1">
|
||||
{cell.events?.map((event, eIdx) => (
|
||||
<motion.div
|
||||
key={eIdx}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: idx * 0.01 + eIdx * 0.05 }}
|
||||
className={`text-[9px] px-1.5 py-1 rounded-sm border truncate font-bold tracking-tight transition-all hover:scale-[1.02] active:scale-95 ${event.colorClass}`}
|
||||
>
|
||||
{event.title}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Entry Sheet */}
|
||||
<AnimatePresence>
|
||||
{selectedDay && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setSelectedDay(null)}
|
||||
className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100]"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ x: "100%" }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: "100%" }}
|
||||
transition={{ type: "spring", damping: 25, stiffness: 200 }}
|
||||
className="fixed top-0 right-0 h-full w-full max-w-md bg-[#0A0710] border-l border-white/5 z-[101] shadow-2xl flex flex-col"
|
||||
>
|
||||
<div className="p-6 border-b border-white/5 flex items-center justify-between bg-[#0F0B15]/50">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold">May {selectedDay.day}, 2026</h2>
|
||||
<p className="text-xs text-muted-foreground uppercase tracking-widest mt-1">Daily Schedule Overview</p>
|
||||
</div>
|
||||
<button onClick={() => setSelectedDay(null)} className="p-2 hover:bg-white/5 rounded-sm transition-colors text-muted-foreground hover:text-foreground">
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-8">
|
||||
<div>
|
||||
<h3 className="text-[10px] font-bold uppercase tracking-widest text-primary mb-4 flex items-center gap-2">
|
||||
<Clock className="h-3.5 w-3.5" /> Scheduled Events
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{selectedDay.events?.length > 0 ? (
|
||||
selectedDay.events.map((event: any, idx: number) => (
|
||||
<div key={idx} className="p-4 rounded-sm border border-white/5 bg-[#150F1D] flex items-center justify-between group">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-1 h-8 rounded-full ${event.colorClass.split(' ')[0]}`} />
|
||||
<div>
|
||||
<div className="text-sm font-bold">{event.title}</div>
|
||||
<div className="text-[10px] text-muted-foreground">{event.time} • {event.type}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-white/5 rounded-sm transition-opacity">
|
||||
<MoreHorizontal className="h-4 w-4 text-muted-foreground" />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground italic px-2">No events scheduled for this day.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-white/5">
|
||||
<h3 className="text-[10px] font-bold uppercase tracking-widest text-primary mb-4">Quick Add Event</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-bold text-muted-foreground">TIME</label>
|
||||
<input type="time" className="w-full bg-[#150F1D] border border-white/10 rounded-sm px-3 py-2 text-xs outline-none focus:border-primary/50" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-bold text-muted-foreground">CATEGORY</label>
|
||||
<select className="w-full bg-[#150F1D] border border-white/10 rounded-sm px-3 py-2 text-xs outline-none focus:border-primary/50">
|
||||
{categories.map(c => <option key={c.name}>{c.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-bold text-muted-foreground">EVENT TITLE</label>
|
||||
<input type="text" placeholder="e.g., Team Sync" className="w-full bg-[#150F1D] border border-white/10 rounded-sm px-3 py-2 text-xs outline-none focus:border-primary/50" />
|
||||
</div>
|
||||
<button className="w-full bg-primary hover:bg-primary/90 text-primary-foreground py-3 rounded-sm text-xs font-bold tracking-widest shadow-lg shadow-primary/20 transition-all active:scale-[0.98]">
|
||||
ADD TO CALENDAR
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
</div>
|
||||
<CalendarClient
|
||||
events={events}
|
||||
clients={(clientRows || []) as CalendarRelationOption[]}
|
||||
projects={(projectRows || []) as CalendarRelationOption[]}
|
||||
tasks={(taskRows || []) as CalendarTaskOption[]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function getRelationName(relation: CalendarEventRow["clients"] | CalendarEventRow["projects"]) {
|
||||
if (!relation) return null;
|
||||
return Array.isArray(relation) ? relation[0]?.name || null : relation.name;
|
||||
}
|
||||
|
||||
function getRelationTitle(relation: CalendarEventRow["tasks"]) {
|
||||
if (!relation) return null;
|
||||
return Array.isArray(relation) ? relation[0]?.title || null : relation.title;
|
||||
}
|
||||
|
||||
function normalizeType(type: string): CalendarEventItem["type"] {
|
||||
if (
|
||||
type === "meeting" ||
|
||||
type === "deadline" ||
|
||||
type === "personal" ||
|
||||
type === "finance"
|
||||
) {
|
||||
return type;
|
||||
}
|
||||
|
||||
return "focus";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user