Add delete house

2026-02-06 11:34:23 +07:00
parent 7b14b30320
commit 42435faa7f
11 changed files with 316 additions and 24 deletions
--- a/src/components/audit/view-log-detail-dialog.tsx
+++ b/src/components/audit/view-log-detail-dialog.tsx
@@ -0,0 +1,137 @@
+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;