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