2f:I[18486,["/_next/static/chunks/3zk55npp9bf01.js","/_next/static/chunks/3knkywys2hkh9.js","/_next/static/chunks/2fcjhy-fz5wnq.js","/_next/static/chunks/0b29fkwlbx2p4.js","/_next/static/chunks/3vqyiv2v25v6h.js","/_next/static/chunks/2tex7xqe6exb2.js","/_next/static/chunks/3rvimhctlr4-r.js","/_next/static/chunks/2qrdos7bay7xd.js","/_next/static/chunks/1zu63xz0sut2q.js","/_next/static/chunks/3s_vtn9-o6axf.js","/_next/static/chunks/0tjcxouu9yygq.js","/_next/static/chunks/00qnunoym8707.js","/_next/static/chunks/36dqcnwhlmhvd.js","/_next/static/chunks/3fc93fmtajepe.js","/_next/static/chunks/3qyzbdc59bipe.js","/_next/static/chunks/2wn6uqhj_7ar8.js","/_next/static/chunks/2ugulmxbv5uj0.js","/_next/static/chunks/3i_85ptr6ldt9.js","/_next/static/chunks/3no31har91fnf.js","/_next/static/chunks/2u_p_b-00dlbb.js","/_next/static/chunks/2s4u-e7v8s32w.js","/_next/static/chunks/03lv2zpbrnsm6.js","/_next/static/chunks/09ryh04ih0u3m.js","/_next/static/chunks/2t7-2l4drt60j.js","/_next/static/chunks/2ajvsktgf6m-p.js","/_next/static/chunks/3ibi-mun41tg8.js","/_next/static/chunks/0ys5fqsi-2imd.js","/_next/static/chunks/0bx1jeef0z_qt.js","/_next/static/chunks/03zmd-m4rfp4v.js","/_next/static/chunks/203gxar08ia6h.js","/_next/static/chunks/1n-tt9-3lg032.js","/_next/static/chunks/2uq2kbfclw4fg.js","/_next/static/chunks/0ht3fekr3tf-z.js","/_next/static/chunks/332qr_vlz8t9f.js","/_next/static/chunks/37fxrooh6apyh.js","/_next/static/chunks/3oi2f2hg83rth.js","/_next/static/chunks/2uvmwrp4luphi.js","/_next/static/chunks/0dgja_yzr_poi.js","/_next/static/chunks/1mwg_4l82b-k1.js","/_next/static/chunks/1pr2cjva2osew.js","/_next/static/chunks/172r_2v6ayun0.js","/_next/static/chunks/051do_f-zm8-n.js","/_next/static/chunks/3d2e2qew1t5n-.js","/_next/static/chunks/1s2n0m45xm-p8.js","/_next/static/chunks/380e_okshg0ij.js","/_next/static/chunks/03jw1cbs584gn.js","/_next/static/chunks/0cglpdiphg124.js","/_next/static/chunks/3xulgzd6wg1pk.js"],"ExpandableCode"] 30:Taff3,

"use client";

import {
  BookOpen,
  FolderArchive,
  KeyRound,
  Palette,
  RotateCcw,
  Wallet,
} from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/motion/button/base";
import {
  type ApprovalPerson,
  ApprovalQueue,
  type ApprovalRequest,
} from "@/components/premium/approval-queue/approval-queue";
import { MorphicTooltip } from "@/components/premium/morphic-tooltip";

