Audit Logging

export default function Audit() {
  const { profile } = useAuth();
  const { toast } = useToast();
  const [logs, setLogs] = useState<AuditLog[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadLogs();
  }, [profile]);

  const loadLogs = async () => {
    if (!profile?.organization_id) return;

    try {
      const { data, error } = await supabase
        .from('audit_logs')
        .select('*')
        .eq('organization_id', profile.organization_id)
        .order('created_at', { ascending: false })
        .limit(50);

      if (error) throw error;
      setLogs(data || []);
    } catch (error: any) {
      toast({
        title: 'Error',
        description: error.message,
        variant: 'destructive',
      });
    } finally {
      setLoading(false);
    }
  };
}

interface AuditLog {
  id: string;           // Unique log entry ID
  event: string;        // Event type/name
  details: any;         // Event-specific data
  created_at: string;   // ISO 8601 timestamp
}

// From Audit.tsx:69
<div className="space-y-2">
  {logs.map((log) => (
    <Card key={log.id} className="glass">
      <CardContent className="p-4">
        <div className="flex items-start justify-between">
          <div>
            <p className="font-medium">{log.event}</p>
            <p className="text-sm text-muted-foreground mt-1">
              {new Date(log.created_at).toLocaleString()}
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  ))}
</div>

SELECT * FROM audit_logs 
WHERE organization_id = :current_user_organization
ORDER BY created_at DESC
LIMIT 50;

new Date(log.created_at).toLocaleString()
// Example output: "1/15/2024, 10:30:00 AM"

// From Audit.tsx:56
{loading ? (
  <div className="text-center py-12">
    <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent mx-auto mb-4"></div>
    <p className="text-muted-foreground">Loading audit logs...</p>
  </div>
) : (
  // Log entries
)}

// From Audit.tsx:61
{logs.length === 0 ? (
  <Card className="glass">
    <CardContent className="py-12 text-center">
      <ScrollText className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
      <p className="text-muted-foreground">No audit logs found</p>
    </CardContent>
  </Card>
) : (
  // Log list
)}