eai-frontend-components 2.0.4

package/src/components/ui/custom/sidebar/types/sidebar.ts

@@ -0,0 +1,31 @@
+export const SidebarSubmenuType = {
+	COLLAPSIBLE: 'collapsible',
+	// Deprecated: Use COLLAPSIBLE instead
+	DROPDOWN: 'dropdown',
+} as const;
+export type SidebarSubmenuType = (typeof SidebarSubmenuType)[keyof typeof SidebarSubmenuType];
+
+export interface Module {
+	value: string;
+	path: string;
+	title: string;
+	icon: React.ReactNode;
+	subTitle: string;
+}
+
+export interface SidebarPage {
+	module: Module;
+	path: string;
+	icon?: React.ReactNode;
+	title: string;
+	hideSidebar: boolean;
+	displayOnlyresellerIsAdm?: boolean;
+	subMenuType?: SidebarSubmenuType;
+	subMenuItems?: {
+		label: string;
+		description?: string;
+		path: string;
+		displayOnlyresellerIsAdm?: boolean;
+		disabled?: boolean;
+	}[];
+}

package/src/components/ui/custom/table/data-table-export.tsx

@@ -0,0 +1,126 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { FieldErrors, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Button } from '../../button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../../dialog';
+import { Form } from '../../form';
+import { toast } from '../../use-toast';
+import { FormRadioGroup } from '../form/radio-group';
+import { ExportDataTable } from './types/data-table';
+
+interface DataTableExportProps {
+	exportData?: ExportDataTable;
+	totalRows: number;
+}
+
+export function DataTableExport({ exportData, totalRows }: DataTableExportProps) {
+	const exportXlSX = () => {
+		if (!exportData) return;
+
+		if (totalRows === 0) {
+			toast({
+				title: 'Não há dados para exportar.',
+				variant: 'destructive',
+			});
+			return {};
+		}
+		const params = new URLSearchParams(exportData.params).toString();
+		window.open(`${exportData.url}?${params}`, '_blank');
+	};
+
+	const renderExport = () => {
+		if (!exportData) return null;
+
+		if (exportData.type === 'xlsx') {
+			return (
+				<Button variant='secondary' onClick={exportXlSX}>
+					Exportar
+				</Button>
+			);
+		}
+
+		if (exportData.type === 'dialog') {
+			const ExportDataSchema = z.object({
+				model: z.string(),
+				format: z.string(),
+			});
+
+			const form = useForm<z.infer<typeof ExportDataSchema>>({
+				mode: 'onTouched',
+				resolver: zodResolver(ExportDataSchema),
+			});
+
+			const { control, trigger, handleSubmit } = form;
+
+			const onSubmit = async (values: z.infer<typeof ExportDataSchema>) => {
+				await trigger();
+
+				toast({
+					title: 'Em desenvolvimento.',
+					variant: 'destructive',
+				});
+			};
+
+			const onError = async (errors: FieldErrors<z.infer<typeof ExportDataSchema>>) => {
+				toast({
+					title: 'Erro ao salvar',
+					description: 'Verifique os campos obrigatórios',
+					variant: 'destructive',
+				});
+			};
+
+			return (
+				<Form {...(form as any)} onSubmit={handleSubmit(onSubmit, onError)}>
+					<Dialog>
+						<DialogTrigger asChild>
+							<Button variant='secondary'>Exportar</Button>
+						</DialogTrigger>
+						<DialogContent hideClose className='fixed p-6 rounded-lg w-[451px]'>
+							<DialogHeader>
+								<DialogTitle>Exportar</DialogTitle>
+								<DialogDescription />
+							</DialogHeader>
+							<div className='flex flex-col gap-6'>
+								<FormRadioGroup
+									control={control}
+									name='model'
+									label='Selecione o modelo de visualização'
+									options={[
+										{ value: '0', label: 'Resumido' },
+										{ value: '1', label: 'Detalhado' },
+									]}
+									className='text-sm font-normal'
+									classNameOptions='flex flex-col gap-4 mt-4 text-sm font-normal'
+								/>
+
+								<FormRadioGroup
+									control={control}
+									name='format'
+									label='Selecione o formato desejado para exportação'
+									options={[
+										{ value: '0', label: 'PDF' },
+										{ value: '1', label: 'XLSX' },
+									]}
+									className='text-sm font-normal'
+									classNameOptions='flex flex-col gap-4 mt-4 text-sm font-normal'
+								/>
+							</div>
+							<DialogFooter className='sm:justify-end gap-2'>
+								<Button type='button' variant='secondary'>
+									Fechar
+								</Button>
+								<Button type='button' variant='default' onClick={() => exportXlSX()}>
+									Exportar
+								</Button>
+							</DialogFooter>
+						</DialogContent>
+					</Dialog>
+				</Form>
+			);
+		}
+
+		return null;
+	};
+
+	return exportData && renderExport();
+}

