215 lines
8 KiB
TypeScript
215 lines
8 KiB
TypeScript
'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>
|
|
);
|
|
}
|