full project: admin panel, backend modules, docs
This commit is contained in:
Lizandro Guarnizo
@@ -0,0 +1,114 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { api } from '@/lib/api';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { toast } from 'sonner';
|
||||
import { Plus } from 'lucide-react';
|
||||
|
||||
interface City { id: string; name: string; }
|
||||
interface Region { id: string; name: string; cities: City[]; }
|
||||
interface Country { id: string; name: string; regions: Region[]; }
|
||||
|
||||
export default function CitiesPage() {
|
||||
const [countries, setCountries] = useState<Country[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [newCity, setNewCity] = useState('');
|
||||
const [selectedRegionId, setSelectedRegionId] = useState('');
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
api.get<Country[]>('/locations/countries')
|
||||
.then(setCountries)
|
||||
.catch(() => setError('Error al cargar ciudades'))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const addCity = async () => {
|
||||
if (!selectedRegionId || !newCity.trim()) {
|
||||
toast.error('Selecciona una región y escribe un nombre');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await api.post('/locations/cities', { region_id: selectedRegionId, name: newCity.trim() });
|
||||
toast.success('Ciudad agregada');
|
||||
setNewCity('');
|
||||
load();
|
||||
} catch (e: any) {
|
||||
toast.error(e?.message || 'Error al agregar ciudad');
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="flex items-center justify-center py-16 text-muted-foreground">Cargando...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-destructive">
|
||||
<p>{error}</p>
|
||||
<Button variant="outline" size="sm" onClick={load} className="mt-2">Reintentar</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl font-bold">Ciudades</h1>
|
||||
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Agregar ciudad</CardTitle></CardHeader>
|
||||
<CardContent className="flex gap-2">
|
||||
<select
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
value={selectedRegionId}
|
||||
onChange={(e) => setSelectedRegionId(e.target.value)}
|
||||
>
|
||||
<option value="">Seleccionar región...</option>
|
||||
{countries.map((c) => (
|
||||
<optgroup key={c.id} label={c.name}>
|
||||
{c.regions.map((r) => (
|
||||
<option key={r.id} value={r.id}>{r.name}</option>
|
||||
))}
|
||||
</optgroup>
|
||||
))}
|
||||
</select>
|
||||
<Input
|
||||
value={newCity}
|
||||
onChange={(e) => setNewCity(e.target.value)}
|
||||
placeholder="Nombre de la ciudad"
|
||||
/>
|
||||
<Button onClick={addCity}><Plus className="mr-1 h-4 w-4" />Agregar</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{countries.map((c) => (
|
||||
<Card key={c.id}>
|
||||
<CardContent className="pt-4">
|
||||
<h2 className="text-lg font-semibold mb-2">{c.name}</h2>
|
||||
{c.regions?.map((r) => (
|
||||
<details key={r.id} className="ml-4 mb-2">
|
||||
<summary className="cursor-pointer text-sm font-medium text-muted-foreground hover:text-foreground">
|
||||
{r.name} ({r.cities?.length || 0} ciudades)
|
||||
</summary>
|
||||
<div className="ml-4 mt-1 flex flex-wrap gap-1">
|
||||
{r.cities?.map((city) => (
|
||||
<span key={city.id} className="inline-block rounded bg-muted px-2 py-0.5 text-xs">
|
||||
{city.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</details>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,130 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--font-heading: var(--font-sans);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
'use client';
|
||||
|
||||
import { AuthProvider } from '@/lib/auth';
|
||||
import AuthGuard from '@/components/auth-guard';
|
||||
import Sidebar from '@/components/sidebar';
|
||||
import { Toaster } from '@/components/ui/sonner';
|
||||
|
||||
export default function AppLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<AuthProvider>
|
||||
<AuthGuard>
|
||||
<Sidebar>{children}</Sidebar>
|
||||
<Toaster richColors />
|
||||
</AuthGuard>
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useAuth } from '@/lib/auth';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Toaster } from '@/components/ui/sonner';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export default function LoginPage() {
|
||||
const { login } = useAuth();
|
||||
const router = useRouter();
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
try {
|
||||
await login(email, password);
|
||||
router.push('/');
|
||||
} catch {
|
||||
toast.error('Credenciales inválidas');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen items-center justify-center bg-muted/30">
|
||||
<Card className="w-full max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-center">ProsApp Admin</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<Input placeholder="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
|
||||
<Input placeholder="Contraseña" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? 'Ingresando...' : 'Ingresar'}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Toaster />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { api } from '@/lib/api';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Users, Briefcase, ClipboardList, Star } from 'lucide-react';
|
||||
|
||||
interface Stats {
|
||||
users: number;
|
||||
professionals: number;
|
||||
services: number;
|
||||
avgRating: number;
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [stats, setStats] = useState<Stats>({ users: 0, professionals: 0, services: 0, avgRating: 0 });
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
Promise.all([
|
||||
api.get<{ data: any[]; meta: any }>('/users').then((r) => r.data).catch(() => [] as any[]),
|
||||
api.get<{ data: any[]; meta: any }>('/professionals').then((r) => r.data).catch(() => [] as any[]),
|
||||
api.get<{ data: any[]; meta: any }>('/services').then((r) => r.data).catch(() => [] as any[]),
|
||||
])
|
||||
.then(([users, professionals, services]) => {
|
||||
setStats({
|
||||
users: users.length,
|
||||
professionals: professionals.length,
|
||||
services: services.length,
|
||||
avgRating: 0,
|
||||
});
|
||||
})
|
||||
.catch(() => setError('Error al cargar las estadísticas'))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const cards = [
|
||||
{ label: 'Usuarios', value: stats.users, icon: Users },
|
||||
{ label: 'Profesionales', value: stats.professionals, icon: Briefcase },
|
||||
{ label: 'Servicios', value: stats.services, icon: ClipboardList },
|
||||
{ label: 'Calificación', value: stats.avgRating.toFixed(1), icon: Star },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold">Dashboard</h1>
|
||||
{loading ? (
|
||||
<p className="text-muted-foreground">Cargando estadísticas...</p>
|
||||
) : error ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-destructive">
|
||||
<p>{error}</p>
|
||||
<Button variant="outline" size="sm" onClick={load} className="mt-2">
|
||||
Reintentar
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{cards.map((c) => (
|
||||
<Card key={c.label}>
|
||||
<CardHeader className="flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">{c.label}</CardTitle>
|
||||
<c.icon className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-3xl font-bold">{c.value}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import DashboardPage from './page.client';
|
||||
|
||||
export default function Page() {
|
||||
return <DashboardPage />;
|
||||
}
|
||||
@@ -0,0 +1,281 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { api } from '@/lib/api';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { toast } from 'sonner';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
|
||||
interface User {
|
||||
name: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
city?: string;
|
||||
picture?: string;
|
||||
}
|
||||
|
||||
interface Schedule {
|
||||
id: string;
|
||||
day_of_week: number;
|
||||
enabled: boolean;
|
||||
range1_hour1?: string;
|
||||
range1_hour2?: string;
|
||||
range2_hour1?: string;
|
||||
range2_hour2?: string;
|
||||
}
|
||||
|
||||
interface Specialization {
|
||||
id: string;
|
||||
name: string;
|
||||
picture?: string;
|
||||
}
|
||||
|
||||
interface PaymentMethod {
|
||||
id: string;
|
||||
nequi: boolean;
|
||||
datafono: boolean;
|
||||
transferencia: boolean;
|
||||
}
|
||||
|
||||
interface Professional {
|
||||
id: string;
|
||||
user_id: string;
|
||||
is_active: boolean;
|
||||
profession?: string;
|
||||
identification?: string;
|
||||
address?: string;
|
||||
rate?: number;
|
||||
average_score?: number;
|
||||
users?: User;
|
||||
schedules?: Schedule[];
|
||||
specializations?: Specialization[];
|
||||
payment_methods?: PaymentMethod[];
|
||||
}
|
||||
|
||||
interface Service {
|
||||
id: string;
|
||||
professional_id: string;
|
||||
user_id: string;
|
||||
description?: string;
|
||||
rate?: number;
|
||||
status: string;
|
||||
day: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
const DAY_NAMES = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];
|
||||
|
||||
export default function ProfessionalDetailPage() {
|
||||
const params = useParams<{ id: string }>();
|
||||
const id = params.id;
|
||||
|
||||
const [professional, setProfessional] = useState<Professional | null>(null);
|
||||
const [services, setServices] = useState<Service[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(() => {
|
||||
if (!id) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
Promise.all([
|
||||
api.get<Professional>(`/professionals/${id}`),
|
||||
api.get<{ data: Service[]; meta: any }>('/services?page=1&limit=50'),
|
||||
])
|
||||
.then(([prof, svcRes]) => {
|
||||
setProfessional(prof);
|
||||
setServices(svcRes.data.filter((s) => s.professional_id === id));
|
||||
})
|
||||
.catch(() => setError('Error al cargar el profesional'))
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const approve = async () => {
|
||||
if (!id) return;
|
||||
try {
|
||||
await api.post(`/professionals/${id}/approve`);
|
||||
toast.success('Profesional aprobado');
|
||||
load();
|
||||
} catch {
|
||||
toast.error('Error al aprobar el profesional');
|
||||
}
|
||||
};
|
||||
|
||||
const deny = async () => {
|
||||
if (!id) return;
|
||||
try {
|
||||
await api.post(`/professionals/${id}/deny`);
|
||||
toast.success('Solicitud rechazada');
|
||||
load();
|
||||
} catch {
|
||||
toast.error('Error al rechazar la solicitud');
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/professionals">
|
||||
<Button variant="ghost" size="icon"><ArrowLeft className="h-4 w-4" /></Button>
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold">Cargando...</h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !professional) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/professionals">
|
||||
<Button variant="ghost" size="icon"><ArrowLeft className="h-4 w-4" /></Button>
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold">Profesional</h1>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center py-8 text-destructive">
|
||||
<p>{error || 'No se encontró el profesional'}</p>
|
||||
<Button variant="outline" size="sm" onClick={load} className="mt-2">
|
||||
Reintentar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const user = professional.users;
|
||||
const paymentLabel: Record<string, string> = {
|
||||
nequi: 'Nequi',
|
||||
datafono: 'Datáfono',
|
||||
transferencia: 'Transferencia',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/professionals">
|
||||
<Button variant="ghost" size="icon"><ArrowLeft className="h-4 w-4" /></Button>
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold">{user?.name || 'Profesional'}</h1>
|
||||
<Badge variant={professional.is_active ? 'default' : 'secondary'}>
|
||||
{professional.is_active ? 'Activo' : 'Pendiente'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Información general</CardTitle></CardHeader>
|
||||
<CardContent className="space-y-2 text-sm">
|
||||
<div><span className="font-medium">Email:</span> {user?.email || '—'}</div>
|
||||
<div><span className="font-medium">Teléfono:</span> {user?.phone || '—'}</div>
|
||||
<div><span className="font-medium">Ciudad:</span> {user?.city || '—'}</div>
|
||||
<div><span className="font-medium">Profesión:</span> {professional.profession || '—'}</div>
|
||||
<div><span className="font-medium">Identificación:</span> {professional.identification || '—'}</div>
|
||||
<div><span className="font-medium">Dirección:</span> {professional.address || '—'}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Tarifa y puntuación</CardTitle></CardHeader>
|
||||
<CardContent className="space-y-2 text-sm">
|
||||
<div><span className="font-medium">Tarifa:</span> ${professional.rate ?? '—'}</div>
|
||||
<div><span className="font-medium">Puntaje promedio:</span> {professional.average_score != null ? `${professional.average_score.toFixed(1)} / 5` : '—'}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{professional.payment_methods && professional.payment_methods.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Métodos de pago</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{professional.payment_methods && ['nequi', 'datafono', 'transferencia'].filter((k) => (professional.payment_methods![0] as any)[k]).map((k) => (
|
||||
<Badge key={k} variant="outline">{paymentLabel[k]}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{professional.schedules && professional.schedules.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Horarios</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Día</TableHead>
|
||||
<TableHead>Horas</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{professional.schedules.map((s) => (
|
||||
<TableRow key={s.id}>
|
||||
<TableCell>{DAY_NAMES[s.day_of_week] || s.day_of_week}</TableCell>
|
||||
<TableCell>{s.enabled ? [s.range1_hour1, s.range1_hour2].filter(Boolean).join(' — ') || '—' : 'Descanso'}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{professional.specializations && professional.specializations.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Especializaciones</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{professional.specializations.map((s) => (
|
||||
<Badge key={s.id} variant="secondary">{s.name}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{services.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Servicios recientes</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Fecha</TableHead>
|
||||
<TableHead>Descripción</TableHead>
|
||||
<TableHead>Tarifa</TableHead>
|
||||
<TableHead>Estado</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{services.map((s) => (
|
||||
<TableRow key={s.id}>
|
||||
<TableCell className="font-medium">{new Date(s.day).toLocaleDateString()}</TableCell>
|
||||
<TableCell>{s.description || '—'}</TableCell>
|
||||
<TableCell>${s.rate ?? '—'}</TableCell>
|
||||
<TableCell>{s.status}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{!professional.is_active && (
|
||||
<div className="flex gap-4">
|
||||
<Button onClick={approve}>Aprobar</Button>
|
||||
<Button variant="destructive" onClick={deny}>Rechazar</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { api } from '@/lib/api';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { toast } from 'sonner';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
|
||||
interface Professional {
|
||||
id: string;
|
||||
user_id: string;
|
||||
is_active: boolean;
|
||||
profession?: string;
|
||||
identification?: string;
|
||||
rate?: number;
|
||||
users?: { id: string; name: string; email?: string; phone?: string };
|
||||
}
|
||||
|
||||
export default function ProfessionalsPage() {
|
||||
const [approved, setApproved] = useState<Professional[]>([]);
|
||||
const [pending, setPending] = useState<Professional[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
Promise.all([
|
||||
api.get<{ data: Professional[]; meta: any }>('/professionals').then((r) => r.data).catch(() => [] as Professional[]),
|
||||
api.get<{ data: Professional[]; meta: any }>('/professionals/pending').then((r) => r.data).catch(() => [] as Professional[]),
|
||||
])
|
||||
.then(([a, p]) => { setApproved(a); setPending(p); })
|
||||
.catch(() => setError('Error al cargar los profesionales'))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const approve = async (id: string) => {
|
||||
await api.post(`/professionals/${id}/approve`);
|
||||
toast.success('Profesional aprobado');
|
||||
load();
|
||||
};
|
||||
|
||||
const deny = async (id: string) => {
|
||||
await api.post(`/professionals/${id}/deny`);
|
||||
toast.success('Solicitud rechazada');
|
||||
load();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl font-bold">Profesionales</h1>
|
||||
{error ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-destructive">
|
||||
<p>{error}</p>
|
||||
<Button variant="outline" size="sm" onClick={load} className="mt-2">
|
||||
Reintentar
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Tabs defaultValue="active">
|
||||
<TabsList>
|
||||
<TabsTrigger value="active">Activos ({approved.length})</TabsTrigger>
|
||||
<TabsTrigger value="pending">Pendientes ({pending.length})</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="active">
|
||||
<Card>
|
||||
<CardContent className="pt-4">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Nombre</TableHead>
|
||||
<TableHead>Profesión</TableHead>
|
||||
<TableHead>Identificación</TableHead>
|
||||
<TableHead>Tarifa</TableHead>
|
||||
<TableHead>Estado</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow><TableCell colSpan={5} className="text-center">Cargando...</TableCell></TableRow>
|
||||
) : approved.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={5} className="text-center">Sin resultados</TableCell></TableRow>
|
||||
) : (
|
||||
approved.map((p) => (
|
||||
<TableRow key={p.id}>
|
||||
<TableCell className="font-medium">{p.users?.name}</TableCell>
|
||||
<TableCell>{p.profession || '—'}</TableCell>
|
||||
<TableCell>{p.identification || '—'}</TableCell>
|
||||
<TableCell>${p.rate}</TableCell>
|
||||
<TableCell><Badge variant="default">Activo</Badge></TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="pending">
|
||||
<Card>
|
||||
<CardContent className="pt-4">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Nombre</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Teléfono</TableHead>
|
||||
<TableHead>Solicitud</TableHead>
|
||||
<TableHead className="text-right">Acción</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow><TableCell colSpan={5} className="text-center">Cargando...</TableCell></TableRow>
|
||||
) : pending.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={5} className="text-center">Sin resultados</TableCell></TableRow>
|
||||
) : (
|
||||
pending.map((p) => (
|
||||
<TableRow key={p.id}>
|
||||
<TableCell className="font-medium">{p.users?.name}</TableCell>
|
||||
<TableCell>{p.users?.email || '—'}</TableCell>
|
||||
<TableCell>{p.users?.phone || '—'}</TableCell>
|
||||
<TableCell>{new Date().toLocaleDateString()}</TableCell>
|
||||
<TableCell className="text-right space-x-2">
|
||||
<Button size="sm" onClick={() => approve(p.id)}>Aprobar</Button>
|
||||
<Button size="sm" variant="destructive" onClick={() => deny(p.id)}>Rechazar</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { api } from '@/lib/api';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { toast } from 'sonner';
|
||||
import { Plus, Trash2 } from 'lucide-react';
|
||||
|
||||
interface Profession {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export default function ProfessionsPage() {
|
||||
const [professions, setProfessions] = useState<Profession[]>([]);
|
||||
const [newName, setNewName] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
api.get<Profession[]>('/professions')
|
||||
.then(setProfessions)
|
||||
.catch(() => setError('Error al cargar las profesiones'))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const add = async () => {
|
||||
if (!newName.trim()) return;
|
||||
await api.post('/professions', { name: newName.trim() });
|
||||
toast.success('Profesión agregada');
|
||||
setNewName('');
|
||||
load();
|
||||
};
|
||||
|
||||
const remove = async (id: string) => {
|
||||
await api.delete(`/professions/${id}`);
|
||||
toast.success('Profesión eliminada');
|
||||
load();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl font-bold">Profesiones</h1>
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Agregar profesión</CardTitle></CardHeader>
|
||||
<CardContent className="flex gap-2">
|
||||
<Input value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="Nombre de la profesión" />
|
||||
<Button onClick={add}><Plus className="mr-1 h-4 w-4" />Agregar</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{error ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-destructive">
|
||||
<p>{error}</p>
|
||||
<Button variant="outline" size="sm" onClick={load} className="mt-2">
|
||||
Reintentar
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="pt-4">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Nombre</TableHead>
|
||||
<TableHead className="w-20"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow><TableCell colSpan={2} className="text-center">Cargando...</TableCell></TableRow>
|
||||
) : professions.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={2} className="text-center">Sin resultados</TableCell></TableRow>
|
||||
) : (
|
||||
professions.map((p) => (
|
||||
<TableRow key={p.id}>
|
||||
<TableCell>{p.name}</TableCell>
|
||||
<TableCell>
|
||||
<Button variant="ghost" size="icon" onClick={() => remove(p.id)}>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { api } from '@/lib/api';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowLeft, Star } from 'lucide-react';
|
||||
|
||||
interface Service {
|
||||
id: string;
|
||||
status: string;
|
||||
day: string;
|
||||
description?: string;
|
||||
rate?: number;
|
||||
address?: string;
|
||||
location_preference?: string;
|
||||
range1_hour1?: string;
|
||||
range1_hour2?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
professional_scored: boolean;
|
||||
user_scored: boolean;
|
||||
users?: {
|
||||
id: string;
|
||||
name: string;
|
||||
phone?: string;
|
||||
picture?: string;
|
||||
};
|
||||
professionals?: {
|
||||
id: string;
|
||||
users?: {
|
||||
name: string;
|
||||
picture?: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
|
||||
accepted: 'bg-blue-100 text-blue-800',
|
||||
active: 'bg-green-100 text-green-800',
|
||||
completed: 'bg-gray-100 text-gray-800',
|
||||
cancelled: 'bg-red-100 text-red-800',
|
||||
denied: 'bg-red-100 text-red-800',
|
||||
};
|
||||
|
||||
const statusLabels: Record<string, string> = {
|
||||
pending: 'Pendiente',
|
||||
accepted: 'Aceptado',
|
||||
active: 'Activo',
|
||||
completed: 'Completado',
|
||||
cancelled: 'Cancelado',
|
||||
denied: 'Rechazado',
|
||||
self_booked: 'Autoreserva',
|
||||
};
|
||||
|
||||
function DetailRow({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-4 py-2 border-b last:border-b-0">
|
||||
<span className="text-sm font-medium text-muted-foreground">{label}</span>
|
||||
<span className="col-span-2 text-sm">{children || '—'}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ServiceDetailPage() {
|
||||
const params = useParams<{ id: string }>();
|
||||
const [service, setService] = useState<Service | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [retryCounter, setRetryCounter] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
api.get<Service>(`/services/${params.id}`)
|
||||
.then((data) => { if (!cancelled) { setService(data); setLoading(false); } })
|
||||
.catch(() => { if (!cancelled) { setError('Error al cargar el servicio'); setLoading(false); } });
|
||||
return () => { cancelled = true; };
|
||||
}, [params.id, retryCounter]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Link href="/services" className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground">
|
||||
<ArrowLeft className="mr-1 h-4 w-4" /> Volver
|
||||
</Link>
|
||||
<div className="text-center py-8 text-muted-foreground">Cargando...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Link href="/services" className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground">
|
||||
<ArrowLeft className="mr-1 h-4 w-4" /> Volver
|
||||
</Link>
|
||||
<div className="flex flex-col items-center justify-center py-8 text-destructive">
|
||||
<p>{error}</p>
|
||||
<Button variant="outline" size="sm" onClick={() => setRetryCounter((c) => c + 1)} className="mt-2">
|
||||
Reintentar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!service) return null;
|
||||
|
||||
const s = service;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Link href="/services" className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground">
|
||||
<ArrowLeft className="mr-1 h-4 w-4" /> Volver
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold">Servicio #{s.id.slice(0, 8)}</h1>
|
||||
<Badge className={statusColors[s.status]} variant="outline">
|
||||
{statusLabels[s.status] || s.status}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Cliente</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{s.users ? (
|
||||
<>
|
||||
<div className="flex items-center gap-3">
|
||||
{s.users.picture && (
|
||||
<img
|
||||
src={s.users.picture}
|
||||
alt={s.users.name}
|
||||
className="h-10 w-10 rounded-full object-cover"
|
||||
/>
|
||||
)}
|
||||
<Link
|
||||
href={`/users/${s.users.id}`}
|
||||
className="text-sm font-medium hover:underline"
|
||||
>
|
||||
{s.users.name}
|
||||
</Link>
|
||||
</div>
|
||||
<DetailRow label="Teléfono">
|
||||
{s.users.phone || '—'}
|
||||
</DetailRow>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">Sin información</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Profesional</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{s.professionals ? (
|
||||
<div className="flex items-center gap-3">
|
||||
{s.professionals.users?.picture && (
|
||||
<img
|
||||
src={s.professionals.users.picture}
|
||||
alt={s.professionals.users.name}
|
||||
className="h-10 w-10 rounded-full object-cover"
|
||||
/>
|
||||
)}
|
||||
<Link
|
||||
href={`/professionals/${s.professionals.id}`}
|
||||
className="text-sm font-medium hover:underline"
|
||||
>
|
||||
{s.professionals.users?.name || '—'}
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">Sin información</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Detalles del servicio</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DetailRow label="Fecha">
|
||||
{new Date(s.day).toLocaleDateString()}
|
||||
</DetailRow>
|
||||
<DetailRow label="Dirección">{s.address}</DetailRow>
|
||||
<DetailRow label="Descripción">{s.description}</DetailRow>
|
||||
<DetailRow label="Tarifa">${s.rate}</DetailRow>
|
||||
<DetailRow label="Preferencia de ubicación">
|
||||
{s.location_preference}
|
||||
</DetailRow>
|
||||
<DetailRow label="Horario">
|
||||
{s.range1_hour1 && s.range1_hour2
|
||||
? `${s.range1_hour1} — ${s.range1_hour2}`
|
||||
: '—'}
|
||||
</DetailRow>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Información adicional</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DetailRow label="Creado">
|
||||
{new Date(s.created_at).toLocaleString()}
|
||||
</DetailRow>
|
||||
<DetailRow label="Actualizado">
|
||||
{new Date(s.updated_at).toLocaleString()}
|
||||
</DetailRow>
|
||||
<DetailRow label="Cliente puntuó">
|
||||
<div className="flex items-center gap-1">
|
||||
<Star
|
||||
className={`h-4 w-4 ${s.user_scored ? 'fill-yellow-400 text-yellow-400' : 'text-muted-foreground'}`}
|
||||
/>
|
||||
{s.user_scored ? 'Sí' : 'No'}
|
||||
</div>
|
||||
</DetailRow>
|
||||
<DetailRow label="Profesional puntuó">
|
||||
<div className="flex items-center gap-1">
|
||||
<Star
|
||||
className={`h-4 w-4 ${s.professional_scored ? 'fill-yellow-400 text-yellow-400' : 'text-muted-foreground'}`}
|
||||
/>
|
||||
{s.professional_scored ? 'Sí' : 'No'}
|
||||
</div>
|
||||
</DetailRow>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { api } from '@/lib/api';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
|
||||
interface Service {
|
||||
id: string;
|
||||
status: string;
|
||||
day: string;
|
||||
description?: string;
|
||||
rate?: number;
|
||||
address?: string;
|
||||
created_at: string;
|
||||
users?: { name: string };
|
||||
professionals?: { users?: { name: string } };
|
||||
}
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
|
||||
accepted: 'bg-blue-100 text-blue-800',
|
||||
active: 'bg-green-100 text-green-800',
|
||||
completed: 'bg-gray-100 text-gray-800',
|
||||
cancelled: 'bg-red-100 text-red-800',
|
||||
denied: 'bg-red-100 text-red-800',
|
||||
};
|
||||
|
||||
const statusLabels: Record<string, string> = {
|
||||
pending: 'Pendiente',
|
||||
accepted: 'Aceptado',
|
||||
active: 'Activo',
|
||||
completed: 'Completado',
|
||||
cancelled: 'Cancelado',
|
||||
denied: 'Rechazado',
|
||||
self_booked: 'Autoreserva',
|
||||
};
|
||||
|
||||
export default function ServicesPage() {
|
||||
const [services, setServices] = useState<Service[]>([]);
|
||||
const [filter, setFilter] = useState('all');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
api.get<{ data: Service[]; meta: any }>('/services?limit=100')
|
||||
.then((res) => setServices(res.data))
|
||||
.catch(() => setError('Error al cargar los servicios'))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const filtered = filter === 'all' ? services : services.filter((s) => s.status === filter);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl font-bold">Servicios</h1>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">Filtrar por estado:</span>
|
||||
<Select value={filter} onValueChange={(v) => v && setFilter(v)}>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Todos</SelectItem>
|
||||
{Object.entries(statusLabels).map(([k, v]) => (
|
||||
<SelectItem key={k} value={k}>{v}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-destructive">
|
||||
<p>{error}</p>
|
||||
<Button variant="outline" size="sm" onClick={load} className="mt-2">
|
||||
Reintentar
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="pt-4">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Usuario</TableHead>
|
||||
<TableHead>Profesional</TableHead>
|
||||
<TableHead>Fecha</TableHead>
|
||||
<TableHead>Descripción</TableHead>
|
||||
<TableHead>Dirección</TableHead>
|
||||
<TableHead>Tarifa</TableHead>
|
||||
<TableHead>Estado</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow><TableCell colSpan={7} className="text-center">Cargando...</TableCell></TableRow>
|
||||
) : filtered.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={7} className="text-center">Sin resultados</TableCell></TableRow>
|
||||
) : (
|
||||
filtered.map((s) => (
|
||||
<TableRow key={s.id}>
|
||||
<TableCell>{s.users?.name || '—'}</TableCell>
|
||||
<TableCell>{s.professionals?.users?.name || '—'}</TableCell>
|
||||
<TableCell>{new Date(s.day).toLocaleDateString()}</TableCell>
|
||||
<TableCell className="max-w-40 truncate">{s.description || '—'}</TableCell>
|
||||
<TableCell className="max-w-40 truncate">{s.address || '—'}</TableCell>
|
||||
<TableCell>${s.rate}</TableCell>
|
||||
<TableCell>
|
||||
<Badge className={statusColors[s.status]} variant="outline">
|
||||
{statusLabels[s.status] || s.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { api } from '@/lib/api';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { toast } from 'sonner';
|
||||
import { Save } from 'lucide-react';
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [settings, setSettings] = useState<Record<string, any> | null>(null);
|
||||
const [editValue, setEditValue] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
api.get<Record<string, any>>('/settings')
|
||||
.then((data) => {
|
||||
setSettings(data);
|
||||
setEditValue(JSON.stringify(data, null, 2));
|
||||
})
|
||||
.catch(() => setError('Error al cargar configuración'))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const save = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const parsed = JSON.parse(editValue);
|
||||
await api.patch('/settings', parsed);
|
||||
setSettings(parsed);
|
||||
toast.success('Configuración guardada');
|
||||
} catch (e: any) {
|
||||
toast.error(e?.message || 'Error al guardar');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="flex items-center justify-center py-16 text-muted-foreground">Cargando...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-destructive">
|
||||
<p>{error}</p>
|
||||
<Button variant="outline" size="sm" onClick={load} className="mt-2">Reintentar</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl font-bold">Configuración</h1>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Configuración global (JSON)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<textarea
|
||||
className="flex min-h-[300px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
/>
|
||||
<Button onClick={save} disabled={saving}>
|
||||
<Save className="mr-1 h-4 w-4" />
|
||||
{saving ? 'Guardando...' : 'Guardar'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { api } from '@/lib/api';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
|
||||
interface Professional {
|
||||
id: string;
|
||||
profession?: string;
|
||||
rate?: number;
|
||||
identification?: string;
|
||||
is_active?: boolean;
|
||||
}
|
||||
|
||||
interface Reputation {
|
||||
total: number;
|
||||
average: number;
|
||||
total_pro: number;
|
||||
average_pro: number;
|
||||
}
|
||||
|
||||
interface UserDetail {
|
||||
id: string;
|
||||
name: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
city?: string;
|
||||
gender?: string;
|
||||
birthday?: string;
|
||||
is_email_verified?: boolean;
|
||||
is_phone_verified?: boolean;
|
||||
pro_state?: number;
|
||||
created_at: string;
|
||||
professionals?: Professional | null;
|
||||
reputations?: Reputation | null;
|
||||
}
|
||||
|
||||
const PRO_STATE_LABELS = ['Usuario', 'Solicitó', 'Profesional', 'Rechazado'];
|
||||
|
||||
export default function UserDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [user, setUser] = useState<UserDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(() => {
|
||||
if (!id) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
api.get<UserDetail>(`/users/${id}`)
|
||||
.then(setUser)
|
||||
.catch(() => setError('Error al cargar el usuario'))
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<p className="text-muted-foreground">Cargando...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-destructive">
|
||||
<p>{error}</p>
|
||||
<Button variant="outline" size="sm" onClick={load} className="mt-2">
|
||||
Reintentar
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/users">
|
||||
<Button variant="ghost" size="icon">
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold">{user.name}</h1>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Información general</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<span className="text-sm text-muted-foreground">Email</span>
|
||||
<p className="flex items-center gap-2">
|
||||
{user.email || '—'}
|
||||
{user.is_email_verified && (
|
||||
<Badge variant="default" className="bg-green-600">Email verificado</Badge>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-muted-foreground">Teléfono</span>
|
||||
<p className="flex items-center gap-2">
|
||||
{user.phone || '—'}
|
||||
{user.is_phone_verified && (
|
||||
<Badge variant="default" className="bg-green-600">Teléfono verificado</Badge>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-muted-foreground">Ciudad</span>
|
||||
<p>{user.city || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-muted-foreground">Género</span>
|
||||
<p>{user.gender || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-muted-foreground">Cumpleaños</span>
|
||||
<p>{user.birthday ? new Date(user.birthday).toLocaleDateString() : '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-muted-foreground">Registro</span>
|
||||
<p>{new Date(user.created_at).toLocaleDateString()}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Estado</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<span className="text-sm text-muted-foreground">Estado profesional</span>
|
||||
<p>
|
||||
<Badge>{PRO_STATE_LABELS[user.pro_state ?? 0] || '—'}</Badge>
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{user.professionals && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Profesional</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-medium">{user.professionals.profession || '—'}</span>
|
||||
<Link href={`/professionals/${user.professionals.id}`}>
|
||||
<Button variant="outline" size="sm">Ver detalle</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<div>
|
||||
<span className="text-muted-foreground">Tarifa</span>
|
||||
<p>{user.professionals.rate != null ? `$${user.professionals.rate}` : '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Identificación</span>
|
||||
<p>{user.professionals.identification || '—'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{user.reputations && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Reputación</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
<div>
|
||||
<span className="text-sm text-muted-foreground">Total</span>
|
||||
<p className="text-2xl font-bold">{user.reputations.total}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-muted-foreground">Promedio</span>
|
||||
<p className="text-2xl font-bold">{user.reputations.average.toFixed(1)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-muted-foreground">Total Pro</span>
|
||||
<p className="text-2xl font-bold">{user.reputations.total_pro}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-muted-foreground">Promedio Pro</span>
|
||||
<p className="text-2xl font-bold">{user.reputations.average_pro.toFixed(1)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { api } from '@/lib/api';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Search } from 'lucide-react';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
name: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
city?: string;
|
||||
pro_state?: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export default function UsersPage() {
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [search, setSearch] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
api.get<{ data: User[]; meta: any }>('/users')
|
||||
.then((res) => setUsers(res.data))
|
||||
.catch(() => setError('Error al cargar los usuarios'))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const filtered = users.filter(
|
||||
(u) =>
|
||||
u.name?.toLowerCase().includes(search.toLowerCase()) ||
|
||||
u.email?.toLowerCase().includes(search.toLowerCase()) ||
|
||||
u.phone?.includes(search),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl font-bold">Usuarios</h1>
|
||||
{error ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-destructive">
|
||||
<p>{error}</p>
|
||||
<Button variant="outline" size="sm" onClick={load} className="mt-2">
|
||||
Reintentar
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="relative w-full max-w-sm">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Buscar por nombre, email o teléfono..."
|
||||
className="pl-9"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Total: {filtered.length}</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Nombre</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Teléfono</TableHead>
|
||||
<TableHead>Ciudad</TableHead>
|
||||
<TableHead>Estado</TableHead>
|
||||
<TableHead>Registro</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow><TableCell colSpan={6} className="text-center">Cargando...</TableCell></TableRow>
|
||||
) : filtered.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={6} className="text-center">Sin resultados</TableCell></TableRow>
|
||||
) : (
|
||||
filtered.map((u) => (
|
||||
<TableRow key={u.id}>
|
||||
<TableCell className="font-medium">{u.name}</TableCell>
|
||||
<TableCell>{u.email || '—'}</TableCell>
|
||||
<TableCell>{u.phone || '—'}</TableCell>
|
||||
<TableCell>{u.city || '—'}</TableCell>
|
||||
<TableCell>{['Usuario', 'Solicitó', 'Profesional', 'Rechazado'][u.pro_state ?? 0] || '—'}</TableCell>
|
||||
<TableCell>{new Date(u.created_at).toLocaleDateString()}</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user