trackgo-fe/apps/showcase/src/pages/action-tools/index.tsx

import { Card, Title, Text, Table, Stack, Badge } from '@repo/ui/components';
import { PageActions, RowActions, PageActionProps, RowActionProps } from '@repo/ui/components';
import { Save, Printer, Trash, MoreVertical, Edit, FileText, CheckCircle, Check } from 'lucide-react';

export default function ActionToolsShowcase() {
  const pageActions: PageActionProps[] = [
    {
      key: 'save',
      label: 'Save Changes',
      icon: <Save size={16} />,
      variant: 'filled',
      onClick: (key) => console.log('Clicked', key),
    },
    {
      key: 'save',
      label: 'Save Changes',
      icon: <Save size={16} />,
      onClick: (key) => console.log('Clicked', key),
    },
    { type: 'divider' },
    {
      key: 'print',
      label: 'Print',
      icon: <Printer size={16} />,
      children: [
        {
          key: 'print-original',
          label: 'Print Original',
          icon: <FileText size={16} />,
          onClick: (k) => console.log(k),
        },
        // { type: 'divider' },
        { key: 'print-copy', label: 'Print Copy', icon: <FileText size={16} />, onClick: (k) => console.log(k) },
        { key: 'print-copy', label: 'Print Copy', icon: <FileText size={16} />, onClick: (k) => console.log(k) },
        { key: 'print-copy', label: 'Print Copy', icon: <FileText size={16} />, onClick: (k) => console.log(k) },
      ],
    },
    {
      key: 'confirm',
      label: 'Confirm',
      icon: <CheckCircle size={16} />,
      onClick: (key) => console.log('Clicked', key),
    },
    {
      key: 'delete',
      label: 'Delete',
      icon: <Trash size={16} />,
      intent: 'destructive',
      onClick: (key) => console.log('Clicked', key),
    },

    {
      key: 'success',
      label: 'Success',
      icon: <Check size={16} />,
      intent: 'success',
      onClick: (key) => console.log('Clicked', key),
    },
    {
      key: 'warning',
      label: 'Warning',
      icon: <Check size={16} />,
      intent: 'warning',
      onClick: (key) => console.log('Clicked', key),
    },
    {
      key: 'Primary',
      label: 'Primary',
      icon: <Check size={16} />,
      intent: 'primary',
      onClick: (key) => console.log('Clicked', key),
    },
  ];

  const rowActions: RowActionProps[] = [
    {
      key: 'edit',
      tooltip: 'Edit Record',
      label: 'Edit Record',
      icon: <Edit size={16} />,
      onClick: (key) => console.log('Clicked', key),
    },
    {
      key: 'approve',
      tooltip: 'Approve',
      label: 'Approve',
      icon: <CheckCircle size={16} />,
      intent: 'success',
      onClick: (key) => console.log('Clicked', key),
    },
    {
      key: 'more',
      label: 'More Options',
      icon: <MoreVertical size={16} />,
      children: [
        {
          key: 'delete',
          label: 'Delete Record',
          icon: <Trash size={16} />,
          intent: 'destructive',
          onClick: (k) => console.log(k),
        },
      ],
    },
  ];

  const tableData = [
    { id: '1', name: 'Invoice #001', status: 'Pending' },
    { id: '2', name: 'Invoice #002', status: 'Approved' },
  ];

  return (
    <Stack gap="xl">
      <Card withBorder shadow="sm" radius="md" p="md">
        <Title order={4} mb="md">
          Page Actions
        </Title>
        <Text c="dimmed" mb="lg">
          Used in toolbars and page headers.
        </Text>
        <PageActions actions={pageActions} />
      </Card>

      <Card withBorder shadow="sm" radius="md" p="md">
        <Title order={4} mb="md">
          Row Actions
        </Title>
        <Text c="dimmed" mb="lg">
          Used inside data grids or list items.
        </Text>
        <Table striped highlightOnHover>
          <Table.Thead>
            <Table.Tr>
              <Table.Th>ID</Table.Th>
              <Table.Th>Name</Table.Th>
              <Table.Th>Status</Table.Th>
              <Table.Th style={{ width: 120 }}>Actions</Table.Th>
            </Table.Tr>
          </Table.Thead>
          <Table.Tbody>
            {tableData.map((row) => (
              <Table.Tr key={row.id}>
                <Table.Td>{row.id}</Table.Td>
                <Table.Td>{row.name}</Table.Td>
                <Table.Td>
                  <Badge color={row.status === 'Approved' ? 'success' : 'warning'}>{row.status}</Badge>
                </Table.Td>
                <Table.Td>
                  <RowActions actions={rowActions} />
                </Table.Td>
                <Table.Td>
                  <RowActions showLabels actions={rowActions} />
                </Table.Td>
              </Table.Tr>
            ))}
          </Table.Tbody>
        </Table>
      </Card>
    </Stack>
  );
}