package/src/components/ui/custom/table/data-table-footer.tsx

@@ -0,0 +1,148 @@
+import { PaginationState } from '@tanstack/react-table';
+import { Badge } from '../../badge';
+import {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from '../../pagination';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../../select';
+import { DataTableExport } from './data-table-export';
+import { ExportDataTable } from './types/data-table';
+
+interface DataTableFooterProps<TData> {
+	hidePagination?: boolean;
+	disablePagination?: boolean;
+	isLoading?: boolean;
+	totalRows: number;
+	totalPages: number;
+	currentPage: number;
+	pagination: PaginationState;
+	handlePageSize: (value: number) => void;
+	handlePage: (value: number) => void;
+	previousPage: {
+		action: () => void;
+		disabled: boolean;
+	};
+	nextPage: {
+		action: () => void;
+		disabled: boolean;
+	};
+	exportData?: ExportDataTable;
+}
+
+export function DataTableFooter<TData>({
+	isLoading,
+	totalRows,
+	totalPages,
+	currentPage,
+	hidePagination,
+	disablePagination,
+	pagination,
+	handlePageSize,
+	handlePage,
+	previousPage,
+	nextPage,
+	exportData,
+}: DataTableFooterProps<TData>) {
+	const renderPaginationPages = () => {
+		const paginationItems: JSX.Element[] = [];
+
+		const createPaginationItem = (pageIndex: number) => (
+			<PaginationItem key={pageIndex}>
+				<PaginationLink onClick={() => handlePage(pageIndex)} isActive={currentPage === pageIndex}>
+					{pageIndex + 1}
+				</PaginationLink>
+			</PaginationItem>
+		);
+
+		// Add first page
+		paginationItems.push(createPaginationItem(0));
+
+		// Add ellipsis if needed
+		if (currentPage > 2) {
+			paginationItems.push(<PaginationEllipsis key='start-ellipsis' />);
+		}
+
+		// Add pages before current page
+		for (let i = Math.max(1, currentPage - 1); i < currentPage; i++) {
+			paginationItems.push(createPaginationItem(i));
+		}
+
+		// Add current page
+		if (currentPage !== 0 && currentPage !== totalPages - 1) {
+			paginationItems.push(createPaginationItem(currentPage));
+		}
+
+		// Add pages after current page
+		for (let i = currentPage + 1; i <= Math.min(totalPages - 2, currentPage + 1); i++) {
+			paginationItems.push(createPaginationItem(i));
+		}
+
+		// Add ellipsis if needed
+		if (currentPage < totalPages - 3) {
+			paginationItems.push(<PaginationEllipsis key='end-ellipsis' />);
+		}
+
+		// Add last page
+		if (totalPages > 1) {
+			paginationItems.push(createPaginationItem(totalPages - 1));
+		}
+
+		return paginationItems;
+	};
+
+	return (
+		!hidePagination && (
+			<footer className='flex items-center justify-between h-[64px]'>
+				<div className='flex flex-row items-center gap-6'>
+					<div className='flex flex-row items-center gap-2'>
+						Linhas por página
+						<Select
+							value={pagination.pageSize.toString()}
+							onValueChange={(value) => handlePageSize(Number(value))}
+							disabled={isLoading || disablePagination}
+						>
+							<SelectTrigger className='w-20'>
+								<SelectValue placeholder='' className='text-slate-800 font-medium' />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectGroup>
+									<SelectItem value='25'>25</SelectItem>
+									<SelectItem value='50'>50</SelectItem>
+									<SelectItem value='100'>100</SelectItem>
+								</SelectGroup>
+							</SelectContent>
+						</Select>
+					</div>
+
+					<DataTableExport exportData={exportData} totalRows={totalPages} />
+				</div>
+
+				<div className='flex items-center gap-4'>
+					<div>
+						{!isLoading && (
+							<Badge variant='secondary'>{totalRows === 0 ? 'Nenhum item' : totalRows === 1 ? '1 item' : `${totalRows} itens`}</Badge>
+						)}
+					</div>
+					<div>
+						<Pagination>
+							<PaginationContent>
+								<PaginationItem>
+									<PaginationPrevious onClick={() => previousPage.action()} disabled={previousPage.disabled || disablePagination} />
+								</PaginationItem>
+								{renderPaginationPages()}
+								<PaginationItem>
+									<PaginationNext onClick={() => nextPage.action()} disabled={nextPage.disabled || disablePagination} />
+								</PaginationItem>
+							</PaginationContent>
+						</Pagination>
+					</div>
+				</div>
+			</footer>
+		)
+	);
+}

package/src/components/ui/custom/table/data-table-header.tsx

@@ -0,0 +1,58 @@
+import { Table, flexRender } from '@tanstack/react-table';
+import { ArrowUpDown, MoveDown, MoveUp } from 'lucide-react';
+import { cn } from '../../../../lib/utils';
+import { Button } from '../../button';
+import { Checkbox } from '../../checkbox';
+import { TableHead, TableHeader, TableRow } from '../../table';
+
+interface DataTableHeaderProps<TData> {
+	table: Table<TData>;
+	canActionsRow?: boolean;
+	enableMultiRowSelection?: boolean;
+}
+
+export function DataTableHeader<TData>({ table, canActionsRow, enableMultiRowSelection }: DataTableHeaderProps<TData>) {
+	const headerGroups = table.getHeaderGroups();
+	return (
+		<TableHeader>
+			{headerGroups.map((headerGroup) => (
+				<TableRow key={headerGroup.id} className='bg-background dark:bg-datatable-accent rounded-t-md sticky top-0 z-10'>
+					{enableMultiRowSelection && (
+						<TableHead className='h-[65px] w-6'>
+							<Checkbox
+								checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+								onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+							/>
+						</TableHead>
+					)}
+					{headerGroup.headers.map((header) => (
+						<TableHead
+							key={header.id}
+							className={cn(
+								'h-[65px] whitespace-nowrap',
+								header.column.id === 'id' ? 'sticky left-0 z-20' : '',
+								header.column.columnDef.enableSorting ? 'pl-2' : '',
+							)}
+						>
+							{header.column.columnDef.enableSorting ? (
+								<Button variant='ghost' onClick={() => header.column.toggleSorting(header.column.getIsSorted() === 'asc')}>
+									{flexRender(header.column.columnDef.header, header.getContext())}
+									{header.column.getIsSorted() === 'asc' ? (
+										<MoveUp className='ml-2 h-4 w-4' />
+									) : header.column.getIsSorted() === 'desc' ? (
+										<MoveDown className='ml-2 h-4 w-4' />
+									) : (
+										<ArrowUpDown className='ml-2 h-4 w-4' />
+									)}
+								</Button>
+							) : (
+								flexRender(header.column.columnDef.header, header.getContext())
+							)}
+						</TableHead>
+					))}
+					{canActionsRow && <TableHead />}
+				</TableRow>
+			))}
+		</TableHeader>
+	);
+}

package/src/components/ui/custom/table/data-table-rows.tsx

@@ -0,0 +1,94 @@
+import { ColumnDef, Table, flexRender } from '@tanstack/react-table';
+import { cn } from '../../../../lib/utils';
+import { Button } from '../../button';
+import { Checkbox } from '../../checkbox';
+import { Skeleton } from '../../skeleton';
+import { TableCell, TableRow } from '../../table';
+import { ActionRow } from './types/data-table';
+
+interface DataTableRowsProps<TData> {
+	table: Table<TData>;
+	columns: ColumnDef<TData>[];
+	isLoading?: boolean;
+	actionsRow?: ActionRow[];
+	textNoRecords?: string;
+	enableMultiRowSelection?: boolean;
+}
+
+export function DataTableRows<TData>({ table, isLoading, columns, actionsRow, textNoRecords, enableMultiRowSelection }: DataTableRowsProps<TData>) {
+	const rows = table.getRowModel().rows;
+
+	const renderLoadingRows = () => {
+		const rows: JSX.Element[] = [];
+
+		for (let i = 0; i < 10; i++) {
+			rows.push(
+				<TableRow key={`loading-row-${i}`}>
+					{enableMultiRowSelection && (
+						<TableCell className='py-2'>
+							<Skeleton className='h-10 w-full' />
+						</TableCell>
+					)}
+					{columns.map((column) => (
+						<TableCell key={column.id} className='py-2'>
+							<Skeleton className='h-10 w-full' />
+						</TableCell>
+					))}
+				</TableRow>,
+			);
+		}
+
+		return rows;
+	};
+
+	const renderRows = () => {
+		return rows.map((row) => (
+			<TableRow key={row.id} data-state={row.getIsSelected() && 'selected'} className='group'>
+				{enableMultiRowSelection && (
+					<TableCell className='py-4'>
+						<Checkbox checked={row.getIsSelected()} onCheckedChange={(value) => row.toggleSelected(!!value)} aria-label='Select row' />
+					</TableCell>
+				)}
+				{row.getVisibleCells().map((cell) => (
+					<TableCell key={cell.id} className='py-4'>
+						{flexRender(cell.column.columnDef.cell, cell.getContext())}
+					</TableCell>
+				))}
+				{actionsRow && (
+					<TableCell
+						className='opacity-0 group-hover:opacity-100 hover:opacity-100 relative overflow-visible w-[0px]'
+						key={`buttons-${row.id}`}
+					>
+						<div className='absolute transition-colors group-hover:bg-datatable-accent overflow-visible right-5 -translate-y-1/2 flex space-x-4'>
+							{actionsRow.map((action, index) => (
+								<Button
+									key={`action-row-${index}`}
+									variant={(action.variant as 'link' | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost') || 'default'}
+									className={cn('bg-datatable-accent', action.className?.(row.original) || '')}
+									onClick={() => action.onClick?.(row.original)}
+									disabled={action.disabled?.(row.original) || false}
+								>
+									{action.icon}
+									{action.label}
+								</Button>
+							))}
+						</div>
+					</TableCell>
+				)}
+			</TableRow>
+		));
+	};
+
+	const renderEmptyRows = () => {
+		const colSpan = columns.length + (actionsRow ? 1 : 0);
+		return (
+			<TableRow>
+				<TableCell colSpan={colSpan} className='text-center h-[53px]'>
+					{textNoRecords ? textNoRecords : 'Sem resultados.'}
+				</TableCell>
+			</TableRow>
+		);
+	};
+
+	return isLoading ? renderLoadingRows() : rows.length ? renderRows() : renderEmptyRows();
+}