@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/components/misc/MultiLevelTable.tsx

@@ -0,0 +1,229 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+export interface IMultiLevelTableAction {
+  name: string;
+  callback: () => any;
+}
+export interface IMultiLevelTable {
+  data: any;
+  structure: any;
+  actionLabel?: string;
+  actions?: IMultiLevelTableAction[];
+  className?: {
+    table?: string;
+    head?: string;
+    body?: string;
+  };
+}
+
+const getFields = (structure) => [
+  ...structure.children.map((child) => child.display),
+  ...(structure.array ? getFields(structure.array) : []),
+];
+
+const addSelfToFirstChild = (childRows, structure, row) => {
+  childRows[0] = [
+    ...structure.children.map((child) => ({
+      text: row[child.field],
+      span: childRows.length,
+    })),
+    ...childRows[0],
+  ];
+};
+
+const dropdown =
+  (getChain, actions, actionLabel) =>
+    ({ indices }) => {
+      const [show, setShow] = useState<boolean>(false);
+      const ref = useRef<HTMLElement>(null);
+
+      useEffect(() => {
+        const listener = (event) => {
+          if (!ref.current) return;
+          if (ref.current.contains(event.target)) return;
+          setShow(false);
+        };
+
+        document.addEventListener('click', listener);
+
+        return () => {
+          document.removeEventListener('click', listener);
+        };
+      }, [ref]);
+
+      const getClickHandler = (action) => () => {
+        action.callback(getChain(indices));
+        setShow(false);
+      };
+
+      return (
+        <span ref={ref}>
+          <span
+            onClick={(_) => setShow(!show)}
+            className='flex flex-row items-center justify-center cursor-pointer'
+          >
+            {actionLabel}
+            {show ? <span>↑</span> : <span>↓</span>}
+          </span>
+          {show && (
+            <div className='flex flex-col absolute right-0 bg-white rounded-md shadow-md gap-2 p-2 whitespace-nowrap border border-gray-300'>
+              {actions &&
+                actions.map((action) => (
+                  <span
+                    key={action.name}
+                    onClick={getClickHandler(action)}
+                    className='flex flex-row items-center cursor-pointer text-md hover:bg-gray-300 p-2 rounded-md'
+                  >
+                    {action.name}
+                  </span>
+                ))}
+            </div>
+          )}
+        </span>
+      );
+    };
+const createGetColumns = (getChain, actions, actionLabel) => {
+
+  const Dropdown = dropdown(getChain, actions, actionLabel);
+  return (structure, data, indices) => [
+    ...structure.children.map((child) => ({
+      text: data[child.field],
+      span: 1,
+    })),
+    ...(actions.length
+      ? [
+        {
+          text: <Dropdown indices={indices} />,
+          span: 1,
+        },
+      ]
+      : []),
+  ];
+};
+
+const createGetRows = (getColumns) => {
+  const getRows = (structure, rows, memoizedIndices) =>
+    rows && !structure.array
+      ? rows.map((row, i) =>
+        getColumns(structure, row, [...memoizedIndices, i]),
+      )
+      : rows
+        ? rows.flatMap((row, i) => {
+          const childRows = getRows(
+            structure.array,
+            row[structure.array.name],
+            [...memoizedIndices, i], // Use a linked list of a wrapper to optimise this
+          );
+          childRows && addSelfToFirstChild(childRows, structure, row);
+          return childRows;
+        })
+        : null;
+
+  return getRows;
+};
+
+const getChain = (indices, structure, data) => {
+  const chain = {};
+  indices.forEach((i) => {
+    chain[structure.name] = data[i];
+    structure = structure.array;
+    data = structure && data[i][structure.name];
+  });
+  return chain;
+};
+
+const createGetChain = (structure, data) => (indices) =>
+  getChain(indices, structure, data);
+
+const TableHeader = ({ classNames, fields }) => (
+  <thead className={classNames?.head}>
+    <tr>
+      {fields.map((name) => (
+        <th className={classNames?.headCell + ' p-2 py-3'} key={name}>
+          {name}
+        </th>
+      ))}
+    </tr>
+  </thead>
+);
+
+const TableBody = ({ classNames, rows }) => (
+  <tbody className={classNames?.tableBody}>
+    {rows &&
+      rows.map((row, i) => (
+        <tr className={classNames?.tableRow} key={i}>
+          {row &&
+            row.map((col, j) => (
+              <td key={j} rowSpan={col.span}>
+                {col.text}
+              </td>
+            ))}
+        </tr>
+      ))}
+  </tbody>
+);
+
+const MultiLevelTable: React.FC<IMultiLevelTable> = ({
+  data,
+  structure,
+  actions,
+  actionLabel,
+  className,
+}) => {
+
+
+  const _actions = actions || [];
+  const _actionLabel = actionLabel || 'Action';
+
+
+  const getChain = createGetChain(structure, data);
+  const getColumns = createGetColumns(getChain, _actions, _actionLabel);
+  const getRows = createGetRows(getColumns);
+
+  const rows = getRows(structure, data, []);
+  const fields = [
+    ...getFields(structure),
+    ...(_actions.length ? [_actionLabel] : []),
+  ];
+
+  return (
+    rows && (
+      <table className={className?.table}>
+        <TableHeader fields={fields} classNames={className} />
+        <TableBody rows={rows} classNames={className} />
+      </table>
+    )
+  );
+};
+
+export default MultiLevelTable;
+
+/*
+MultiLevelTable.propTypes = {
+    data: PropTypes.arrayOf(PropTypes.object).isRequired,
+    structure: PropTypes.object.isRequired,
+    actionLabel: PropTypes.string,
+    actions: PropTypes.arrayOf(
+        PropTypes.exact({
+            name: PropTypes.string.isRequired,
+            callback: PropTypes.func.isRequired
+        })
+    ),
+    className: PropTypes.exact({
+        table: PropTypes.string,
+        head: PropTypes.string,
+        body: PropTypes.string
+    })
+}
+*/
+/*
+MultiLevelTable.defaultProps = {
+  actionLabel: 'Action',
+  actions: [],
+  className: {
+    table: 'w-full shadow-sm overflow-hidden rounded-lg text-center',
+    head: 'text-white bg-gray-700 text-center',
+    body: 'p-2 border-solid border border-light-blue-300',
+  },
+};
+*/

