857 lines
29 KiB
TypeScript
857 lines
29 KiB
TypeScript
"use client";
|
|
|
|
import { getDocumentIntlLocale } from "@/lib/i18n/browser";
|
|
import { useTranslations } from "@/components/i18n/i18n-provider";
|
|
import {
|
|
createTaskRecord,
|
|
deleteTaskRecord,
|
|
updateTaskStatusRecord,
|
|
updateTaskRecord,
|
|
} from "@/app/(dashboard)/tasks/actions";
|
|
import { LocalizedFields, type LocalizedFieldLocale, type LocalizedFieldValues } from "@/components/i18n/localized-fields";
|
|
import { contentTranslationRegistry } from "@/lib/i18n/content";
|
|
import { Badge, Button, Card, CardContent, Input, Label } from "poyraz-ui/atoms";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
toast,
|
|
} from "poyraz-ui/molecules";
|
|
import {
|
|
CheckCircle2,
|
|
KanbanSquare,
|
|
LayoutList,
|
|
Loader2,
|
|
Pencil,
|
|
Plus,
|
|
Trash2,
|
|
} from "lucide-react";
|
|
import { useState, useTransition, type DragEvent } from "react";
|
|
|
|
export type TaskRelationOption = {
|
|
id: string;
|
|
name: string;
|
|
client_id?: string | null;
|
|
};
|
|
|
|
export type TaskListItem = {
|
|
id: string;
|
|
title: string;
|
|
description: string | null;
|
|
status: "todo" | "in_progress" | "done";
|
|
priority: "low" | "medium" | "high" | "urgent";
|
|
due_at: string | null;
|
|
estimated_minutes: number | null;
|
|
actual_minutes: number | null;
|
|
client_id: string | null;
|
|
clientName: string | null;
|
|
project_id: string | null;
|
|
projectName: string | null;
|
|
created_at: string;
|
|
translations?: LocalizedFieldValues;
|
|
};
|
|
|
|
const priorityClasses = {
|
|
low: "border-zinc-200 bg-zinc-50 text-zinc-700",
|
|
medium: "border-blue-200 bg-blue-50 text-blue-700",
|
|
high: "border-amber-200 bg-amber-50 text-amber-700",
|
|
urgent: "border-rose-200 bg-rose-50 text-rose-700",
|
|
};
|
|
|
|
type TasksClientProps = {
|
|
tasks: TaskListItem[];
|
|
clients: TaskRelationOption[];
|
|
projects: TaskRelationOption[];
|
|
localization: {
|
|
defaultLocale: string;
|
|
locales: LocalizedFieldLocale[];
|
|
};
|
|
};
|
|
|
|
export function TasksClient({ tasks, clients, projects, localization }: TasksClientProps) {
|
|
const t = useTranslations();
|
|
const [statusOverrides, setStatusOverrides] = useState<
|
|
Partial<Record<string, TaskListItem["status"]>>
|
|
>({});
|
|
const [deletedTaskIds, setDeletedTaskIds] = useState<Set<string>>(new Set());
|
|
const [query, setQuery] = useState("");
|
|
const [projectFilter, setProjectFilter] = useState("__all");
|
|
const [view, setView] = useState<"list" | "kanban">("list");
|
|
const [pendingTaskIds, setPendingTaskIds] = useState<Set<string>>(new Set());
|
|
const [, startTransition] = useTransition();
|
|
const localTasks = tasks
|
|
.filter((task) => !deletedTaskIds.has(task.id))
|
|
.map((task) => ({
|
|
...task,
|
|
status: statusOverrides[task.id] ?? task.status,
|
|
}));
|
|
|
|
function handleTaskStatusChange(taskId: string, status: TaskListItem["status"]) {
|
|
const previousStatus = localTasks.find((task) => task.id === taskId)?.status;
|
|
|
|
setPendingTask(taskId, true);
|
|
setStatusOverrides((current) => ({ ...current, [taskId]: status }));
|
|
|
|
startTransition(() => {
|
|
void updateTaskStatusRecord(taskId, status)
|
|
.catch((error) => {
|
|
setStatusOverrides((current) => {
|
|
const next = { ...current };
|
|
if (previousStatus) next[taskId] = previousStatus;
|
|
else delete next[taskId];
|
|
return next;
|
|
});
|
|
toast.error(
|
|
error instanceof Error
|
|
? error.message
|
|
: t("tasks.messages.updateFailed") || "Görev durumu güncellenemedi.",
|
|
);
|
|
})
|
|
.finally(() => {
|
|
setPendingTask(taskId, false);
|
|
});
|
|
});
|
|
}
|
|
|
|
function handleTaskDelete(taskId: string) {
|
|
const task = localTasks.find((item) => item.id === taskId);
|
|
const formData = new FormData();
|
|
formData.set("id", taskId);
|
|
|
|
if (task?.project_id) {
|
|
formData.set("project_id", task.project_id);
|
|
}
|
|
|
|
setPendingTask(taskId, true);
|
|
setDeletedTaskIds((current) => new Set(current).add(taskId));
|
|
|
|
startTransition(() => {
|
|
void deleteTaskRecord(formData)
|
|
.catch((error) => {
|
|
setDeletedTaskIds((current) => {
|
|
const next = new Set(current);
|
|
next.delete(taskId);
|
|
return next;
|
|
});
|
|
toast.error(
|
|
error instanceof Error ? error.message : "Görev silinemedi.",
|
|
);
|
|
})
|
|
.finally(() => {
|
|
setPendingTask(taskId, false);
|
|
});
|
|
});
|
|
}
|
|
|
|
function setPendingTask(taskId: string, pending: boolean) {
|
|
setPendingTaskIds((current) => {
|
|
const next = new Set(current);
|
|
|
|
if (pending) {
|
|
next.add(taskId);
|
|
} else {
|
|
next.delete(taskId);
|
|
}
|
|
|
|
return next;
|
|
});
|
|
}
|
|
|
|
const normalizedQuery = query.trim().toLowerCase();
|
|
const filteredByProject =
|
|
projectFilter === "__all"
|
|
? localTasks
|
|
: projectFilter === "__none"
|
|
? localTasks.filter((task) => !task.project_id)
|
|
: localTasks.filter((task) => task.project_id === projectFilter);
|
|
const filteredTasks = normalizedQuery
|
|
? filteredByProject.filter((task) =>
|
|
[task.title, task.description, task.clientName, task.projectName]
|
|
.filter(Boolean)
|
|
.some((value) => value!.toLowerCase().includes(normalizedQuery)),
|
|
)
|
|
: filteredByProject;
|
|
|
|
const doneCount = localTasks.filter((task) => task.status === "done").length;
|
|
const overdueCount = localTasks.filter((task) => isOverdue(task)).length;
|
|
const urgentCount = localTasks.filter((task) => task.priority === "urgent").length;
|
|
|
|
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>
|
|
<h1 className="text-3xl font-semibold tracking-normal text-foreground">
|
|
{t("tasks.title")}
|
|
</h1>
|
|
</div>
|
|
|
|
<TaskDialog mode="create" clients={clients} projects={projects} localization={localization} />
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:grid-cols-4">
|
|
<StatCard label={t("tasks.stats.total")} value={localTasks.length.toString()} />
|
|
<StatCard label={t("tasks.stats.completed")} value={doneCount.toString()} />
|
|
<StatCard label={t("tasks.stats.overdue")} value={overdueCount.toString()} />
|
|
<StatCard label={t("tasks.stats.urgent")} value={urgentCount.toString()} />
|
|
</div>
|
|
|
|
<Card>
|
|
<CardContent className="space-y-4 p-4">
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<h2 className="text-base font-semibold text-foreground">{t("tasks.list.title")}</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t("tasks.list.showing", { count: filteredTasks.length.toString() })}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-2 sm:flex-row">
|
|
<Input
|
|
value={query}
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
placeholder={t("tasks.list.search")}
|
|
className="sm:w-80"
|
|
/>
|
|
<Select value={projectFilter} onValueChange={setProjectFilter}>
|
|
<SelectTrigger className="sm:w-56">
|
|
<SelectValue placeholder={t("tasks.list.filterProject")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="__all">{t("tasks.list.allProjects")}</SelectItem>
|
|
<SelectItem value="__none">{t("tasks.list.noProject")}</SelectItem>
|
|
{projects.map((project) => (
|
|
<SelectItem key={project.id} value={project.id}>
|
|
{project.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<div className="flex rounded-sm border border-border p-1">
|
|
<Button size="sm" effect="shine"
|
|
type="button"
|
|
variant={view === "list" ? "default" : "secondary"}
|
|
className="gap-2 px-3"
|
|
onClick={() => setView("list")}
|
|
>
|
|
<LayoutList className="h-4 w-4" />
|
|
{t("tasks.list.viewList")}
|
|
</Button>
|
|
<Button size="sm" effect="shine"
|
|
type="button"
|
|
variant={view === "kanban" ? "default" : "secondary"}
|
|
className="gap-2 px-3"
|
|
onClick={() => setView("kanban")}
|
|
>
|
|
<KanbanSquare className="h-4 w-4" />
|
|
{t("tasks.list.viewKanban")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{filteredTasks.length > 0 ? (
|
|
view === "list" ? (
|
|
<TaskList
|
|
tasks={filteredTasks}
|
|
clients={clients}
|
|
projects={projects}
|
|
localization={localization}
|
|
pendingTaskIds={pendingTaskIds}
|
|
onTaskDelete={handleTaskDelete}
|
|
onTaskStatusChange={handleTaskStatusChange}
|
|
/>
|
|
) : (
|
|
<TaskKanban
|
|
tasks={filteredTasks}
|
|
clients={clients}
|
|
projects={projects}
|
|
localization={localization}
|
|
pendingTaskIds={pendingTaskIds}
|
|
onTaskDelete={handleTaskDelete}
|
|
onTaskStatusChange={handleTaskStatusChange}
|
|
/>
|
|
)
|
|
) : (
|
|
<EmptyState hasQuery={Boolean(normalizedQuery)} />
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TaskList({
|
|
tasks,
|
|
clients,
|
|
projects,
|
|
localization,
|
|
pendingTaskIds,
|
|
onTaskDelete,
|
|
onTaskStatusChange,
|
|
}: {
|
|
tasks: TaskListItem[];
|
|
clients: TaskRelationOption[];
|
|
projects: TaskRelationOption[];
|
|
localization: TasksClientProps["localization"];
|
|
pendingTaskIds: Set<string>;
|
|
onTaskDelete: (taskId: string) => void;
|
|
onTaskStatusChange: (taskId: string, status: TaskListItem["status"]) => void;
|
|
}) {
|
|
const t = useTranslations();
|
|
return (
|
|
<div className="overflow-x-auto rounded-sm border border-border">
|
|
<div className="min-w-[800px]">
|
|
<div className="grid grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground">
|
|
<span>{t("tasks.col.task")}</span>
|
|
<span>{t("tasks.col.relation")}</span>
|
|
<span>{t("tasks.col.priority")}</span>
|
|
<span>{t("tasks.col.due")}</span>
|
|
<span className="text-right">{t("tasks.col.action")}</span>
|
|
</div>
|
|
<div className="divide-y divide-border">
|
|
{tasks.map((task) => (
|
|
<TaskRow
|
|
key={task.id}
|
|
task={task}
|
|
clients={clients}
|
|
projects={projects}
|
|
localization={localization}
|
|
isPending={pendingTaskIds.has(task.id)}
|
|
onTaskDelete={onTaskDelete}
|
|
onTaskStatusChange={onTaskStatusChange}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TaskRow({
|
|
task,
|
|
clients,
|
|
projects,
|
|
localization,
|
|
isPending,
|
|
onTaskDelete,
|
|
onTaskStatusChange,
|
|
}: {
|
|
task: TaskListItem;
|
|
clients: TaskRelationOption[];
|
|
projects: TaskRelationOption[];
|
|
localization: TasksClientProps["localization"];
|
|
isPending: boolean;
|
|
onTaskDelete: (taskId: string) => void;
|
|
onTaskStatusChange: (taskId: string, status: TaskListItem["status"]) => void;
|
|
}) {
|
|
const t = useTranslations();
|
|
return (
|
|
<div className="grid gap-4 px-4 py-4 grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] items-center">
|
|
<div className="min-w-0">
|
|
<div className={task.status === "done" ? "font-medium text-muted-foreground line-through" : "font-medium text-foreground"}>
|
|
{task.title}
|
|
</div>
|
|
<div className="truncate text-sm text-muted-foreground">
|
|
{t(`tasks.status.${task.status}`)}
|
|
</div>
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
<div>{task.projectName || t("tasks.row.noProject")}</div>
|
|
<div>{task.clientName || t("tasks.row.noClient")}</div>
|
|
</div>
|
|
<div>
|
|
<Badge className={priorityClasses[task.priority]}>
|
|
{t(`tasks.priority.${task.priority}`)}
|
|
</Badge>
|
|
</div>
|
|
<div className={isOverdue(task) ? "text-sm font-medium text-rose-600" : "text-sm text-muted-foreground"}>
|
|
{task.due_at ? formatDateTime(task.due_at) : t("tasks.row.noDue")}
|
|
</div>
|
|
<TaskActions
|
|
task={task}
|
|
clients={clients}
|
|
projects={projects}
|
|
localization={localization}
|
|
isPending={isPending}
|
|
onTaskDelete={onTaskDelete}
|
|
onTaskStatusChange={onTaskStatusChange}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TaskKanban({
|
|
tasks,
|
|
clients,
|
|
projects,
|
|
localization,
|
|
pendingTaskIds,
|
|
onTaskDelete,
|
|
onTaskStatusChange,
|
|
}: {
|
|
tasks: TaskListItem[];
|
|
clients: TaskRelationOption[];
|
|
projects: TaskRelationOption[];
|
|
localization: TasksClientProps["localization"];
|
|
pendingTaskIds: Set<string>;
|
|
onTaskDelete: (taskId: string) => void;
|
|
onTaskStatusChange: (taskId: string, status: TaskListItem["status"]) => void;
|
|
}) {
|
|
const t = useTranslations();
|
|
const columns = ["todo", "in_progress", "done"] as const;
|
|
const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
|
|
|
|
function handleDragStart(event: DragEvent<HTMLDivElement>, taskId: string) {
|
|
setDraggedTaskId(taskId);
|
|
event.dataTransfer.effectAllowed = "move";
|
|
event.dataTransfer.setData("text/plain", taskId);
|
|
event.dataTransfer.setDragImage(event.currentTarget, 24, 24);
|
|
}
|
|
|
|
function handleDrop(status: TaskListItem["status"]) {
|
|
if (!draggedTaskId) return;
|
|
|
|
onTaskStatusChange(draggedTaskId, status);
|
|
setDraggedTaskId(null);
|
|
}
|
|
|
|
return (
|
|
<div className="tiny-scrollbar grid gap-4 overflow-x-auto pb-2 lg:grid-cols-3">
|
|
{columns.map((status) => {
|
|
const columnTasks = tasks.filter((task) => task.status === status);
|
|
|
|
return (
|
|
<div
|
|
key={status}
|
|
className="min-w-72 rounded-sm border border-border bg-muted/20 p-3 transition-colors"
|
|
onDragOver={(event) => {
|
|
event.preventDefault();
|
|
event.dataTransfer.dropEffect = "move";
|
|
}}
|
|
onDrop={() => handleDrop(status)}
|
|
>
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold text-foreground">{t(`tasks.status.${status}`)}</h3>
|
|
<Badge>{columnTasks.length}</Badge>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{columnTasks.map((task) => (
|
|
<Card
|
|
key={task.id}
|
|
draggable
|
|
className={
|
|
draggedTaskId === task.id
|
|
? "cursor-grabbing opacity-50 ring-2 ring-primary/20 transition"
|
|
: "cursor-grab transition hover:border-primary/30 active:cursor-grabbing"
|
|
}
|
|
onDragStart={(event) => handleDragStart(event, task.id)}
|
|
onDragEnd={() => setDraggedTaskId(null)}
|
|
>
|
|
<CardContent className="space-y-3 p-3">
|
|
<div>
|
|
<div className="font-medium text-foreground">{task.title}</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
{task.projectName || task.clientName || t("tasks.col.relation")}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<Badge className={priorityClasses[task.priority]}>
|
|
{t(`tasks.priority.${task.priority}`)}
|
|
</Badge>
|
|
<TaskActions
|
|
task={task}
|
|
clients={clients}
|
|
projects={projects}
|
|
localization={localization}
|
|
compact
|
|
isPending={pendingTaskIds.has(task.id)}
|
|
onTaskDelete={onTaskDelete}
|
|
onTaskStatusChange={onTaskStatusChange}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TaskActions({
|
|
task,
|
|
clients,
|
|
projects,
|
|
localization,
|
|
compact = false,
|
|
isPending,
|
|
onTaskDelete,
|
|
onTaskStatusChange,
|
|
}: {
|
|
task: TaskListItem;
|
|
clients: TaskRelationOption[];
|
|
projects: TaskRelationOption[];
|
|
localization: TasksClientProps["localization"];
|
|
compact?: boolean;
|
|
isPending: boolean;
|
|
onTaskDelete: (taskId: string) => void;
|
|
onTaskStatusChange: (taskId: string, status: TaskListItem["status"]) => void;
|
|
}) {
|
|
const t = useTranslations();
|
|
return (
|
|
<div className={compact ? "flex justify-end gap-1" : "flex justify-start gap-2 lg:justify-end"}>
|
|
<TaskDialog mode="edit" task={task} clients={clients} projects={projects} localization={localization} />
|
|
{task.status !== "done" ? (
|
|
<Button effect="shine"
|
|
type="button"
|
|
variant="secondary"
|
|
disabled={isPending}
|
|
aria-busy={isPending}
|
|
className="min-w-24 gap-2 px-3"
|
|
onClick={() => onTaskStatusChange(task.id, "done")}
|
|
>
|
|
{isPending ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<CheckCircle2 className="h-4 w-4" />
|
|
)}
|
|
{!compact ? (isPending ? t("projects.detail.completing") : t("projects.detail.complete")) : null}
|
|
</Button>
|
|
) : null}
|
|
<Button effect="shine"
|
|
type="button"
|
|
variant="secondary"
|
|
disabled={isPending}
|
|
aria-busy={isPending}
|
|
className="gap-2 px-3 text-rose-600"
|
|
onClick={() => onTaskDelete(task.id)}
|
|
>
|
|
{isPending ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Trash2 className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TaskDialog({
|
|
mode,
|
|
task,
|
|
clients,
|
|
projects,
|
|
localization,
|
|
}: {
|
|
mode: "create" | "edit";
|
|
task?: TaskListItem;
|
|
clients: TaskRelationOption[];
|
|
projects: TaskRelationOption[];
|
|
localization: TasksClientProps["localization"];
|
|
}) {
|
|
const t = useTranslations();
|
|
const [open, setOpen] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const action = mode === "create" ? createTaskRecord : updateTaskRecord;
|
|
|
|
async function handleSubmit(formData: FormData) {
|
|
setIsSubmitting(true);
|
|
|
|
try {
|
|
await action(formData);
|
|
setOpen(false);
|
|
toast.success(mode === "create" ? t("tasks.messages.added") : t("tasks.messages.updated"));
|
|
} catch (error) {
|
|
toast.error(
|
|
error instanceof Error
|
|
? error.message
|
|
: t("tasks.messages.saveFailed"),
|
|
);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button effect="shine"
|
|
variant={mode === "create" ? "default" : "secondary"}
|
|
className="min-w-24 gap-2 px-3"
|
|
>
|
|
{mode === "create" ? <Plus className="h-4 w-4" /> : <Pencil className="h-4 w-4" />}
|
|
{mode === "create" ? t("tasks.form.add") : t("tasks.form.edit")}
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] flex-col overflow-hidden p-0 sm:max-h-[min(680px,calc(100dvh-4rem))] sm:max-w-xl data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95">
|
|
<form action={handleSubmit} className="flex min-h-0 flex-1 flex-col overflow-hidden">
|
|
{task ? <input type="hidden" name="id" value={task.id} /> : null}
|
|
<DialogHeader className="shrink-0 px-5 pb-4 pt-5 pr-12">
|
|
<DialogTitle>{mode === "create" ? t("tasks.form.createTitle") : t("tasks.form.editTitle")}</DialogTitle>
|
|
<DialogDescription>
|
|
{t("tasks.form.desc")}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="tiny-scrollbar min-h-0 flex-1 overflow-y-auto px-5 pb-5">
|
|
<TaskFormFields task={task} clients={clients} projects={projects} localization={localization} />
|
|
</div>
|
|
|
|
<DialogFooter className="shrink-0 border-t border-border bg-background p-5">
|
|
<Button variant="default" effect="shine" type="submit" disabled={isSubmitting} className="w-full gap-2 sm:w-auto">
|
|
{mode === "create" ? <Plus className="h-4 w-4" /> : <Pencil className="h-4 w-4" />}
|
|
{isSubmitting
|
|
? t("tasks.form.saving")
|
|
: mode === "create"
|
|
? t("tasks.form.submitAdd")
|
|
: t("tasks.form.submitEdit")}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function TaskFormFields({
|
|
task,
|
|
clients,
|
|
projects,
|
|
localization,
|
|
}: {
|
|
task?: TaskListItem;
|
|
clients: TaskRelationOption[];
|
|
projects: TaskRelationOption[];
|
|
localization: TasksClientProps["localization"];
|
|
}) {
|
|
const t = useTranslations();
|
|
const [clientId, setClientId] = useState(task?.client_id || "__none");
|
|
const [projectId, setProjectId] = useState(task?.project_id || "__none");
|
|
const selectedProject =
|
|
projectId === "__none" ? null : projects.find((project) => project.id === projectId) || null;
|
|
const shouldLockClient = Boolean(selectedProject);
|
|
const filteredProjects =
|
|
clientId === "__none" || shouldLockClient
|
|
? projects
|
|
: projects.filter((project) => project.client_id === clientId);
|
|
|
|
function handleClientChange(nextClientId: string) {
|
|
setClientId(nextClientId);
|
|
|
|
if (
|
|
projectId !== "__none" &&
|
|
nextClientId !== "__none" &&
|
|
!projects.some((project) => project.id === projectId && project.client_id === nextClientId)
|
|
) {
|
|
setProjectId("__none");
|
|
}
|
|
}
|
|
|
|
function handleProjectChange(nextProjectId: string) {
|
|
setProjectId(nextProjectId);
|
|
|
|
if (nextProjectId === "__none") {
|
|
return;
|
|
}
|
|
|
|
const nextProject = projects.find((project) => project.id === nextProjectId);
|
|
setClientId(nextProject?.client_id || "__none");
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-4">
|
|
<LocalizedFields
|
|
idPrefix={`task-${task?.id || "new"}`}
|
|
defaultLocale={localization.defaultLocale}
|
|
locales={localization.locales}
|
|
fields={contentTranslationRegistry.task.map((f) => ({
|
|
...f,
|
|
label: t(`tasks.fields.${f.name}`) || f.label,
|
|
placeholder: f.placeholder ? t(`tasks.placeholders.${f.name}`) || f.placeholder : undefined,
|
|
}))}
|
|
values={task?.translations}
|
|
fallbackValues={{
|
|
title: task?.title,
|
|
description: task?.description,
|
|
}}
|
|
/>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<SelectField name="status" label={t("tasks.form.status")} defaultValue={task?.status || "todo"}>
|
|
<SelectItem value="todo">{t("tasks.status.todo")}</SelectItem>
|
|
<SelectItem value="in_progress">{t("tasks.status.in_progress")}</SelectItem>
|
|
<SelectItem value="done">{t("tasks.status.done")}</SelectItem>
|
|
</SelectField>
|
|
<SelectField name="priority" label={t("tasks.form.priority")} defaultValue={task?.priority || "medium"}>
|
|
<SelectItem value="low">{t("tasks.priority.low")}</SelectItem>
|
|
<SelectItem value="medium">{t("tasks.priority.medium")}</SelectItem>
|
|
<SelectItem value="high">{t("tasks.priority.high")}</SelectItem>
|
|
<SelectItem value="urgent">{t("tasks.priority.urgent")}</SelectItem>
|
|
</SelectField>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="grid gap-2">
|
|
<Label>{t("tasks.form.client")}</Label>
|
|
{shouldLockClient ? <input type="hidden" name="client_id" value={clientId} /> : null}
|
|
<Select
|
|
name="client_id"
|
|
value={clientId}
|
|
onValueChange={handleClientChange}
|
|
disabled={shouldLockClient}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t("tasks.form.selectClient")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="__none">{t("tasks.form.noClient")}</SelectItem>
|
|
{clients.map((client) => (
|
|
<SelectItem key={client.id} value={client.id}>
|
|
{client.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>{t("tasks.form.project")}</Label>
|
|
<Select name="project_id" value={projectId} onValueChange={handleProjectChange}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t("tasks.form.selectProject")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="__none">{t("tasks.form.noProject")}</SelectItem>
|
|
{filteredProjects.map((project) => (
|
|
<SelectItem key={project.id} value={project.id}>
|
|
{project.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor={`due-${task?.id || "new"}`}>{t("tasks.form.due")}</Label>
|
|
<Input
|
|
id={`due-${task?.id || "new"}`}
|
|
name="due_at"
|
|
type="datetime-local"
|
|
defaultValue={task?.due_at ? toDateTimeLocal(task.due_at) : ""}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor={`estimated-${task?.id || "new"}`}>{t("tasks.form.estimated")}</Label>
|
|
<Input
|
|
id={`estimated-${task?.id || "new"}`}
|
|
name="estimated_minutes"
|
|
type="number"
|
|
min="0"
|
|
defaultValue={task?.estimated_minutes ?? ""}
|
|
placeholder={t("tasks.form.minutes")}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor={`actual-${task?.id || "new"}`}>{t("tasks.form.actual")}</Label>
|
|
<Input
|
|
id={`actual-${task?.id || "new"}`}
|
|
name="actual_minutes"
|
|
type="number"
|
|
min="0"
|
|
defaultValue={task?.actual_minutes ?? ""}
|
|
placeholder={t("tasks.form.minutes")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SelectField({
|
|
name,
|
|
label,
|
|
defaultValue,
|
|
children,
|
|
}: {
|
|
name: string;
|
|
label: string;
|
|
defaultValue: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const t = useTranslations();
|
|
return (
|
|
<div className="grid gap-2">
|
|
<Label>{label}</Label>
|
|
<Select name={name} defaultValue={defaultValue}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t("tasks.form.select", { label })} />
|
|
</SelectTrigger>
|
|
<SelectContent>{children}</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatCard({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="flex items-center justify-between gap-3 p-4">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">{label}</p>
|
|
<p className="mt-1 text-2xl font-semibold text-foreground">{value}</p>
|
|
</div>
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-sm bg-primary/10 text-primary">
|
|
<CheckCircle2 className="h-5 w-5" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function EmptyState({ hasQuery }: { hasQuery: boolean }) {
|
|
const t = useTranslations();
|
|
return (
|
|
<div className="flex min-h-72 flex-col items-center justify-center rounded-sm border border-dashed border-border bg-muted/20 p-8 text-center">
|
|
<CheckCircle2 className="h-10 w-10 text-muted-foreground" />
|
|
<h3 className="mt-4 text-lg font-semibold text-foreground">
|
|
{hasQuery ? t("tasks.empty.noMatchTitle") : t("tasks.empty.noTaskTitle")}
|
|
</h3>
|
|
<p className="mt-2 max-w-md text-sm text-muted-foreground">
|
|
{hasQuery
|
|
? t("tasks.empty.noMatchDesc")
|
|
: t("tasks.empty.noTaskDesc")}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function isOverdue(task: TaskListItem) {
|
|
return Boolean(task.due_at && task.status !== "done" && new Date(task.due_at) < new Date());
|
|
}
|
|
|
|
function formatDateTime(value: string) {
|
|
return new Intl.DateTimeFormat(getDocumentIntlLocale(), {
|
|
day: "2-digit",
|
|
month: "short",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
}).format(new Date(value));
|
|
}
|
|
|
|
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);
|
|
}
|