Detectamos productos y clientes desconocidos en nuestra DB. Recuerda que al subir un excel con ventas de un mes, se sobreescribiran los datos existentes del mes correspondiente. ¿Quieres subir igualmente el resto de los registros de los que conocemos el producto y el cliente?
\n \n
\n {\n products && products.list &&\n
\n { setFilters( { ...filters, product: value } ) } }\n placeholder=\"Filtrar producto\"\n optionFilterProp=\"children\"\n filterOption={(input, option) =>\n option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0\n }\n filterSort={(optionA, optionB) =>\n optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())\n }\n >\n {\n products.list.data.map( product => { product.name } )\n }\n \n
\n }\n {\n clients && clients.groups &&\n
\n { setFilters( { ...filters, client_group: value } ) } }\n placeholder=\"Filtrar grupo\"\n optionFilterProp=\"children\"\n filterOption={(input, option) =>\n option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0\n }\n filterSort={(optionA, optionB) =>\n optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())\n }\n >\n {\n clients.groups.data.map( client_group => { client_group.name } )\n }\n \n
\n }\n
\n
Solo pronosticados
\n
{ setFilters({ ...filters, justProductsWithData: checked }) } } />
\n
\n
{ openEditionModal( forecast.id ) } }\n reloadAction={ reloadAction } /> )\n\n // RENDERIZO LA LISTA DE ZONAS CON LA PAGINACION\n return (\n \n
\n
\n { \n pageList.length\n ?\n
\n { pageList.slice( ( activePage - 1 ) * pageSize , activePage * pageSize) }\n
\n
setActivePage( page ) }\n hideFirstLastPages={ true }\n prevPageText=\"«\"\n nextPageText=\"»\"\n />\n \n
\n :\n
\n }\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n { setNewForecastData({ ...newForecastData, client_group: Number( value ) }) } }\n placeholder=\"Buscar grupo economico\"\n optionFilterProp=\"children\"\n filterOption={(input, option) =>\n option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0\n }\n filterSort={(optionA, optionB) =>\n optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())\n }\n >\n {\n clients.groups.data.map( client_group => { client_group.name } )\n }\n \n
\n
\n { setNewForecastData({ ...newForecastData, product: Number( value ) }) } }\n placeholder=\"Buscar producto\"\n optionFilterProp=\"children\"\n filterOption={(input, option) =>\n option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0\n }\n filterSort={(optionA, optionB) =>\n optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())\n }\n >\n {\n products.list.data.map( product => { product.name } )\n }\n \n
\n
\n
\n
Enero
\n
\n
\n
\n
\n
Febrero
\n
\n
\n
\n
\n
Marzo
\n
\n
\n
\n
\n
Abril
\n
\n
\n
\n
\n
\n
\n
Mayo
\n
\n
\n
\n
\n
Junio
\n
\n
\n
\n
\n
Julio
\n
\n
\n
\n
\n
Agosto
\n
\n
\n
\n
\n
\n
\n
Septiembre
\n
\n
\n
\n
\n
Octubre
\n
\n
\n
\n
\n
Noviembre
\n
\n
\n
\n
\n
Diciembre
\n
\n
\n
\n
\n
\n
\n Subir Pronostico \n
\n
\n
\n
\n\n \n
Subir excel de pronosticos de ventas
\n
\n \n
\n Clickea aquí o arrastrá tu excel con pronosticos
\n \n\n
\n Subir \n
\n
Detectamos productos y grupos economicos desconocidos en nuestra DB. Recuerda que al subir un excel con ventas de un mes, se sobreescribiran los datos existentes del mes correspondiente. ¿Quieres subir igualmente el resto de los registros de los que conocemos el producto y el cliente?
\n \n \n
\n ${ data.unknownProducts.map( prod => '
' + prod + '
' ).join( ' ' ) }\n
\n
\n \n
\n ${ data.unknownClientsGroups.map( prod => '
' + prod + '
' ).join( ' ' ) }\n
\n
\n
\n
} />\n {\n userdata.data.type === 10 &&\n
\n
\n
\n
\n
\n
\n }\n
\n
\n {\n uploadExcelModalVisible &&
{ setUploadExcelModalVisible( false ) } }\n year={ yearSelected }\n refreshAction={ refreshForecast } />\n }\n {\n newForecastModal.visible && { setNewForecastModal( { ...newForecastModal, visible: false } ) } }\n products={ products_state }\n clients={ clients_state }\n year={ yearSelected }\n refreshAction={ refreshForecast }\n data={ newForecastModal.data }\n />\n }\n \n \n
{ MONTHS[ filters.date.month ] }
\n\n
{filters.exchange === \"LOCAL\" ?
\n\n
{ filters.sub_clients !== null && filters.sub_clients.length < clients.list.data.length ? `${ filters.sub_clients.length } clientes del grupo` : 'Todos los clientes del grupo' }
\n\n
{ filters.products.length < products.data.length ? `${ filters.products.length } productos` : 'Todos los productos' }
\n\n
\n
\n
MES
\n
\n {\n MONTHS.map( (monthName, index) => (\n
{ setFilters( { ...filters, date: { month: index } } ) } }>\n { monthName }\n
\n ) )\n }\n
\n
\n\n
\n
MONEDA
\n
\n
setFilters({ ...filters, exchange: 'LOCAL' }) }>\n
\n | \n
setFilters({ ...filters, exchange: 'USD' }) }>\n USD\n
\n
\n
\n\n
\n
CLIENTES
\n\n
\n
\n
setFilters( prev => ({ ...prev, sub_clients: [] }) ) }>\n Ninguno\n
\n | \n
setFilters( prev => ({ ...prev, sub_clients: null }) ) }>\n Todos\n
\n
\n
\n \n
\n {\n clients.list.data\n .filter( client => client.group === filters.client_group.id )\n .map( client => (\n
handleChangeClientSelector( client.id ) }>\n -1 } />\n { client.name } \n
\n ) )\n }\n
\n
\n\n
\n
PRODUCTOS
\n\n
\n
\n
{ selectAll( 'NONE' ) } }>\n Ninguno\n
\n | \n
{ selectAll( 'ALL' ) } }>\n Todos\n
\n
\n
\n \n
\n {\n products.data.map( product => (\n
handleChangeSelector( product.id ) }>\n -1 } />\n { product.name } \n
\n ) )\n }\n
\n
\n\n
\n
\n\n \n \n
\n
\n\n
\n {\n filteredClients.map( clientgroup => {\n\n return (\n
{ selectClientGroup( clientgroup.id ); handlerClose() } }>\n
\n
{ clientgroup.name }
\n
\n {/*
{ clientGroup.name }
*/}\n
\n )\n\n } )\n }\n
\n\n
\n\n return (\n \n\n
\n
\n
\n
\n
{ clientGroupSelected.name }
\n
\n { setSelectClientModal( { visible: true } ) } }>Cambiar \n
\n
\n
\n {\n selectClientModal.visible && \n
{ setSelectClientModal( { visible: false } ) } }\n selectClientGroup={ selectClientGroup }\n type={ type }\n />\n }\n
\n\n \n\n
\n \n \n \n
\n\n\n
\n\n return (\n \n \n
\n
Ventas vs Pronóstico
\n
\n
\n
\n
Ver solo items con ventas
\n
{ setConfig( { ...config, filterNulls } ) } } />
\n
\n
\n
\n setConfig({ ...config, chartType: e.target.value }) }>\n Lineal \n Barras \n Tabla \n \n
\n
\n setConfig({ ...config, mode: e.target.value }) }>\n Cantidad \n Valor \n \n
\n
\n
\n
\n\n {\n config.chartType === 'LINE'\n ?\n
\n :\n (\n config.chartType === 'BAR'\n ?\n
\n :\n
\n )\n }\n\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n )\n\n}\n\nconst TableChart = ({ data, mode, products, exchange, compare, filterNulls }) => {\n\n const filteredData = data.partials[ mode === 'Q' ? 'q' : 'price' ].filter( d => filterNulls ? d.sales.find( item => item ) : true )\n\n const compareDataSource = compare.fetchStatus.data ? compare.fetchStatus.data.data.data.FORECAST_GRAPH.partials[ mode === 'Q' ? 'q' : 'price' ].map( item => ({ ...item, compareItem: true }) ) : []\n const dataSource = [ ...filteredData, ...compareDataSource ]\n\n const compareTotals = compare.on && compareDataSource && getTableTotals( compareDataSource )\n const totals = dataSource && getTableTotals( filteredData )\n\n if ( !dataSource || !dataSource.length ){\n\n return (\n \n
\n )\n }\n\n return (\n \n
\n
\n
\n {\n dataSource.map( ( productItem, index ) => {\n\n const productdata = products.find( product => product.id == productItem.product )\n\n return (\n
\n { compare.on &&
}\n
{ productdata.name }
\n
\n )\n\n } )\n\n }\n
\n { compare.on &&
}\n
Total
\n
\n\n {\n compareTotals &&\n
\n { compare.on &&
}\n
Total
\n
\n }\n
\n
\n
\n
\n
ENE
\n
FEB
\n
MAR
\n
ABR
\n
MAY
\n
JUN
\n
JUL
\n
AGO
\n
SEP
\n
OCT
\n
NOV
\n
DIC
\n
Total
\n
\n
\n {\n dataSource.map( ( productItem, index ) => {\n\n const totalSales = productItem.sales.reduce( ( prev, curr ) => prev + curr, 0 )\n const totalForecast = productItem.forecast.reduce( ( prev, curr ) => prev + curr, 0 )\n\n return (\n
\n
{ Math.round( productItem.sales[ 0 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 0 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 1 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 1 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 2 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 2 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 3 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 3 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 4 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 4 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 5 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 5 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 6 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 6 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 7 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 7 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 8 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 8 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 9 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 9 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 10 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 10 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 11 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 11 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( totalSales ).toLocaleString( 'es-AR' ) }/{ Math.round( totalForecast ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
\n )\n\n } )\n\n }\n
\n
{ Math.round( totals.sales[ 0 ] ) }/{ Math.round( totals.forecast[ 0 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 1 ] ) }/{ Math.round( totals.forecast[ 1 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 2 ] ) }/{ Math.round( totals.forecast[ 2 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 3 ] ) }/{ Math.round( totals.forecast[ 3 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 4 ] ) }/{ Math.round( totals.forecast[ 4 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 5 ] ) }/{ Math.round( totals.forecast[ 5 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 6 ] ) }/{ Math.round( totals.forecast[ 6 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 7 ] ) }/{ Math.round( totals.forecast[ 7 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 8 ] ) }/{ Math.round( totals.forecast[ 8 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 9 ] ) }/{ Math.round( totals.forecast[ 9 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 10 ] ) }/{ Math.round( totals.forecast[ 10 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 11 ] ) }/{ Math.round( totals.forecast[ 11 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.totals.sales ) }/{ Math.round( totals.totals.forecast ) } { mode === 'PRICE' && }
\n
\n\n {\n compareTotals &&\n
\n
{ Math.round( compareTotals.sales[ 0 ] ) }/{ Math.round( compareTotals.forecast[ 0 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 1 ] ) }/{ Math.round( compareTotals.forecast[ 1 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 2 ] ) }/{ Math.round( compareTotals.forecast[ 2 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 3 ] ) }/{ Math.round( compareTotals.forecast[ 3 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 4 ] ) }/{ Math.round( compareTotals.forecast[ 4 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 5 ] ) }/{ Math.round( compareTotals.forecast[ 5 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 6 ] ) }/{ Math.round( compareTotals.forecast[ 6 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 7 ] ) }/{ Math.round( compareTotals.forecast[ 7 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 8 ] ) }/{ Math.round( compareTotals.forecast[ 8 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 9 ] ) }/{ Math.round( compareTotals.forecast[ 9 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 10 ] ) }/{ Math.round( compareTotals.forecast[ 10 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 11 ] ) }/{ Math.round( compareTotals.forecast[ 11 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.totals.sales ) }/{ Math.round( compareTotals.totals.forecast ) } { mode === 'PRICE' && }
\n
\n }\n
\n
\n
\n\n const totalSales = monthly ? fetchStatus.data.data.data.FORECAST_GRAPH.total.price.sales[ dateSelected.month ] : fetchStatus.data.data.data.FORECAST_GRAPH.total.price.sales.reduce( ( prev, curr ) => prev + curr, 0 )\n const totalForecast = monthly ? fetchStatus.data.data.data.FORECAST_GRAPH.total.price.forecast[ dateSelected.month ] : fetchStatus.data.data.data.FORECAST_GRAPH.total.price.forecast.reduce( ( prev, curr ) => prev + curr, 0 )\n const percentageFull = totalForecast ? ( ( totalSales / totalForecast ) * 100 ) : 100\n const data = [ {\n value: percentageFull <= 100 ? percentageFull : 100,\n fill: \"#4caf50\"\n }, {\n value: 100 - ( percentageFull <= 100 ? percentageFull : 100 ),\n fill: '#ff0000'\n } ]\n\n return (\n \n { compare.on &&
}\n
Estado de venta del { monthly ? 'mes' : 'año' }
\n {\n totalSales || totalForecast\n ?\n
\n
\n
\n
Pronosticado
\n
{ Math.round( totalForecast ).toLocaleString( 'es-AR' ) }
\n
\n
\n
Vendido
\n
{ Math.round( totalSales ).toLocaleString( 'es-AR' ) }
\n
\n
\n
\n
{ percentageFull > 100 ? 'Sobreventa' : 'Restante' }
\n
{ Math.round( Math.abs( totalForecast - totalSales ) ).toLocaleString( 'es-AR' ) }
\n
\n
\n
\n
\n \n {\n data.map((entry, index) => | )\n }\n \n \n
\n { Math.round( percentageFull ) } \n % \n
\n
\n
\n :\n
\n }\n
cx ? 'start' : 'end'} dominantBaseline=\"central\">\n {`${(percent * 100).toFixed(0)}%`}\n \n );\n};\n\nexport const RankingGraph = ({ fetchStatus, products, type, exchange, compare }) => {\n\n const [ mode, setMode ] = useState( 'MONTH' )\n\n if ( !fetchStatus.data ) return
\n\n const data = fetchStatus.data.data.data.RANKING_GRAPH[ mode ]\n\n return (\n \n { compare.on &&
}\n
\n
Ranking de productos
\n
\n setMode( e.target.value ) }>\n Mes \n Trimestre \n Semestre \n Año \n \n
\n
\n {\n data && data.length\n ?\n
\n
\n {\n data.map( ( item, index ) => {\n\n const product = products.data.find( p => p.id === Number( item.product ) )\n\n return (\n
\n
\n
{ index + 1 }.
\n
\n
{ product && product.name || 'Otros' }
\n {\n item.productSoldPrice\n ?\n
\n Precio venta: \n { item.productSoldPrice ? Math.round( item.productSoldPrice ) : '' } \n { typeof item.overSoldPrice === 'boolean' ? ( item.overSoldPrice ?
\n :\n null\n }\n
\n
{ Math.round( item.sold ).toLocaleString( 'es-AR' ) }
\n
\n )\n })\n }\n
\n
\n
\n \n \n {data.map((entry, index) => (\n | \n ))}\n \n \n \n
\n
\n :\n
\n }\n
\n\n const totals = getTotals( fetchStatus.data.data.data.SALES_GRAPH )\n const totalsCompate = compare.on && compare.fetchStatus.data && getTotals( compare.fetchStatus.data.data.data.SALES_GRAPH )\n\n return (\n \n
Ventas del mes
\n {\n orderedList.list && orderedList.list.length\n ?\n
\n
\n
Fecha
{ setOrderedList( { ...orderedList, orderby: { ...orderedList.orderby, item: 'DATE', desc: !orderedList.orderby.desc } } ) } }>
\n
Cliente
{ setOrderedList( { ...orderedList, orderby: { ...orderedList.orderby, item: 'CLIENT', desc: !orderedList.orderby.desc } } ) } }>
\n
Producto
{ setOrderedList( { ...orderedList, orderby: { ...orderedList.orderby, item: 'PRODUCT', desc: !orderedList.orderby.desc } } ) } }>
\n
Cantidad
{ setOrderedList( { ...orderedList, orderby: { ...orderedList.orderby, item: 'Q', desc: !orderedList.orderby.desc } } ) } }>
\n
Total
{ setOrderedList( { ...orderedList, orderby: { ...orderedList.orderby, item: 'TOTAL', desc: !orderedList.orderby.desc } } ) } }>
\n
\n
\n {\n orderedList.list.map( ( sale, index ) => {\n\n const product = products.data.find( p => p.id === Number( sale.product ) )\n const client = clients.data.find( c => c.id === Number( sale.client ) )\n\n return (\n
\n { compare.on &&
}\n
{ sale.date }
\n
{ client.name }
\n
{ product.name }
\n
{ sale.q }
\n
{ Math.round( sale.totalExchange ).toLocaleString( 'es-AR' ) }
\n
\n )\n } )\n }\n
\n { compare.on &&
}\n
Total mes
\n
\n
\n
{ totals.q }
\n
{ Math.round( totals.totalExchange ).toLocaleString( 'es-AR' ) }
\n
\n {\n totalsCompate &&\n
\n { compare.on &&
}\n
Total mes
\n
\n
\n
{ totalsCompate.q }
\n
{ Math.round( totalsCompate.totalExchange ).toLocaleString( 'es-AR' ) }
\n
\n }\n
\n
\n :\n
\n }\n
\n\n const compareData = compare.on && !compare.fetchStatus.loading && compare.fetchStatus.data && compare.fetchStatus.data.data.data.REVENUE_GRAPH[ mode ] ? compare.fetchStatus.data.data.data.REVENUE_GRAPH[ mode ].map( item => ({ ...item, compareItem: true }) ) : []\n const data = [ ...( fetchStatus.data.data.data.REVENUE_GRAPH[ mode ] || [] ), ...compareData ]\n\n const totals = fetchStatus.data && getTotals( fetchStatus.data.data.data.REVENUE_GRAPH[ mode ] || [] )\n // const compareTotals = compareData && getTotals( compareData )\n\n return (\n \n
\n
Ventas por ave
\n
\n setMode( e.target.value ) }>\n Reproductoras \n Faena \n \n
\n
\n {\n data && data.length\n ?\n
\n
\n
Producto
\n
ENE
\n
FEB
\n
MAR
\n
ABR
\n
MAY
\n
JUN
\n
JUL
\n
AGO
\n
SEP
\n
OCT
\n
NOV
\n
DIC
\n
Promedio Mes
\n
\n
\n {\n data.map( ( revenue, index ) => {\n\n const product = products.data.find( p => p.id === Number( revenue.product ) )\n\n const total = revenue.values.reduce( ( prev, curr ) => prev + curr, 0 ) / 12\n\n return (\n
\n { compare.on &&
}\n
{ product.name }
\n
{ revenue.values[ 0 ] && revenue.values[ 0 ].toFixed( 2 ) }
\n
{ revenue.values[ 1 ] && revenue.values[ 1 ].toFixed( 2 ) }
\n
{ revenue.values[ 2 ] && revenue.values[ 2 ].toFixed( 2 ) }
\n
{ revenue.values[ 3 ] && revenue.values[ 3 ].toFixed( 2 ) }
\n
{ revenue.values[ 4 ] && revenue.values[ 4 ].toFixed( 2 ) }
\n
{ revenue.values[ 5 ] && revenue.values[ 5 ].toFixed( 2 ) }
\n
{ revenue.values[ 6 ] && revenue.values[ 6 ].toFixed( 2 ) }
\n
{ revenue.values[ 7 ] && revenue.values[ 7 ].toFixed( 2 ) }
\n
{ revenue.values[ 8 ] && revenue.values[ 8 ].toFixed( 2 ) }
\n
{ revenue.values[ 9 ] && revenue.values[ 9 ].toFixed( 2 ) }
\n
{ revenue.values[ 10 ] && revenue.values[ 10 ].toFixed( 2 ) }
\n
{ revenue.values[ 11 ] && revenue.values[ 11 ].toFixed( 2 ) }
\n
{ total.toFixed( 2 ) }
\n
\n )\n } )\n }\n\n {\n totals &&\n
\n { compare.on &&
}\n
Total
\n
{ totals.values[ 0 ] && totals.values[ 0 ].toFixed( 2 ) }
\n
{ totals.values[ 1 ] && totals.values[ 1 ].toFixed( 2 ) }
\n
{ totals.values[ 2 ] && totals.values[ 2 ].toFixed( 2 ) }
\n
{ totals.values[ 3 ] && totals.values[ 3 ].toFixed( 2 ) }
\n
{ totals.values[ 4 ] && totals.values[ 4 ].toFixed( 2 ) }
\n
{ totals.values[ 5 ] && totals.values[ 5 ].toFixed( 2 ) }
\n
{ totals.values[ 6 ] && totals.values[ 6 ].toFixed( 2 ) }
\n
{ totals.values[ 7 ] && totals.values[ 7 ].toFixed( 2 ) }
\n
{ totals.values[ 8 ] && totals.values[ 8 ].toFixed( 2 ) }
\n
{ totals.values[ 9 ] && totals.values[ 9 ].toFixed( 2 ) }
\n
{ totals.values[ 10 ] && totals.values[ 10 ].toFixed( 2 ) }
\n
{ totals.values[ 11 ] && totals.values[ 11 ].toFixed( 2 ) }
\n
{ totals.total.toFixed( 2 ) }
\n
\n }\n\n {/* {\n compare.on && compareTotals &&\n
\n { compare.on &&
}\n
Total
\n
{ compareTotals[ mode ][ 0 ] && compareTotals[ mode ][ 0 ].toFixed( 2 ) } { exchange }
\n
{ compareTotals[ mode ][ 1 ] && compareTotals[ mode ][ 1 ].toFixed( 2 ) } { exchange }
\n
{ compareTotals[ mode ][ 2 ] && compareTotals[ mode ][ 2 ].toFixed( 2 ) } { exchange }
\n
{ compareTotals[ mode ][ 3 ] && compareTotals[ mode ][ 3 ].toFixed( 2 ) } { exchange }
\n
{ compareTotals[ mode ][ 4 ] && compareTotals[ mode ][ 4 ].toFixed( 2 ) } { exchange }
\n
{ compareTotals[ mode ][ 5 ] && compareTotals[ mode ][ 5 ].toFixed( 2 ) } { exchange }
\n
{ compareTotals[ mode ][ 6 ] && compareTotals[ mode ][ 6 ].toFixed( 2 ) } { exchange }
\n
{ compareTotals[ mode ][ 7 ] && compareTotals[ mode ][ 7 ].toFixed( 2 ) } { exchange }
\n
{ compareTotals[ mode ][ 8 ] && compareTotals[ mode ][ 8 ].toFixed( 2 ) } { exchange }
\n
{ compareTotals[ mode ][ 9 ] && compareTotals[ mode ][ 9 ].toFixed( 2 ) } { exchange }
\n
{ compareTotals[ mode ][ 10 ] && compareTotals[ mode ][ 10 ].toFixed( 2 ) } { exchange }
\n
{ compareTotals[ mode ][ 11 ] && compareTotals[ mode ][ 11 ].toFixed( 2 ) } { exchange }
\n
{ compareTotals.total[ mode ].toFixed( 2 ) } { exchange }
\n
\n } */} \n
\n
\n :\n
\n }\n
\n }\n \n\n const { CONSUME_GRAPH } = fetchStatus.data.data.data\n\n return (\n \n { compare.on &&
}\n
\n
Marketshare
\n
\n setMode( e.target.value ) }>\n Mes \n Año \n \n
\n
\n {\n !CONSUME_GRAPH.total.pendings_data_load\n ?\n
\n { setDetailView( !detailView ) } }>\n { detailView ? 'Ocultar detalle' : 'Ver detalle' }\n \n :\n null\n }\n\n {\n detailView && {\n const match = products.data.find( product => Number( product.id ) === Number( productId ) )\n \n return {\n ...CONSUME_GRAPH.partials[ productId ],\n id: productId,\n name: match.name\n }\n } )\n } />\n }\n
\n :\n
\n }\n
\n
\n
\n
\n
\n
\n
{ max.toLocaleString() } unidades
\n
\n
\n
\n
\n
\n
{ Math.ceil( soldPercentage ) } %
\n
\n
{ sold.toLocaleString() } unidades vendidas
\n
\n
\n
\n {\n listItems.map( item => {\n\n const { name, sold, max, id } = item\n const percent = max ? Math.ceil( sold * 100 / max ) : 100\n\n return (\n
\n )\n } )\n }\n
\n
} >\n {\n !graphFetchStatus.loading && graphFetchStatus.data && ( graphFetchStatus.data.data.data.FORECAST_GRAPH.partials.q.length || graphFetchStatus.data.data.data.SALES_GRAPH.length )\n ?\n
\n { setCompare( { ...compare, on: checked } ) } } />\n
\n :\n null\n }\n \n
{ setFilters( { ...filters, date } ) } }\n type=\"MAIN\"\n />\n\n {\n compare.on &&\n { setCompare( { ...compare, filters: { ...compare.filters, ...filters } } ) } }\n products={ products_status.list }\n setGraphFetchStatus={ ( fetchStatus ) => { setCompare( { ...compare, fetchStatus: { ...fetchStatus } } ) } }\n graphFetchStatus={ graphFetchStatus } \n selectDate={ ( date ) => { setCompare( { ...compare.filters, date } ) } }\n type=\"COMPARE\"\n compare={ compare }\n />\n }\n\n {\n !graphFetchStatus.loading && graphFetchStatus.data && ( graphFetchStatus.data.data.data.FORECAST_GRAPH.partials.q.length || graphFetchStatus.data.data.data.SALES_GRAPH.length )\n ?\n (\n \n\n
\n \n\n
\n {\n compare.on &&\n
\n }\n\n
\n \n {\n compare.on &&\n
\n }\n\n
\n\n {\n compare.on &&\n
\n }\n \n
\n \n {\n compare.on &&\n
\n }\n \n
\n \n
\n \n
\n \n
{ MONTHS[ filters.date.month ] }
\n\n
{filters.exchange === \"LOCAL\" ?
\n\n
{ filters.client_groups.length < client_groups.data.length ? `${ filters.client_groups.length } grupos económicos` : 'Todos los grupos económicos' }
\n\n
\n\n
\n
AGRUPAR POR
\n
\n
changeGroupByHandler(\"PRODUCT\") }>\n PRODUCTO\n
\n
changeGroupByHandler(\"GROUP\") }>\n GRUPO\n
\n
changeGroupByHandler(\"LINE\") }>\n LINEA\n
\n
\n
\n\n
\n
MES
\n
\n {\n MONTHS.map( (monthName, index) => (\n
{ setFilters( { ...filters, date: { month: index } } ) } }>\n { monthName }\n
\n ) )\n }\n
\n
\n\n
\n
MONEDA
\n
\n
setFilters({ ...filters, exchange: 'LOCAL' }) }>\n
\n | \n
setFilters({ ...filters, exchange: 'USD' }) }>\n USD\n
\n
\n
\n\n
\n
Grupos económicos
\n\n
\n
\n
{ selectAll( 'NONE' ) } }>\n Ninguno\n
\n | \n
{ selectAll( 'ALL' ) } }>\n Todos\n
\n
\n
\n \n
\n {\n client_groups.data.map( client_group => (\n
handleChangeSelector( client_group.id ) }>\n -1 } />\n { client_group.name } \n
\n ) )\n }\n
\n
\n\n
\n
\n
\n\n \n \n
\n
\n\n
\n {\n filteredProducts.map( product => {\n\n return (\n
{ selectProduct( { groupby: groupby, data: product } ); handlerClose() } }>\n
\n {/*
{ clientGroup.name }
*/}\n
\n )\n\n } )\n }\n
\n\n
\n\n return (\n \n\n
\n
\n\n
\n
\n
{ productSelected.name }
\n
\n { setSelectProductModal( { visible: true } ) } }>Cambiar \n
\n
\n
\n {\n selectProductModal.visible && \n
{ setSelectProductModal( { visible: false } ) } }\n selectProduct={ selectProduct }\n groupby={ filters.product.groupby }\n type={ type }\n />\n }\n
\n\n \n\n
\n \n \n \n
\n\n
\n\n return (\n \n \n
\n
Ventas vs Pronóstico
\n
\n
\n
\n
Ver solo items con ventas
\n
{ setConfig( { ...config, filterNulls } ) } } />
\n
\n
\n
\n setConfig({ ...config, chartType: e.target.value }) }>\n Lineal \n Barras \n Tabla \n \n
\n
\n setConfig({ ...config, mode: e.target.value }) }>\n Cantidad \n Valor \n \n
\n
\n
\n
\n\n {\n config.chartType === 'LINE'\n ?\n
\n :\n (\n config.chartType === 'BAR'\n ?\n
\n :\n
\n )\n }\n\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n )\n\n}\n\nconst TableChart = ({ data, mode, client_groups, exchange, compare, filterNulls }) => {\n\n const filteredData = data.partials[ mode === 'Q' ? 'q' : 'price' ].filter( d => filterNulls ? d.sales.find( item => item ) : true )\n\n const compareDataSource = compare.fetchStatus.data ? compare.fetchStatus.data.data.data.FORECAST_GRAPH.partials[ mode === 'Q' ? 'q' : 'price' ].map( item => ({ ...item, compareItem: true }) ) : []\n const dataSource = [ ...filteredData, ...compareDataSource ]\n\n const compareTotals = compare.on && compareDataSource && getTableTotals( compareDataSource )\n const totals = dataSource && getTableTotals( filteredData )\n\n if ( !dataSource || !dataSource.length ){\n\n return (\n \n
\n )\n }\n\n return (\n \n
\n
\n
\n {\n dataSource.map( ( clientItem, index ) => {\n\n const clientdata = client_groups.find( cg => cg.id == clientItem.client_group )\n\n return (\n
\n { compare.on &&
}\n
{ clientdata && clientdata.name }
\n
\n )\n\n } )\n }\n\n
\n { compare.on &&
}\n
Total
\n
\n\n {\n compareTotals &&\n
\n { compare.on &&
}\n
Total
\n
\n }\n
\n
\n
\n
\n
ENE
\n
FEB
\n
MAR
\n
ABR
\n
MAY
\n
JUN
\n
JUL
\n
AGO
\n
SEP
\n
OCT
\n
NOV
\n
DIC
\n
Total
\n
\n
\n {\n dataSource.map( ( clientItem, index ) => {\n\n const totalSales = clientItem.sales.reduce( ( prev, curr ) => prev + curr, 0 )\n const totalForecast = clientItem.forecast.reduce( ( prev, curr ) => prev + curr, 0 )\n\n return (\n
\n
{ Math.round( clientItem.sales[ 0 ] ) }/{ Math.round( clientItem.forecast[ 0 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( clientItem.sales[ 1 ] ) }/{ Math.round( clientItem.forecast[ 1 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( clientItem.sales[ 2 ] ) }/{ Math.round( clientItem.forecast[ 2 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( clientItem.sales[ 3 ] ) }/{ Math.round( clientItem.forecast[ 3 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( clientItem.sales[ 4 ] ) }/{ Math.round( clientItem.forecast[ 4 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( clientItem.sales[ 5 ] ) }/{ Math.round( clientItem.forecast[ 5 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( clientItem.sales[ 6 ] ) }/{ Math.round( clientItem.forecast[ 6 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( clientItem.sales[ 7 ] ) }/{ Math.round( clientItem.forecast[ 7 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( clientItem.sales[ 8 ] ) }/{ Math.round( clientItem.forecast[ 8 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( clientItem.sales[ 9 ] ) }/{ Math.round( clientItem.forecast[ 9 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( clientItem.sales[ 10 ] ) }/{ Math.round( clientItem.forecast[ 10 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( clientItem.sales[ 11 ] ) }/{ Math.round( clientItem.forecast[ 11 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totalSales ) }/{ Math.round( totalForecast ) } { mode === 'PRICE' && }
\n
\n )\n\n } )\n }\n\n
\n
{ Math.round( totals.sales[ 0 ] ) }/{ Math.round( totals.forecast[ 0 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 1 ] ) }/{ Math.round( totals.forecast[ 1 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 2 ] ) }/{ Math.round( totals.forecast[ 2 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 3 ] ) }/{ Math.round( totals.forecast[ 3 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 4 ] ) }/{ Math.round( totals.forecast[ 4 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 5 ] ) }/{ Math.round( totals.forecast[ 5 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 6 ] ) }/{ Math.round( totals.forecast[ 6 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 7 ] ) }/{ Math.round( totals.forecast[ 7 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 8 ] ) }/{ Math.round( totals.forecast[ 8 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 9 ] ) }/{ Math.round( totals.forecast[ 9 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 10 ] ) }/{ Math.round( totals.forecast[ 10 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 11 ] ) }/{ Math.round( totals.forecast[ 11 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.totals.sales ) }/{ Math.round( totals.totals.forecast ) } { mode === 'PRICE' && }
\n
\n\n {\n compareTotals &&\n
\n
{ Math.round( compareTotals.sales[ 0 ] ) }/{ Math.round( compareTotals.forecast[ 0 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 1 ] ) }/{ Math.round( compareTotals.forecast[ 1 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 2 ] ) }/{ Math.round( compareTotals.forecast[ 2 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 3 ] ) }/{ Math.round( compareTotals.forecast[ 3 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 4 ] ) }/{ Math.round( compareTotals.forecast[ 4 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 5 ] ) }/{ Math.round( compareTotals.forecast[ 5 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 6 ] ) }/{ Math.round( compareTotals.forecast[ 6 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 7 ] ) }/{ Math.round( compareTotals.forecast[ 7 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 8 ] ) }/{ Math.round( compareTotals.forecast[ 8 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 9 ] ) }/{ Math.round( compareTotals.forecast[ 9 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 10 ] ) }/{ Math.round( compareTotals.forecast[ 10 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.sales[ 11 ] ) }/{ Math.round( compareTotals.forecast[ 11 ] ) } { mode === 'PRICE' && }
\n
{ Math.round( compareTotals.totals.sales ) }/{ Math.round( compareTotals.totals.forecast ) } { mode === 'PRICE' && }
\n
\n }\n
\n
\n
cx ? 'start' : 'end'} dominantBaseline=\"central\">\n {`${(percent * 100).toFixed(0)}%`}\n \n );\n};\n\nexport const RankingGraph = ({ fetchStatus, clients, client_groups, type, exchange, compare }) => {\n\n const [ mode, setMode ] = useState( 'MONTH' )\n\n if ( !fetchStatus.data ) return
\n\n const data = fetchStatus.data.data.data.RANKING_GRAPH[ mode ]\n\n return (\n \n { compare.on &&
}\n
\n
Ranking de clientes
\n
\n setMode( e.target.value ) }>\n Mes \n Trimestre \n Semestre \n Año \n \n
\n
\n {\n data && data.length\n ?\n
\n
\n {\n data.map( ( item, index ) => {\n\n const client = client_groups.data.find( c => c.id === Number( item.client ) )\n\n return (\n
\n
\n
{ index + 1 }.
\n
{ client && client.name || 'Otros' }
\n
{ Math.round( item.sold ).toLocaleString() }
\n
\n )\n })\n }\n
\n
\n
\n \n \n {data.map((entry, index) => (\n | \n ))}\n \n \n \n
\n
\n :\n
\n }\n
\n\n const compareData = compare.on && !compare.fetchStatus.loading && compare.fetchStatus.data ? compare.fetchStatus.data.data.data.REVENUE_GRAPH.map( item => ({ ...item, compareItem: true }) ) : []\n const data = [ ...fetchStatus.data.data.data.REVENUE_GRAPH, ...compareData ]\n\n const totals = data && getTotals( fetchStatus.data.data.data.REVENUE_GRAPH )\n const compareTotals = compareData && getTotals( compareData )\n\n return (\n \n
\n
Ventas por ave
\n
\n setMode( e.target.value ) }>\n Reproductoras \n Faena \n \n
\n
\n
\n
\n
Cliente
\n
ENE
\n
FEB
\n
MAR
\n
ABR
\n
MAY
\n
JUN
\n
JUL
\n
AGO
\n
SEP
\n
OCT
\n
NOV
\n
DIC
\n
Promedio Mes
\n
\n
\n {\n data.map( ( revenue, index ) => {\n\n const client = clients.data.find( c => c.id === Number( revenue.client ) )\n\n if ( !revenue[ mode ] ){\n\n return (\n
\n { compare.on &&
}\n
{ client.name }
\n
Sin datos cargados para este cliente
\n
\n )\n }\n\n const total = revenue[ mode ].reduce( ( prev, curr ) => prev + curr, 0 ) / 12\n\n return (\n
\n { compare.on &&
}\n
{ client.name }
\n
{ revenue[ mode ][ 0 ] && revenue[ mode ][ 0 ].toFixed( 2 ) }
\n
{ revenue[ mode ][ 1 ] && revenue[ mode ][ 1 ].toFixed( 2 ) }
\n
{ revenue[ mode ][ 2 ] && revenue[ mode ][ 2 ].toFixed( 2 ) }
\n
{ revenue[ mode ][ 3 ] && revenue[ mode ][ 3 ].toFixed( 2 ) }
\n
{ revenue[ mode ][ 4 ] && revenue[ mode ][ 4 ].toFixed( 2 ) }
\n
{ revenue[ mode ][ 5 ] && revenue[ mode ][ 5 ].toFixed( 2 ) }
\n
{ revenue[ mode ][ 6 ] && revenue[ mode ][ 6 ].toFixed( 2 ) }
\n
{ revenue[ mode ][ 7 ] && revenue[ mode ][ 7 ].toFixed( 2 ) }
\n
{ revenue[ mode ][ 8 ] && revenue[ mode ][ 8 ].toFixed( 2 ) }
\n
{ revenue[ mode ][ 9 ] && revenue[ mode ][ 9 ].toFixed( 2 ) }
\n
{ revenue[ mode ][ 10 ] && revenue[ mode ][ 10 ].toFixed( 2 ) }
\n
{ revenue[ mode ][ 11 ] && revenue[ mode ][ 11 ].toFixed( 2 ) }
\n
{ total.toFixed( 2 ) }
\n
\n )\n } )\n }\n\n {\n totals &&\n
\n { compare.on &&
}\n
Total
\n
{ totals[ mode ][ 0 ] && totals[ mode ][ 0 ].toFixed( 2 ) }
\n
{ totals[ mode ][ 1 ] && totals[ mode ][ 1 ].toFixed( 2 ) }
\n
{ totals[ mode ][ 2 ] && totals[ mode ][ 2 ].toFixed( 2 ) }
\n
{ totals[ mode ][ 3 ] && totals[ mode ][ 3 ].toFixed( 2 ) }
\n
{ totals[ mode ][ 4 ] && totals[ mode ][ 4 ].toFixed( 2 ) }
\n
{ totals[ mode ][ 5 ] && totals[ mode ][ 5 ].toFixed( 2 ) }
\n
{ totals[ mode ][ 6 ] && totals[ mode ][ 6 ].toFixed( 2 ) }
\n
{ totals[ mode ][ 7 ] && totals[ mode ][ 7 ].toFixed( 2 ) }
\n
{ totals[ mode ][ 8 ] && totals[ mode ][ 8 ].toFixed( 2 ) }
\n
{ totals[ mode ][ 9 ] && totals[ mode ][ 9 ].toFixed( 2 ) }
\n
{ totals[ mode ][ 10 ] && totals[ mode ][ 10 ].toFixed( 2 ) }
\n
{ totals[ mode ][ 11 ] && totals[ mode ][ 11 ].toFixed( 2 ) }
\n
{ totals.total[ mode ].toFixed( 2 ) }
\n
\n }\n\n {\n compare.on && compareTotals &&\n
\n { compare.on &&
}\n
Total
\n
{ compareTotals[ mode ][ 0 ] && compareTotals[ mode ][ 0 ].toFixed( 2 ) }
\n
{ compareTotals[ mode ][ 1 ] && compareTotals[ mode ][ 1 ].toFixed( 2 ) }
\n
{ compareTotals[ mode ][ 2 ] && compareTotals[ mode ][ 2 ].toFixed( 2 ) }
\n
{ compareTotals[ mode ][ 3 ] && compareTotals[ mode ][ 3 ].toFixed( 2 ) }
\n
{ compareTotals[ mode ][ 4 ] && compareTotals[ mode ][ 4 ].toFixed( 2 ) }
\n
{ compareTotals[ mode ][ 5 ] && compareTotals[ mode ][ 5 ].toFixed( 2 ) }
\n
{ compareTotals[ mode ][ 6 ] && compareTotals[ mode ][ 6 ].toFixed( 2 ) }
\n
{ compareTotals[ mode ][ 7 ] && compareTotals[ mode ][ 7 ].toFixed( 2 ) }
\n
{ compareTotals[ mode ][ 8 ] && compareTotals[ mode ][ 8 ].toFixed( 2 ) }
\n
{ compareTotals[ mode ][ 9 ] && compareTotals[ mode ][ 9 ].toFixed( 2 ) }
\n
{ compareTotals[ mode ][ 10 ] && compareTotals[ mode ][ 10 ].toFixed( 2 ) }
\n
{ compareTotals[ mode ][ 11 ] && compareTotals[ mode ][ 11 ].toFixed( 2 ) }
\n
{ compareTotals.total[ mode ].toFixed( 2 ) }
\n
\n }\n
\n
\n
\n }\n \n\n const { CONSUME_GRAPH } = fetchStatus.data.data.data\n\n return (\n \n { compare.on &&
}\n
\n
Marketshare
\n
\n setMode( e.target.value ) }>\n Mes \n Año \n \n
\n
\n {\n !CONSUME_GRAPH.total.pendings_data_load\n ?\n
\n { setDetailView( !detailView ) } }>\n { detailView ? 'Ocultar detalle' : 'Ver detalle' }\n \n :\n null\n }\n\n {\n detailView && {\n const match = clients.data.find( client => Number( client.id ) === Number( productId ) )\n \n return {\n ...CONSUME_GRAPH.partials[ productId ],\n id: productId,\n name: match.name\n }\n } )\n } />\n }\n
\n :\n
\n }\n
\n
} >\n {\n !graphFetchStatus.loading && graphFetchStatus.data && ( graphFetchStatus.data.data.data.FORECAST_GRAPH.partials.q.length || graphFetchStatus.data.data.data.SALES_GRAPH.length )\n ?\n
\n { setCompare( { ...compare, on: checked } ) } } />\n
\n :\n null\n }\n \n\n
{ selectProduct( prod, \"MAIN\" ) } }\n filters={ filters }\n campaign={ campaign }\n setFilters={ setFilters }\n client_groups={ clients_status.groups }\n setGraphFetchStatus={ setGraphFetchStatus }\n selectDate={ ( date ) => { setFilters( { ...filters, date } ) } }\n type=\"MAIN\"\n />\n\n {\n compare.on &&\n { selectProduct( prod, \"COMPARE\" ) } }\n filters={ compare.filters }\n campaign={ campaign }\n setFilters={ ( filters ) => { setCompare( { ...compare, filters: { ...compare.filters, ...filters } } ) } }\n client_groups={ clients_status.groups }\n setGraphFetchStatus={ fStatus => { setCompare( { ...compare, fetchStatus: fStatus } ) } }\n selectDate={ ( date ) => { setCompare( { ...compare, filters: { ...compare.filters, ...date } } ) } }\n type=\"COMPARE\"\n compare={ compare }\n />\n }\n\n {\n !graphFetchStatus.loading && graphFetchStatus.data && ( graphFetchStatus.data.data.data.FORECAST_GRAPH.partials.q.length || graphFetchStatus.data.data.data.SALES_GRAPH.length )\n ?\n \n\n
\n \n
\n
\n {\n compare.on &&\n
\n }\n\n
\n {\n compare.on &&\n
\n }\n\n
\n \n {\n compare.on &&\n
\n }\n \n
\n \n {\n compare.on &&\n
\n }\n
\n \n
\n \n
\n\n
\n \n
\n\n
\n
Tipo de cambio:
\n
{ closestExchange.value }
\n
{ MONTHS[ date.month() ] } { date.year() }
\n
\n\n
\n\n
\n\n {\n totals && ( ( totals.LOCAL.sales + totals.LOCAL.commitments ) || totals.LOCAL.forecast ) && \n
\n
\n
\n Total\n
\n
\n { ( totals.LOCAL.sales + totals.LOCAL.commitments ).toLocaleString() } / { totals.LOCAL.forecast.toLocaleString() } \n
\n
\n\n
\n
\n
\n \n {\n data.map((entry, index) => | )\n }\n \n \n
\n { Math.round( percentageFull ) } \n % \n
\n
\n
\n
\n }\n\n
\n
\n\n \n
\n
\n
\n
¿Cuanto se compromete que cobrará del cliente { client_group_data.name } en el mes { MONTHS[ dateSelected.month ] } del año { campaign }?
\n
\n
\n
\n \n
\n
\n
\n
\n Enviar compromiso de pago \n
\n
\n
\n\n const totaldata = getTotals( graphFetchStatus.data.data )\n\n return (\n \n
\n
Cliente
{ setOrderedList( { ...orderedList, orderby: { ...orderedList.orderby, item: 'GROUP', desc: !orderedList.orderby.desc } } ) } }>
\n
Pronóstico
USD { setOrderedList( { ...orderedList, orderby: { ...orderedList.orderby, item: 'FORECAST', desc: !orderedList.orderby.desc } } ) } }>
\n
Pronóstico
{ setOrderedList( { ...orderedList, orderby: { ...orderedList.orderby, item: 'FORECAST', desc: !orderedList.orderby.desc } } ) } }>
\n
Vendido
{ setOrderedList( { ...orderedList, orderby: { ...orderedList.orderby, item: 'SALES', desc: !orderedList.orderby.desc } } ) } }>
\n
Comprometido
{ setOrderedList( { ...orderedList, orderby: { ...orderedList.orderby, item: 'COMMITMENT', desc: !orderedList.orderby.desc } } ) } }>
\n
Estado Actual
{ setOrderedList( { ...orderedList, orderby: { ...orderedList.orderby, item: 'RESULT', desc: !orderedList.orderby.desc } } ) } }>
\n
\n
\n {\n orderedList.list.length\n ?\n <>\n {\n orderedList.list.map( ( cg, index ) => {\n\n const client_group = client_groups.data.find( c => Number( c.id ) === Number( cg.id ) )\n \n return
\n } )\n }\n
\n
\n \n :\n
\n }\n
\n
\n
{ client_group && client_group.name }
\n
{ Math.round( forecast.USD ).toLocaleString( 'es-AR' ) } USD
\n
{ Math.round( forecast.LOCAL ).toLocaleString( 'es-AR' ) }
\n
{ Math.round( sales.LOCAL ).toLocaleString( 'es-AR' ) }
\n
\n {\n commitmentsARSValue && commitments && sellers && userdata &&\n <>\n { commitmentsARSValue.toLocaleString( 'es-AR' ) }
\n
\n {\n commitmentsARSValue\n ?\n
}\n trigger=\"click\"\n >\n
\n \n :\n null\n }\n
{ setCommitmentModal( { visible: true, data: { client_group: id, ammount: commitments[ userdata.id ]?.LOCAL } } ) } }>
\n
\n \n }\n
\n
\n
= 70 ? '#52c41a' : ( percentage >= 30 ? '#ff9800' : '#ff0000' ) }\n percent={ percentage > 100 ? 100 : percentage }\n format={ percent => { Math.round( percentage ) }%
}\n />\n \n
\n {\n Object.keys( commitments ).map( user =>
\n )\n\n}\n\nconst CommitmentsUsersComponent = ({ commitment, users, userdata }) => {\n\n const user_data = Number( commitment.user ) === Number( userdata.id ) ? userdata : users.find( user => Number( user.id ) === Number( commitment.user ) )\n\n return (\n \n
\n
{ commitment.LOCAL.toLocaleString( 'es-AR' ) }
\n
\n
\n {\n user_data &&\n
\n {\n user_data.firstname + \" \" + user_data.lastname\n }\n
\n }\n
\n
} />\n
\n
\n\n { \n commitmentModal.visible && \n
{ setCommitmentModal( { ...commitmentModal, visible: false } ) } }\n refreshAction={ refreshData }\n clients_groups={ clients_status.groups }\n />\n }\n \n
Mi cuenta
\n
\n
\n
\n
\n
\n
\n
Nombre
\n
{ user_status.data.firstname }
\n
\n
\n
Apellido
\n
{ user_status.data.lastname }
\n
\n
\n
Email
\n
{ user_status.data.email }
\n
\n
\n
\n
\n
\n
Tipo de usuario
\n
{ user_status.data.type === 1 ? 'Vendedor' : 'Administrador' }
\n
\n
\n
\n
\n
\n { loginService.logout().then(() => history.push(\"/login\")); } }> Cerrar Sesión \n
\n
\n
Contraseña
\n
\n
\n Actualizar \n
\n
\n
\n
\n
Nombre
{ setOrderedList( 'NAME' ) } }>
\n
Cantidad de clientes
\n { edition &&
}\n
\n
{ group.name }
\n
{ group.clients_number }
\n {\n edition &&\n
\n
{ deleteGroup( group.id, reloadAction, campaign ) } }>
\n
\n }\n
\n
\n { setOrderedList( { ...orderedList, orderby: { item: orderby, desc: !orderedList.orderby.desc } } ) } } />\n { pageList }\n
\n {/*
\n
setActivePage( page ) }\n hideFirstLastPages={ true }\n prevPageText=\"«\"\n nextPageText=\"»\"\n />\n */}\n
\n \n\n {\n loading\n ?\n \"loading..\"\n :\n
\n )\n}\n\nexport default NewGroup\n\nconst ClientGroupModalBody = ({ newGroupData, setNewGroupData, handlerClose, addGroup }) => {\n\n return (\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n Volver \n Crear Grupo \n
\n
\n
\n
\n
} />\n
\n
\n Ver clientes \n \n
\n
\n
\n
\n
\n
\n\n
{ setFilter({ ...filter, string: s }) } }>\n \n
Mostrar solo grupos con clientes este año
\n
{ setFilter({ ...filter, withClients: checked }) } } />
\n
\n\n
{ getClientsGroups( campaign ); getClients( campaign ) } } />\n\n \n { newGroup.visible &&
{ setNewGroup( { visible: false, editionGroup: null } ) } } \n groups={ clients_status.groups.data } \n refreshAction={ () => { getClients( campaign ) } }\n refreshGroups={ () => { getClientsGroups( campaign ) } }\n editionClient={ newGroup.editionGroup }\n /> }\n
\n\n return (\n \n \n
\n
Ventas vs Pronóstico
\n
\n
\n setConfig({ ...config, chartType: e.target.value }) }>\n Lineal \n Barras \n Tabla \n \n
\n
\n setConfig({ ...config, mode: e.target.value }) }>\n Cantidad \n Valor \n \n
\n
\n
\n
\n\n {\n config.chartType === 'LINE'\n ?\n
\n :\n (\n config.chartType === 'BAR'\n ?\n
\n :\n
\n )\n }\n\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n )\n\n}\n\nconst TableChart = ({ data, mode, products, exchange }) => {\n\n const dataSource = data.partials[ mode === 'Q' ? 'q' : 'price' ]\n const [ search, setSearch ] = useState( '' )\n const [ filteredData, setFilteredData ] = useState( dataSource )\n const history = useHistory()\n\n useEffect( () => {\n\n const filtered = dataSource.filter( item => {\n\n const productdata = products.find( product => product.id == item.product )\n return productdata && productdata.name.toUpperCase().indexOf( search.toUpperCase() ) > -1\n\n } )\n\n if ( filtered.length ){\n\n setFilteredData( filtered )\n\n } else {\n\n setFilteredData( dataSource )\n\n }\n\n\n }, [ mode, search ] )\n\n const totals = dataSource && getTableTotals( dataSource )\n\n if ( !filteredData || !filteredData.length ){\n\n return (\n \n
\n )\n }\n\n return (\n \n
\n
\n
\n
\n
\n
\n {\n filteredData.map( ( productItem, index ) => {\n\n const productdata = products.find( product => product.id == productItem.product )\n const handleClick = () => {\n\n history.push( `/main/stateprod/${ productdata.id }` )\n\n }\n\n return (\n
\n
{ productdata.name }
\n
\n )\n\n } )\n\n }\n
\n
\n
\n
\n
ENE
\n
FEB
\n
MAR
\n
ABR
\n
MAY
\n
JUN
\n
JUL
\n
AGO
\n
SEP
\n
OCT
\n
NOV
\n
DIC
\n
Total
\n
\n
\n {\n filteredData.map( ( productItem, index ) => {\n\n const totalSales = productItem.sales.reduce( ( prev, curr ) => prev + curr, 0 )\n const totalForecast = productItem.forecast.reduce( ( prev, curr ) => prev + curr, 0 )\n\n return (\n
\n
{ Math.round( productItem.sales[ 0 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 0 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 1 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 1 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 2 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 2 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 3 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 3 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 4 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 4 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 5 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 5 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 6 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 6 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 7 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 7 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 8 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 8 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 9 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 9 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 10 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 10 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( productItem.sales[ 11 ] ).toLocaleString( 'es-AR' ) }/{ Math.round( productItem.forecast[ 11 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( totalSales ).toLocaleString( 'es-AR' ) }/{ Math.round( totalForecast ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
\n )\n\n } )\n\n }\n
\n
{ Math.round( totals.sales[ 0 ].toLocaleString( 'es-AR' ) ) }/{ Math.round( totals.forecast[ 0 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 1 ].toLocaleString( 'es-AR' ) ) }/{ Math.round( totals.forecast[ 1 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 2 ].toLocaleString( 'es-AR' ) ) }/{ Math.round( totals.forecast[ 2 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 3 ].toLocaleString( 'es-AR' ) ) }/{ Math.round( totals.forecast[ 3 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 4 ].toLocaleString( 'es-AR' ) ) }/{ Math.round( totals.forecast[ 4 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 5 ].toLocaleString( 'es-AR' ) ) }/{ Math.round( totals.forecast[ 5 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 6 ].toLocaleString( 'es-AR' ) ) }/{ Math.round( totals.forecast[ 6 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 7 ].toLocaleString( 'es-AR' ) ) }/{ Math.round( totals.forecast[ 7 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 8 ].toLocaleString( 'es-AR' ) ) }/{ Math.round( totals.forecast[ 8 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 9 ].toLocaleString( 'es-AR' ) ) }/{ Math.round( totals.forecast[ 9 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 10 ].toLocaleString( 'es-AR' ) ) }/{ Math.round( totals.forecast[ 10 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.sales[ 11 ].toLocaleString( 'es-AR' ) ) }/{ Math.round( totals.forecast[ 11 ] ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
{ Math.round( totals.totals.sales ).toLocaleString( 'es-AR' ) }/{ Math.round( totals.totals.forecast ).toLocaleString( 'es-AR' ) } { mode === 'PRICE' && }
\n
\n\n
\n
\n
\n\n const totalSales = fetchStatus.data.data.data.FORECAST_GRAPH.total.price.sales.reduce( ( prev, curr ) => prev + curr, 0 )\n const totalForecast = fetchStatus.data.data.data.FORECAST_GRAPH.total.price.forecast.reduce( ( prev, curr ) => prev + curr, 0 )\n const percentageFull = totalForecast ? ( ( totalSales / totalForecast ) * 100 ) : 100\n const data = [ {\n value: percentageFull <= 100 ? percentageFull : 100,\n fill: \"#4caf50\"\n }, {\n value: 100 - ( percentageFull <= 100 ? percentageFull : 100 ),\n fill: '#ff0000'\n } ]\n\n return (\n \n
Estado de venta del año
\n {\n totalSales || totalForecast\n ?\n
\n
\n
\n
Pronosticado
\n
{ Math.round( totalForecast ).toLocaleString( 'es-AR' ) }
\n
\n
\n
Vendido
\n
{ Math.round( totalSales ).toLocaleString( 'es-AR' ) }
\n
\n
\n
\n
{ percentageFull > 100 ? 'Sobreventa' : 'Restante' }
\n
{ Math.round( Math.abs( totalForecast - totalSales ) ).toLocaleString( 'es-AR' ) }
\n
\n
\n
\n
\n \n {\n data.map((entry, index) => | )\n }\n \n \n
\n { Math.round( percentageFull ) } \n % \n
\n
\n
\n :\n
\n }\n
cx ? 'start' : 'end'} dominantBaseline=\"central\">\n {`${(percent * 100).toFixed(0)}%`}\n \n );\n};\n\nexport const RankingProductsGraph = ({ fetchStatus, products, exchange }) => {\n\n if ( !fetchStatus.data ) return
\n\n const data = fetchStatus.data.data.data.RANKING_GRAPH.product\n\n return (\n \n
\n
Ranking de productos
\n
\n {\n data && data.length\n ?\n
\n
\n {\n data.map( ( item, index ) => {\n\n const product = products.data.find( p => p.id === Number( item.product ) )\n\n return (\n
\n
\n
{ index + 1 }.
\n
\n
{ product && product.name || 'Otros' }
\n {\n item.productSoldPrice\n ?\n
\n Precio venta: \n { item.productSoldPrice ? Math.round( item.productSoldPrice ) : '' } \n {/* { typeof item.overSoldPrice === 'boolean' ? ( item.overSoldPrice ?
\n :\n null\n }\n
\n
{ Math.round( item.sold ).toLocaleString( 'es-AR' ) }
\n
\n )\n })\n }\n
\n
\n
\n \n \n {data.map((entry, index) => (\n | \n ))}\n \n \n \n
\n
\n :\n
\n }\n
cx ? 'start' : 'end'} dominantBaseline=\"central\">\n {`${(percent * 100).toFixed(0)}%`}\n \n );\n};\n\nexport const RankingClientsGraph = ({ fetchStatus, clients, clients_groups, exchange }) => {\n\n const [ mode, setMode ] = useState( 'CLIENT' )\n\n if ( !fetchStatus.data ) return
\n\n const data = fetchStatus.data.data.data.RANKING_GRAPH[ mode === 'CLIENT' ? 'client' : 'client_groups' ]\n\n return (\n \n
\n
Ranking de clientes
\n
\n setMode( e.target.value ) }>\n Clientes \n Grupos Económicos \n \n
\n
\n {\n data && data.length\n ?\n
\n
\n {\n data.map( ( item, index ) => {\n\n const target = (mode === 'CLIENT' ? clients : clients_groups ).data.find( p => p.id === Number( item.client ) || p.id === Number( item.client_group ) )\n\n return (\n
\n
\n
{ index + 1 }.
\n
\n
{ target && target.name || 'Otros' }
\n {\n item.productSoldPrice\n ?\n
\n Precio venta: \n { item.productSoldPrice ? Math.round( item.productSoldPrice ) : '' } \n {/* { typeof item.overSoldPrice === 'boolean' ? ( item.overSoldPrice ?
\n :\n null\n }\n
\n
{ Math.round( item.sold ).toLocaleString( 'es-AR' ) }
\n
\n )\n })\n }\n
\n
\n
\n \n \n {data.map((entry, index) => (\n | \n ))}\n \n \n \n
\n
\n :\n
\n }\n
\n
} >\n
\n setFilters({ ...filters, exchange: e.target.value }) }>\n USD \n \n
\n \n {\n !graphFetchStatus.loading && \n graphFetchStatus.data\n ?\n (\n
\n\n
\n \n\n
\n\n {/*
*/}\n\n \n
\n\n
\n\n {/*
*/}\n\n \n
\n )\n :\n
\n \n }\n \n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n\n
\n
\n
{ if ( e.key === 'Enter' ) login() } } />\n
\n\n
\n
\n Iniciar sesión \n { setFlipped( true ) } }>Olvidaste tu contraseña? \n
\n
\n
\n
\n
\n
\n
\n
\n Recuperar contraseña \n { setFlipped( false ) } }>Ingresar \n
\n
\n
\n
\n
\n\n
\n\n
\n
\n
\n
\n
\n\n
\n\n
\n Recovery Password \n
\n\n
\n
\n\n
{\n\n if ( loggedIn ) {\n return children\n } else {\n return (\n \n
\n \n \n \n \n \n \n \n \n \n
\n \n )\n\nReactDOM.render( root, document.getElementById('root') );\n"],"sourceRoot":""} 
\n ![\"cliente](\"/assets/img/icons/newUser.svg\"){kind=icon}
![\"loading\"](\"/assets/img/icons/loading.svg\"){kind=icon}
\n ![\"loading\"](\"/assets/loading.svg\")
\n ![\"logo](\"/assets/img/logo_vetanco.svg\"){kind=logo}
\n