feat(goals): add Goals CRUD page — list, create, update status, delete
This commit is contained in:
parent
13682e2d43
commit
5fb0eab34f
1 changed files with 215 additions and 0 deletions
215
src/app/dashboard/goals/page.tsx
Normal file
215
src/app/dashboard/goals/page.tsx
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
'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 Goal, type GoalStatus } from '../../../lib/api';
|
||||
import { useSession } from '../../../components/session-provider';
|
||||
|
||||
const GOAL_STATUS_LABELS: Record<GoalStatus, string> = {
|
||||
not_started: 'Neînceput',
|
||||
on_track: 'Pe track',
|
||||
at_risk: 'La risc',
|
||||
achieved: 'Atins',
|
||||
abandoned: 'Abandonat',
|
||||
};
|
||||
|
||||
const STATUS_COLORS: Record<GoalStatus, string> = {
|
||||
not_started: 'text-ink-faint',
|
||||
on_track: 'text-signal-ok',
|
||||
at_risk: 'text-signal-warn',
|
||||
achieved: 'text-bronze-deep',
|
||||
abandoned: 'text-ink-line',
|
||||
};
|
||||
|
||||
const createGoalSchema = z.object({
|
||||
horizon: z.string().min(1, 'Orizontul este obligatoriu').max(500),
|
||||
metric: z.string().min(1, 'Metrica este obligatorie').max(500),
|
||||
target: z.string().min(1, 'Ținta este obligatorie').max(1000),
|
||||
});
|
||||
type CreateGoalForm = z.infer<typeof createGoalSchema>;
|
||||
|
||||
export default function GoalsPage() {
|
||||
const { activeTenant } = useSession();
|
||||
const tenantId = activeTenant?.tenantId ?? '';
|
||||
const queryClient = useQueryClient();
|
||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||
const [statusFilter, setStatusFilter] = useState<GoalStatus | ''>('');
|
||||
|
||||
const { data: goals = [], isLoading } = useQuery({
|
||||
queryKey: ['goals', tenantId, statusFilter],
|
||||
queryFn: () =>
|
||||
apiFetch<Goal[]>(
|
||||
`/v1/goals${statusFilter ? `?status=${statusFilter}` : ''}`,
|
||||
{ tenantId },
|
||||
),
|
||||
enabled: Boolean(tenantId),
|
||||
});
|
||||
|
||||
const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm<CreateGoalForm>({
|
||||
resolver: zodResolver(createGoalSchema),
|
||||
});
|
||||
|
||||
const createGoal = useMutation({
|
||||
mutationFn: (values: CreateGoalForm) =>
|
||||
apiFetch<Goal>('/v1/goals', { method: 'POST', tenantId, body: values }),
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ['goals', tenantId] });
|
||||
reset();
|
||||
setIsFormOpen(false);
|
||||
},
|
||||
});
|
||||
|
||||
const updateStatus = useMutation({
|
||||
mutationFn: ({ id, status }: { id: string; status: GoalStatus }) =>
|
||||
apiFetch<Goal>(`/v1/goals/${id}`, { method: 'PATCH', tenantId, body: { status } }),
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ['goals', tenantId] });
|
||||
},
|
||||
});
|
||||
|
||||
const deleteGoal = useMutation({
|
||||
mutationFn: (id: string) =>
|
||||
apiFetch<{ deleted: boolean }>(`/v1/goals/${id}`, { method: 'DELETE', tenantId }),
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ['goals', tenantId] });
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl">
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="font-display text-2xl font-semibold text-ink">Obiective</h1>
|
||||
<p className="text-sm text-ink-faint">Obiectivele strategice urmărite în acest workspace.</p>
|
||||
</div>
|
||||
<button type="button" className="btn-primary" onClick={() => setIsFormOpen((v) => !v)}>
|
||||
{isFormOpen ? 'Anulează' : 'Obiectiv nou'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isFormOpen && (
|
||||
<form
|
||||
onSubmit={handleSubmit((values) => createGoal.mutate(values))}
|
||||
noValidate
|
||||
className="card mb-6 space-y-4 p-5"
|
||||
>
|
||||
<div>
|
||||
<label className="label" htmlFor="goal-horizon">Orizont</label>
|
||||
<input
|
||||
id="goal-horizon"
|
||||
type="text"
|
||||
className="field"
|
||||
placeholder="ex: Q3 2026, 12 luni, Trimestrul II"
|
||||
{...register('horizon')}
|
||||
/>
|
||||
{errors.horizon && <p className="mt-1 text-xs text-signal-danger">{errors.horizon.message}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="label" htmlFor="goal-metric">Metrică</label>
|
||||
<input
|
||||
id="goal-metric"
|
||||
type="text"
|
||||
className="field"
|
||||
placeholder="ex: Cifra de afaceri, Clienți noi, Uptime"
|
||||
{...register('metric')}
|
||||
/>
|
||||
{errors.metric && <p className="mt-1 text-xs text-signal-danger">{errors.metric.message}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="label" htmlFor="goal-target">Țintă</label>
|
||||
<input
|
||||
id="goal-target"
|
||||
type="text"
|
||||
className="field"
|
||||
placeholder="ex: 500.000 EUR, 50 clienți, 99.9%"
|
||||
{...register('target')}
|
||||
/>
|
||||
{errors.target && <p className="mt-1 text-xs text-signal-danger">{errors.target.message}</p>}
|
||||
</div>
|
||||
{createGoal.isError && (
|
||||
<p className="text-sm text-signal-danger">
|
||||
{createGoal.error instanceof Error ? createGoal.error.message : 'Eroare la creare'}
|
||||
</p>
|
||||
)}
|
||||
<button type="submit" disabled={isSubmitting || createGoal.isPending} className="btn-primary">
|
||||
Salvează
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div className="mb-4 flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setStatusFilter('')}
|
||||
className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
|
||||
statusFilter === '' ? 'bg-ink text-paper' : 'bg-paper-sunken text-ink-soft hover:text-ink'
|
||||
}`}
|
||||
>
|
||||
Toate
|
||||
</button>
|
||||
{(Object.keys(GOAL_STATUS_LABELS) as GoalStatus[]).map((status) => (
|
||||
<button
|
||||
key={status}
|
||||
type="button"
|
||||
onClick={() => setStatusFilter(status)}
|
||||
className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
|
||||
statusFilter === status ? 'bg-ink text-paper' : 'bg-paper-sunken text-ink-soft hover:text-ink'
|
||||
}`}
|
||||
>
|
||||
{GOAL_STATUS_LABELS[status]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{isLoading && <p className="text-sm text-ink-faint">Se încarcă…</p>}
|
||||
{!isLoading && goals.length === 0 && (
|
||||
<p className="card p-6 text-sm text-ink-faint">
|
||||
{statusFilter
|
||||
? `Niciun obiectiv cu statusul "${GOAL_STATUS_LABELS[statusFilter]}".`
|
||||
: 'Niciun obiectiv încă. Adaugă primul mai sus.'}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<ul className="space-y-3">
|
||||
{goals.map((goal) => (
|
||||
<li key={goal.id} className="card p-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-[11px] font-medium uppercase tracking-wider text-ink-faint">{goal.horizon}</p>
|
||||
<p className="mt-0.5 text-sm font-medium text-ink truncate">{goal.metric}</p>
|
||||
<p className="mt-0.5 text-sm text-ink-soft">{goal.target}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<select
|
||||
aria-label={`Status pentru ${goal.metric}`}
|
||||
className={`rounded-lg border border-ink-line bg-paper-raised px-2.5 py-1.5 text-xs font-medium
|
||||
focus:border-bronze focus:outline-none focus:ring-2 focus:ring-bronze/20
|
||||
${STATUS_COLORS[goal.status]}`}
|
||||
value={goal.status}
|
||||
onChange={(e) =>
|
||||
updateStatus.mutate({ id: goal.id, status: e.target.value as GoalStatus })
|
||||
}
|
||||
>
|
||||
{(Object.entries(GOAL_STATUS_LABELS) as [GoalStatus, string][]).map(([value, label]) => (
|
||||
<option key={value} value={value}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deleteGoal.mutate(goal.id)}
|
||||
disabled={deleteGoal.isPending}
|
||||
className="text-xs text-signal-danger hover:underline disabled:opacity-50"
|
||||
>
|
||||
Șterge
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue