feat(clients): add clients management page
Add comprehensive clients management interface including: - Client table with search, filtering, and pagination - Client form for creating and editing clients - Client detail dialog showing profile, membership, and stats - API endpoint for individual client operations (GET, PUT, DELETE) - Stats cards showing total clients, with membership, and new this month - Integration with membership assignment dialog Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ivan
313
apps/web/components/clients/client-form.tsx
Normal file
313
apps/web/components/clients/client-form.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
|
||||
|
||||
interface ClientFormData {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
avatar?: string;
|
||||
}
|
||||
|
||||
interface ClientFormProps {
|
||||
initialData?: Partial<ClientFormData>;
|
||||
onSubmit: (data: ClientFormData) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
isLoading?: boolean;
|
||||
mode?: "create" | "edit";
|
||||
}
|
||||
|
||||
export function ClientForm({
|
||||
initialData,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
isLoading = false,
|
||||
mode = "create",
|
||||
}: ClientFormProps) {
|
||||
const [formData, setFormData] = useState<ClientFormData>({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
avatar: "",
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
// Initialize form with initial data
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
setFormData({
|
||||
firstName: initialData.firstName || "",
|
||||
lastName: initialData.lastName || "",
|
||||
email: initialData.email || "",
|
||||
phone: initialData.phone || "",
|
||||
avatar: initialData.avatar || "",
|
||||
});
|
||||
}
|
||||
}, [initialData]);
|
||||
|
||||
// Validate email format
|
||||
const isValidEmail = (email: string): boolean => {
|
||||
if (!email) return true; // Email is optional
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
};
|
||||
|
||||
// Validate form
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.firstName.trim()) {
|
||||
newErrors.firstName = "El nombre es requerido";
|
||||
}
|
||||
|
||||
if (!formData.lastName.trim()) {
|
||||
newErrors.lastName = "El apellido es requerido";
|
||||
}
|
||||
|
||||
if (formData.email && !isValidEmail(formData.email)) {
|
||||
newErrors.email = "Formato de email invalido";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
// Handle form submission
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await onSubmit(formData);
|
||||
} catch (err) {
|
||||
// Error handling is done in parent component
|
||||
console.error("Error submitting form:", err);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle input change
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
|
||||
// Clear error when user starts typing
|
||||
if (errors[name]) {
|
||||
setErrors((prev) => {
|
||||
const newErrors = { ...prev };
|
||||
delete newErrors[name];
|
||||
return newErrors;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Handle click outside to close
|
||||
const handleOverlayClick = (e: React.MouseEvent) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onCancel();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 overflow-y-auto"
|
||||
onClick={handleOverlayClick}
|
||||
>
|
||||
<Card className="w-full max-w-md my-8">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg">
|
||||
{mode === "create" ? "Nuevo Cliente" : "Editar Cliente"}
|
||||
</CardTitle>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="rounded-full p-1 hover:bg-primary-100 transition-colors"
|
||||
>
|
||||
<svg
|
||||
className="h-5 w-5 text-primary-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<CardContent className="space-y-4">
|
||||
{/* First Name */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="firstName"
|
||||
className="block text-sm font-medium text-primary-700 mb-1"
|
||||
>
|
||||
Nombre *
|
||||
</label>
|
||||
<Input
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
type="text"
|
||||
value={formData.firstName}
|
||||
onChange={handleChange}
|
||||
placeholder="Juan"
|
||||
className={errors.firstName ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.firstName && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.firstName}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Last Name */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="lastName"
|
||||
className="block text-sm font-medium text-primary-700 mb-1"
|
||||
>
|
||||
Apellido *
|
||||
</label>
|
||||
<Input
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
type="text"
|
||||
value={formData.lastName}
|
||||
onChange={handleChange}
|
||||
placeholder="Garcia"
|
||||
className={errors.lastName ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.lastName && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.lastName}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-primary-700 mb-1"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
placeholder="juan@ejemplo.com"
|
||||
className={errors.email ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Phone */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="phone"
|
||||
className="block text-sm font-medium text-primary-700 mb-1"
|
||||
>
|
||||
Telefono
|
||||
</label>
|
||||
<Input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
placeholder="+34 600 123 456"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Avatar URL */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="avatar"
|
||||
className="block text-sm font-medium text-primary-700 mb-1"
|
||||
>
|
||||
URL de Foto
|
||||
</label>
|
||||
<Input
|
||||
id="avatar"
|
||||
name="avatar"
|
||||
type="url"
|
||||
value={formData.avatar}
|
||||
onChange={handleChange}
|
||||
placeholder="https://ejemplo.com/foto.jpg"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-primary-500">
|
||||
URL de una imagen para el avatar del cliente
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Avatar Preview */}
|
||||
{formData.avatar && (
|
||||
<div className="flex items-center gap-3 p-3 bg-primary-50 rounded-md">
|
||||
<img
|
||||
src={formData.avatar}
|
||||
alt="Vista previa"
|
||||
className="h-12 w-12 rounded-full object-cover"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = "none";
|
||||
}}
|
||||
/>
|
||||
<span className="text-sm text-primary-600">Vista previa</span>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="border-t border-primary-200 bg-primary-50 pt-4">
|
||||
<div className="flex w-full gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
className="flex-1"
|
||||
disabled={isLoading}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="accent"
|
||||
disabled={isLoading}
|
||||
className="flex-1"
|
||||
>
|
||||
{isLoading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
||||
Guardando...
|
||||
</span>
|
||||
) : mode === "create" ? (
|
||||
"Crear Cliente"
|
||||
) : (
|
||||
"Guardar Cambios"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user