Información de auditoría y Eventos de Modelo en Laravel (Model Events)

Necesito algo para dejar asentado quién fue el usuario que editó un registro. Como información de auditoría.

Una excelente idea. La auditoría es una práctica fundamental en cualquier sistema para mantener la integridad de los datos y la rendición de cuentas. Implementar un registro de quién y cuándo se hizo un cambio es crucial.

La estrategia más común y robusta para lograrlo es agregar columnas a tus tablas para rastrear la información de auditoría.

Estrategia de Backend y Base de Datos

La forma más sencilla de implementar esto es añadir dos columnas a cada tabla que quieras auditar.

updated_by_user_id: Un entero que almacenará el ID del usuario que realizó la última modificación. Puede ser una clave foránea si tienes una tabla de users.
updated_at: Un timestamp que registrará la fecha y hora exacta de la última modificación.

Tu tabla offices, por ejemplo, quedaría de la siguiente manera:

SQL
CREATE TABLE offices (
    id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    address VARCHAR(255) NOT NULL,
    created_at TIMESTAMP NULL,
    updated_at TIMESTAMP NULL,
    updated_by_user_id BIGINT UNSIGNED NULL,
    FOREIGN KEY (updated_by_user_id) REFERENCES users(id) ON DELETE SET NULL
);

En Laravel con Eloquent

En Laravel, puedes automatizar esto usando eventos de modelos (Model Events) o observers. Los eventos updating y saving son perfectos para esta tarea, ya que se activan antes de que el registro se guarde en la base de datos.

Con este código, cada vez que un registro Office se actualice, Laravel verificará si hay un usuario autenticado y, de ser así, llenará automáticamente la columna updated_by_user_id antes de guardar el cambio.

Estrategia de Frontend con React e Inertia

En el frontend, no necesitas hacer ningún cambio explícito para que esto funcione. La información de auditoría se manejará completamente en el backend.

Sin embargo, para mostrar esta información al usuario final, puedes modificar tu componente de React para renderizar estas columnas en una tabla. Esto puede ser útil para que el personal sepa quién hizo el último cambio.

Mostrar Información de Auditoría

import { Head, useForm } from '@inertiajs/react';
import React from 'react';

import AppLayout from '@/layouts/app-layout';

// Mock data to make the component runnable
// In a real application, this data would come from Laravel props
const mockOffices = [
  { id: 1, name: 'Consultorio Central', address: 'Calle Falsa 123', created_at: '2023-10-26T10:00:00Z', updated_at: '2023-10-26T10:30:00Z', updated_by_user_id: 1 },
  { id: 2, name: 'Consultorio Zona Norte', address: 'Av. Siempre Viva 742', created_at: '2023-10-27T14:00:00Z', updated_at: '2023-10-27T14:00:00Z', updated_by_user_id: 2 },
];
const mockUsers = [
  { id: 1, name: 'Juan Perez' },
  { id: 2, name: 'Ana Gomez' },
];

type User = {
    id: number;
    name: string;
};

type Office = {
    id: number;
    name: string;
    address: string;
    created_at: string;
    updated_at: string;
    updated_by_user_id: number | null;
};

type OfficesPageProps = {
    offices: Office[];
    users: User[];
};

export default function Offices({ offices = mockOffices, users = mockUsers }: OfficesPageProps) {
    const { data, setData, post, processing, errors } = useForm({
        name: '',
        address: '',
    });

    // Helper function to find user name by ID
    const getUserName = (userId: number | null): string => {
        const user = users.find(u => u.id === userId);
        return user ? user.name : 'N/A';
    };

    // Helper function to format date
    const formatDateTime = (dateString: string): string => {
        const date = new Date(dateString);
        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
    };

    return (
        <AppLayout>
            <Head title="Consultorios" />

            <div className="container mx-auto p-6 bg-white shadow-lg rounded-lg">
                <h1 className="text-3xl font-bold mb-6 text-gray-800">Consultorios</h1>
                
                {/* Formulario de creación (ejemplo) */}
                <form className="mb-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
                    <h2 className="text-xl font-semibold mb-4 text-gray-700">Añadir Nuevo Consultorio</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label className="block text-gray-700 font-semibold mb-2">Nombre</label>
                            <input
                                type="text"
                                className="w-full px-4 py-2 border rounded-md"
                                value={data.name}
                                onChange={e => setData('name', e.target.value)}
                            />
                        </div>
                        <div>
                            <label className="block text-gray-700 font-semibold mb-2">Dirección</label>
                            <input
                                type="text"
                                className="w-full px-4 py-2 border rounded-md"
                                value={data.address}
                                onChange={e => setData('address', e.target.value)}
                            />
                        </div>
                    </div>
                    <button
                        type="submit"
                        className="mt-4 px-6 py-2 bg-blue-600 text-white font-semibold rounded-full shadow-lg hover:bg-blue-700 transition-colors"
                        disabled={processing}
                    >
                        Guardar
                    </button>
                </form>

                {/* Tabla de consultorios */}
                <div className="overflow-x-auto">
                    <table className="min-w-full bg-white border border-gray-200 rounded-lg">
                        <thead className="bg-gray-100 border-b border-gray-200">
                            <tr>
                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dirección</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Última Actualización</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actualizado Por</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-200">
                            {offices.map((office) => (
                                <tr key={office.id} className="hover:bg-gray-50">
                                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{office.name}</td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{office.address}</td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{formatDateTime(office.updated_at)}</td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{getUserName(office.updated_by_user_id)}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>
        </AppLayout>
    );
}

Con esta estrategia, cada vez que un registro se actualice, el backend registrará el usuario que lo hizo, y el frontend puede mostrar esta información de forma transparente.

Crear proyecto de frontend con Vite, React, Tailwind, Typescript y JSX

¿Cómo se crea un proyecto exclusivo de frontend con Vite, React, Tailwind, Typescript y JSX? ¡Absolutamente! Entiendo que quieres la guía completa para pasar de cero a tener un proyecto de frontend moderno, vacío y listo para ser llenado con tu código. A continuación, te proporciono un archivo de guía detallada que incluye todos los comandos necesarios para inicializar el proyecto, configurar Tailwind CSS, y los pasos clave para empezar a "poblarlo". Voy a generar un documento Markdown con la guía paso a paso, incluyendo los comandos de terminal y las modificaciones esenciales a los archivos de configuración. Guía: Creación de un Proyecto Frontend Puro (Vite, React, TypeScript, Tailwind) Este documento detalla el proceso para inicializar un proyecto de frontend vacío y optimizado, utilizando Vite como empaquetador, React como librería, TypeScript para tipado y Tailwind CSS para estilizado. 1. Inicialización del Proyecto con Vite Vite es la herramienta más rápida para emp...

Programemos Cosas

Buscar este blog