'use client'; import React from 'react'; import * as Accordion from '@radix-ui/react-accordion'; import { RiAddLine, RiMore2Line, RiSubtractLine } from '@remixicon/react'; import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef, type SortingState, } from '@tanstack/react-table'; import * as Badge from './components/ui/badge'; import * as Button from './components/ui/button'; import * as Checkbox from './components/ui/checkbox'; import * as Input from './components/ui/input'; import * as Table from './components/ui/table'; import { cn } from './utils/cn'; declare module '@tanstack/react-table' { interface ColumnMeta { className?: string; } } function Divider() { return (

); } export function InputWithButton() { return (

); } const AccordionTitle = ({ title, count }: { title: string; count: number }) => (

{title}

({count})

); const data: Data[] = [ { id: '1', date: '2024-01-15', type: 'Fleet Maintance', cost: 12000, actions: '', }, { id: '2', date: '2024-02-28', type: 'Emergency Repair', cost: 3500, actions: '', }, { id: '3', date: '2024-01-15', type: 'Fleet Maintance', cost: 12000, actions: '', }, ]; type Data = { id: string; date: string; type: string; cost: number; actions: string; }; type ColumnMetaType = { className?: string; }; const columns: ColumnDef[] = [ { id: 'select', header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value)} aria-label='Select all' /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label='Select row' /> ), enableSorting: false, enableHiding: false, meta: { className: 'pr-0 w-0', } as ColumnMetaType, }, { id: 'date', accessorKey: 'date', header: () => (

Date

), cell: ({ row }) => (

{row.original.date}

), }, { id: 'type', accessorKey: 'type', header: () => (

Type

), cell: ({ row }) => (

{row.original.type}

), }, { id: 'cost', accessorKey: 'cost', header: () => (

Cost

), cell: ({ row }) => (

{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, }).format(row.original.cost)}

), }, { id: 'actions', enableSorting: false, enableHiding: false, cell: ({ row }) => ( ), meta: { className: 'w-12 p-0', }, }, ]; function DataTable() { const [sorting, setSorting] = React.useState([]); const table = useReactTable({ data, columns, onSortingChange: setSorting, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), state: { sorting, }, }); return ( {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext(), )} ))} ))} {table.getRowModel().rows?.length > 0 && table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} ))} ); } const PaymentAccordion = () => (

Corporate Accounts (156 Customers)

Manage your corporate client portfolio efficiently. Track account performance, monitor contract terms, and oversee multiple business relationships in one centralized location. Set custom pricing tiers, manage billing cycles, and generate detailed reports for each corporate account.

Individual Accounts (1,243 Accounts)

Draft

Account Manager

James Brown

Contract Value

$250,000

Start Date

2024-01-15

Member

Recent services

Active Positions (12 Positions)

Browse and manage all current job openings in your organization. Track application status, review candidate profiles, and coordinate with hiring managers. Set position requirements, salary ranges, and keep your recruitment pipeline organized and efficient.

Talent Pipeline (186 Candidates)

Maintain a database of potential candidates for future opportunities. Track candidate qualifications, experience, and interactions. Build relationships with promising talent, schedule interviews, and manage the entire recruitment lifecycle from initial contact to job offer.

); export default PaymentAccordion;