import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-premium';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import Tooltip from '@mui/material/Tooltip';
import {
formatDate,
formatDateTime,
formatCurrency,
formatNumber,
} from '../utils/orderFormatters';
import {
getStatusChipProps,
getPriorityChipProps,
} from '../utils/tableHelpers';
const CELL_FONT_SIZE = '0.75rem';
const CAPTION_FONT_SIZE = '0.6875rem';
const CHIP_STYLES = {
fontSize: CAPTION_FONT_SIZE,
height: 22,
fontWeight: 300,
} as const;
const CHIP_PRIORITY_STYLES = {
...CHIP_STYLES,
maxWidth: '100%',
'& .MuiChip-label': {
px: 1,
py: 0,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
} as const;
interface CellTextProps {
value: unknown;
secondary?: boolean;
fontWeight?: number;
}
const CellText = ({ value, secondary = false, fontWeight }: CellTextProps) => (
{String(value ?? '-')}
);
interface CellNumericProps {
value: unknown;
formatter?: (val: number) => string;
secondary?: boolean;
fontWeight?: number;
}
const CellNumeric = ({
value,
formatter,
secondary = false,
fontWeight,
}: CellNumericProps) => (
{formatter ? formatter(value as number) : String(value ?? '-')}
);
interface CellDateProps {
value: unknown;
showTime?: boolean;
time?: string;
}
const CellDate = ({ value, showTime = false, time }: CellDateProps) => {
const dateStr = formatDate(value as string | undefined);
if (!showTime && !time) {
return (
{dateStr}
);
}
const timeStr = time || formatDateTime(value as string | undefined);
return (
{dateStr}
{timeStr && (
{timeStr}
)}
);
};
interface CreateOrderColumnsOptions {
storesMap?: Map;
}
export const createOrderColumns = (
options?: CreateOrderColumnsOptions
): GridColDef[] => {
const storesMap = options?.storesMap;
return [
{
field: 'orderId',
headerName: 'Pedido',
width: 120,
minWidth: 100,
headerAlign: 'right',
align: 'right',
renderCell: (params: Readonly) => (
),
},
{
field: 'createDate',
headerName: 'Data',
width: 160,
minWidth: 140,
renderCell: (params: Readonly) => (
),
},
{
field: 'customerName',
headerName: 'Cliente',
width: 300,
minWidth: 250,
flex: 1,
renderCell: (params: Readonly) => (
),
},
{
field: 'customerId',
headerName: 'Código Cliente',
width: 120,
minWidth: 110,
headerAlign: 'right',
align: 'right',
renderCell: (params: Readonly) => (
),
},
{
field: 'storeId',
headerName: 'Filial',
width: 200,
minWidth: 180,
renderCell: (params: Readonly) => {
const storeId = String(params.value);
const storeName = storesMap?.get(storeId) || storeId;
return ;
},
},
{
field: 'store',
headerName: 'Supervisor',
width: 200,
minWidth: 180,
renderCell: (params: Readonly) => (
),
},
{
field: 'status',
headerName: 'Situação',
width: 180,
minWidth: 160,
renderCell: (params: Readonly) => {
const status = params.value as string;
const chipProps = getStatusChipProps(status);
return (
);
},
},
{
field: 'orderType',
headerName: 'Tipo',
width: 140,
minWidth: 120,
renderCell: (params: Readonly) => (
),
},
{
field: 'amount',
headerName: 'Valor Total',
width: 130,
minWidth: 120,
type: 'number',
aggregable: true,
headerAlign: 'right',
align: 'right',
valueFormatter: (value) => formatCurrency(value as number),
renderCell: (params: Readonly) => (
),
},
{
field: 'totalWeight',
headerName: 'Peso (kg)',
width: 100,
minWidth: 90,
type: 'number',
aggregable: true,
headerAlign: 'right',
align: 'right',
valueFormatter: (value) => formatNumber(value as number),
renderCell: (params: Readonly) => (
),
},
{
field: 'invoiceNumber',
headerName: 'Nota Fiscal',
width: 120,
minWidth: 110,
headerAlign: 'right',
align: 'right',
renderCell: (params: Readonly) => {
const value = params.value && params.value !== '-' ? params.value : '-';
return ;
},
},
{
field: 'invoiceDate',
headerName: 'Data Faturamento',
width: 150,
minWidth: 140,
renderCell: (params: Readonly) => (
),
},
{
field: 'fatUserName',
headerName: 'Usuário Faturou',
width: 160,
minWidth: 140,
renderCell: (params: Readonly) => (
),
},
{
field: 'billingId',
headerName: 'Cobrança',
width: 120,
minWidth: 110,
renderCell: (params: Readonly) => (
),
},
{
field: 'paymentName',
headerName: 'Pagamento',
width: 140,
minWidth: 130,
renderCell: (params: Readonly) => (
),
},
{
field: 'sellerName',
headerName: 'Vendedor',
width: 200,
minWidth: 180,
renderCell: (params: Readonly) => (
),
},
{
field: 'sellerId',
headerName: 'RCA',
width: 100,
minWidth: 90,
headerAlign: 'right',
align: 'right',
renderCell: (params: Readonly) => (
),
},
{
field: 'codusur2Name',
headerName: 'RCA 2',
width: 180,
minWidth: 160,
renderCell: (params: Readonly) => (
),
},
{
field: 'deliveryType',
headerName: 'Tipo de Entrega',
width: 160,
minWidth: 140,
renderCell: (params: Readonly) => (
),
},
{
field: 'deliveryDate',
headerName: 'Data Entrega',
width: 130,
minWidth: 120,
renderCell: (params: Readonly) => (
),
},
{
field: 'deliveryLocal',
headerName: 'Local Entrega',
width: 180,
minWidth: 160,
renderCell: (params: Readonly) => (
),
},
{
field: 'deliveryPriority',
headerName: 'Prioridade',
width: 120,
minWidth: 110,
renderCell: (params: Readonly) => {
const priority = params.value;
const chipProps = getPriorityChipProps(priority);
if (!chipProps) {
return ;
}
return (
);
},
},
{
field: 'confirmDeliveryDate',
headerName: 'Data Confirmação Entrega',
width: 150,
minWidth: 140,
renderCell: (params: Readonly) => (
),
},
{
field: 'schedulerDelivery',
headerName: 'Agendamento',
width: 160,
minWidth: 140,
renderCell: (params: Readonly) => (
),
},
{
field: 'partnerName',
headerName: 'Parceiro',
width: 180,
minWidth: 160,
renderCell: (params: Readonly) => (
),
},
{
field: 'emitenteNome',
headerName: 'Emitente',
width: 180,
minWidth: 160,
renderCell: (params: Readonly) => (
),
},
];
};