154 lines
6.2 KiB
TypeScript
154 lines
6.2 KiB
TypeScript
import { APPWRITE_ALMEIRA_CONFIG } from '@/lib/appwrite';
|
|
import { createSessionClient } from '@/lib/appwrite.server';
|
|
import { Query } from 'node-appwrite';
|
|
import Link from 'next/link';
|
|
import { collectionMap, SCHEMA_MAP } from '@/lib/schema';
|
|
import { DataTable } from '@/components/dashboard/DataTable';
|
|
import { getUserPreferences } from '@/lib/preferences';
|
|
|
|
export default async function EntityPage({
|
|
params,
|
|
searchParams
|
|
}: {
|
|
params: Promise<{ entity: string }>,
|
|
searchParams: Promise<{ q?: string, page?: string, sort?: string, dir?: string }>
|
|
}) {
|
|
const { entity } = await params;
|
|
const sParams = await searchParams;
|
|
const q = sParams.q || '';
|
|
const page = Number(sParams.page) || 1;
|
|
const sort = sParams.sort || '$createdAt';
|
|
const dir = (sParams.dir === 'asc' || sParams.dir === 'desc') ? sParams.dir : 'desc';
|
|
const limit = 15;
|
|
const offset = (page - 1) * limit;
|
|
|
|
const collectionId = collectionMap[entity];
|
|
const fieldsConfig = SCHEMA_MAP[entity] || [];
|
|
|
|
const entityNames: Record<string, string> = {
|
|
posts: 'Publicaciones', categories: 'Categorías', clients: 'Clientes', client_types: 'Tipos de Cliente',
|
|
countries: 'Países', departments: 'Departamentos', cities: 'Ciudades', contracts: 'Contratos',
|
|
payment_methods: 'Formas de Pago', publication_types: 'Tipos de Publicación'
|
|
};
|
|
const entityName = entityNames[entity] || entity.replace(/_/g, ' ');
|
|
|
|
if (!collectionId) {
|
|
return (
|
|
<div className="p-8">
|
|
<h1 className="text-2xl font-bold text-red-500">Colección no encontrada</h1>
|
|
<p className="text-slate-400 mt-2">La ruta /dashboard/{entity} no está configurada.</p>
|
|
<Link href="/dashboard" className="text-blue-400 mt-4 inline-block">← Volver al inicio</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Fetch preferences
|
|
const prefs = await getUserPreferences();
|
|
const hiddenColumns = prefs.hiddenColumns?.[entity] || [];
|
|
|
|
let documents: any[] = [];
|
|
let total = 0;
|
|
try {
|
|
const sessionClient = await createSessionClient();
|
|
if (!sessionClient) {
|
|
throw new Error("No sesión activa");
|
|
}
|
|
|
|
const queries = [
|
|
Query.limit(limit),
|
|
Query.offset(offset),
|
|
];
|
|
|
|
// Apply Sorting
|
|
if (dir === 'asc') {
|
|
queries.push(Query.orderAsc(sort));
|
|
} else {
|
|
queries.push(Query.orderDesc(sort));
|
|
}
|
|
|
|
if (q) {
|
|
const searchableFields = fieldsConfig
|
|
.filter(f => f.type === 'text' || f.type === 'textarea')
|
|
.map(f => f.name)
|
|
.slice(0, 2);
|
|
|
|
if (searchableFields.length > 0) {
|
|
queries.push(Query.contains(searchableFields[0], q));
|
|
}
|
|
}
|
|
|
|
const response = await sessionClient.databases.listDocuments(
|
|
APPWRITE_ALMEIRA_CONFIG.databaseId,
|
|
collectionId,
|
|
queries
|
|
);
|
|
documents = response.documents;
|
|
total = response.total;
|
|
} catch (error) {
|
|
console.error(`Error fetching from ${collectionId}:`, error);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6 animate-fade-in pb-10">
|
|
<div className="flex flex-col md:flex-row justify-between items-center bg-slate-900 border border-slate-800 p-6 rounded-2xl shadow-xl shadow-cyan-500/5 gap-6">
|
|
<div>
|
|
<h1 className="text-3xl font-black capitalize font-outfit uppercase tracking-tighter text-white">
|
|
{entityName}
|
|
</h1>
|
|
<p className="text-sm font-bold tracking-widest text-cyan-500 mt-2 uppercase">
|
|
Total en sistema: <span className="text-white bg-slate-800 px-2 py-0.5 rounded-full">{total}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<form className="flex-1 max-w-md w-full relative group">
|
|
<input
|
|
type="text"
|
|
name="q"
|
|
defaultValue={q}
|
|
placeholder={`Buscar en ${entityName}...`}
|
|
className="w-full bg-slate-950 border border-slate-800 rounded-full px-6 py-3 text-slate-200 focus:outline-none focus:border-cyan-500 transition-all font-medium placeholder:text-slate-600"
|
|
/>
|
|
<button type="submit" className="absolute right-2 top-2 bg-slate-800 p-1.5 rounded-full hover:bg-slate-700 transition-colors text-slate-400">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
|
</button>
|
|
</form>
|
|
|
|
<Link href={`/dashboard/${entity}/new`} className="group flex items-center gap-2 bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white text-sm font-bold px-6 py-3 rounded-full shadow-[0_0_20px_rgba(6,182,212,0.3)] hover:shadow-[0_0_30px_rgba(6,182,212,0.5)] transition-all hover:scale-105">
|
|
<span className="text-xl leading-none -mt-1">+</span> Nuevo
|
|
</Link>
|
|
</div>
|
|
|
|
<DataTable
|
|
entity={entity}
|
|
collectionId={collectionId}
|
|
documents={documents}
|
|
fieldsConfig={fieldsConfig}
|
|
initialHiddenColumns={hiddenColumns}
|
|
currentSortField={sort}
|
|
currentSortDir={dir}
|
|
/>
|
|
|
|
{/* Pagination */}
|
|
{total > limit && (
|
|
<div className="flex justify-center items-center gap-4 mt-8">
|
|
<Link
|
|
href={`/dashboard/${entity}?page=${page - 1}${q ? `&q=${q}` : ''}${sort ? `&sort=${sort}` : ''}${dir ? `&dir=${dir}` : ''}`}
|
|
className={`px-6 py-2 rounded-full font-bold text-sm transition-all border border-slate-800 ${page <= 1 ? 'opacity-30 pointer-events-none bg-slate-900' : 'bg-slate-900 text-white hover:border-cyan-500'}`}
|
|
>
|
|
ANTERIOR
|
|
</Link>
|
|
<span className="text-slate-400 font-bold tracking-widest text-xs uppercase">
|
|
Página {page} de {Math.ceil(total / limit)}
|
|
</span>
|
|
<Link
|
|
href={`/dashboard/${entity}?page=${page + 1}${q ? `&q=${q}` : ''}${sort ? `&sort=${sort}` : ''}${dir ? `&dir=${dir}` : ''}`}
|
|
className={`px-6 py-2 rounded-full font-bold text-sm transition-all border border-slate-800 ${page >= Math.ceil(total / limit) ? 'opacity-30 pointer-events-none bg-slate-900' : 'bg-slate-900 text-white hover:border-cyan-500'}`}
|
|
>
|
|
SIGUIENTE
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|