package/src/components/misc/NoResults.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { Card, CardContent, Typography } from '@mui/material';
+import InfoIcon from '@mui/icons-material/Info'	
+
+export interface INoResults extends React.PropsWithChildren {
+    title?: string;
+    description?: string;
+}
+export const NoResults: React.FC<INoResults> = (props) => {
+
+    const { title, description, children } = props;
+
+	return (
+		<Card sx={{ p: 0 }}>
+			<CardContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'left', gap: 2 }}>
+				<div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+					<InfoIcon sx={{ fontSize: 32 }} />
+				{title ? <Typography variant="h5">{title}</Typography> : "No hay registros"}
+				</div>
+				{description && <Typography variant="body1" color="text.secondary">{description}</Typography>}
+				{children ? children : <></>}
+			</CardContent>
+		</Card>	);
+};

package/src/components/misc/PDFViewer.tsx

@@ -0,0 +1,85 @@
+import { Button } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { useRecordContext } from 'react-admin';
+import { Loading } from 'react-admin';
+import { initAxios } from '../../hooks/axios';
+import { saveAs } from 'file-saver';
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+
+const PDFViewerView: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+	method,
+	attribute,
+}) => {
+	const record = useRecordContext();
+
+	const axios = initAxios();
+
+	const [PDFFile, setPDFFile] = useState<string>(null);
+
+	const filePath =
+		record && record[attribute.attribute] ? record[attribute.attribute] : null;
+	const fileName = 'nota-venta-' + record.id + '.pdf';
+
+	useEffect(() => {
+		record && record[attribute.attribute] && displayDocument();
+	}, [record]);
+
+	const displayDocument = async () => {
+		const { data } = await axios.get(filePath, {
+			responseType: 'blob',
+		});
+
+		const file = new Blob([data], {
+			type: 'application/pdf',
+		});
+
+		const fileURL = URL.createObjectURL(file);
+
+		setPDFFile(fileURL);
+	};
+
+	const downloadDocument = async () => {
+		const { data } = await axios.get(filePath, {
+			responseType: 'blob',
+		});
+
+		const file = new Blob([data], {
+			type: '',
+		});
+
+		saveAs(file, fileName);
+	};
+
+	return (
+		<>
+			{PDFFile ? (
+				<div>
+					<object
+						className='embed-pdf'
+						data={PDFFile}
+						type='application/pdf'
+						style={{ minHeight: 800, minWidth: 600 }}
+					>
+						<embed src={PDFFile} type='application/pdf' />
+					</object>
+					<hr />
+					<Button onClick={downloadDocument}>Descargar</Button>
+				</div>
+			) : (
+				<Loading />
+			)}
+		</>
+	);
+};
+
+const PDFViewer = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+	switch (method) {
+		case 'edit':
+		case 'create':
+			return <>edit</>;
+		case 'view':
+			return <PDFViewerView attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+	}
+};
+
+export default PDFViewer;

package/src/components/navigation/Breadcrumbs.tsx

