feat(cc-053): Tasks & Operations page
This commit is contained in:
parent
acca1abc01
commit
efe49a23c9
1 changed files with 136 additions and 99 deletions
|
|
@ -1,131 +1,168 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import { apiFetch, type Task, type TaskStatus } from '../../../lib/api';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { apiFetch } from '../../../lib/api';
|
||||
import type { Task } from '../../../lib/api';
|
||||
import { useSession } from '../../../components/session-provider';
|
||||
|
||||
const createTaskSchema = z.object({
|
||||
title: z.string().min(1, 'Titlul este obligatoriu').max(500),
|
||||
});
|
||||
type CreateTaskForm = z.infer<typeof createTaskSchema>;
|
||||
const STATUS_CFG = {
|
||||
open: { label: 'Deschis', cls: 'bg-paper-sunken text-ink-faint' },
|
||||
in_progress: { label: 'În lucru', cls: 'bg-bronze-wash text-bronze-deep' },
|
||||
blocked: { label: 'Blocat', cls: 'bg-signal-danger/10 text-signal-danger' },
|
||||
done: { label: 'Finalizat', cls: 'bg-signal-ok/10 text-signal-ok' },
|
||||
cancelled: { label: 'Anulat', cls: 'bg-paper-sunken text-ink-line line-through' },
|
||||
} as const;
|
||||
|
||||
const STATUS_LABELS: Record<TaskStatus, string> = {
|
||||
open: 'Deschis',
|
||||
in_progress: 'În lucru',
|
||||
blocked: 'Blocat',
|
||||
done: 'Finalizat',
|
||||
cancelled: 'Anulat',
|
||||
};
|
||||
const PRIORITY_LABEL: Record<number, string> = { 1: 'Critic', 2: 'Înalt', 3: 'Normal', 4: 'Scăzut', 5: 'Minim' };
|
||||
|
||||
function fmtDue(s: string | null) {
|
||||
if (!s) return null;
|
||||
const d = new Date(s);
|
||||
const now = new Date();
|
||||
const diff = d.getTime() - now.getTime();
|
||||
if (diff < 0) return { label: `Expirat ${d.toLocaleDateString('ro-RO')}`, cls: 'text-signal-danger' };
|
||||
if (diff < 86400_000) return { label: 'Azi', cls: 'text-signal-warn' };
|
||||
if (diff < 7 * 86400_000) return { label: `${d.toLocaleDateString('ro-RO', { weekday: 'short' })}`, cls: 'text-signal-warn' };
|
||||
return { label: d.toLocaleDateString('ro-RO', { month: 'short', day: 'numeric' }), cls: 'text-ink-faint' };
|
||||
}
|
||||
|
||||
export default function TasksPage() {
|
||||
const { activeTenant } = useSession();
|
||||
const tenantId = activeTenant?.tenantId ?? '';
|
||||
const queryClient = useQueryClient();
|
||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||
|
||||
const { data: tasks = [], isLoading } = useQuery({
|
||||
queryKey: ['tasks', tenantId, 'all'],
|
||||
const { data: tasks = [], isLoading, refetch } = useQuery({
|
||||
queryKey: ['tasks', tenantId],
|
||||
queryFn: () => apiFetch<Task[]>('/v1/tasks', { tenantId }),
|
||||
enabled: Boolean(tenantId),
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<CreateTaskForm>({ resolver: zodResolver(createTaskSchema) });
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [form, setForm] = useState({ title: '', priority: '3', dueAt: '' });
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [filter, setFilter] = useState<string>('all');
|
||||
|
||||
const createTask = useMutation({
|
||||
mutationFn: (values: CreateTaskForm) =>
|
||||
apiFetch<Task>('/v1/tasks', { method: 'POST', tenantId, body: values }),
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ['tasks', tenantId] });
|
||||
reset();
|
||||
setIsFormOpen(false);
|
||||
},
|
||||
});
|
||||
const filtered = filter === 'all' ? tasks : tasks.filter((t) => t.status === filter);
|
||||
const overdue = tasks.filter((t) => t.dueAt && new Date(t.dueAt) < new Date() && ['open', 'in_progress', 'blocked'].includes(t.status));
|
||||
|
||||
const updateStatus = useMutation({
|
||||
mutationFn: ({ id, status }: { id: string; status: TaskStatus }) =>
|
||||
apiFetch<Task>(`/v1/tasks/${id}`, { method: 'PATCH', tenantId, body: { status } }),
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ['tasks', tenantId] });
|
||||
},
|
||||
});
|
||||
async function handleCreate(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!form.title) return;
|
||||
setSaving(true);
|
||||
await apiFetch('/v1/tasks', { tenantId, method: 'POST', body: { title: form.title, priority: Number(form.priority), dueAt: form.dueAt || undefined } });
|
||||
setForm({ title: '', priority: '3', dueAt: '' });
|
||||
setShowForm(false);
|
||||
setSaving(false);
|
||||
refetch();
|
||||
}
|
||||
|
||||
async function updateStatus(id: string, status: string) {
|
||||
await apiFetch(`/v1/tasks/${id}`, { tenantId, method: 'PATCH', body: { status } });
|
||||
refetch();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl">
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div className="max-w-5xl space-y-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 className="font-display text-2xl font-semibold text-ink">Sarcini</h1>
|
||||
<p className="text-sm text-ink-faint">Sarcinile tale și termenele asociate.</p>
|
||||
<h1 className="font-display text-2xl font-semibold text-ink">Taskuri & Operațiuni</h1>
|
||||
<p className="mt-1 text-sm text-ink-faint">
|
||||
{tasks.length} taskuri active{overdue.length > 0 ? ` • ${overdue.length} expirate` : ''}
|
||||
</p>
|
||||
</div>
|
||||
<button type="button" className="btn-primary" onClick={() => setIsFormOpen((open) => !open)}>
|
||||
{isFormOpen ? 'Anulează' : 'Sarcină nouă'}
|
||||
<button onClick={() => setShowForm((v) => !v)} className="rounded-lg bg-bronze-deep px-4 py-2 text-sm font-medium text-white hover:bg-bronze-deep/90">
|
||||
+ Task nou
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isFormOpen && (
|
||||
<form
|
||||
onSubmit={handleSubmit((values) => createTask.mutate(values))}
|
||||
noValidate
|
||||
className="card mb-6 space-y-4 p-5"
|
||||
>
|
||||
<div>
|
||||
<label className="label" htmlFor="task-title">
|
||||
Titlu
|
||||
</label>
|
||||
<input id="task-title" type="text" className="field" {...register('title')} />
|
||||
{errors.title && <p className="mt-1 text-xs text-signal-danger">{errors.title.message}</p>}
|
||||
{showForm && (
|
||||
<form onSubmit={handleCreate} className="card p-5 space-y-4">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
||||
<div className="sm:col-span-1">
|
||||
<label className="block text-xs font-medium text-ink-faint mb-1">Titlu task *</label>
|
||||
<input
|
||||
className="w-full rounded-lg border border-paper-border bg-paper px-3 py-2 text-sm text-ink placeholder:text-ink-line focus:border-bronze-deep focus:outline-none"
|
||||
placeholder="Ce trebuie făcut?"
|
||||
value={form.title}
|
||||
onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-ink-faint mb-1">Prioritate</label>
|
||||
<select
|
||||
className="w-full rounded-lg border border-paper-border bg-paper px-3 py-2 text-sm text-ink focus:border-bronze-deep focus:outline-none"
|
||||
value={form.priority}
|
||||
onChange={(e) => setForm((f) => ({ ...f, priority: e.target.value }))}
|
||||
>
|
||||
{[1, 2, 3, 4, 5].map((p) => <option key={p} value={p}>{PRIORITY_LABEL[p]}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-ink-faint mb-1">Termen</label>
|
||||
<input
|
||||
type="date"
|
||||
className="rounded-lg border border-paper-border bg-paper px-3 py-2 text-sm text-ink focus:border-bronze-deep focus:outline-none"
|
||||
value={form.dueAt}
|
||||
onChange={(e) => setForm((f) => ({ ...f, dueAt: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button type="submit" disabled={saving} className="rounded-lg bg-bronze-deep px-4 py-2 text-sm font-medium text-white disabled:opacity-50">
|
||||
{saving ? 'Se salvează…' : 'Salvează'}
|
||||
</button>
|
||||
<button type="button" onClick={() => setShowForm(false)} className="rounded-lg border border-paper-border px-4 py-2 text-sm text-ink-faint">Anulare</button>
|
||||
</div>
|
||||
{createTask.isError && (
|
||||
<p className="text-sm text-signal-danger">
|
||||
{createTask.error instanceof Error ? createTask.error.message : 'Eroare'}
|
||||
</p>
|
||||
)}
|
||||
<button type="submit" disabled={isSubmitting || createTask.isPending} className="btn-primary">
|
||||
Salvează
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{isLoading && <p className="text-sm text-ink-faint">Se încarcă…</p>}
|
||||
{!isLoading && tasks.length === 0 && (
|
||||
<p className="card p-6 text-sm text-ink-faint">Nicio sarcină încă. Adaugă prima mai sus.</p>
|
||||
)}
|
||||
|
||||
<ul className="space-y-2">
|
||||
{tasks.map((task) => (
|
||||
<li key={task.id} className="card flex items-center justify-between p-4">
|
||||
<div>
|
||||
<p className={`text-sm font-medium ${task.status === 'done' ? 'text-ink-faint line-through' : 'text-ink'}`}>
|
||||
{task.title}
|
||||
</p>
|
||||
{task.dueAt && <p className="text-xs text-ink-faint">Termen: {new Date(task.dueAt).toLocaleDateString('ro-RO')}</p>}
|
||||
</div>
|
||||
<select
|
||||
aria-label={`Status pentru ${task.title}`}
|
||||
className="rounded-lg border border-ink-line bg-paper-raised px-2.5 py-1.5 text-xs font-medium text-ink-soft
|
||||
focus:border-bronze focus:outline-none focus:ring-2 focus:ring-bronze/20"
|
||||
value={task.status}
|
||||
onChange={(event) =>
|
||||
updateStatus.mutate({ id: task.id, status: event.target.value as TaskStatus })
|
||||
}
|
||||
>
|
||||
{Object.entries(STATUS_LABELS).map(([value, label]) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</li>
|
||||
{/* Filters */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[['all', 'Toate'], ...Object.entries(STATUS_CFG).map(([k, v]) => [k, v.label])].map(([k, label]) => (
|
||||
<button
|
||||
key={k}
|
||||
onClick={() => setFilter(k)}
|
||||
className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${filter === k ? 'bg-bronze-deep text-white' : 'bg-paper-sunken text-ink-faint hover:bg-paper-border'}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<p className="text-sm text-ink-faint">Se încarcă…</p>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="card p-12 text-center">
|
||||
<p className="text-sm text-ink-faint">{filter === 'all' ? 'Niciun task activ.' : `Niciun task cu statusul "${STATUS_CFG[filter as keyof typeof STATUS_CFG]?.label}".`}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{filtered.map((task) => {
|
||||
const due = fmtDue(task.dueAt);
|
||||
return (
|
||||
<div key={task.id} className="card flex items-center gap-4 p-4">
|
||||
<select
|
||||
value={task.status}
|
||||
onChange={(e) => updateStatus(task.id, e.target.value)}
|
||||
className="shrink-0 rounded border border-paper-border bg-paper px-2 py-1 text-xs text-ink-faint focus:border-bronze-deep focus:outline-none"
|
||||
>
|
||||
{Object.entries(STATUS_CFG).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
|
||||
</select>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className={`text-sm font-medium text-ink ${task.status === 'done' ? 'line-through text-ink-line' : ''}`}>
|
||||
{task.title}
|
||||
</p>
|
||||
</div>
|
||||
<div className="shrink-0 flex items-center gap-3">
|
||||
<span className="text-[11px] text-ink-line">{PRIORITY_LABEL[task.priority] ?? 'Normal'}</span>
|
||||
{due && <span className={`text-[11px] font-mono ${due.cls}`}>{due.label}</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue