JSFiddle - React, Tailwind, and code Playground

by Sudheer Nunna

JavaScript

const userProfile = {"preferences":{"PO":{"POType":"standardPO","searchText":"","standardPO":{"sort":{"sortingType":"date","sortingOption":"erpCreationDate","sortingDirection":"desc"},"filter":{"states":{"New":false,"Open":true,"Closed":false,"Shipped":false,"Received":false,"Cancelled":false,"Confirmed":false,"Delivered":false,"Planned Shipment":false,"Supplier Rejected":false,"Confirmed with Changes":false},"exceptions":{"Late":false,"_BLANK":false,"On Time":true,"Past Due":false,"Unconfirmed":false,"Data Exceptions":false}},"filterType":"states","dataExceptions":{},"advancedFilters":{"savedFilters":{},"currentFilters":{"Item":{"name":"purchaseOrderLines.refObjects.customerItems.*,purchaseOrderLines.customerItemName,purchaseOrderLines.customerItemDescription,purchaseOrderLines.refObjects.supplierItems.*,purchaseOrderLines.supplierItemName,purchaseOrderLines.supplierItemDescription","type":"string","label":"Item","default":true,"filters":[],"searchFields":[]},"Site":{"name":"refObjects.shipToSites.*,purchaseOrderLines.refObjects.shipFromSites.*,purchaseOrderLines.shipFromSiteName,purchaseOrderLines.shipToSiteName,purchaseOrderLines.shipFromSiteDescription,purchaseOrderLines.shipToSiteDescription,shipToSiteName,shipToSiteDescription","type":"string","label":"Site","default":true,"filters":[],"searchFields":[]}}}},"materialType":"All Types","stockTransferPO":{"sort":{"sortingType":"date","sortingOption":"erpCreationDate","sortingDirection":"desc"},"filter":{"states":{"Shipped":true},"exceptions":{"Late":false,"_BLANK":false,"On Time":false,"Past Due":false,"Unconfirmed":false,"Data Exceptions":false}},"filterType":"exceptions","dataExceptions":{"disabled":["_BLANK"],"aggregationFieldValues":["Order vs Confirmed","Shipped Received Qty Mismatch","Confirmed Shipped Qty Mismatch","Order Received Qty Mismatch","Confirmed Qty State Mismatch","Receipt Qty State Mismatch","Shipped Qty State...