@@ -0,0 +1,220 @@
+import React, { JSX, useMemo } from 'react';
+import { Box, Typography } from '@mui/material';
+import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import HomeIcon from '@mui/icons-material/Home';
+import { IBreadcrumbItem, IDASHAppState, IPageState } from 'dash-admin-state';
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+
+// ============================================================================
+// TYPES & INTERFACES
+// ============================================================================
+
+export interface BreadcrumbsProps {
+    /** Override the breadcrumbs from Redux state */
+    items?: IBreadcrumbItem[];
+    /** Custom separator between breadcrumb items */
+    separator?: React.ReactNode;
+    /** Maximum number of items to show (others will be collapsed) */
+    maxItems?: number;
+    /** Custom class name */
+    className?: string;
+    /** Show home icon as first item */
+    showHomeIcon?: boolean;
+    /** Home path (default: '/') */
+    homePath?: string;
+    /** Home label (default: 'Home') */
+    homeLabel?: string;
+    /** Custom styles */
+    sx?: Record<string, any>;
+}
+
+// ============================================================================
+// BREADCRUMB ITEM COMPONENT
+// ============================================================================
+
+interface BreadcrumbItemProps {
+    item: IBreadcrumbItem;
+    isLast: boolean;
+}
+
+const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast }) => {
+    const content = (
+        <Box
+            component="span"
+            className={`dash-breadcrumb-item ${isLast ? 'dash-breadcrumb-item--active' : ''}`}
+            sx={{
+                display: 'inline-flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: '2px',
+                flexShrink: 0,
+            }}
+        >
+            {item.icon && (
+                <Box
+                    component="span"
+                    className="dash-breadcrumb-icon"
+                    sx={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        flexShrink: 0,
+                        '& svg': {
+                            fontSize: '12px',
+                        },
+                    }}
+                >
+                    {item.icon}
+                </Box>
+            )}
+            <Typography
+                component="span"
+                className="dash-breadcrumb-label"
+                sx={{
+                    fontSize: '11px',
+                    fontWeight: isLast ? 500 : 400,
+                    lineHeight: 1.2,
+                    color: isLast 
+                        ? 'var(--text-header, #ffffff)' 
+                        : 'var(--text-header-muted, rgba(255, 255, 255, 0.7))',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: '120px',
+                }}
+            >
+                {item.label}
+            </Typography>
+        </Box>
+    );
+
+    // If it's the last item or no path, don't make it a link
+    if (isLast || !item.path) {
+        return content;
+    }
+
+    // Ensure path starts with / to avoid relative navigation issues
+    const path = !item.path.startsWith('/') ? `/${item.path}` : item.path;
+
+    // Use React Router's Link for client-side navigation
+    return (
+        <Link
+            to={path}
+            className="dash-breadcrumb-link"
+            style={{
+                textDecoration: 'none',
+                display: 'inline-flex',
+                alignItems: 'center',
+            }}
+        >
+            {content}
+        </Link>
+    );
+};
+
+// ============================================================================
+// MAIN BREADCRUMBS COMPONENT
+// ============================================================================
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
+    items: propItems,
+    separator,
+    maxItems,
+    className = '',
+    showHomeIcon = false,
+    homePath = '/',
+    homeLabel = 'Home',
+    sx = {},
+}): JSX.Element | null => {
+    // Create default separator inside component to avoid hook issues
+    const defaultSeparator = <NavigateNextIcon sx={{ fontSize: '12px', color: 'var(--text-header-muted, rgba(255, 255, 255, 0.5))' }} />;
+    const actualSeparator = separator ?? defaultSeparator;
+    // Get breadcrumbs from Redux state if not provided via props
+    const pageState: IPageState = useSelector(
+        (state: IDASHAppState<any, any, IDashAutoAdminResourceConfig>) => state.page
+    );
+
+    const breadcrumbs = propItems || pageState.breadcrumbs;
+
+    // Build final items list
+    const displayItems = useMemo(() => {
+        if (!breadcrumbs || breadcrumbs.length === 0) {
+            return [];
+        }
+
+        let items = [...breadcrumbs];
+
+        // Add home item if requested
+        if (showHomeIcon) {
+            const homeItem: IBreadcrumbItem = {
+                label: homeLabel,
+                path: homePath,
+                icon: <HomeIcon />,
+            };
+            items = [homeItem, ...items];
+        }
+
+        // Apply maxItems limit if specified
+        if (maxItems && items.length > maxItems) {
+            const start = items.slice(0, 1);
+            const end = items.slice(-(maxItems - 2));
+            const ellipsis: IBreadcrumbItem = {
+                label: '...',
+                path: undefined,
+            };
+            items = [...start, ellipsis, ...end];
+        }
+
+        return items;
+    }, [breadcrumbs, showHomeIcon, homeLabel, homePath, maxItems]);
+
+    // Don't render if no items
+    if (displayItems.length === 0) {
+        return null;
+    }
+
+    return (
+        <Box
+            component="nav"
+            aria-label="breadcrumb"
+            className={`dash-breadcrumbs ${className}`}
+            sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                flexWrap: 'nowrap',
+                gap: '2px',
+                padding: 0,
+                margin: 0,
+                ...sx,
+            }}
+        >
+            {displayItems.map((item, index) => {
+                const isLast = index === displayItems.length - 1;
+                
+                return (
+                    <React.Fragment key={`breadcrumb-${index}-${item.label}`}>
+                        <BreadcrumbItem item={item} isLast={isLast} />
+                        {!isLast && (
+                            <Box
+                                component="span"
+                                className="dash-breadcrumb-separator"
+                                sx={{
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    mx: '1px',
+                                    flexShrink: 0,
+                                }}
+                            >
+                                {actualSeparator}
+                            </Box>
+                        )}
+                    </React.Fragment>
+                );
+            })}
+        </Box>
+    );
+};
+
+export default Breadcrumbs;