Audit Log

// Audit Log from Hirael <https://hirael.com/blocks/saas/audit-log>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

'use client';

import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { ChevronRight } from 'lucide-react';

import { cn } from '@/lib/utils';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/registry/hirael/bases/radix/ui/collapsible';

type AuditLogProps = React.ComponentProps<'ul'>;

const AuditLog = ({ className, ...props }: AuditLogProps) => {
  return (
    <ul
      data-slot="audit-log"
      className={cn('divide-y divide-border overflow-hidden rounded-md border border-border bg-card', className)}
      {...props}
    />
  );
};

interface AuditLogItemProps extends Omit<React.ComponentProps<'li'>, 'onToggle'> {
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}

const AuditLogItem = ({ open, defaultOpen, onOpenChange, className, children, ...props }: AuditLogItemProps) => {
  return (
    <Collapsible asChild open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
      <li data-slot="audit-log-item" className={cn('flex flex-col', className)} {...props}>
        {children}
      </li>
    </Collapsible>
  );
};

type AuditLogTriggerProps = React.ComponentProps<'button'>;

const AuditLogTrigger = ({ className, children, ...props }: AuditLogTriggerProps) => {
  return (
    <CollapsibleTrigger asChild>
      <button
        type="button"
        data-slot="audit-log-trigger"
        className={cn(
          'group flex w-full items-center gap-3 px-4 py-3 text-start transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset',
          className,
        )}
        {...props}
      >
        <ChevronRight
          aria-hidden
          className="size-3.5 shrink-0 text-muted-foreground transition-transform duration-150 group-data-[state=open]:rotate-90 rtl:group-data-[state=closed]:rotate-180"
        />
        {children}
      </button>
    </CollapsibleTrigger>
  );
};

type AuditLogActorProps = React.ComponentProps<'span'>;

const AuditLogActor = ({ className, ...props }: AuditLogActorProps) => {
  return (
    <span
      data-slot="audit-log-actor"
      className={cn('shrink-0 text-sm font-medium text-foreground', className)}
      {...props}
    />
  );
};

type AuditLogActionProps = React.ComponentProps<'span'>;

const AuditLogAction = ({ className, ...props }: AuditLogActionProps) => {
  return (
    <span data-slot="audit-log-action" className={cn('truncate text-sm text-muted-foreground', className)} {...props} />
  );
};

type AuditLogTimeProps = React.ComponentProps<'time'>;

const AuditLogTime = ({ className, ...props }: AuditLogTimeProps) => {
  return (
    <time
      data-slot="audit-log-time"
      className={cn('ms-auto shrink-0 text-xs text-muted-foreground uppercase', className)}
      {...props}
    />
  );
};

const auditLogStatusVariants = cva(
  'inline-flex shrink-0 items-center rounded-sm border px-1.5 py-0.5 text-xs leading-none uppercase',
  {
    variants: {
      tone: {
        default: 'border-border text-muted-foreground',
        success: 'border-success/30 text-success',
        warning: 'border-warning/30 text-warning',
        danger: 'border-destructive/30 text-destructive',
      },
    },
    defaultVariants: {
      tone: 'default',
    },
  },
);

type AuditLogStatusProps = React.ComponentProps<'span'> & VariantProps<typeof auditLogStatusVariants>;

const AuditLogStatus = ({ tone = 'default', className, ...props }: AuditLogStatusProps) => {
  return (
    <span
      data-slot="audit-log-status"
      data-tone={tone}
      className={cn(auditLogStatusVariants({ tone }), className)}
      {...props}
    />
  );
};

type AuditLogDetailProps = React.ComponentProps<'dl'>;

