fullstack-fuware/src/components/audit/view-log-detail-dialog.tsx

import { LOG_ACTION } from '@/types/enum';
import { useCopyToClipboard } from '@hooks/use-copy-to-clipboard';
import usePreventAutoFocus from '@hooks/use-prevent-auto-focus';
import { m } from '@paraglide/messages';
import { CheckIcon, CopyIcon, EyeIcon } from '@phosphor-icons/react';
import { Badge } from '@ui/badge';
import { Button } from '@ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@ui/dialog';
import { Label } from '@ui/label';
import { Tooltip, TooltipContent, TooltipTrigger } from '@ui/tooltip';
import { formatters } from '@utils/formatters';
import { jsonSupport } from '@utils/helper';
import ActionBadge from './action-badge';

type ViewDetailProps = {
  data: AuditWithUser;
};

const ViewDetailAudit = ({ data }: ViewDetailProps) => {
  const prevent = usePreventAutoFocus();
  const { isCopied, copyToClipboard } = useCopyToClipboard();

  return (
    <Dialog>
      <Tooltip>
        <TooltipTrigger asChild>
          <DialogTrigger asChild>
            <Button
              type="button"
              variant="ghost"
              size="icon"
              className="rounded-full cursor-pointer text-blue-500 hover:bg-blue-100 hover:text-blue-600"
            >
              <EyeIcon size={16} />
              <span className="sr-only">{m.ui_view_btn()}</span>
            </Button>
          </DialogTrigger>
        </TooltipTrigger>
        <TooltipContent
          side="left"
          className="bg-blue-500 [&_svg]:bg-blue-500 [&_svg]:fill-blue-500 text-white"
        >
          <Label>{m.ui_view_btn()}</Label>
        </TooltipContent>
      </Tooltip>
      <DialogContent
        className="max-w-100 xl:max-w-2xl"
        {...prevent}
        onPointerDownOutside={(e) => e.preventDefault()}
      >
        <DialogHeader>
          <DialogTitle className="flex items-center gap-3 text-lg font-bold text-blue-600">
            <EyeIcon size={20} />
            {m.ui_dialog_view_title({ type: m.nav_logs() })}
          </DialogTitle>
          <DialogDescription className="sr-only">
            {m.ui_dialog_view_title({ type: m.nav_logs() })}
          </DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-2">
          <div className="flex items-center gap-2">
            <span className="font-bold">
              {m.logs_page_ui_table_header_username()}:
            </span>
            <Label>{data.user?.name}</Label>
          </div>
          <div className="flex items-center gap-2">
            <span className="font-bold">
              {m.logs_page_ui_table_header_table()}:
            </span>
            <Badge variant="table" className="px-3 py-1 text-xs">
              {data.tableName}
            </Badge>
          </div>
          <div className="flex items-center gap-2">
            <span className="font-bold">
              {m.logs_page_ui_table_header_action()}:
            </span>
            <ActionBadge action={data.action as LOG_ACTION} />
          </div>
          {data.oldValue && (
            <div className="flex flex-col gap-2">
              <span className="font-bold">
                {m.logs_page_ui_table_header_old_value()}:
              </span>
              <pre className="whitespace-pre-wrap wrap-break-word">
                {jsonSupport(data.oldValue)}
              </pre>
            </div>
          )}
          {data.newValue && (
            <div className="flex flex-col gap-2">
              <span className="font-bold">
                {m.logs_page_ui_table_header_new_value()}:
              </span>
              <pre className="whitespace-pre-wrap wrap-break-word">
                {data.newValue ? jsonSupport(data.newValue) : ''}
              </pre>
            </div>
          )}
          <div className="flex items-center gap-2">
            <span className="font-bold">
              {m.logs_page_ui_table_header_record_id()}:
            </span>
            <div className="flex gap-1.5 items-center">
              {data.recordId}
              <Button
                type="button"
                variant="outline"
                size="icon-xs"
                className="rounded-full cursor-pointer"
                onClick={() => copyToClipboard(data.recordId)}
              >
                {isCopied ? <CheckIcon /> : <CopyIcon />}
              </Button>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <span className="font-bold">
              {m.logs_page_ui_table_header_create_at()}:
            </span>
            <span>{formatters.dateTime(new Date(data.createdAt))}</span>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default ViewDetailAudit;