const people: ApprovalPerson[] = [
  {
    name: "Maya Chen",
    avatarUrl:
      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&fm=webp&q=80&w=96",
  },
  {
    name: "Leo Martin",
    avatarUrl:
      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&fm=webp&q=80&w=96",
  },
  {
    name: "Nina Brooks",
    avatarUrl:
      "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&fm=webp&q=80&w=96",
  },
];
const initialRequests: ApprovalRequest[] = [
  {
    id: "workspace-access",
    title: "Team workspace access",
    summary:
      "Give two new collaborators access to the design workspace for the next project.",
    category: "Access",
    icon: <KeyRound />,
    status: "pending",
    submittedBy: people[0],
    submittedAt: "20 min ago",
    dueLabel: "Due today",
    reference: "REQ-018",
    fields: [
      { label: "Workspace", value: "Product design" },
      { label: "Permission", value: "Editor" },
      { label: "Collaborators", value: "2 people" },
      { label: "Duration", value: "90 days" },
    ],
    attachments: [
      {
        id: "access-brief",
        name: "collaborator-brief.pdf",
        description: "Project scope · 84 KB",
      },
    ],
  },
  {
    id: "release-assets",
    title: "Review the release assets",
    summary:
      "Final artwork and product screenshots for the autumn release are ready to review.",
    category: "Design",
    icon: <Palette />,
    status: "pending",
    submittedBy: people[2],
    submittedAt: "1 hour ago",
    reference: "REQ-017",
    fields: [
      { label: "Release", value: "Autumn update" },
      { label: "Deliverables", value: "6 assets" },
      { label: "Owner", value: "Brand team" },
      { label: "Version", value: "03" },
    ],
    attachments: [
      {
        id: "asset-list",
        name: "release-assets.pdf",
        description: "Artwork and screenshots · 2.4 MB",
      },
      {
        id: "asset-notes",
        name: "review-notes.md",
        description: "Changes since the last review · 12 KB",
      },
    ],
  },
  {
    id: "research-renewal",
    title: "Renew the research tools",
    summary:
      "Keep the research team's current plan active through the next discovery cycle.",
    category: "Purchase",
    icon: <Wallet />,
    status: "pending",
    submittedBy: people[1],
    submittedAt: "2 hours ago",
    reference: "REQ-016",
    fields: [
      { label: "Plan", value: "Research team" },
      { label: "Amount", value: "$240 / month" },
      { label: "Billing", value: "Monthly" },
      { label: "Budget", value: "Product research" },
    ],
  },
  {
    id: "help-center",
    title: "Publish the updated help center",
    summary:
      "The setup guide now covers the new workspace roles and invitation flow.",
    category: "Content",
    icon: <BookOpen />,
    status: "pending",
    submittedBy: people[0],
    submittedAt: "3 hours ago",
    reference: "REQ-015",
    fields: [
      { label: "Collection", value: "Getting started" },
      { label: "Pages", value: "8 updated" },
    ],
    attachments: [
      {
        id: "content-draft",
        name: "setup-guide-draft.pdf",
        description: "Updated copy · 320 KB",
      },
    ],
  },
  {
    id: "project-archive",
    title: "Archive the completed project",
    summary:
      "Move the finished project into the archive and keep its documents available to the team.",
    category: "Workspace",
    icon: <FolderArchive />,
    status: "approved",
    submittedBy: people[1],
    submittedAt: "Yesterday",
    reference: "REQ-014",
    review: {
      reviewer: people[2],
      reviewedAt: "Yesterday",
      note: "The handoff is complete. Keep the final files available in the archive.",
    },
  },
  {
    id: "contractor-access",
    title: "Extend contractor access",
    summary: "Continue the external team's access during the final handoff.",
    category: "Access",
    icon: <KeyRound />,
    status: "changes_requested",
    submittedBy: people[2],
    submittedAt: "Yesterday",
    reference: "REQ-013",
    review: {
      reviewer: people[0],
      reviewedAt: "Yesterday",
      note: "Please include an end date and limit access to the handoff folder.",
    },
  },
];

export function ApprovalQueuePreview() {
  const [requests, setRequests] = useState(initialRequests);
  return (
    <ApprovalQueue
      requests={requests}
      onDecision={(request, decision) => {
        setRequests((current) =>
          current.map((item) =>
            item.id === request.id
              ? {
                  ...item,
                  status: decision.action,
                  review: {
                    reviewer: people[2],
                    reviewedAt: "Just now",
                    note: decision.note,
                  },
                }
              : item,
          ),
        );
      }}
      headerActions={
        <MorphicTooltip content="Reset preview">
          <Button
            variant="ghost"
            size="icon"
            tabIndex={0}
            aria-label="Reset approval queue"
            onClick={() => setRequests(initialRequests)}
            className="size-9 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          >
            <RotateCcw aria-hidden className="size-4" />
          </Button>
        </MorphicTooltip>
      }
    />
  );
}

2e:["$","$L2f",null,{"children":["$","div",null,{"className":"relative px-0 py-4 text-[13px] leading-relaxed [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:w-max [&_pre]:min-w-full [&_code]:font-mono [&_code]:text-[13px] [&_.shiki]:bg-transparent [&_.shiki]:text-[var(--shiki-light)] dark:[&_.shiki]:text-[var(--shiki-dark)] [&_.shiki_span]:text-[var(--shiki-light)] dark:[&_.shiki_span]:text-[var(--shiki-dark)] [&_.line]:px-5 [&_.highlighted]:border-blue-500 [&_.highlighted]:border-l-2 [&_.highlighted]:bg-(--color-fg)/[0.07] [&_.highlighted]:!pl-[18px] [&_.diff.add]:border-green-500 [&_.diff.add]:border-l-2 [&_.diff.add]:bg-green-500/10 [&_.diff.add]:!pl-[18px] [&_.diff.remove]:border-red-500 [&_.diff.remove]:border-l-2 [&_.diff.remove]:bg-red-500/10 [&_.diff.remove]:!pl-[18px] [&_.focused]:opacity-100 [&_pre:has(.focused)_.line:not(.focused)]:opacity-30 [&_pre:has(.focused)_.line:not(.focused)]:transition-opacity","dangerouslySetInnerHTML":{"__html":"$30"}}]}]

Approval Queue

Review queue

Install