const AuditLogDetail = ({ className, children, ...props }: AuditLogDetailProps) => {
  return (
    <CollapsibleContent forceMount asChild>
      <div
        data-slot="audit-log-detail-panel"
        className="grid grid-rows-[1fr] transition-[grid-template-rows,visibility] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-[state=closed]:invisible data-[state=closed]:grid-rows-[0fr] motion-reduce:transition-none"
      >
        <div className="min-h-0 overflow-hidden">
          <dl
            data-slot="audit-log-detail"
            className={cn(
              'grid grid-cols-[max-content_1fr] gap-x-6 gap-y-1.5 border-t border-border bg-muted/30 px-4 py-3 ps-11',
              className,
            )}
            {...props}
          >
            {children}
          </dl>
        </div>
      </div>
    </CollapsibleContent>
  );
};

interface AuditLogFieldProps extends React.ComponentProps<'div'> {
  label: React.ReactNode;
}

const AuditLogField = ({ label, className, children, ...props }: AuditLogFieldProps) => {
  return (
    <div data-slot="audit-log-field" className={cn('contents', className)} {...props}>
      <dt className="text-xs text-muted-foreground uppercase">{label}</dt>
      <dd className="min-w-0 text-[12px] break-words text-foreground">{children}</dd>
    </div>
  );
};

export {
  AuditLog,
  AuditLogItem,
  AuditLogTrigger,
  AuditLogActor,
  AuditLogAction,
  AuditLogTime,
  AuditLogStatus,
  AuditLogDetail,
  AuditLogField,
};

const AuditLogBlock = () => {
  return (
    <section data-slot="audit-log-block" className="flex w-full justify-center bg-background p-6 sm:p-10">
      <div className="grid w-full max-w-2xl animate-in gap-3 duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both fade-in slide-in-from-bottom-2 motion-reduce:animate-none">
        <p className="text-xs text-muted-foreground uppercase">Recent events</p>
        <AuditLog>
          <AuditLogItem defaultOpen>
            <AuditLogTrigger>
              <AuditLogActor>lena.park</AuditLogActor>
              <AuditLogAction>updated billing settings</AuditLogAction>
              <AuditLogStatus tone="success" className="ms-auto">
                200
              </AuditLogStatus>
              <AuditLogTime className="ms-0">14:20 UTC</AuditLogTime>
            </AuditLogTrigger>
            <AuditLogDetail>
              <AuditLogField label="Actor">lena.park@hirael.com</AuditLogField>
              <AuditLogField label="IP">192.0.2.51</AuditLogField>
              <AuditLogField label="Location">Lisbon, PT</AuditLogField>
              <AuditLogField label="Plan">Pro to Scale</AuditLogField>
              <AuditLogField label="Seats">10 to 25</AuditLogField>
            </AuditLogDetail>
          </AuditLogItem>

          <AuditLogItem>
            <AuditLogTrigger>
              <AuditLogActor>api/token</AuditLogActor>
              <AuditLogAction>created a new API key</AuditLogAction>
              <AuditLogStatus tone="success" className="ms-auto">
                201
              </AuditLogStatus>
              <AuditLogTime className="ms-0">13:02 UTC</AuditLogTime>
            </AuditLogTrigger>
            <AuditLogDetail>
              <AuditLogField label="Key">sk_live_••••8f21</AuditLogField>
              <AuditLogField label="Scopes">read, write</AuditLogField>
              <AuditLogField label="IP">203.0.113.9</AuditLogField>
            </AuditLogDetail>
          </AuditLogItem>

          <AuditLogItem>
            <AuditLogTrigger>
              <AuditLogActor>theo.adams</AuditLogActor>
              <AuditLogAction>failed sign-in attempt</AuditLogAction>
              <AuditLogStatus tone="danger" className="ms-auto">
                401
              </AuditLogStatus>
              <AuditLogTime className="ms-0">11:47 UTC</AuditLogTime>
            </AuditLogTrigger>
            <AuditLogDetail>
              <AuditLogField label="Reason">invalid password</AuditLogField>
              <AuditLogField label="IP">198.51.100.7</AuditLogField>
              <AuditLogField label="Attempts">3 in 5 min</AuditLogField>
            </AuditLogDetail>
          </AuditLogItem>
        </AuditLog>
      </div>
    </section>
  );
};

export default AuditLogBlock;