Programemos Cosas: audit

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.

Programemos Cosas

miércoles, 10 de septiembre de 2025

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

Estrategia de Backend y Base de Datos

En Laravel con Eloquent

Estrategia de Frontend con React e Inertia