(\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tautoHide\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderLoadingView()}\n\t\t\t\t\t\t{renderTableRows()}\n\t\t\t\t\t\n\t\t\t\t)\n\t\t\t} else {\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{renderLoadingView()}\n\t\t\t\t\t\t{renderTableRows()}\n\t\t\t\t\t\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\n\t\treturn {tableRowsWithScrolls()}\n\t}\n\n\treturn (\n\t\t\n\t\t\t{renderTableHeader()}\n\t\t\t{renderContent()}\n\t\t\t{renderPaginationFooter()}\n\t\t\n\t)\n}\n\nexport default Table\n","import styled from 'styled-components'\nimport Chip from '../../../basic/Chip'\nimport { Address } from '@data/model'\nimport { showDateFormat, decimalSeparatedNumber, displayAmount, getManager } from '@utils'\nimport { strings, enquiryStatus as enquiryStatusC } from '@constants'\nimport { Text } from '@styles'\n\nconst getAlignment = ({ align }) => {\n\tif (align === 'right') return 'flex-end'\n\tif (align === 'center') return 'center'\n\treturn 'flex-start'\n}\n\nconst ChipWapper = styled(Chip)`\n\tbackground: ${({ theme }) => theme.palette.text.grey};\n\tcolor: ${({ theme }) => theme.palette.text.darkblack};\n`\n\nexport const getData = (row, key, data) => {\n\tlet _data = data || row[key]\n\tif (typeof _data === 'function') {\n\t\t_data = _data(row, key)\n\t}\n\treturn _data\n}\n\nexport const idColumn = ({ key = 'enquiry_id', label = 'Enquiry ID', ...extras }) => ({\n\tlabel,\n\tkey: (row) => {\n\t\treturn getData(row, key, extras?.data)\n\t},\n\t...extras,\n})\n\nexport const productsColumn = ({ key = 'enquiry_items', ...extras }) => ({\n\tlabel: 'Products',\n\tkey: (row) => {\n\t\tconst items = getData(row, key, extras?.data) ?? []\n\t\tconst products = new Set()\n\t\titems.forEach((i) => {\n\t\t\tif (!products.has(i.category_name)) products.add(i.category_name)\n\t\t})\n\n\t\treturn Array.from(products).map((i) => ({ name: i, id: `${row.id}_${i}` }))\n\t},\n\trenderer: (data = []) => {\n\t\tif (data.length === 0) return '-'\n\t\tconst _data = data.length < 4 ? data : data?.slice(0, 2)\n\t\tconst labelMsg = `+${data.length - _data.length} more`\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{_data?.map((item, i) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{item?.name}\n\t\t\t\t\t\t\t\t{_data.length - 1 === i ? '' : ','}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t\t{data.length > 3 ? : ''}\n\t\t\t\n\t\t)\n\t},\n\t...extras,\n})\n\nexport const auctionProductColumn = ({ key = 'auction_item', ...extras }) => ({\n\tlabel: 'Product',\n\tkey: (row) => {\n\t\treturn getData(row, key, extras?.data) ?? {}\n\t},\n\trenderer: (data = {}) => {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\t{data?.product_name}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{data?.category_name}\n\t\t\t\t
\n\t\t\t\n\t\t)\n\t},\n\t...extras,\n})\n\nexport const dateColumn = ({ label = 'Enquiry Date', key = 'enquiry_date', ...extras }) => ({\n\tlabel,\n\tkey: (row) => {\n\t\tconst date = getData(row, key, extras?.data)\n\t\tif (!date) return '-'\n\t\treturn showDateFormat(new Date(date))\n\t},\n\t...extras,\n})\n\nexport const addressColumn = ({ key = 'shipping_address', label = 'Delivery Location', ...extras }) => ({\n\tlabel,\n\tkey: (row) => {\n\t\tconst address = getData(row, key, extras?.data)\n\t\tif (address) {\n\t\t\treturn new Address(address)\n\t\t}\n\t},\n\trenderer: (data) => {\n\t\tif (!data) return '-'\n\t\tif (!data.city && !data.state) {\n\t\t\treturn {data?.pincode}\n\t\t}\n\t\treturn (\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\t{data?.city}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{data?.state}\n\t\t\t\t
\n\t\t\t\n\t\t)\n\t},\n\t...extras,\n})\n\nexport const weightColumn = ({ key = 'enquiry_items', label = 'Ordered Items', weightKey = 'required_weight', ...extras }) => ({\n\tlabel: label,\n\tkey: (row) => {\n\t\tconst items = getData(row, key, extras?.data) ?? []\n\t\tlet weight = 0\n\t\tif (key === 'auction_item') {\n\t\t\tweight = items[weightKey]\n\t\t} else {\n\t\t\tweight = items.reduce((acc, i) => acc + (i[weightKey] ?? 0), 0)\n\t\t}\n\t\treturn `${decimalSeparatedNumber(weight / 1000)} MT`\n\t},\n\t...extras,\n})\n\nexport const servicedWeightColumn = ({ key = '', label = 'Serviced Weight(MT)', ...extras }) => ({\n\tlabel: label,\n\tkey: (row) => {\n\t\treturn getData(row, key, extras?.data) ?? []\n\t},\n\t...extras,\n})\n\nexport const priceColumn = ({ key = 'enquiry_items', priceKey = 'price_per_kg', weightKey = 'required_weight', ...extras }) => ({\n\tlabel: 'Order Amount',\n\tkey: (row) => {\n\t\tconst items = getData(row, key, extras?.data) ?? []\n\t\tconst value = items.reduce((acc, i) => {\n\t\t\treturn acc + (i[priceKey] ?? 0) * (i[weightKey] ?? 0)\n\t\t}, 0)\n\n\t\treturn displayAmount(value)\n\t},\n\t...extras,\n})\n\nexport const relationshipManagerColumn = ({ key = 'relationship_manager', type = 'sales', ...extras }) => ({\n\tlabel: 'Concerned Manager',\n\tkey: (row) => {\n\t\tconst value = getData(row, key, extras?.data) ?? []\n\n\t\treturn getManager(value, type)\n\t},\n\trenderer: (data) => {\n\t\tif (!data) return '-'\n\t\treturn (\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\t{data?.full_name}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{data.mobile_number}\n\t\t\t\t
\n\t\t\t\n\t\t)\n\t},\n\t...extras,\n})\n\nexport const actionsColumn = ({ key = '', label = 'Actions', ...extras }) => ({\n\tlabel,\n\tkey: (row) => {\n\t\tif (key) return getData(row, key, extras?.data)\n\t\treturn row\n\t},\n\trenderer: (data) => null,\n\t...extras,\n})\n\nexport const statusColumn = ({ key = 'enquiry_status', label = 'Enquiry Status', ...extras }) => ({\n\tlabel,\n\tkey: (row) => {\n\t\tlet status = getData(row, key, extras?.data)\n\t\tif (extras.user) {\n\t\t\tif (row.auction_status && row.auction_status === 'ORDER_PLACED') {\n\t\t\t\tif (row.all_buyer_quotes) {\n\t\t\t\t\tconst buyer = row.all_buyer_quotes.find((_item) => _item.buyer.user_id === extras.user.user_id)\n\t\t\t\t\tif (buyer && !buyer.order_won) {\n\t\t\t\t\t\tstatus = strings('order_lost')\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (row.enquiry_status && row.enquiry_status === 'ORDER_PLACED') {\n\t\t\t\tif (row.all_supplier_quotes) {\n\t\t\t\t\tconst supplier = row.all_supplier_quotes.find((_item) => _item.supplier.user_id === extras.user.user_id)\n\t\t\t\t\tif (supplier && !supplier.order_given) {\n\t\t\t\t\t\tstatus = strings('order_lost')\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (row.buyer) {\n\t\t\t\tif (extras.user.user_id === row.buyer.user_id && row.final_quote_buyer && status === enquiryStatusC.active) {\n\t\t\t\t\tstatus = strings('quote_received')\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn status\n\t},\n\trenderer: (data) => {\n\t\tif (!data) {\n\t\t\treturn\n\t\t}\n\t\treturn \n\t},\n\t...extras,\n})\n\nexport const myQuoteColumn = ({ key = 'all_supplier_quotes', userId, ...extras }) => ({\n\tlabel: 'Your Quote',\n\tkey: (row) => {\n\t\tconst data = getData(row, key, extras?.data) ?? []\n\t\tconst myQuote = data.find((_quote) => _quote?.supplier.user_id === userId)\n\t\tif (myQuote) {\n\t\t\tconst quoteType = myQuote.quote_type\n\n\t\t\tconst quoteAmount = myQuote.supplier_quote?.reduce((acc, item) => {\n\t\t\t\tif (quoteType.toLowerCase() === 'ex') return acc + item.ex_price * item.serviceable_weight\n\t\t\t\treturn acc + item.for_price * item.serviceable_weight\n\t\t\t}, 0)\n\n\t\t\treturn {\n\t\t\t\tquoteType,\n\t\t\t\tquoteAmount,\n\t\t\t}\n\t\t}\n\t},\n\trenderer: (data) => {\n\t\tif (!data) return '-'\n\t\treturn (\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\t{displayAmount(data.quoteAmount)}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t({data.quoteType})\n\t\t\t\t
\n\t\t\t\n\t\t)\n\t},\n\t...extras,\n})\n\nexport const usernameColumn = ({ key = 'buyer', label = strings('created', 'by'), userId, ...extras }) => ({\n\tlabel,\n\tkey: (row) => {\n\t\tconst data = getData(row, key, extras?.data) ?? []\n\n\t\tif (!data) {\n\t\t\treturn '-'\n\t\t}\n\n\t\tlet tempValue = data\n\t\tif (data?.length > 0) {\n\t\t\ttempValue = data[0]\n\t\t\tif (!tempValue.user_id) {\n\t\t\t\ttempValue = tempValue[key]\n\t\t\t}\n\t\t}\n\n\t\treturn tempValue\n\t},\n\trenderer: (data) => {\n\t\tif (!data) return '-'\n\t\treturn (\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\t{(data?.organisation_name || data?.full_name) ?? '-'}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{data.mobile_number}\n\t\t\t\t
\n\t\t\t\n\t\t)\n\t},\n\t...extras,\n})\n\nexport const LogisticsQuotesColumn = ({ key = 'all_logistics_quotes', label = 'Logistics Quotation', ...extras }) => ({\n\tlabel,\n\tkey: (row) => {\n\t\tif (row) {\n\t\t\tif (row.lumpsum_logistics_quote !== 0) {\n\t\t\t\treturn row.lumpsum_logistics_quote\n\t\t\t} else {\n\t\t\t\treturn row.logistics_quote_per_mt * row.minimum_guaranteed_weight\n\t\t\t}\n\t\t}\n\t},\n\trenderer: (data) => {\n\t\tif (!data) return '-'\n\t\treturn {displayAmount(data)}\n\t},\n\t...extras,\n})\n\nexport const topQuotes = ({ key = 'all_supplier_quotes', label, userId, ...extras }) => ({\n\tlabel,\n\tkey: (row) => {\n\t\tconst data = getData(row, key, extras?.data) ?? []\n\t\tconst myQuote = data.find((_quote) => _quote?.supplier.user_id === userId)\n\n\t\tif (myQuote) {\n\t\t\tconst quoteType = myQuote.quote_type\n\t\t\tlet quoteAmount = myQuote.supplier_quote?.reduce((acc, item) => {\n\t\t\t\tif (quoteType.toLowerCase() === 'for') return acc + item.for_price * item.serviceable_weight\n\t\t\t}, 0)\n\t\t\tconst topForQuotes = row?.top_for_quotes ?? []\n\t\t\tlet topQuote = strings('no')\n\t\t\tif (Math.max(...topForQuotes) >= quoteAmount) {\n\t\t\t\ttopQuote = strings('yes')\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tquoteType,\n\t\t\t\tquoteAmount,\n\t\t\t\ttopQuote,\n\t\t\t\ttopForQuotes,\n\t\t\t}\n\t\t}\n\t},\n\trenderer: (data) => {\n\t\tif (data?.topForQuotes.length < 2 || data?.quoteType.toLowerCase() === 'ex') return '-'\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\t{data?.topQuote}\n\t\t\t\t
\n\t\t\t\n\t\t)\n\t},\n\t...extras,\n})\n\nexport const supplierList = ({ key = 'supplier_list', label = strings('supplier'), ...extras }) => ({\n\tlabel,\n\tkey: (row) => {\n\t\tlet data = getData(row, key, extras?.data) ?? []\n\t\treturn data.map((item) => item?.supplier)\n\t},\n\trenderer: (data) => {\n\t\tif (data.length === 0) return '-'\n\t\tconst _data = data.length < 4 ? data : data?.slice(0, 2)\n\t\tconst labelMsg = `+${data.length - _data.length} more`\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{_data?.map((item, i) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{(item?.organisation_name || item?.full_name) ?? item?.mobile_number}\n\t\t\t\t\t\t\t\t{_data.length - 1 === i ? '' : ','}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t\t{data.length > 3 ? : ''}\n\t\t\t\n\t\t)\n\t},\n\t...extras,\n})\n\nexport const enquiryDateColumn = ({ label = 'Enquiry Date', key = '', ...extras }) => ({\n\tlabel,\n\tkey: (row) => {\n\t\tif (key) return getData(row, key, extras?.data)\n\t\treturn row\n\t},\n\trenderer: (data) => {\n\t\tif (!data) return '-'\n\t\treturn (\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\t{data?.enquiry_date ? showDateFormat(new Date(data?.enquiry_date)) : '-'}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{data?.expiry_date ? showDateFormat(new Date(data?.expiry_date)) : '-'}\n\t\t\t\t
\n\t\t\t\n\t\t)\n\t},\n\t...extras,\n})\n\nexport const auctionDateColumn = ({ label, key = '', ...extras }) => ({\n\tlabel,\n\tkey: (row) => {\n\t\tif (key) return getData(row, key, extras?.data)\n\t\treturn row\n\t},\n\trenderer: (data) => {\n\t\tif (!data) return '-'\n\t\treturn (\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\t{data?.auction_opening_time ? showDateFormat(new Date(data?.auction_opening_time)) : '-'}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{data?.auction_closing_time ? showDateFormat(new Date(data?.auction_closing_time)) : '-'}\n\t\t\t\t
\n\t\t\t\n\t\t)\n\t},\n\t...extras,\n})\n","const actionTypes = {\n\tTABLE_DATA_PROGRESS: 'TABLE_DATA_PROGRESS',\n\tTABLE_DATA_SUCCESS: 'TABLE_DATA_SUCCESS',\n\tTABLE_DATA_FAILURE: 'TABLE_DATA_FAILURE',\n\tSET_QUERY: 'SET_QUERY',\n}\n\nexport const actions = {\n\tfetchTableDataProgress: () => ({\n\t\ttype: actionTypes.TABLE_DATA_PROGRESS,\n\t}),\n\tfetchTableDataSuccess: (data, count) => ({\n\t\ttype: actionTypes.TABLE_DATA_SUCCESS,\n\t\tdata,\n\t\tcount,\n\t}),\n\tfetchTableDataFailure: (error) => ({\n\t\ttype: actionTypes.TABLE_DATA_FAILURE,\n\t\terror,\n\t}),\n\tsetQuery: (query) => ({\n\t\ttype: actionTypes.SET_QUERY,\n\t\tquery,\n\t}),\n}\n\nexport const initialState = {\n\tquery: {\n\t\tpage: 0,\n\t\tfilters: null,\n\t},\n\tloading: true,\n\terror: false,\n\tdata: [],\n\ttotal_count: 0,\n}\n\nexport const reducer = (state, action) => {\n\tswitch (action.type) {\n\t\tcase actionTypes.TABLE_DATA_PROGRESS: {\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\tloading: true,\n\t\t\t}\n\t\t}\n\t\tcase actionTypes.TABLE_DATA_SUCCESS: {\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\tloading: false,\n\t\t\t\tdata: action.data,\n\t\t\t\ttotal_count: action.count,\n\t\t\t}\n\t\t}\n\t\tcase actionTypes.TABLE_DATA_FAILURE: {\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\tloading: false,\n\t\t\t\tdata: [],\n\t\t\t\terror: action.error,\n\t\t\t}\n\t\t}\n\t\tcase actionTypes.SET_QUERY: {\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\tquery: action.query,\n\t\t\t\tloading: false,\n\t\t\t}\n\t\t}\n\t\tdefault:\n\t\t\treturn state\n\t}\n}\n","import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react'\nimport { useSearchParams } from 'react-router-dom'\nimport { reducer, actions, initialState as _initialState } from './_tableReducer'\n\nconst useTableReducer = (applicableFilters = {}, initialState = _initialState) => {\n\tconst [searchParams, setSearchParams] = useSearchParams()\n\tconst [state, dispatch] = useReducer(reducer, initialState)\n\n\tconst previousSearchParams = useRef()\n\n\tconst hasChanged = (previous, current) => {\n\t\tif ((!previous && current) || [...previous.keys()].length !== [...current.keys()].length) {\n\t\t\treturn true\n\t\t}\n\n\t\treturn [...previous.entries()].reduce((acc, [key, val]) => {\n\t\t\tif (acc || !current.has(key) || (current.has(key) && current.get(key) !== val)) return true\n\t\t\treturn false\n\t\t}, false)\n\t}\n\n\tconst applicableSearchParams = useMemo(() => {\n\t\tconst _applicableFilters = {\n\t\t\t...applicableFilters,\n\t\t\tpage: 'page',\n\t\t}\n\t\tconst _current = Object.entries(_applicableFilters).reduce((acc, [key, _]) => {\n\t\t\tif (key === 'page') {\n\t\t\t\tconst _page = searchParams.get(key)\n\t\t\t\tacc[key] = isNaN(+_page) ? 0 : +_page\n\t\t\t} else if (searchParams.has(key)) {\n\t\t\t\tacc[key] = searchParams.get(key)\n\t\t\t}\n\t\t\treturn acc\n\t\t}, {})\n\t\treturn _current\n\t}, [applicableFilters, searchParams])\n\n\tconst updateQueryParams = useCallback(\n\t\t(page) => {\n\t\t\tconst existingsParams = [...searchParams.entries()].reduce(\n\t\t\t\t(acc, [key, val]) => ({\n\t\t\t\t\t...acc,\n\t\t\t\t\t[key]: val,\n\t\t\t\t}),\n\t\t\t\t{}\n\t\t\t)\n\t\t\tsetSearchParams({ ...existingsParams, page })\n\t\t},\n\t\t[searchParams, setSearchParams]\n\t)\n\n\tconst updateActions = useMemo(() => {\n\t\treturn {\n\t\t\t...actions,\n\t\t\tsetPage: (page) => {\n\t\t\t\tupdateQueryParams(page)\n\t\t\t\treturn {}\n\t\t\t},\n\t\t\tchangePage: (next) => {\n\t\t\t\tupdateQueryParams(next ? applicableSearchParams.page + 1 : applicableSearchParams.page - 1)\n\t\t\t\treturn {}\n\t\t\t},\n\t\t}\n\t}, [applicableSearchParams, updateQueryParams])\n\n\tuseEffect(() => {\n\t\tconst _applicableSearchParamsObject = new URLSearchParams(applicableSearchParams)\n\n\t\tif (hasChanged(previousSearchParams.current, _applicableSearchParamsObject)) {\n\t\t\tconst currentQuery = {\n\t\t\t\tpage: state.query.page,\n\t\t\t\t...state.query.filters,\n\t\t\t}\n\t\t\tif (currentQuery && !_applicableSearchParamsObject.toString()) {\n\t\t\t\tdispatch(\n\t\t\t\t\tactions.setQuery({\n\t\t\t\t\t\tpage: 0,\n\t\t\t\t\t\tfilters: null,\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t\tpreviousSearchParams.current = null\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (_applicableSearchParamsObject && _applicableSearchParamsObject.toString()) {\n\t\t\t\tconst _applicableFilters = {\n\t\t\t\t\t...applicableFilters,\n\t\t\t\t\tpage: 'page',\n\t\t\t\t}\n\t\t\t\tconst updateQuery = Object.entries(_applicableFilters).reduce((acc, [key, val]) => {\n\t\t\t\t\tif (_applicableSearchParamsObject.has(key)) {\n\t\t\t\t\t\tif (key === 'page') {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t...acc,\n\t\t\t\t\t\t\t\tpage: +_applicableSearchParamsObject.get(key),\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t...acc,\n\t\t\t\t\t\t\t\tfilters: {\n\t\t\t\t\t\t\t\t\t...(acc?.filters ?? {}),\n\t\t\t\t\t\t\t\t\t[val]: _applicableSearchParamsObject.get(key),\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn acc\n\t\t\t\t}, {})\n\t\t\t\tdispatch(actions.setQuery(updateQuery))\n\t\t\t}\n\t\t\tpreviousSearchParams.current = _applicableSearchParamsObject\n\t\t}\n\t}, [applicableSearchParams])\n\n\treturn [state, dispatch, updateActions]\n}\n\nexport default useTableReducer\n","import { displayAmount } from '@utils'\nimport { getData } from './Columns'\n\nexport const auctionQuotedAmountColumn = ({ key = '', label, userId, ...extras }) => ({\n\tlabel,\n\tkey: (row) => {\n\t\tconst data = getData(row, key, extras?.data) ?? []\n\t\tconst myQuote = data.find((_quote) => _quote?.buyer.user_id === userId)\n\t\tif (myQuote) {\n\t\t\tconst totalQuotationAmount = myQuote.total_quotation_amount\n\t\t\treturn {\n\t\t\t\ttotalQuotationAmount,\n\t\t\t}\n\t\t}\n\t},\n\trenderer: (data) => {\n\t\tif (!data) return '-'\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{displayAmount(data.totalQuotationAmount)}\n\t\t\t\n\t\t)\n\t},\n\t...extras,\n})\n\nexport const auctionYourBidColumn = ({ key = '', label, userId, ...extras }) => ({\n\tlabel,\n\tkey: (row) => {\n\t\tconst data = getData(row, key, extras?.data) ?? []\n\t\tconst myQuote = data.find((_quote) => _quote?.buyer.user_id === userId)\n\t\tif (myQuote) {\n\t\t\tconst quoteType = myQuote.quote_type\n\t\t\tconst quoteAmount = myQuote.quote_per_mt\n\t\t\treturn {\n\t\t\t\tquoteType,\n\t\t\t\tquoteAmount,\n\t\t\t}\n\t\t}\n\t},\n\trenderer: (data) => {\n\t\tif (!data) return '-'\n\t\treturn (\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\t{displayAmount(data.quoteAmount)}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t({data.quoteType})\n\t\t\t\t
\n\t\t\t\n\t\t)\n\t},\n\t...extras,\n})\n","import { strings } from '@constants'\n\nexport const FactoryColumn = () => [\n\t{\n\t\tlabel: strings('order', 'id'),\n\t\tkey: 'order_id',\n\t},\n\t{\n\t\tlabel: strings('order', 'date'),\n\t\tkey: 'order_date',\n\t},\n\t{\n\t\tlabel: strings('factory', 'id'),\n\t\tkey: 'factory_id',\n\t},\n\t{\n\t\tlabel: strings('partner'),\n\t\tkey: 'partner',\n\t},\n\t{\n\t\tlabel: strings('partner', 'contact'),\n\t\tkey: 'partner_contact',\n\t},\n\t{\n\t\tlabel: strings(['input', 'order', 'items']),\n\t\tkey: 'input_order_items',\n\t},\n\t{\n\t\tlabel: strings(['output', 'order', 'items']),\n\t\tkey: 'output_order_items',\n\t},\n\t{\n\t\tlabel: strings(['outgoing', 'order', 'id']),\n\t\tkey: 'outgoing_order_id',\n\t},\n\t{\n\t\tlabel: strings('status'),\n\t\tkey: 'status',\n\t},\n]\n\nexport const UserColumn = () => [\n\t{\n\t\tlabel: strings('user', 'id'),\n\t\tkey: 'user_id',\n\t},\n\t{\n\t\tlabel: strings('name'),\n\t\tkey: 'full_name',\n\t},\n\t{\n\t\tlabel: strings('mobile'),\n\t\tkey: 'mobile_number',\n\t},\n\t{\n\t\tlabel: strings('email', 'id'),\n\t\tkey: 'email_id',\n\t},\n\t{\n\t\tlabel: strings('organisation', 'name'),\n\t\tkey: 'organisation_name',\n\t},\n\t{\n\t\tlabel: strings('role'),\n\t\tkey: 'role',\n\t},\n\t{\n\t\tlabel: strings('remarks'),\n\t\tkey: 'remarks',\n\t},\n\t{\n\t\tlabel: strings(['is', 'user', 'active']),\n\t\tkey: 'is_user_active',\n\t},\n\t{\n\t\tlabel: strings('categories'),\n\t\tkey: 'categories',\n\t},\n]\n\nexport const OrdersColumn = () => [\n\t{\n\t\tlabel: strings('order', 'id'),\n\t\tkey: 'order_id',\n\t},\n\t{\n\t\tlabel: strings('order', 'date'),\n\t\tkey: 'order_date',\n\t},\n\t{\n\t\tlabel: strings('buyer'),\n\t\tkey: 'buyer',\n\t},\n\t{\n\t\tlabel: strings('buyer', 'contact'),\n\t\tkey: 'buyer_contact',\n\t},\n\t{\n\t\tlabel: strings('supplier'),\n\t\tkey: 'supplier',\n\t},\n\t{\n\t\tlabel: strings('products'),\n\t\tkey: 'products',\n\t},\n\t{\n\t\tlabel: strings('ordered_weight_mt'),\n\t\tkey: 'ordered_weight',\n\t},\n\t{\n\t\tlabel: strings('serviced_weight_mt'),\n\t\tkey: 'serviced_weight',\n\t},\n]\n\nexport const LedgersColumn = () => [\n\t{\n\t\tlabel: strings('date'),\n\t\tkey: 'transaction_date',\n\t},\n\t{\n\t\tlabel: strings('source'),\n\t\tkey: 'source',\n\t},\n\t{\n\t\tlabel: `${strings(['invoice_no', '/', 'transaction', 'number'])}`,\n\t\tkey: 'transaction_number',\n\t},\n\t{\n\t\tlabel: strings('transaction', 'type'),\n\t\tkey: 'transaction_type',\n\t},\n\t{\n\t\tlabel: strings('remarks'),\n\t\tkey: 'transaction_remarks',\n\t},\n\t{\n\t\tlabel: strings('amount'),\n\t\tkey: 'transaction_amount',\n\t},\n]\n\nexport const DuePaymentsColumn = () => [\n\t{\n\t\tlabel: strings('id'),\n\t\tkey: 'organisation_id',\n\t},\n\t{\n\t\tlabel: strings('organisation'),\n\t\tkey: 'organisation',\n\t},\n\t{\n\t\tlabel: strings('current'),\n\t\tkey: 'current',\n\t},\n\t{\n\t\tlabel: '0-7',\n\t\tkey: '0-7',\n\t},\n\t{\n\t\tlabel: '07-15',\n\t\tkey: '7-15',\n\t},\n\t{\n\t\tlabel: '15-30',\n\t\tkey: '15-30',\n\t},\n\t{\n\t\tlabel: '30-45',\n\t\tkey: '30-45',\n\t},\n\t{\n\t\tlabel: '45+',\n\t\tkey: '45+',\n\t},\n\t{\n\t\tlabel: strings('total'),\n\t\tkey: 'total',\n\t},\n\t{\n\t\tlabel: strings('interest'),\n\t\tkey: 'interest',\n\t},\n\t{\n\t\tlabel: strings('sales', 'person'),\n\t\tkey: 'sales_person',\n\t},\n\t{\n\t\tlabel: strings('region'),\n\t\tkey: 'region',\n\t},\n\t{\n\t\tlabel: strings('platform'),\n\t\tkey: 'platform',\n\t},\n]\n\nexport const PaymentPastRecordColumn = () => [\n\t{\n\t\tlabel: strings('zoho', 'name'),\n\t\tkey: 'zoho_name',\n\t},\n\t{\n\t\tlabel: strings('pan'),\n\t\tkey: 'pan',\n\t},\n\t{\n\t\tlabel: strings('formatted', 'date'),\n\t\tkey: 'formattedDate',\n\t},\n\t{\n\t\tlabel: strings('past', 'payment_terms'),\n\t\tkey: 'pastPaymentsTerms',\n\t},\n\t{\n\t\tlabel: strings('average_past_delays'),\n\t\tkey: 'averagePastDelays',\n\t},\n\t{\n\t\tlabel: strings('excess_ctc'),\n\t\tkey: 'excessCTC',\n\t},\n\t{\n\t\tlabel: strings('gmv'),\n\t\tkey: 'gmv',\n\t},\n\t{\n\t\tlabel: strings('gm'),\n\t\tkey: 'gm',\n\t},\n]\n\nexport const AdvanceToSupplierColumn = () => [\n\t{\n\t\tlabel: strings('id'),\n\t\tkey: 'organisation_id',\n\t},\n\t{\n\t\tlabel: strings('organisation'),\n\t\tkey: 'organisation',\n\t},\n\n\t{\n\t\tlabel: strings('total'),\n\t\tkey: 'total',\n\t},\n\n\t{\n\t\tlabel: strings('supply', 'person'),\n\t\tkey: 'supply_person',\n\t},\n\t{\n\t\tlabel: strings('region'),\n\t\tkey: 'region',\n\t},\n\t{\n\t\tlabel: strings('platform'),\n\t\tkey: 'platform',\n\t},\n\t{\n\t\tlabel: strings(['last', 'payment', 'Date']),\n\t\tkey: 'lastPaymentDate',\n\t},\n]\n\nexport const ActiveInvoices = () => [\n\t{\n\t\tlabel: strings('invoice_no'),\n\t\tkey: 'invoice_number',\n\t},\n\t{\n\t\tlabel: strings('original_invoice_number'),\n\t\tkey: 'original_invoice_number',\n\t},\n\t{\n\t\tlabel: strings('invoice', 'date'),\n\t\tkey: 'invoice_date',\n\t},\n\t{\n\t\tlabel: strings('order_id'),\n\t\tkey: 'order_id',\n\t},\n\t{\n\t\tlabel: strings('order_date'),\n\t\tkey: 'order_date',\n\t},\n\t{\n\t\tlabel: strings('buyer'),\n\t\tkey: 'buyer',\n\t},\n\t{\n\t\tlabel: strings('buyer_contact'),\n\t\tkey: 'buyer_contact',\n\t},\n\t{\n\t\tlabel: strings('vehicle', 'number'),\n\t\tkey: 'vehicle_number',\n\t},\n\t{\n\t\tlabel: strings('driver', 'number'),\n\t\tkey: 'driver_number',\n\t},\n\t{\n\t\tlabel: strings('serviced_weight'),\n\t\tkey: 'serviced_weight',\n\t},\n\t{\n\t\tlabel: strings('amount'),\n\t\tkey: 'amount',\n\t},\n\t{\n\t\tlabel: strings('status'),\n\t\tkey: 'status',\n\t},\n]\n\nexport const PastRecordColumn = () => [\n\t{ key: 'name', label: strings('name'), mobile: true, align: 'left', exportOnly: true },\n\t{ key: 'zoho_name', label: strings('zoho', 'name'), cellWidth: 15, mobile: true, align: 'left' },\n\t{ key: 'pan', label: strings('pan'), mobile: false, align: 'left' },\n\t{ key: 'zoho_contact_id', label: strings('zoho_contact'), mobile: false, align: 'left', exportOnly: true },\n\t{ key: 'formatted_date', label: strings('date'), mobile: false, align: 'left' },\n\t{ key: 'past_payments_terms', label: strings(['past', 'payments', 'terms']), cellWidth: 10, mobile: false, align: 'left' },\n\t{ key: 'average_past_delays', label: strings('average_past_delays'), cellWidth: 10, mobile: true, align: 'left' },\n\t{ key: 'excess_ctc', label: strings('excess_ctc'), mobile: true, align: 'left' },\n\t{ key: 'gmv', label: strings('gmv'), mobile: true, align: 'left' },\n\t{ key: 'gm', label: strings('gm'), mobile: true, align: 'left' },\n]\n\nexport const CollectionsColumn = () => [\n\t{\n\t\tlabel: strings('client'),\n\t\tkey: 'client',\n\t},\n\t{\n\t\tlabel: strings('amount'),\n\t\tkey: 'payment_amount',\n\t},\n\n\t{\n\t\tlabel: strings('mode_of_payment'),\n\t\tkey: 'payment_mode',\n\t},\n\n\t{\n\t\tlabel: strings('expected', 'date'),\n\t\tkey: 'expected_payment_date',\n\t},\n\t{\n\t\tlabel: strings('manager'),\n\t\tkey: 'manager',\n\t},\n\t{\n\t\tlabel: strings('region'),\n\t\tkey: 'region',\n\t},\n\t{\n\t\tlabel: strings('message'),\n\t\tkey: 'message',\n\t},\n\t{\n\t\tlabel: strings('status'),\n\t\tkey: 'status',\n\t},\n]\n\nexport const BillsColumn = () => [\n\t{\n\t\tlabel: strings('invoice', 'number'),\n\t\tkey: 'original_invoice_number',\n\t},\n\t{\n\t\tlabel: strings('invoice', 'amount'),\n\t\tkey: 'invoice_amount',\n\t},\n\t{\n\t\tlabel: strings('invoice', 'date'),\n\t\tkey: 'invoice_date',\n\t},\n\t{\n\t\tlabel: strings('organisation', 'name'),\n\t\tkey: 'organisation_name',\n\t},\n]\n\nexport const leadColumn = () => [\n\t{\n\t\tlabel: strings('created', 'at'),\n\t\tkey: 'created_at',\n\t},\n\t{\n\t\tlabel: strings('created', 'by'),\n\t\tkey: 'created_by',\n\t},\n\t{\n\t\tlabel: strings('mobile_number'),\n\t\tkey: 'mobile_number',\n\t},\n\t{\n\t\tlabel: strings('organisation', 'id'),\n\t\tkey: 'organisation_id',\n\t},\n\t{\n\t\tlabel: strings('organisation', 'name'),\n\t\tkey: 'organisation_name',\n\t},\n\t{\n\t\tlabel: strings('source'),\n\t\tkey: 'source',\n\t},\n\t{\n\t\tlabel: strings('status'),\n\t\tkey: 'status',\n\t},\n\t{\n\t\tlabel: strings('sales', 'manager'),\n\t\tkey: 'sales_manager',\n\t},\n\t{\n\t\tlabel: strings('business', 'category'),\n\t\tkey: 'business_category',\n\t},\n\t{\n\t\tlabel: strings('location'),\n\t\tkey: 'location',\n\t},\n]\nexport const OrderBooksColumn = () => [\n\t{\n\t\tlabel: '#SPO',\n\t\tkey: 'so_number',\n\t},\n\t{\n\t\tlabel: 'Supplier',\n\t\tkey: 'supplier_name',\n\t},\n\t{\n\t\tlabel: 'SPO Amount',\n\t\tkey: 'spo_amount',\n\t},\n\t{\n\t\tlabel: 'SPO Weight',\n\t\tkey: 'spo_quantity',\n\t},\n\t{\n\t\tlabel: '#Order',\n\t\tkey: 'order_id',\n\t},\n\t{\n\t\tlabel: 'Order Date',\n\t\tkey: 'order_date',\n\t},\n\t{\n\t\tlabel: '#Enquiry',\n\t\tkey: 'enquiry_id',\n\t},\n\t{\n\t\tlabel: '#PO',\n\t\tkey: 'po_number',\n\t},\n\t{\n\t\tlabel: 'Buyer',\n\t\tkey: 'customer_name',\n\t},\n\t{\n\t\tlabel: 'Region',\n\t\tkey: 'region',\n\t},\n\t{\n\t\tlabel: 'Platform',\n\t\tkey: 'platform',\n\t},\n\t{\n\t\tlabel: 'Terms',\n\t\tkey: 'payment_terms',\n\t},\n\t{\n\t\tlabel: 'Address',\n\t\tkey: 'shipping_address',\n\t},\n\t{\n\t\tlabel: 'Sales Person',\n\t\tkey: 'sales_person_name',\n\t},\n\t{\n\t\tlabel: 'SPOC',\n\t\tkey: 'supply_spoc_name',\n\t},\n\t{\n\t\tlabel: 'Order Weight',\n\t\tkey: 'ordered_weight',\n\t},\n\t{\n\t\tlabel: 'Order Amount',\n\t\tkey: 'ordered_amount',\n\t},\n\n\t{\n\t\tlabel: 'Serviced Amount',\n\t\tkey: 'serviced_amount',\n\t},\n\n\t{\n\t\tlabel: 'Serviced Weight',\n\t\tkey: 'serviced_weight',\n\t},\n\n\t{\n\t\tlabel: 'Pending weight',\n\t\tkey: 'pending_quantity',\n\t},\n\t{\n\t\tlabel: 'POD Tenure',\n\t\tkey: 'pod_tenure',\n\t},\n\t{\n\t\tlabel: 'Advance Tenure',\n\t\tkey: 'advance_tenure',\n\t},\n\t{\n\t\tlabel: 'LC Tenure',\n\t\tkey: 'lc_tenure',\n\t},\n]\n\nexport const monthlyTargetReportColumns = () => [\n\t{\n\t\tlabel: strings('full_name'),\n\t\tkey: 'full_name',\n\t},\n\t{\n\t\tlabel: strings('region'),\n\t\tkey: 'region',\n\t},\n\t{\n\t\tlabel: strings('manager_name'),\n\t\tkey: 'manager_name',\n\t},\n\t{\n\t\tlabel: strings(['monthly_target']),\n\t\tkey: 'monthly_target',\n\t},\n\t{\n\t\tlabel: strings(['target_achieved']),\n\t\tkey: 'target_achieved',\n\t},\n\t{\n\t\tlabel: strings('percentage'),\n\t\tkey: 'percentage',\n\t},\n\t{\n\t\tlabel: 'Order Book (in MT)',\n\t\tkey: 'pending_quantity',\n\t},\n\t{\n\t\tlabel: 'Order Book (in Rs)',\n\t\tkey: 'pending_quantity_in_rupees',\n\t},\n]\n","import Table from './Table'\nimport * as cols from './TableUtils/Columns'\nimport _useTableReducer from './TableUtils/useTableReducer'\nimport * as AuctionCols from './TableUtils/AuctionColumn'\nimport * as ExportCols from './TableUtils/ExportColumns'\n\n\nexport const Columns = cols\nexport const useTableReducer = _useTableReducer\nexport default Table\nexport const auctionColumns = AuctionCols\nexport const exportColumns = ExportCols\n\n","import styled, { css } from 'styled-components'\nimport { Spacings, Text } from '@styles'\nimport { Button } from '@base'\nimport { Delete } from '@material-ui/icons'\n\nconst Wrapper = styled.div`\n\tpadding: ${Spacings.SPACING_2B} ${Spacings.SPACING_3B};\n\tbackground: ${({ theme }) => theme.palette.background.blueLightest};\n\tborder-radius: ${Spacings.SPACING_2B};\n\twidth: 100%;\n\theight: 100%;\n`\n\nconst Item = styled.span`\n\tfont-size: ${({ uppercase }) => (uppercase ? Text.SMALL : Text.MEDIUM)};\n\tdisplay: inline-block;\n\tcolor: ${({ theme }) => theme.palette.text.darkblack};\n\tmargin-bottom: ${({ marginBottom }) => (marginBottom ? Spacings.SPACING_1B : 0)};\n\ttext-transform: ${({ uppercase }) => (uppercase ? 'uppercase' : '')};\n\tfont-weight: ${({ uppercase }) => (uppercase ? '600' : '500')};\n`\n\nconst AddressHead = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n`\n\nconst IconWrapper = styled(Button)`\n\tpadding: 0 ${Spacings.SPACING_2B};\n\theight: ${Spacings.SPACING_6B};\n\twidth: ${Spacings.SPACING_6B};\n\tmin-width: 0;\n\tmargin: 0 ${Spacings.SPACING_1B};\n\tmin-height: 0;\n`\n\nconst AddressIdWrapper = styled.div`\n\tfont-size: ${Text.SMALL};\n\tfont-weight: ${Text.BOLD_600};\n\tcolor: ${({ theme }) => theme.palette.text.label};\n\tdisplay: inline-block;\n\tmargin-bottom: ${Spacings.SPACING_2B};\n`\n\nconst AddressCard = ({ data, showAddress = true, showDelete = false, callback = null, showAddressId = true }) => {\n\treturn (\n\t\t\n\t\t\t{showAddressId && {`Address Id : ${data?.address_id ?? 'N/A'}`}}\n\t\t\t{showAddress && (\n\t\t\t\t\n\t\t\t\t\t- {data?.complete_address}
\n\t\t\t\t\t
\n\t\t\t\t\t{showDelete && (\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t\n\t\t\t)}\n\t\t\t- {data?.city},
\n\t\t\t- {data?.state} -
\n\t\t\t- {data?.pincode}
\n\t\t\n\t)\n}\n\nexport default AddressCard\n","import styled from 'styled-components'\nimport { Check } from '@material-ui/icons'\nimport { Devices, Spacings, Text } from '@styles'\n\nconst StepperWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: center;\n\tuser-select: none;\n`\nconst StepWrapper = styled.div`\n\tdisplay: flex;\n\tflex: 1;\n\talign-items: center;\n\tmax-width: 15rem;\n`\n\nconst Label = styled.span`\n\tmargin-left: ${Spacings.SPACING_2B};\n\twidth: fit-content;\n\tcolor: rgba(0, 0, 0, 0.87);\n\tcolor: ${({ alive, theme }) => (alive ? theme.palette.text.black : '#00000099')};\n\tfont-weight: ${({ alive, theme }) => (alive ? Text.BOLD_600 : Text.BOLD_500)};\n\tfont-size: ${Text.EXTRA_SMALL};\n\tline-height: 1.43;\n\tletter-spacing: 0.01071em;\n\tdisplay: block;\n\ttransition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n\t@media ${Devices.tablet} {\n\t\tfont-size: ${Text.SMALL};\n\t}\n`\nconst StepDot = styled.span`\n\tflex-shrink: 0;\n\tdisplay: flex;\n\tmin-height: 1.125rem;\n\tmin-width: 1.125rem;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 50%;\n\tbackground: ${({ alive, theme }) => (alive ? theme.palette.background.blue : '#00000099')};\n\tcolor: ${({ theme }) => theme.palette.text.white};\n\tfont-size: ${Text.EXTRA_SMALL};\n\t& > svg {\n\t\tfont-size: ${Text.EXTRA_SMALL};\n\t}\n\n\t@media ${Devices.tablet} {\n\t\tmin-height: 1.25rem;\n\t\tmin-width: 1.25rem;\n\t\tfont-size: ${Text.SMALL};\n\t\t& > svg {\n\t\t\tfont-size: ${Text.SMALL};\n\t\t}\n\t}\n`\nconst StepConnector = styled.div`\n\tflex: 1 1 auto;\n\n\t& > span {\n\t\tdisplay: block;\n\t\tborder-color: ${({ theme }) => theme.palette.background.border};\n\t\tborder-top-style: solid;\n\t\tborder-top-width: 1px;\n\t}\n`\nconst StepLabel = styled.span`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tpointer-events: none;\n\tpadding: 0 ${Spacings.SPACING_2B};\n`\n\nconst Step = ({ data, isFirst, isLast, active, done }) => (\n\t\n\t\t{!isFirst && (\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t)}\n\t\t\n\t\t\t{done ? : data.id}\n\t\t\t\n\t\t\n\t\t{!isLast && (\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t)}\n\t\n)\n\nconst Stepper = ({ steps, selectedStep }) => {\n\treturn (\n\t\t\n\t\t\t{steps.map((step, index) => (\n\t\t\t\t\n\t\t\t))}\n\t\t\n\t)\n}\n\nexport default Stepper\n","import styled, { css } from 'styled-components'\nimport { Spacings, Devices, Text } from '@styles'\nimport { Link } from '../../'\nimport { useEffect, useState } from 'react'\n\nconst TabsWrapper = styled.section`\n\tdisplay: flex;\n\tmin-height: 2.25rem;\n\tbackground: ${({ theme }) => theme.palette.background.white};\n\toverflow: hidden;\n\n\toverflow-x: scroll;\n\n\t/* Hide scrollbar for Chrome, Safari and Opera */\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\t/* Hide scrollbar for IE, Edge and Firefox */\n\t& {\n\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\tscrollbar-width: none; /* Firefox */\n\t}\n\n\twidth: fit-content;\n\tborder-radius: ${Spacings.SPACING_2B};\n`\nconst Tab = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: ${Spacings.SPACING_2B} ${Spacings.SPACING_4B};\n\tfont-size: ${Text.MEDIUM};\n\tfont-weight: ${Text.BOLD_500};\n\tletter-spacing: 0.2px;\n\tflex-basis: 100%;\n\tbackground: ${({ theme }) => theme.palette.background.white};\n\tcolor: ${({ theme }) => theme.palette.text.darkblack};\n\tcursor: pointer;\n\ttransition: color 0.15s ease-in-out;\n\theight: 100%;\n\tborder: 1px solid ${({ theme }) => theme.palette.background.white};\n\n\t${({ first }) => {\n\t\tif (first) {\n\t\t\treturn css`\n\t\t\t\tborder-top-left-radius: ${Spacings.SPACING_2B};\n\t\t\t\tborder-bottom-left-radius: ${Spacings.SPACING_2B};\n\t\t\t`\n\t\t}\n\t}}\n\t${({ last }) => {\n\t\tif (last) {\n\t\t\treturn css`\n\t\t\t\tborder-top-right-radius: ${Spacings.SPACING_2B};\n\t\t\t\tborder-bottom-right-radius: ${Spacings.SPACING_2B};\n\t\t\t`\n\t\t}\n\t}}\n \n\t${({ selected }) => {\n\t\tif (selected) {\n\t\t\treturn css`\n\t\t\t\tbackground: ${({ theme }) => theme.palette.background.blue + '01'};\n\t\t\t\tborder-color: ${({ theme }) => theme.palette.text.blue};\n\t\t\t\tcolor: ${({ theme }) => theme.palette.text.blue};\n\t\t\t`\n\t\t} else {\n\t\t\treturn css`\n\t\t\t\t&:hover {\n\t\t\t\t\tcolor: ${({ theme }) => theme.palette.text.darkblack};\n\t\t\t\t\tbox-shadow: 0 ${Spacings.SPACING_1B} ${Spacings.SPACING_5B} 0 rgb(0 0 0 / 5%);\n\t\t\t\t\tclip-path: inset(0px -${Spacings.SPACING_5B} 0px 0px);\n\t\t\t\t}\n\t\t\t`\n\t\t}\n\t}}\n\tmin-width: max-content;\n\twidth: max-content;\n\n\t${({ styles }) => styles}\n`\n\nconst Tabs = ({ data, ...props }) => {\n\tconst [selectedTab, setSelectedTab] = useState()\n\n\tuseEffect(() => {\n\t\tif (selectedTab instanceof HTMLElement) {\n\t\t\t!props?.fixed && selectedTab.scrollIntoView({ behavior: 'smooth' })\n\t\t}\n\t}, [selectedTab])\n\n\treturn (\n\t\t\n\t\t\t{data\n\t\t\t\t.filter((tab) => !tab.hide)\n\t\t\t\t.map((tab, index) => {\n\t\t\t\t\tif (tab.href) {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t tab.selected && setSelectedTab(_ref)}\n\t\t\t\t\t\t\t\t\tstyles={tab?.styles}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{tab.label}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t tab.selected && setSelectedTab(_ref)}\n\t\t\t\t\t\t\tkey={`tab=${index}`}\n\t\t\t\t\t\t\tstyles={tab?.styles}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{tab.label}\n\t\t\t\t\t\t\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\n\t)\n}\n\nexport default Tabs\n","import React from 'react'\nimport styled, { withTheme, css } from 'styled-components'\nimport { NewReleases } from '@material-ui/icons'\nimport { Button, Pill } from '../'\nimport { Devices, Spacings, Text } from '@styles'\nimport { strings } from '@constants'\n\nconst EnquiryItemWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder-radius: ${Spacings.SPACING_3B};\n\tbackground: linear-gradient(180deg, rgba(234, 241, 250, 1) 0%, rgba(255, 254, 254, 1) 68%);\n\tborder: 1px solid rgba(234, 241, 250, 1);\n\tmargin-bottom: ${Spacings.SPACING_3B};\n\ttransition: all 0.2s cubic-bezier(0, 0, 0.2, 1);\n\t// box-shadow: 0px ${Spacings.SPACING_1B} ${Spacings.SPACING_3B} 0.125rem ${({ theme }) => theme.palette.background.blue + '17'};\n\t${({ clickable }) => {\n\t\tif (clickable) {\n\t\t\treturn css`\n\t\t\t\tcursor: pointer;\n\t\t\t\t&:hover {\n\t\t\t\t\tborder-color: ${({ theme }) => theme.palette.background.blue};\n\t\t\t\t}\n\t\t\t`\n\t\t}\n\t}}\n\t${({ showBorder }) => {\n\t\tif (showBorder) {\n\t\t\treturn css`\n\t\t\t\tborder-color: ${({ theme }) => theme.palette.background.blue};\n\t\t\t`\n\t\t}\n\t}}\n`\n\nconst InfoWrapper = styled.div`\n\tmargin: ${Spacings.SPACING_3B} ${Spacings.SPACING_2B} ${Spacings.SPACING_2B};\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tflex-grow: 1;\n\tuser-select: none;\n\n\t${({ tablerView }) => {\n\t\tif (tablerView) {\n\t\t\treturn css`\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\t@media ${Devices.mobile} {\n\t\t\t\t\tflex-wrap: nowrap;\n\t\t\t\t}\n\t\t\t`\n\t\t}\n\t}}\n`\n\nconst BottomPanel = styled.div``\n\nconst ItemInfoWrapper = styled.div`\n\twidth: 50%;\n\n\t${({ small, extraSmall, medium }) => {\n\t\tif (small) {\n\t\t\treturn css`\n\t\t\t\twidth: 50%;\n\t\t\t`\n\t\t}\n\n\t\tif (extraSmall) {\n\t\t\treturn css`\n\t\t\t\twidth: 40%;\n\t\t\t\t@media ${Devices.mobile} {\n\t\t\t\t\twidth: 25%;\n\t\t\t\t}\n\t\t\t`\n\t\t}\n\n\t\tif (medium) {\n\t\t\treturn css`\n\t\t\t\twidth: 50%;\n\t\t\t\t@media ${Devices.mobile} {\n\t\t\t\t\twidth: 33%;\n\t\t\t\t}\n\t\t\t`\n\t\t}\n\t\treturn css`\n\t\t\t@media ${Devices.tablet} {\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t@media ${Devices.laptop} {\n\t\t\t\twidth: 25%;\n\t\t\t}\n\t\t\t@media ${Devices.desktop} {\n\t\t\t\twidth: 16.6%;\n\t\t\t}\n\t\t`\n\t}}\n`\n\nconst InnerWrapper = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\tjustify-content: center;\n\tflex-direction: column;\n\tpadding: ${Spacings.SPACING_1B} ${Spacings.SPACING_2B};\n\tmargin-bottom: ${Spacings.SPACING_2B};\n\tmargin-right: ${Spacings.SPACING_2B};\n`\n\nconst ItemInfoLabel = styled.div`\n\tfont-size: ${Text.EXTRA_SMALL};\n\tcolor: ${({ theme }) => theme.palette.text.label};\n\ttext-transform: uppercase;\n\tline-height: 1.6;\n\tdisplay: flex;\n\talign-items: center;\n`\nconst ItemInfoValue = styled.div`\n\tfont-size: ${Text.MEDIUM};\n\tcolor: ${({ theme }) => theme.palette.text.primary};\n\n\t${({ overflow, wrap }) => {\n\t\tif (!overflow) {\n\t\t\treturn css`\n\t\t\t\twhite-space: ${wrap ? 'unset' : 'nowrap'};\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t`\n\t\t}\n\t}}\n`\nconst ActionViewText = styled(Button)``\nconst ViewMessageText = styled.span`\n\tcolor: ${({ theme, isBrand }) => !isBrand && theme.palette.text.blue};\n\tdisplay: inline-block;\n\tposition: relative;\n\tcursor: pointer;\n\n\t& > span {\n\t\tvisibility: hidden;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t\tbottom: 110%;\n\t\tleft: 50%;\n\t\ttransform: translateX(-30%);\n\t\tpadding: ${Spacings.SPACING_2B};\n\t\tfont-size: ${Text.SMALL};\n\t\tbackground: ${({ theme }) => theme.palette.background.white};\n\t\tcolor: ${({ theme }) => theme.palette.text.black};\n\t\tbox-shadow: 0 ${Spacings.SPACING_1B} ${Spacings.SPACING_5B} 0 rgb(0 0 0 / 5%);\n\t\tborder-radius: ${Spacings.SPACING_2B};\n\t\ttransition: all 0.15s ease-in;\n\t\tdisplay: inline-block;\n\t\twidth: max-content;\n\t\tmax-width: 180px;\n\t\tmax-height: 120px;\n\t\toverflow: scroll;\n\t\tcursor: initial;\n\n\t\t/* Hide scrollbar for Chrome, Safari and Opera */\n\t\t&::-webkit-scrollbar {\n\t\t\tdisplay: none;\n\t\t}\n\t\t/* Hide scrollbar for IE, Edge and Firefox */\n\t\t& {\n\t\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\t\tscrollbar-width: none; /* Firefox */\n\t\t}\n\n\t\t@media ${Devices.tablet} {\n\t\t\tleft: 0;\n\t\t\ttransform: translateX(-10%);\n\t\t}\n\t}\n\n\t&:hover {\n\t\t& > span {\n\t\t\tvisibility: visible;\n\t\t\topacity: 1;\n\t\t}\n\t}\n`\n\nconst IconWrapper = styled.div`\n\tdisplay: flex;\n\tmargin-left: ${Spacings.SPACING_1B};\n\t& > svg {\n\t\tfont-size: ${Text.LARGE};\n\t}\n`\n\nconst MessageView = ({ text }) => {\n\treturn (\n\t\t\n\t\t\tView\n\t\t\t{text}\n\t\t\n\t)\n}\n\nconst BrandView = ({ text, hiddenText }) => {\n\treturn (\n\t\t\n\t\t\t{text}\n\t\t\t{hiddenText}\n\t\t\n\t)\n}\n\nconst HighLightIcon = withTheme(({ theme }) => (\n\t\n\t\t\n\t\n))\n\nconst redirectAction = (actionUrl) => (e) => {\n\te.stopPropagation()\n\tconst a = window.open(actionUrl)\n\ta.focus()\n}\n\nconst ItemCard = ({\n\tdata,\n\tid = Math.random() * 1000,\n\tsmall,\n\textraSmall,\n\tmedium,\n\tclickable,\n\tclickHandler,\n\trenderBottomPanel,\n\tshowBorder,\n\trowData = false,\n\ttablerView = false,\n}) => {\n\tconst viewClickHandler = () => {\n\t\tif (clickable) {\n\t\t\tif (rowData) return clickHandler(data)\n\t\t\treturn clickHandler(id)\n\t\t}\n\t}\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{data.map(({ label, value, isMessage, highlight, actionUrl, wrap }, index) => {\n\t\t\t\t\tlet overflow = isMessage && value?.length > 12\n\t\t\t\t\tif (overflow) {\n\t\t\t\t\t\tvalue = \n\t\t\t\t\t}\n\n\t\t\t\t\tif ([strings('brands'), strings('preferred_brand')].includes(label)) {\n\t\t\t\t\t\toverflow = true\n\t\t\t\t\t\tvalue = value?.length > 20 ? : value\n\t\t\t\t\t}\n\n\t\t\t\t\tif (label.replace(/\\s/g, '_').toLowerCase() === 'quote_per_kg') {\n\t\t\t\t\t\tif (value !== '-' && value !== '--') {\n\t\t\t\t\t\t\tvalue = {value}} uppercase={false} status={'quote_per_kg'} />\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tif (actionUrl) {\n\t\t\t\t\t\tvalue = (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t{highlight && }\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t\n\t\t\t{renderBottomPanel && {renderBottomPanel}}\n\t\t\n\t)\n}\n\nexport default ItemCard\n","import styled, { css } from 'styled-components'\nimport { ArrowBackIos } from '@material-ui/icons'\nimport { useNavigate } from 'react-router-dom'\nimport { Spacings, Devices, Text } from '@styles'\n\nconst BackButtonWrapper = styled.span`\n\tjustify-content: center;\n\talign-items: center;\n\tbackground: white;\n\tpadding: ${Spacings.SPACING_2B};\n\tcursor: pointer;\n\tcolor: ${({ theme }) => theme.palette.text.black};\n\tmargin: ${({ margin }) => margin || `0 ${Spacings.SPACING_1B} 0 0`};\n\tfont-size: ${Text.MEDIUM};\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\n\t& > svg {\n\t\tfont-size: ${Text.MEDIUM};\n\t}\n\n\t${({ mobile, desktop }) => {\n\t\tif (mobile) {\n\t\t\treturn css`\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\t@media ${Devices.laptop} {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`\n\t\t}\n\n\t\tif (desktop) {\n\t\t\treturn css`\n\t\t\t\tdisplay: none;\n\t\t\t\t@media ${Devices.laptop} {\n\t\t\t\t\tdisplay: inline-flex;\n\n\t\t\t\t\t& > svg {\n\t\t\t\t\t\tfont-size: ${Text.M_LARGE};\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t`\n\t\t}\n\t}};\n`\n\nconst BackButton = ({ margin, clickHandler, mobile, desktop, backHandler }) => {\n\tconst navigate = useNavigate()\n\tconst backClick = () => {\n\t\tif (typeof backHandler === 'function') {\n\t\t\tbackHandler()\n\t\t} else {\n\t\t\tnavigate(-1)\n\t\t\tclickHandler && clickHandler()\n\t\t}\n\t}\n\treturn (\n\t\t\n\t\t\t\n\t\t\t{mobile && Back}\n\t\t\n\t)\n}\n\nexport default BackButton\n","import styled, { css } from 'styled-components'\nimport { strings } from '@constants'\nimport logoIconNew from '@assets/login/_logo.png'\nimport logoIcon from '@assets/login/logo.png'\nimport { Devices, Spacings, Text } from '@styles'\n\nconst Wrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: ${({ horizontal }) => (horizontal ? 'row' : 'column')};\n\talign-items: center;\n\tuser-select: none;\n\tcursor: ${({ clickable }) => (clickable ? 'pointer' : 'initial')};\n`\nconst Img = styled.img`\n\twidth: ${({ size }) => size ?? '3.75rem'};\n`\nconst LogoText = styled.span`\n\tfont-size: ${({ isLogin }) => (isLogin ? Text.LARGE : Text.SMALL)};\n\tfont-weight: ${Text.BOLD_600};\n\tcolor: ${({ theme, isLogin }) => (isLogin ? theme.palette.text.white : theme.palette.text.messageRed)};\n\t${({ horizontal }) => {\n\t\tif (horizontal) {\n\t\t\treturn css`\n\t\t\t\tmargin-left: ${Spacings.SPACING_3B};\n\t\t\t\tfont-size: ${Text.LARGE};\n\t\t\t`\n\t\t}\n\t\treturn css`\n\t\t\tmargin-top: ${Spacings.SPACING_2B};\n\t\t`\n\t}}\n\t& > span {\n\t\tfont-weight: normal;\n\t}\n`\nconst PrivacyPolicyWrapper = styled.div`\n\tfont-size: ${Text.SMALL};\n\t${({ IsExtraSmall }) => {\n\t\tif (IsExtraSmall) {\n\t\t\treturn css`\n\t\t\t\tfont-size: ${Text.EXTRA_SMALL};\n\t\t\t`\n\t\t}\n\t}}\n\ttext-align: center;\n\tcolor: ${({ theme }) => theme.palette.text.darkblack};\n\tmargin-top: ${Spacings.SPACING_4B};\n\tdisplay: none;\n\t@media ${Devices.mobile} {\n\t\tdisplay: block;\n\t}\n`\n\nconst Logo = ({ size, horizontal = false, clickHandler, isLogin = false }) => {\n\tif (isLogin) {\n\t\t\treturn (\n\t\t\t\t clickHandler && clickHandler()}>\n\t\t\t\t\t
\n\t\t\t\t\t{strings('new_buy_sell_steel')}\n\t\t\t\t\n\t\t\t)\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t clickHandler && clickHandler()}>\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tMETAL\n\t\t\t\t\t\tBOOK\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)\n\t\t}\n\t\n}\n\nexport default Logo\n","import styled from 'styled-components'\nimport { BarChart } from '@material-ui/icons'\nimport { H4 } from '../basic/Headings'\nimport { Spacings, Text } from '@styles'\n\nconst Wrapper = styled.div`\n\tbackground: ${({ theme }) => theme.palette.background.white};\n\tborder-radius: ${Spacings.SPACING_2B};\n\toverflow: hidden;\n`\nconst Header = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\n\tpadding: ${Spacings.SPACING_2B} ${Spacings.SPACING_3B};\n\tbackground: ${({ theme }) => theme.palette.background.blue};\n\tcolor: ${({ theme }) => theme.palette.text.white};\n\n\t& > svg {\n\t\tfont-size: ${Text.X_LARGE};\n\t\tmargin-right: ${Spacings.SPACING_1B};\n\t}\n`\nconst Body = styled.div`\n\theight: 100px;\n`\n\nconst IconWrapper = styled.div``\n\nconst SummaryCard = ({ heading }) => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t{heading ?? 'Summary'}
\n\t\t\t\n\t\t\t\n\t\t\n\t)\n}\n\nexport default SummaryCard\n","import { SearchOutlined } from '@material-ui/icons'\nimport { useMemo } from 'react'\nimport { useSearchParams } from 'react-router-dom'\nimport styled from 'styled-components'\nimport { Devices, Spacings, Text } from '@styles'\n\nconst SearchButtonWrapper = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: pointer;\n\tfont-size: ${Text.MEDIUM};\n\tpadding: 0 ${Spacings.SPACING_3B};\n\tbox-shadow: 0 ${Spacings.SPACING_1B} ${Spacings.SPACING_5B} 0 rgb(0 0 0 / 5%);\n\tborder-radius: 50%;\n\tborder-width: 1px;\n\tborder-style: solid;\n\tborder-color: ${({ theme }) => theme.palette.background.blue};\n\tcolor: ${({ theme }) => theme.palette.text.blue};\n\tbackground: ${({ theme }) => theme.palette.background.white};\n\ttransition: background 0.15s ease-in;\n\theight: 2.125rem;\n\twidth: 2.125rem;\n\n\t&:hover {\n\t\tbackground: ${({ theme }) => theme.palette.background.blueLight};\n\t\tcolor: ${({ theme }) => theme.palette.text.white};\n\t}\n\n\t& > span {\n\t\tdisplay: none;\n\t}\n\n\t@media ${Devices.tablet} {\n\t\tborder-radius: ${Spacings.SPACING_2B};\n\t\twidth: fit-content;\n\t\t& > span {\n\t\t\tdisplay: initial;\n\t\t\tmargin-left: ${Spacings.SPACING_1B};\n\t\t}\n\t}\n\n\t& > svg {\n\t\tfont-size: ${Text.X_LARGE};\n\t}\n`\n\nconst RedDot = styled.div`\n\twidth: ${Spacings.SPACING_2B};\n\theight: ${Spacings.SPACING_2B};\n\tborder-radius: 50%;\n\tbackground: ${({ theme }) => theme.palette.background.messageRed};\n\tposition: absolute;\n\ttop: 0;\n\tright: -${Spacings.SPACING_1B};\n`\n\nconst Search = ({ clickHandler, disabled = false }) => {\n\tconst [searchParams] = useSearchParams()\n\n\tconst hasSearchParameters = useMemo(() => {\n\t\tif (searchParams.has('page')) {\n\t\t\tsearchParams.delete('page')\n\t\t}\n\n\t\treturn !!searchParams.toString()\n\t}, [searchParams])\n\n\tconst onClickHandler = () => { \n\t\tif(disabled) return\n\t\tclickHandler()\n\t}\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\tSearch\n\t\t\t{hasSearchParameters && }\n\t\t\n\t)\n}\n\nexport default Search\n","import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useDispatch } from 'react-redux'\nimport { useSearchParams } from 'react-router-dom'\nimport styled from 'styled-components'\nimport {\n\tCOLLECTION_STATUS,\n\tORG_ROLES,\n\tREGION_TYPES,\n\tenquiryPlatform,\n\tauctionStatus,\n\tenquiryStatus,\n\tpastRecordTypes,\n\tsearchFilter,\n\ttransactionSourceStatus,\n\ttransactionTypeStatus,\n\tzohoStatusFilter,\n\tLEADS_STATUS,\n\tLEADS_SOURCE,\n\tLEADS_INDUSTRY,\n\tLEAD_TYPE,\n\tMB_ROLES,\n} from '@constants'\nimport { toggleDrawer } from '@data/state/action/root'\nimport { Spacings } from '@styles'\nimport { useEnter } from '@hooks'\nimport { Button, Input, Select, Calendar, MultiSelect } from '@base'\nimport { DrawerBodyWrapper, DrawerFooterWrapper } from '../../styled'\nimport { roles } from '@constants'\nimport { commodityLocation, commodityProductName, commoditySource } from '@pages/Admin/CommodityPrices'\n\nconst InputWrapper = styled.div`\n\tpadding: ${Spacings.SPACING_1B} 0;\n\n\t& > div {\n\t\twidth: 100%;\n\t}\n\t& > div > input {\n\t\tborder-color: ${({ borderDefault, theme }) => borderDefault && theme.palette.background.blue};\n\t}\n`\n\nconst SectionItemWrapper = styled.div`\n\tflex-shrink: unset;\n\tflex-basis: 100%;\n\t& > div {\n\t\twidth: 100%;\n\t}\n`\n\nconst SectionItemWrapperWithTwoItems = styled(SectionItemWrapper)`\n\tdisplay: flex;\n\talign-items: center;\n\t& > div {\n\t\tflex-grow: 1;\n\t\tflex-basis: 50%;\n\t\t&:nth-child(2) {\n\t\t\tmargin-left: 12px;\n\t\t}\n\t}\n`\n\nconst enquirySearch = {\n\tenquiry_id: {\n\t\tid: 'enquiry_id',\n\t\tlabel: 'Enquiry Id',\n\t\tplaceholder: 'Enter enquiry Id',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tenquiry_date: {\n\t\tid: 'enquiry_date',\n\t\tlabel: 'From',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\texpiry_date: {\n\t\tid: 'expiry_date',\n\t\tlabel: 'To',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tproduct_name: {\n\t\tid: 'product_name',\n\t\tlabel: 'Product name',\n\t\tplaceholder: 'Enter product name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tlocation: {\n\t\tid: 'location',\n\t\tlabel: 'Delivery location',\n\t\tplaceholder: 'Enter delivery location or use ',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\torganisation: {\n\t\tid: 'organisation',\n\t\tlabel: 'Buyer / Supplier',\n\t\tplaceholder: 'Enter Name / Mobile / Id',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\trelationship_manager: {\n\t\tid: 'relationship_manager',\n\t\tlabel: 'Relationship manager',\n\t\tplaceholder: 'Enter Name / Mobile / Id',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tenquiry_status: {\n\t\tid: 'enquiry_status',\n\t\tlabel: 'Enquiry status',\n\t\tplaceholder: 'Enter enquiry status',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst enquiryAssignOrdersSearch = {\n\tenquiry_id: {\n\t\tid: 'enquiry_id',\n\t\tlabel: 'Enquiry Id',\n\t\tplaceholder: 'Enter enquiry Id',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tenquiry_date: {\n\t\tid: 'enquiry_date',\n\t\tlabel: 'Enquiry date',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tproduct_name: {\n\t\tid: 'product_name',\n\t\tlabel: 'Product name',\n\t\tplaceholder: 'Enter product name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tlocation: {\n\t\tid: 'location',\n\t\tlabel: 'Delivery location',\n\t\tplaceholder: 'Enter delivery location',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\trelationship_manager: {\n\t\tid: 'relationship_manager',\n\t\tlabel: 'Relationship manager',\n\t\tplaceholder: 'Enter relationship manager',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst enquiryOrdersSearch = (searchType) => {\n\treturn {\n\t\torder_id: {\n\t\t\tid: 'order_id',\n\t\t\tlabel: 'Order Id',\n\t\t\tplaceholder: 'Enter order Id',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tenquiry_id: {\n\t\t\tid: 'enquiry_id',\n\t\t\tlabel: 'Enquiry Id',\n\t\t\tplaceholder: 'Enter enquiry Id',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tfrom: {\n\t\t\tid: 'from',\n\t\t\tlabel: 'From',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tto: {\n\t\t\tid: 'to',\n\t\t\tlabel: 'To',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tproduct_name: {\n\t\t\tid: 'product_name',\n\t\t\tlabel: 'Product name',\n\t\t\tplaceholder: 'Enter product name',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tlocation: {\n\t\t\tid: 'location',\n\t\t\tlabel: 'Delivery location',\n\t\t\tplaceholder: 'Enter delivery location or use ',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\torganisation: {\n\t\t\tid: 'organisation',\n\t\t\tlabel: 'Buyer / Supplier',\n\t\t\tplaceholder: 'Enter Name / Mobile / Id',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\trelationship_manager: {\n\t\t\tid: 'relationship_manager',\n\t\t\tlabel: 'Relationship manager',\n\t\t\tplaceholder: 'Enter Name / Mobile / Id',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tpo_number: {\n\t\t\tid: 'po_number',\n\t\t\tlabel: 'Buyer / Supplier',\n\t\t\tplaceholder: 'Search by PO / Invoice number',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t}\n}\n\nconst activeVoiceSearch = (searchType) => {\n\treturn {\n\t\torder_id: {\n\t\t\tid: 'order_id',\n\t\t\tlabel: 'Order Id',\n\t\t\tplaceholder: 'Enter order Id',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tbuyer_name: {\n\t\t\tid: 'buyer_name',\n\t\t\tlabel: 'Buyer name/Phone',\n\t\t\tplaceholder: 'Enter buyer name',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\n\t\tinvoice_number: {\n\t\t\tid: 'invoice_number',\n\t\t\tlabel: 'Invoice number',\n\t\t\tplaceholder: 'Enter invoice number',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tvehicle_number: {\n\t\t\tid: 'vehicle_number',\n\t\t\tlabel: 'Vehicle number',\n\t\t\tplaceholder: 'Enter vehicle number',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tdriver_number: {\n\t\t\tid: 'driver_number',\n\t\t\tlabel: 'Driver number',\n\t\t\tplaceholder: 'Enter Driver number',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t}\n}\n\nconst auctionOrdersSearch = (searchType) => {\n\treturn {\n\t\torder_id: {\n\t\t\tid: 'order_id',\n\t\t\tlabel: 'Order Id',\n\t\t\tplaceholder: 'Enter order Id',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tlisting_id: {\n\t\t\tid: 'listing_id',\n\t\t\tlabel: 'Listing Id',\n\t\t\tplaceholder: 'Enter listing Id',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tfrom: {\n\t\t\tid: 'from',\n\t\t\tlabel: 'From',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tto: {\n\t\t\tid: 'to',\n\t\t\tlabel: 'To',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tproduct_name: {\n\t\t\tid: 'product_name',\n\t\t\tlabel: 'Product name',\n\t\t\tplaceholder: 'Enter product name',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tbuyer_name: {\n\t\t\tid: 'buyer_name',\n\t\t\tlabel: 'Buyer name',\n\t\t\tplaceholder: 'Enter buyer name',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\trelationship_manager: {\n\t\t\tid: 'relationship_manager',\n\t\t\tlabel: 'Relationship manager',\n\t\t\tplaceholder: 'Enter relationship manager',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t}\n}\n\nconst assignAuctionSerach = (searchType) => {\n\treturn {\n\t\tauction_id: {\n\t\t\tid: 'auction_id',\n\t\t\tlabel: 'Auction Id',\n\t\t\tplaceholder: 'Enter auction Id',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tauction_opening_time: {\n\t\t\tid: 'auction_opening_time',\n\t\t\tlabel: 'Auction Opening date',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tproduct_name: {\n\t\t\tid: 'product_name',\n\t\t\tlabel: 'Product name',\n\t\t\tplaceholder: 'Enter product name',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tdispatch_address: {\n\t\t\tid: 'dispatch_address',\n\t\t\tlabel: 'Dispatch location',\n\t\t\tplaceholder: 'Enter dispatch location',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t\tsupplier_name: {\n\t\t\tid: 'supplier_name',\n\t\t\tlabel: 'Supplier name',\n\t\t\tplaceholder: 'Enter supplier name',\n\t\t\tvalue: '',\n\t\t\tshow: searchType === searchFilter.ASSIGN_AUCTION_SEARCH,\n\t\t},\n\t\trelationship_manager: {\n\t\t\tid: 'relationship_manager',\n\t\t\tlabel: 'Relationship manager',\n\t\t\tplaceholder: 'Enter relationship manager',\n\t\t\tvalue: '',\n\t\t\tshow: true,\n\t\t},\n\t}\n}\n\nconst auctionSerach = {\n\tauction_id: {\n\t\tid: 'auction_id',\n\t\tlabel: 'Auction Id',\n\t\tplaceholder: 'Enter auction Id',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tauction_opening_time: {\n\t\tid: 'auction_opening_time',\n\t\tlabel: 'From',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tauction_closing_time: {\n\t\tid: 'auction_closing_time',\n\t\tlabel: 'To',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tproduct_name: {\n\t\tid: 'product_name',\n\t\tlabel: 'Product name',\n\t\tplaceholder: 'Enter product name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tdispatch_address: {\n\t\tid: 'dispatch_address',\n\t\tlabel: 'Dispatch location',\n\t\tplaceholder: 'Enter dispatch location',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tsupplier_name: {\n\t\tid: 'supplier_name',\n\t\tlabel: 'Supplier name',\n\t\tplaceholder: 'Enter supplier name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\trelationship_manager: {\n\t\tid: 'relationship_manager',\n\t\tlabel: 'Relationship manager',\n\t\tplaceholder: 'Enter relationship manager',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tauction_status: {\n\t\tid: 'auction_status',\n\t\tlabel: 'Auction status',\n\t\tplaceholder: 'Enter auction status',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst productSearchFilters = {\n\tproduct_name: {\n\t\tid: 'product_name',\n\t\tlabel: 'Product name',\n\t\tplaceholder: 'Enter product name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst commodityPriceFilter = {\n\tcommodity_product: {\n\t\tid: 'product_name',\n\t\tlabel: 'Product name',\n\t\tplaceholder: 'Enter product name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tcommodity_location: {\n\t\tid: 'location',\n\t\tlabel: 'Location',\n\t\tplaceholder: 'Enter Location',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tdate: {\n\t\tid: 'date',\n\t\tlabel: 'Date',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tcommodity_source: {\n\t\tid: 'commodity_source',\n\t\tlabel: 'Source',\n\t\tplaceholder: 'Select Source',\n\t\tvalue: commoditySource.steelmint,\n\t\tshow: true,\n\t},\n}\n\nconst invoiceSearchFilter = {\n\tfull_name: {\n\t\tid: 'full_name',\n\t\tlabel: 'Name / Phone',\n\t\tplaceholder: 'Enter name / phone',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tinvoice_number: {\n\t\tid: 'invoice_number',\n\t\tlabel: 'Invoice number',\n\t\tplaceholder: 'Enter invoice number',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst underwritingSearchFilter = {\n\tpan_number: {\n\t\tid: 'pan',\n\t\tlabel: 'Pan Number',\n\t\tplaceholder: 'Enter pan number',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst factorySearchFilters = {\n\tinventory: {\n\t\tid: 'inventory',\n\t\tlabel: 'Inventory',\n\t\tplaceholder: 'Enter inventory',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tfactory_name: {\n\t\tid: 'factory_name',\n\t\tlabel: 'Factory name',\n\t\tplaceholder: 'Enter factory name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tpartner_name: {\n\t\tid: 'partner_name',\n\t\tlabel: 'Partner name',\n\t\tplaceholder: 'Enter partner name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tprocess_name: {\n\t\tid: 'process_name',\n\t\tlabel: 'Process name',\n\t\tplaceholder: 'Enter Process name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tlocation: {\n\t\tid: 'location',\n\t\tlabel: 'Location',\n\t\tplaceholder: 'Enter Location',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst factoryManageOrder = {\n\tpartner_name: {\n\t\tid: 'partner_name',\n\t\tlabel: 'Partner name',\n\t\tplaceholder: 'Enter Partner name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tfrom: {\n\t\tid: 'from',\n\t\tlabel: 'From',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tto: {\n\t\tid: 'to',\n\t\tlabel: 'To',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\torder_id: {\n\t\tid: 'order_id',\n\t\tlabel: 'Order Id',\n\t\tplaceholder: 'Enter order Id',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tinput_order: {\n\t\tid: 'input_order',\n\t\tlabel: 'Input order',\n\t\tplaceholder: 'Enter input order',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\toutput_order: {\n\t\tid: 'output_order',\n\t\tlabel: 'Output order',\n\t\tplaceholder: 'Enter output order',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tenquiry_id: {\n\t\tid: 'enquiry_id',\n\t\tlabel: 'Outgoing order id',\n\t\tplaceholder: 'Enter outgoing order Id',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst usersSearchFilters = {\n\tuser: {\n\t\tid: 'user',\n\t\tlabel: 'User',\n\t\tplaceholder: 'Search by Id / Name / Mobile',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\n\torganisation: {\n\t\tid: 'organisation',\n\t\tlabel: 'Organisation',\n\t\tplaceholder: 'Search by Id / Name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst orgSearchFilters = {\n\torganisation: {\n\t\tid: 'organisation',\n\t\tlabel: 'Organisation',\n\t\tplaceholder: 'Search by Id / Name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tuser: {\n\t\tid: 'user',\n\t\tlabel: 'User',\n\t\tplaceholder: 'Search by Id / Name / Mobile',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\torg_role: {\n\t\tid: 'role',\n\t\tlabel: 'Role',\n\t\tplaceholder: 'Enter role',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tpan: {\n\t\tid: 'pan',\n\t\tlabel: 'PAN / GST',\n\t\tplaceholder: 'Enter number',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tcategory: {\n\t\tid: 'category',\n\t\tlabel: 'Category / Commodity',\n\t\tplaceholder: 'Search by Id / Name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\trelationship_manager: {\n\t\tid: 'relationship-manager',\n\t\tlabel: 'Relationship Manager',\n\t\tplaceholder: 'Search by relationship manager',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tlocation: {\n\t\tid: 'location',\n\t\tlabel: 'Location',\n\t\tplaceholder: 'Search by location',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst orgLeadFilters = {\n\tuser: {\n\t\tid: 'user',\n\t\tlabel: 'User',\n\t\tplaceholder: 'Search by Id / Name / Mobile',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tmanager: {\n\t\tid: 'manager',\n\t\tlabel: 'Manager',\n\t\tplaceholder: 'Search by manager',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tlead_status: {\n\t\tid: 'status',\n\t\tlabel: 'Status',\n\t\tplaceholder: 'Select Status',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tlead_source: {\n\t\tid: 'lead-source',\n\t\tlabel: 'Source',\n\t\tplaceholder: 'Select Lead Source',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tregion: {\n\t\tid: 'region',\n\t\tlabel: 'Region',\n\t\tplaceholder: 'Select Region',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tindustry: {\n\t\tid: 'industry',\n\t\tlabel: 'Industry',\n\t\tplaceholder: 'Select Industry',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tlead_type: {\n\t\tid: 'lead-type',\n\t\tlabel: 'Lead Type',\n\t\tplaceholder: 'Select Lead Type',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tweight_from: {\n\t\tid: 'lead-from-weight',\n\t\tlabel: 'From Required Weight (in MT)',\n\t\tplaceholder: 'Enter Weight',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tweight_to: {\n\t\tid: 'lead-to-weight',\n\t\tlabel: 'To Required Weight (in MT)',\n\t\tplaceholder: 'Enter Weight',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst ledgerFilter = {\n\torganisation: {\n\t\tid: 'organisation',\n\t\tlabel: 'Organisation',\n\t\tplaceholder: 'Search by Id / Name / Mobile',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tfrom: {\n\t\tid: 'from',\n\t\tlabel: 'From',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tto: {\n\t\tid: 'to',\n\t\tlabel: 'To',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\ttransaction_source: {\n\t\tid: 'transaction_source',\n\t\tlabel: 'Transaction Source',\n\t\tplaceholder: 'Select transaction source',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\ttransaction_type: {\n\t\tid: 'transaction_type',\n\t\tlabel: 'Transaction Type',\n\t\tplaceholder: 'Select transaction type',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\ttransaction_amount: {\n\t\tid: 'transaction_amount',\n\t\tlabel: 'Transaction Amount',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tinvoice_number: {\n\t\tid: 'invoice_number',\n\t\tlabel: 'Invoice number',\n\t\tplaceholder: 'Enter invoice number',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tzoho_status: {\n\t\tid: 'zoho_status',\n\t\tlabel: 'Zoho Status',\n\t\tplaceholder: 'Select Zoho Status',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst orgLedgerFilter = {\n\tfrom: {\n\t\tid: 'from',\n\t\tlabel: 'From',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tto: {\n\t\tid: 'to',\n\t\tlabel: 'To',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\ttransaction_source: {\n\t\tid: 'transaction_source',\n\t\tlabel: 'Transaction Source',\n\t\tplaceholder: 'Select transaction source',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\ttransaction_type: {\n\t\tid: 'transaction_type',\n\t\tlabel: 'Transaction Type',\n\t\tplaceholder: 'Select transaction type',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\ttransaction_amount: {\n\t\tid: 'transaction_amount',\n\t\tlabel: 'Transaction Amount',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tinvoice_number: {\n\t\tid: 'invoice_number',\n\t\tlabel: 'Invoice number',\n\t\tplaceholder: 'Enter invoice number',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst salesPurchaseFilter = {\n\tfrom: {\n\t\tid: 'from',\n\t\tlabel: 'From',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tto: {\n\t\tid: 'to',\n\t\tlabel: 'To',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\ttransaction_source: {\n\t\tid: 'transaction_source',\n\t\tlabel: 'Transaction Source',\n\t\tplaceholder: 'Select transaction source',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\ttransaction_type: {\n\t\tid: 'transaction_type',\n\t\tlabel: 'Transaction Type',\n\t\tplaceholder: 'Select transaction type',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tinvoice_number: {\n\t\tid: 'invoice_number',\n\t\tlabel: 'Invoice number',\n\t\tplaceholder: 'Enter invoice number',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst pastReportsSearchFilter = {\n\tname: {\n\t\tid: 'name',\n\t\tlabel: 'Name',\n\t\tplaceholder: 'Enter name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tpan_number: {\n\t\tid: 'pan',\n\t\tlabel: 'Pan Number',\n\t\tplaceholder: 'Enter pan number',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\texcess_ctc_from: {\n\t\tid: 'excess_ctc_from',\n\t\tlabel: 'CTC From',\n\t\tplaceholder: 'Enter CTC From',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\texcess_ctc_to: {\n\t\tid: 'excess_ctc_to',\n\t\tlabel: 'CTC To',\n\t\tplaceholder: 'Enter CTC To',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tgm_from: {\n\t\tid: 'gm_from',\n\t\tlabel: 'GM From',\n\t\tplaceholder: 'Enter GM From',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tgm_to: {\n\t\tid: 'gm_to',\n\t\tlabel: 'GM To',\n\t\tplaceholder: 'Enter GM To',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tgmv_from: {\n\t\tid: 'gmv_from',\n\t\tlabel: 'GMV From',\n\t\tplaceholder: 'Enter GMV From',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tgmv_to: {\n\t\tid: 'gmv_to',\n\t\tlabel: 'GMV To',\n\t\tplaceholder: 'Enter GMV To',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tpast_delays_from: {\n\t\tid: 'past_delays_from',\n\t\tlabel: 'Past Delays From',\n\t\tplaceholder: 'Enter Past Delays From',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tpast_delays_to: {\n\t\tid: 'past_delays_to',\n\t\tlabel: 'Past Delays To',\n\t\tplaceholder: 'Enter Past Delays To',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tpayment_terms_from: {\n\t\tid: 'payment_terms_from',\n\t\tlabel: 'Payment Terms From',\n\t\tplaceholder: 'Enter Payment Terms From',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tpayment_terms_to: {\n\t\tid: 'payment_terms_to',\n\t\tlabel: 'Payment Terms To',\n\t\tplaceholder: 'Enter Payment Terms To',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tpast_record_type: {\n\t\tid: 'record_type',\n\t\tlabel: 'Record Type',\n\t\tplaceholder: 'Select Record Type',\n\t\tvalue: pastRecordTypes.OVER_ALL,\n\t\tshow: true,\n\t},\n}\n\nconst bannerSearchFilter = {\n\tbanner_type: {\n\t\tid: 'banner_type',\n\t\tlabel: 'Type',\n\t\tplaceholder: 'Enter type',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tbanner_role: {\n\t\tid: 'banner_role',\n\t\tlabel: 'Role',\n\t\tplaceholder: 'Enter role',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tbanner_platform: {\n\t\tid: 'banner_platform',\n\t\tlabel: 'Platform',\n\t\tplaceholder: 'Enter platform',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst collectionSearchFilter = {\n\tuser: {\n\t\tid: 'user',\n\t\tlabel: 'User',\n\t\tplaceholder: 'Search by Id / Name / Mobile',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tmanager: {\n\t\tid: 'manager',\n\t\tlabel: 'Manager',\n\t\tplaceholder: 'Search by Manager Name',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tstatus: {\n\t\tid: 'status',\n\t\tlabel: 'Collection status',\n\t\tplaceholder: 'Enter collection status',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tregion: {\n\t\tid: 'region',\n\t\tlabel: 'Region',\n\t\tplaceholder: 'Select Region',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tplatform: {\n\t\tid: 'platform',\n\t\tlabel: 'Platform',\n\t\tplaceholder: 'Select Platform',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst salescollectionSearchFilter = {\n\tuser: {\n\t\tid: 'user',\n\t\tlabel: 'User',\n\t\tplaceholder: 'Search by Id / Name / Mobile',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tstatus: {\n\t\tid: 'status',\n\t\tlabel: 'Collection status',\n\t\tplaceholder: 'Enter collection status',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tregion: {\n\t\tid: 'region',\n\t\tlabel: 'Region',\n\t\tplaceholder: 'Select Region',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tplatform: {\n\t\tid: 'platform',\n\t\tlabel: 'Platform',\n\t\tplaceholder: 'Select Platform',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst blogSearchFilter = {\n\tfrom: {\n\t\tid: 'from',\n\t\tlabel: 'From',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tto: {\n\t\tid: 'to',\n\t\tlabel: 'To',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\theading: {\n\t\tid: 'heading',\n\t\tlabel: 'Blog Heading',\n\t\tplaceholder: 'Type here...',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tslug: {\n\t\tid: 'slug',\n\t\tlabel: 'Slug',\n\t\tplaceholder: 'Type here...',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tsource: {\n\t\tid: 'source',\n\t\tlabel: 'Source',\n\t\tplaceholder: 'Enter Source',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tsummary: {\n\t\tid: 'summary',\n\t\tlabel: 'Summary',\n\t\tplaceholder: 'Type here...',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\ttitle: {\n\t\tid: 'title',\n\t\tlabel: 'Title',\n\t\tplaceholder: 'Type here...',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst newsSearchFilter = {\n\tfrom: {\n\t\tid: 'from',\n\t\tlabel: 'From',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tto: {\n\t\tid: 'to',\n\t\tlabel: 'To',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\theading: {\n\t\tid: 'heading',\n\t\tlabel: 'News Heading',\n\t\tplaceholder: 'Type here...',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tslug: {\n\t\tid: 'slug',\n\t\tlabel: 'Slug',\n\t\tplaceholder: 'Type here...',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tsource: {\n\t\tid: 'source',\n\t\tlabel: 'Source',\n\t\tplaceholder: 'Enter Source',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tsummary: {\n\t\tid: 'summary',\n\t\tlabel: 'Summary',\n\t\tplaceholder: 'Type here...',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\ttitle: {\n\t\tid: 'title',\n\t\tlabel: 'Title',\n\t\tplaceholder: 'Type here...',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst adminListFilter = {\n\tname: {\n\t\tid: 'admin-name',\n\t\tlabel: 'Name',\n\t\tplaceholder: 'Type here...',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tmobile_number: {\n\t\tid: 'admin-mobile-number',\n\t\tlabel: 'Mobile Number',\n\t\tplaceholder: 'Type here...',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n\tregion: {\n\t\tid: 'admin-region',\n\t\tlabel: 'Region',\n\t\tplaceholder: 'Select Region',\n\t\tvalue: '',\n\t\tshow: true,\n\t\topenBelow: true,\n\t},\n\tadmin_role: {\n\t\tid: 'admin-role',\n\t\tlabel: 'Role',\n\t\tplaceholder: 'Select Role',\n\t\tvalue: '',\n\t\tshow: true,\n\t},\n}\n\nconst getDefaultState = (searchType) => {\n\tswitch (searchType) {\n\t\tcase searchFilter.ENQUIRY_SEARCH:\n\t\tcase searchFilter.ASSIGN_ENQUIRY_SEARCH:\n\t\t\treturn enquirySearch\n\n\t\t// return enquiryAssignOrdersSearch(searchType)\n\t\tcase searchFilter.ENQUIRY_ORDER_SEARCH:\n\t\t\treturn enquiryOrdersSearch(searchType)\n\t\tcase searchFilter.ACTIVE_INVOICE_SEARCH:\n\t\t\treturn activeVoiceSearch(searchType)\n\t\tcase searchFilter.AUCTION_ORDER_SEARCH:\n\t\t\treturn auctionOrdersSearch(searchType)\n\t\tcase searchFilter.AUCTION_SEARCH:\n\t\t\treturn auctionSerach\n\t\tcase searchFilter.ASSIGN_AUCTION_SEARCH:\n\t\t\treturn assignAuctionSerach(searchType)\n\t\tcase searchFilter.PRODUCT_SEARCH:\n\t\t\treturn productSearchFilters\n\t\tcase searchFilter.USERS_SEARCH:\n\t\t\treturn usersSearchFilters\n\t\tcase searchFilter.ORG_SEARCH:\n\t\t\treturn orgSearchFilters\n\t\tcase searchFilter.BUYER_ENQUIRY_SEARCH:\n\t\t\treturn enquiryAssignOrdersSearch\n\t\tcase searchFilter.ADMIN_PURCHASE_FILTER:\n\t\t\treturn ledgerFilter\n\t\tcase searchFilter.ADMIN_ORG_LEDGER_FILTER:\n\t\t\treturn orgLedgerFilter\n\t\tcase searchFilter.SALES_PURCHASE_FILTER:\n\t\t\treturn salesPurchaseFilter\n\t\tcase searchFilter.COMMODITY_PRICE_SEARCH:\n\t\t\treturn commodityPriceFilter\n\t\tcase searchFilter.INVOICE_SEARCH:\n\t\t\treturn invoiceSearchFilter\n\t\tcase searchFilter.UNDERWRITING_SEARCH:\n\t\t\treturn underwritingSearchFilter\n\t\tcase searchFilter.PAST_REPORTS:\n\t\t\treturn pastReportsSearchFilter\n\t\tcase searchFilter.ADMIN_BANNER_SEARCH:\n\t\t\treturn bannerSearchFilter\n\t\tcase searchFilter.ORG_LEADS:\n\t\t\treturn orgLeadFilters\n\t\t// buyer\n\t\tcase searchFilter.BUYER_LOGISTICS_SEARCH:\n\t\t\treturn enquiryAssignOrdersSearch(searchType)\n\t\tcase searchFilter.BUYER_AUCTION_SEARCH:\n\t\t\treturn assignAuctionSerach(searchType)\n\t\tcase searchFilter.BUYER_ENQUIRY_ORDER_SEARCH:\n\t\t\treturn enquiryOrdersSearch(searchType)\n\t\tcase searchFilter.CLOUD_FACTORY_SEARCH:\n\t\t\treturn factorySearchFilters\n\t\tcase searchFilter.FACTORY_MANAGE_ORDER_SEARCH:\n\t\t\treturn factoryManageOrder\n\t\tcase searchFilter.BUYER_PURCHASE_FILTER:\n\t\t\treturn salesPurchaseFilter\n\t\tcase searchFilter.COLLECTION_FILTER:\n\t\t\treturn collectionSearchFilter\n\t\tcase searchFilter.SALES_COLLECTION_FILTER:\n\t\t\treturn salescollectionSearchFilter\n\t\tcase searchFilter.BLOG_FILTER:\n\t\t\treturn blogSearchFilter\n\t\tcase searchFilter.NEWS_FILTER:\n\t\t\treturn newsSearchFilter\n\t\tcase searchFilter.ADMIN_LIST_FILTER:\n\t\t\treturn adminListFilter\n\t\tdefault:\n\t\t\tbreak\n\t}\n}\n\nconst SearchPanel = ({ searchType }) => {\n\tconst defaultSearchState = useMemo(() => getDefaultState(searchType), [searchType])\n\tconst dispatch = useDispatch()\n\tconst [searchParams, setSearchParams] = useSearchParams()\n\tconst [searchState, setSearchState] = useState(defaultSearchState)\n\n\tconst enquiryStatuses = useMemo(() => {\n\t\treturn Object.entries(enquiryStatus).map(([key, value]) => ({ key, label: value }))\n\t}, [])\n\n\tconst auctionStatuses = useMemo(() => {\n\t\treturn Object.entries(auctionStatus).map(([key, value]) => ({ key, label: value }))\n\t}, [])\n\n\tconst transactionSourceStatuses = useMemo(() => {\n\t\treturn Object.entries(transactionSourceStatus).map(([key, value]) => ({ key, label: value }))\n\t}, [])\n\tconst transactionTypeStatuses = useMemo(() => {\n\t\treturn Object.entries(transactionTypeStatus).map(([key, value]) => ({ key, label: value }))\n\t}, [])\n\n\tconst userRoles = useMemo(() => {\n\t\treturn Object.entries(roles).map(([key, value]) => ({ key, label: value }))\n\t}, [])\n\n\tconst adminRoles = useMemo(() => {\n\t\treturn Object.entries(MB_ROLES).map(([key, value]) => ({ key, label: value }))\n\t})\n\tconst organisationRoles = useMemo(() => {\n\t\treturn Object.values(ORG_ROLES).map(({ platform, role }) => ({ key: `${platform}_${role}`, label: `${platform}_${role}` }))\n\t}, [])\n\n\tconst enableSearchButton = useMemo(() => Object.values(searchState).some((_field) => _field.value), [searchState])\n\n\tconst commodityProductNames = useMemo(() => {\n\t\treturn Object.entries(commodityProductName).map(([key, value]) => ({ key, label: value }))\n\t}, [])\n\n\tconst commodityLocations = useMemo(() => {\n\t\treturn Object.entries(commodityLocation).map(([key, value]) => ({ key, label: value }))\n\t}, [])\n\n\tconst commoditySources = useMemo(() => {\n\t\treturn Object.entries(commoditySource).map(([key, value]) => ({ key, label: value }))\n\t}, [])\n\n\tconst pastRecordTypeSources = useMemo(() => {\n\t\treturn Object.entries(pastRecordTypes).map(([key, value]) => ({ key, label: value }))\n\t}, [])\n\n\tconst collectionStatus = useMemo(() => {\n\t\treturn Object.entries(COLLECTION_STATUS).map(([key, value]) => ({ key, label: value }))\n\t}, [])\n\n\tconst RegionTypes = useMemo(() => {\n\t\treturn Object.entries(REGION_TYPES).map(([key, value]) => ({ key, label: value }))\n\t}, [])\n\n\tconst leadStatusTypes = useMemo(() => {\n\t\treturn Object.entries(LEADS_STATUS).map(([key, value]) => ({ key, label: value }))\n\t})\n\n\tconst leadSourceTypes = useMemo(() => {\n\t\treturn Object.entries(LEADS_SOURCE).map(([key, value]) => ({ key, label: value }))\n\t})\n\tconst leadIndustryTypes = useMemo(() => {\n\t\treturn Object.entries(LEADS_INDUSTRY).map(([key, value]) => ({ key, label: value }))\n\t})\n\tconst leadType = useMemo(() => {\n\t\treturn Object.entries(LEAD_TYPE).map(([key, value]) => ({ key, label: value }))\n\t})\n\tconst platformTypes = useMemo(() => {\n\t\treturn Object.entries(enquiryPlatform).map(([k, value]) => ({ key: value.name, label: value.name }))\n\t}, [])\n\n\tconst zohoStatusTypes = useMemo(() => {\n\t\treturn Object.entries(zohoStatusFilter).map(([k, value]) => ({ key: value.name, label: value.name }))\n\t}, [])\n\n\tconst updateStateFromSearchParams = (queryObject) => {\n\t\tif (!queryObject || !queryObject.toString()) return\n\n\t\tsetSearchState((_state) => {\n\t\t\tconst keys = Object.keys(_state)\n\n\t\t\treturn keys.reduce((_acc, _key) => {\n\t\t\t\tconst value = queryObject.get(_key)\n\t\t\t\t_acc[_key] = {\n\t\t\t\t\t..._state[_key],\n\t\t\t\t\tvalue: value ?? defaultSearchState[_key].value,\n\t\t\t\t}\n\t\t\t\treturn _acc\n\t\t\t}, {})\n\t\t})\n\t}\n\n\tconst querySameAsState = useCallback((query, state) => {\n\t\treturn Object.entries(state).every(([key, val]) => (!val.value && !query.get(key)) || (val.value && val.value === query.get(key)))\n\t}, [])\n\n\tconst searchHandler = useCallback(() => {\n\t\tif (!enableSearchButton) return\n\n\t\tif (querySameAsState(searchParams, searchState)) {\n\t\t\tdispatch(toggleDrawer(false))\n\t\t\treturn\n\t\t}\n\n\t\tconst queryObject = Object.entries(searchState).reduce((acc, [key, val]) => {\n\t\t\tval.value && (acc[key] = val.value)\n\t\t\treturn acc\n\t\t}, {})\n\n\t\tsetSearchParams(queryObject)\n\t\tdispatch(toggleDrawer(false))\n\t}, [enableSearchButton, searchState, searchParams, setSearchParams])\n\n\tuseEnter(searchHandler)\n\n\tuseEffect(() => {\n\t\tupdateStateFromSearchParams(searchParams)\n\t}, [searchParams])\n\n\tconst updateState = (key) => (value) => {\n\t\tsetSearchState((_state) => ({\n\t\t\t..._state,\n\t\t\t[key]: {\n\t\t\t\t..._state[key],\n\t\t\t\tvalue,\n\t\t\t},\n\t\t}))\n\t}\n\n\tconst updateEnquiryState = (statusObject) => {\n\t\tupdateState('enquiry_status')(statusObject.label)\n\t}\n\n\tconst updatecommodityProductName = (statusObject) => {\n\t\tupdateState('commodity_product')(statusObject.label)\n\t}\n\n\tconst updatecommodityLocation = (statusObject) => {\n\t\tupdateState('commodity_location')(statusObject.label)\n\t}\n\n\tconst updateCommoditySource = (statusObject) => {\n\t\tupdateState('commodity_source')(statusObject.label)\n\t}\n\n\tconst updateAuctionState = (statusObject) => {\n\t\tupdateState('auction_status')(statusObject.label)\n\t}\n\tconst updateTransactionSourceState = (statusObject) => {\n\t\tupdateState('transaction_source')(statusObject.label)\n\t}\n\n\tconst updateTransactionTypeState = (statusObject) => {\n\t\tupdateState('transaction_type')(statusObject.label)\n\t}\n\n\tconst updateRecordType = (statusObject) => {\n\t\tupdateState('past_record_type')(statusObject.label)\n\t}\n\n\tconst updateCollectionStatusType = (statusObject) => {\n\t\tconst statusString = statusObject.map((obj) => obj['key']).toString()\n\t\tupdateState('status')(statusString)\n\t}\n\tconst updateCollectionRegionType = (statusObject) => {\n\t\tupdateState('region')(statusObject.label)\n\t}\n\tconst updateLeadStatusType = (statusObject) => {\n\t\tupdateState('lead_status')(statusObject.key)\n\t}\n\tconst updateLeadSourceType = (statusObject) => {\n\t\tconst statusString = statusObject.map((obj) => obj['key']).toString()\n\t\tupdateState('lead_source')(statusString)\n\t}\n\tconst updateLeadIndustryType = (statusObject) => {\n\t\tupdateState('industry')(statusObject.key)\n\t}\n\tconst updateLeadType = (statusObject) => {\n\t\tupdateState('lead_type')(statusObject.key)\n\t}\n\tconst updateCollectionPlatform = (statusObject) => {\n\t\tupdateState('platform')(statusObject.label)\n\t}\n\n\tconst updateZohoStatus = (statusObject) => {\n\t\tupdateState('zoho_status')(statusObject.label)\n\t}\n\n\tconst clearSearch = () => {\n\t\tsetSearchState(defaultSearchState)\n\t\tsetSearchParams({ page: searchParams.get('page') ?? 0 })\n\t}\n\n\tconst getDate = (date) => (+date === 0 ? new Date().getTime() : +date)\n\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\t\t{searchState.auction_id?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.order_id?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.enquiry_id?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.listing_id?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.order_date?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.date?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.organisation?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.enquiry_status?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.label === searchState.enquiry_status.value) ?? ''}\n\t\t\t\t\t\t\tonChange={updateEnquiryState}\n\t\t\t\t\t\t\tdata={enquiryStatuses}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.enquiry_date?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.expiry_date?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.from?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.to?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.auction_opening_time?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.auction_closing_time?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.product_name?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.dispatch_address?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.name?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.buyer_name?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.supplier_name?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.enquiry_by?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.commodity_product?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.label === searchState.commodity_product.value) ?? ''}\n\t\t\t\t\t\t\tonChange={updatecommodityProductName}\n\t\t\t\t\t\t\tdata={commodityProductNames}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.commodity_location?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.label === searchState.commodity_location.value) ?? ''}\n\t\t\t\t\t\t\tonChange={updatecommodityLocation}\n\t\t\t\t\t\t\tdata={commodityLocations}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.commodity_source?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.label === searchState.commodity_source.value) ?? ''}\n\t\t\t\t\t\t\tonChange={updateCommoditySource}\n\t\t\t\t\t\t\tdata={commoditySources}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\n\t\t\t\t{searchState.auction_status?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.label === searchState.auction_status.value) ?? ''}\n\t\t\t\t\t\t\tonChange={updateAuctionState}\n\t\t\t\t\t\t\tdata={auctionStatuses}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.user_id?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.full_name?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\n\t\t\t\t{searchState.location?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.organisation_id?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.organisation_name?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.mobile_number?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.role?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.label === searchState.role.value) ?? ''}\n\t\t\t\t\t\t\tonChange={(value) => updateState('role')(value.label)}\n\t\t\t\t\t\t\tplaceholder={searchState.role.placeholder}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState?.admin_role?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.label === searchState.admin_role.value) ?? ''}\n\t\t\t\t\t\t\tonChange={(value) => updateState('admin_role')(value.label)}\n\t\t\t\t\t\t\tplaceholder={searchState.admin_role.placeholder}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.user?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.org_role?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.label === searchState.org_role.value) ?? ''}\n\t\t\t\t\t\t\tonChange={(value) => updateState('org_role')(value.label)}\n\t\t\t\t\t\t\tplaceholder={searchState.org_role.placeholder}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.company_name?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.factory_name?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.partner_name?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.process_name?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\n\t\t\t\t{searchState.transaction_source?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.label === searchState.transaction_source.value) ?? ''}\n\t\t\t\t\t\t\tonChange={updateTransactionSourceState}\n\t\t\t\t\t\t\tdata={transactionSourceStatuses}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.transaction_type?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.label === searchState.transaction_type.value) ?? ''}\n\t\t\t\t\t\t\tonChange={updateTransactionTypeState}\n\t\t\t\t\t\t\tdata={transactionTypeStatuses}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.transaction_amount?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.invoice_number?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.pan_number?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.pan?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.po_number?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.inventory?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.input_order?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.output_order?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.category?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.relationship_manager?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.vehicle_number?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.driver_number?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.payment_terms_from?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.past_delays_from?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.excess_ctc_from?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.gmv_from?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.gm_from?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.past_record_type?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.label === searchState.past_record_type.value) ?? pastRecordTypes.OVER_ALL}\n\t\t\t\t\t\t\tonChange={updateRecordType}\n\t\t\t\t\t\t\tdata={pastRecordTypeSources}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t\topenBelow={false}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.banner_type?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.banner_role?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.banner_platform?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.manager?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.status?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t ({\n\t\t\t\t\t\t\t\t\t\t\tkey: _s,\n\t\t\t\t\t\t\t\t\t\t\tlabel: Object.keys(COLLECTION_STATUS).find((_k) => _k === _s),\n\t\t\t\t\t\t\t\t\t }))\n\t\t\t\t\t\t\t\t\t: []\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonChange={updateCollectionStatusType}\n\t\t\t\t\t\t\tdata={collectionStatus}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t\tmultiple\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.lead_status?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.key === searchState.lead_status.value) ?? ''}\n\t\t\t\t\t\t\tonChange={updateLeadStatusType}\n\t\t\t\t\t\t\tdata={leadStatusTypes}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.weight_from?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.weight_to?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.lead_source?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t ({\n\t\t\t\t\t\t\t\t\t\t\tkey: _s,\n\t\t\t\t\t\t\t\t\t\t\tlabel: Object.keys(LEADS_SOURCE).find((_k) => _k === _s),\n\t\t\t\t\t\t\t\t\t }))\n\t\t\t\t\t\t\t\t\t: []\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonChange={updateLeadSourceType}\n\t\t\t\t\t\t\tdata={leadSourceTypes}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.industry?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.key === searchState.industry.value) ?? ''}\n\t\t\t\t\t\t\tonChange={updateLeadIndustryType}\n\t\t\t\t\t\t\tdata={leadIndustryTypes}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.lead_type?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.key === searchState.lead_type.value) ?? ''}\n\t\t\t\t\t\t\tonChange={updateLeadType}\n\t\t\t\t\t\t\tdata={leadType}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.region?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.label === searchState.region.value) ?? ''}\n\t\t\t\t\t\t\tonChange={updateCollectionRegionType}\n\t\t\t\t\t\t\tdata={RegionTypes}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t\topenBelow={searchState?.region?.openBelow ?? false}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.platform?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.label === searchState.platform.value) ?? ''}\n\t\t\t\t\t\t\tonChange={updateCollectionPlatform}\n\t\t\t\t\t\t\tdata={platformTypes}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\n\t\t\t\t{searchState.zoho_status?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t _s.label === searchState.zoho_status.value) ?? ''}\n\t\t\t\t\t\t\tonChange={updateZohoStatus}\n\t\t\t\t\t\t\tdata={zohoStatusTypes}\n\t\t\t\t\t\t\tdisplayKey='label'\n\t\t\t\t\t\t\tprimaryKey='key'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.heading?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.slug?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.source?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.summary?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{searchState.title?.show && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t)\n}\n\nexport default SearchPanel\n","import { useSelector } from 'react-redux'\nimport styled, { css } from 'styled-components'\nimport { MoreHoriz } from '@material-ui/icons'\nimport { useEffect, useRef, useState } from 'react'\nimport { Spacings } from '@styles'\n\nconst getPosition = ({ horizontal, vertical }) => {\n\tlet position = ''\n\tposition =\n\t\tposition +\n\t\t`\n\t\t\t${horizontal}: 0;\n\t\t`\n\tif (vertical === 'top') {\n\t\tposition =\n\t\t\tposition +\n\t\t\t`\n\t\t\t\tbottom: calc(100% + ${Spacings.SPACING_2B})\n\t\t\t`\n\t}\n\tif (vertical === 'bottom') {\n\t\tposition =\n\t\t\tposition +\n\t\t\t`\n\t\t\t\ttop: calc(100% + ${Spacings.SPACING_2B});\n\t\t\t`\n\t}\n\treturn css`\n\t\t${position}\n\t`\n}\n\nconst Wrapper = styled.div`\n\tdisplay: flex;\n\tposition: relative;\n`\nconst Anchor = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n`\nconst PopupWrapper = styled.div`\n\tpadding: ${Spacings.SPACING_4B};\n\tborder-radius: ${Spacings.SPACING_2B};\n\tbackground: ${({ theme }) => theme.palette.background.white};\n\tbox-shadow: 0 ${Spacings.SPACING_1B} ${Spacings.SPACING_5B} 0 rgb(0 0 0 / 5%);\n\tposition: absolute;\n\t${getPosition}\n`\n\nconst Popup = ({ anchorContent, popupContent, position = { horizontal: 'right', vertical: 'top' } }) => {\n\tconst elem = useRef()\n\tconst [show, setShow] = useState(false)\n\n\tconst showFileViewer = useSelector((state) => state.getIn(['root', 'showFileViewer']))\n\n\tuseEffect(() => {\n\t\tconst handler = (e) => {\n\t\t\tif ((elem.current && elem.current.contains(e.target)) || showFileViewer) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tsetShow(false)\n\t\t}\n\t\tif (show) {\n\t\t\twindow.addEventListener('mousedown', handler)\n\t\t}\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener('mousedown', handler)\n\t\t}\n\t}, [show, showFileViewer])\n\n\treturn (\n\t\t (elem.current = _ref)}>\n\t\t\t setShow(!show)}>{anchorContent || }\n\t\t\t{show && {popupContent}}\n\t\t\n\t)\n}\n\nexport default Popup\n","import { memo } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Spacings, Text } from '@styles'\n\nconst TickText = styled.text`\n\tfont-size: ${Text.SMALL};\n\tfill: ${({ theme }) => theme.palette.text.black};\n`\n\nconst CustomToolTipWrapper = styled.div`\n\tbackground: ${({ theme }) => theme.palette.background.white};\n\tborder-radius: ${Spacings.SPACING_2B};\n\tbox-shadow: 0 ${Spacings.SPACING_1B} ${Spacings.SPACING_5B} 0 rgb(0 0 0 / 5%);\n\tdisplay: flex;\n\tflex-direction: column;\n\tfont-size: ${Text.SMALL};\n\tpadding: ${Spacings.SPACING_2B};\n\tcolor: ${({ theme }) => theme.palette.text.darkBlack};\n\tmin-width: 5rem;\n`\n\nconst Data = styled.div`\n\tflex-grow: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t${({ label }) => {\n\t\tif (label) {\n\t\t\treturn css`\n\t\t\t\tmargin-bottom: ${Spacings.SPACING_2B};\n\t\t\t\tfont-size: ${Text.MEDIUM};\n\t\t\t\tpadding-bottom: ${Spacings.SPACING_2B};\n\t\t\t\tborder-bottom: 1px solid ${({ theme }) => theme.palette.background.messageRed};\n\t\t\t`\n\t\t}\n\t\treturn css`\n\t\t\tmargin-bottom: ${Spacings.SPACING_1B};\n\t\t\t&:last-of-type {\n\t\t\t\tmargin-bottom: 0;\n\t\t\t}\n\t\t`\n\t}}\n`\n\nexport const CHART_COLORS = ['#1967D2bb', '#82ca9d', '#D77FA1']\nexport const PIE_CHART_COLORS = ['#82ca9d', '#9CB4CC', '#CB2F2Fbf', '#D77FA1', '#BAABDA', '#9ADCFF', '#68A7AD', '#BE8C63', '#F2D7D9', '#FFFBE7']\nexport const FILL_COLORS = ['#1967D2aa']\n\nconst tickFormatter = (value) => {\n\tif (value > 100000) {\n\t\treturn `${value / 100000}L`\n\t}\n\tif (value > 1000) {\n\t\treturn `${value / 1000}K`\n\t}\n\treturn value\n}\n\nexport const CustomizedXAxisTick = memo(({ x, y, stroke, payload }) => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{payload.value}\n\t\t\t\n\t\t\n\t)\n})\n\nexport const CustomizedYAxisTick = memo(({ x, y, stroke, payload }) => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{tickFormatter(payload.value)}\n\t\t\t\n\t\t\n\t)\n})\n\nexport const CustomTooltip = ({ active, payload, label, inPieChart }) => {\n\tconst renderPercentage = (percent) => {\n\t\tif (percent < 0.01) {\n\t\t\treturn percent.toFixed(4)\n\t\t}\n\t\treturn percent.toFixed(2)\n\t}\n\n\tif (active && payload && payload.length) {\n\t\tif (inPieChart) {\n\t\t\tconst data = payload[0].payload\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{data[data.labelKey]}\n\t\t\t\t\t\n\t\t\t\t\t{payload.map((_p, index) => {\n\t\t\t\t\t\tif (_p?.payload.isOthers) {\n\t\t\t\t\t\t\treturn _p?.payload.categories\n\t\t\t\t\t\t\t\t.sort((a, b) => b.percent - a.percent)\n\t\t\t\t\t\t\t\t.slice(0, 5)\n\t\t\t\t\t\t\t\t.map((_c, _index) => (\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{_c[_p?.payload.labelKey]}\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t{typeof _p?.payload.formatter === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? _p?.payload.formatter(_c[_p?.dataKey])\n\t\t\t\t\t\t\t\t\t\t\t\t\t: _c[_p?.dataKey]}{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t{_p?.payload?.unit}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{' '}({renderPercentage(_c.percent * 100)}%)\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t))\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{typeof _p?.payload.formatter === 'function'\n\t\t\t\t\t\t\t\t\t\t\t? _p?.payload.formatter(_p.payload[_p?.dataKey])\n\t\t\t\t\t\t\t\t\t\t\t: _p.payload[_p?.dataKey]}{' '}\n\t\t\t\t\t\t\t\t\t\t{_p?.payload?.unit}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{' '}({renderPercentage(_p.payload.percent * 100)}%)\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t\n\t\t\t)\n\t\t}\n\t\treturn (\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{label}\n\t\t\t\t\n\t\t\t\t{payload.map((_p, index) => (\n\t\t\t\t\t\n\t\t\t\t\t\t{_p.name}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{typeof _p.formatter === 'function' ? _p.formatter(_p.payload[_p?.dataKey]) : _p.payload[_p?.dataKey]} {_p?.unit}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t))}\n\t\t\t\n\t\t)\n\t}\n\n\treturn null\n}\n","import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'\nimport { strings } from '@constants'\nimport { CustomizedYAxisTick, CustomizedXAxisTick, CustomTooltip, CHART_COLORS } from './CustomElements'\n\nconst BarChartComponent = ({ data }) => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t} />\n\t\t\t\t}\n\t\t\t\t\tlabel={{ value: data?.yLabel, angle: -90, fontSize: 10, dx: -10, fill: '#595A5B' }}\n\t\t\t\t/>\n\t\t\t\t} />\n\t\t\t\t\n\t\t\t\t{Array.from({ length: data?.numberOfItems ?? 1 }).map((_, index) => (\n\t\t\t\t\t\n\t\t\t\t))}\n\t\t\t\n\t\t\n\t)\n}\n\nexport default BarChartComponent\n","import { XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Area, AreaChart } from 'recharts'\nimport { strings } from '@constants'\nimport { CustomizedYAxisTick, CustomizedXAxisTick, CustomTooltip, CHART_COLORS, FILL_COLORS } from './CustomElements'\n\nconst AreaChartComponent = ({ data }) => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t} />\n\t\t\t\t}\n\t\t\t\t\tlabel={{ value: data?.yLabel, angle: -90, fontSize: 10, dx: -10, fill: '#595A5B' }}\n\t\t\t\t/>\n\t\t\t\t} />\n\t\t\t\t\n\t\t\t\t{Array.from({ length: data?.numberOfItems ?? 1 }).map((_, index) => (\n\t\t\t\t\t\n\t\t\t\t))}\n\t\t\t\n\t\t\n\t)\n}\n\nexport default AreaChartComponent\n","import styled from 'styled-components'\nimport { Tooltip, ResponsiveContainer, Text as TextTag, PieChart, Pie, Cell } from 'recharts'\nimport { CustomTooltip, PIE_CHART_COLORS } from './CustomElements'\nimport { Text } from '@styles'\n\nconst TextLabel = styled(TextTag)`\n\tfont-size: ${Text.EXTRA_SMALL};\n\tcolor: ${({ theme }) => theme.palette.text.darkblack};\n\twidth: 50px;\n`\nconst RADIAN = Math.PI / 180\n\nconst renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index, payload }) => {\n\tconst radius = outerRadius * 1.15\n\tconst x = cx + radius * Math.cos(-midAngle * RADIAN)\n\tconst y = cy + radius * Math.sin(-midAngle * RADIAN)\n\n\tconst label = payload[payload.labelKey]\n\treturn (\n\t\t cx ? 'start' : 'end'} dominantBaseline='central'>\n\t\t\t{label.replace('MS ', '') + ` (${(percent * 100).toFixed(2)}%)`}\n\t\t\n\t)\n}\n\nconst PieChartComponent = ({ data }) => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{data?.data.map((item, index) => (\n\t\t\t\t\t\t\n\t\t\t\t\t))}\n\t\t\t\t\n\t\t\t\t} />\n\t\t\t\n\t\t\n\t)\n}\n\nexport default PieChartComponent\n","import styled, { css, keyframes } from 'styled-components'\n\nconst animation1 = keyframes`\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n`\nconst animation3 = keyframes`\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n`\nconst animation2 = keyframes`\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(1.5rem, 0);\n }\n`\n\nconst Wrapper = styled.div`\n\tdisplay: inline-block;\n\tposition: relative;\n\tz-index: 9999;\n\t\n\t${({ size }) => {\n\t\treturn css`\n\t\t\twidth: 5rem;\n\t\t\theight: ${size / 4}rem;\n\n\t\t\t& div {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\twidth: ${size / 4}rem;\n\t\t\t\theight: ${size / 4}rem;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tbackground: ${({ theme, color }) => color || theme.palette.background.messageRed};\n\t\t\t\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\t\t\t}\n\n\t\t\t& div:nth-child(1) {\n\t\t\t\tleft: 0.5rem;\n\t\t\t\tanimation: ${animation1} 0.6s infinite 0.1s;\n\t\t\t}\n\t\t\t& div:nth-child(2) {\n\t\t\t\tleft: 0.5rem;\n\t\t\t\tanimation: ${animation2} 0.6s infinite;\n\t\t\t}\n\t\t\t& div:nth-child(3) {\n\t\t\t\tleft: 2rem;\n\t\t\t\tanimation: ${animation2} 0.6s infinite;\n\t\t\t}\n\t\t\t& div:nth-child(4) {\n\t\t\t\tleft: 3.5rem;\n\t\t\t\tanimation: ${animation3} 0.6s infinite 0.3s;\n\t\t\t}\n\t\t`\n\t}}\n`\n\nconst Loader = ({ size = 3, color }) => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t)\n}\n\nexport default Loader\n","import styled, { css } from 'styled-components'\nimport { Spacings, Text } from '@styles'\n\nconst ToggleWrapper = styled.span`\n\tdisplay: flex;\n`\n\nconst ToggleOption = styled.span`\n\tfont-size: ${Text.SMALL};\n\tfont-weight: ${({ active }) => (active ? Text.BOLD_600 : 'normal')};\n\tcolor: ${({ active, theme }) => (active ? theme.palette.text.white : 'inherit')};\n\tbackground: ${({ active, theme }) => (active ? theme.palette.background.blue : theme.palette.background.white)};\n\tborder: 1px solid ${({ theme }) => theme.palette.background.blue};\n\tcursor: ${({ active }) => (active ? 'initial' : 'pointer')};\n\tpadding: ${Spacings.SPACING_1B} ${Spacings.SPACING_4B};\n\tmin-width: 4rem;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tuser-select: none;\n\n\ttransition: all 0.15s ease-in;\n\n\t&:first-of-type {\n\t\tborder-top-left-radius: ${Spacings.SPACING_2B};\n\t\tborder-bottom-left-radius: ${Spacings.SPACING_2B};\n\t}\n\t&:last-of-type {\n\t\tborder-left: none;\n\t\tborder-top-right-radius: ${Spacings.SPACING_2B};\n\t\tborder-bottom-right-radius: ${Spacings.SPACING_2B};\n\t}\n\n\t${({ disabled }) => {\n\t\tif (disabled) {\n\t\t\treturn css`\n\t\t\t\tpointer-events: none;\n\t\t\t\tcursor: initial;\n\t\t\t\tbackground: ${({ active, theme }) => (active ? theme.palette.background.border : theme.palette.background.white)};\n\t\t\t\tborder-color: ${({ theme }) => theme.palette.background.border};\n\t\t\t`\n\t\t}\n\t}}\n`\nconst Toggle = ({ options, disabled }) => {\n\treturn (\n\t\t\n\t\t\t{options.map((_o, index) => (\n\t\t\t\t {} : _o.click}>\n\t\t\t\t\t{_o.label}\n\t\t\t\t\n\t\t\t))}\n\t\t\n\t)\n}\n\nexport default Toggle\n","import { ExpandLess, ExpandMore } from '@material-ui/icons'\nimport { useEffect, useState } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Spacings, Text } from '@styles'\n\nconst AccordionComponent = styled.div`\n\t// border: 1px solid ${({ theme }) => theme.palette.background.searchgrey};\n\tborder-radius: ${Spacings.SPACING_2B};\n\tmargin-bottom: ${Spacings.SPACING_2B};\n\tmargin: ${({ margin }) => margin};\n`\nconst AccordionHeader = styled.div`\n\tpadding: ${Spacings.SPACING_4B} ${Spacings.SPACING_3B};\n\tfont-size: ${Text.MEDIUM};\n\tdisplay: flex;\n\tcursor: pointer;\n\tborder-bottom: ${({ open, theme }) => (open ? `1px solid ${theme.palette.background.searchgrey}` : 'none')};\n\tbackground: ${({ isCustom, theme }) => (isCustom ? '#bfd8f957' : `${theme.palette.background.blueLightest}`)};\n\tpadding: ${({ padding }) => padding};\n\t&:hover {\n\t\t${({ open }) => {\n\t\t\tif (!open) {\n\t\t\t\treturn css`\n\t\t\t\t\tbox-shadow: 0px ${Spacings.SPACING_1B} ${Spacings.SPACING_1B} 0.125rem ${({ theme }) => theme.palette.background.blue + '17'};\n\t\t\t\t`\n\t\t\t}\n\t\t}}\n\t}\n\t& > span {\n\t\tflex-grow: 1;\n\t}\n`\nconst AccordionBody = styled.div`\n\tdisplay: ${({ open }) => (open ? 'flex' : 'none')};\n\tflex-direction: column;\n\theight: ${({ open }) => (open ? 'fit-content' : '0')};\n\tvisibility: ${({ open }) => (open ? 'visible' : 'hidden')};\n\topacity: ${({ open }) => (open ? '1' : '0')};\n\n\ttransition: all 0.15s ease-in-out;\n\toverflow: ${({ overflow }) => (overflow ? '' : 'hidden')};\n\tpadding: ${({ open }) => (open ? Spacings.SPACING_3B : 0)};\n`\nconst IconWrapper = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\t& > svg {\n\t\tfill: ${({ theme }) => theme.palette.text.darkblack};\n\t}\n`\n\nconst Accordion = ({ header, children, defaultOpen, margin, padding, isCustom, overflow }) => {\n\tconst [open, setOpen] = useState(defaultOpen)\n\tuseEffect(() => {\n\t\tsetOpen(defaultOpen)\n\t}, [defaultOpen])\n\n\treturn (\n\t\t\n\t\t\t setOpen(!open)} open={open} padding={padding} isCustom={isCustom}>\n\t\t\t\t{header}\n\t\t\t\t setOpen(!open)}>{open ? : }\n\t\t\t\n\t\t\t\n\t\t\t\t{children}\n\t\t\t\n\t\t\n\t)\n}\n\nexport default Accordion\n","import React, { useMemo, memo } from 'react'\nimport { useSelector } from 'react-redux'\nimport styled, { withTheme, css } from 'styled-components'\nimport { NewReleases, Info } from '@material-ui/icons'\nimport { useNavigate } from 'react-router-dom'\nimport { Devices, Spacings, Text } from '@styles'\nimport { auctionStatus, roles, strings } from '@constants'\nimport { Button, Carousal } from '@base'\nimport { decimalSeparatedNumber, displayAmount } from '@utils'\nimport { paths } from '@routes'\nimport { H5, H6 } from '../basic/Headings'\nimport moment from 'moment'\nimport { useDispatch } from 'react-redux'\nimport { toggleFileViewer } from '@data/state/action/root'\n\nconst Wrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder-radius: ${Spacings.SPACING_3B};\n\tbackground: linear-gradient(180deg, rgba(234, 241, 250, 1) 0%, rgba(255, 254, 254, 1) 68%);\n\tborder: 1px solid rgba(234, 241, 250, 1);\n\ttransition: all 0.2s cubic-bezier(0, 0, 0.2, 1);\n\twidth: 100%;\n\toverflow: hidden;\n\theight: 100%;\n\tbox-shadow: 0px ${Spacings.SPACING_1B} ${Spacings.SPACING_3B} 0.125rem ${({ theme }) => theme.palette.background.blue + '17'};\n`\n\nconst InfoWrapper = styled.div`\n\tpadding: ${Spacings.SPACING_3B} ${Spacings.SPACING_2B} ${Spacings.SPACING_1B};\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-grow: 1;\n\tuser-select: none;\n\tbackground: ${({ theme }) => theme.palette.background.white};\n`\nconst ItemInfoWrapper = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ${Spacings.SPACING_1B} ${Spacings.SPACING_2B};\n\tmargin-bottom: ${Spacings.SPACING_1B};\n\n\t&:last-of-type {\n\t\tmargin-bottom: 0;\n\t}\n`\n\nconst ItemInfoLabel = styled.div`\n\tfont-size: ${Text.EXTRA_SMALL};\n\tcolor: ${({ theme }) => theme.palette.text.label};\n\ttext-transform: uppercase;\n\tdisplay: flex;\n\talign-items: center;\n\tflex-basis: 50%;\n\tflex-shrink: 0;\n`\nconst ItemInfoValue = styled.div`\n\tfont-size: ${Text.SMALL};\n\tcolor: ${({ theme }) => theme.palette.text.black};\n\tfont-weight: ${Text.BOLD_600};\n\tflex-basis: 50%;\n\tflex-shrink: 0;\n\t${({ overflow, wrap }) => {\n\t\tif (!overflow) {\n\t\t\treturn css`\n\t\t\t\twhite-space: ${wrap ? 'unset' : 'nowrap'};\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t`\n\t\t}\n\t}};\n`\nconst ViewMessageText = styled.span`\n\tcolor: ${({ theme }) => theme.palette.text.blue};\n\tdisplay: inline-block;\n\tposition: relative;\n\tcursor: pointer;\n\n\t& > span {\n\t\tvisibility: hidden;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t\tbottom: 110%;\n\t\tleft: 50%;\n\t\ttransform: translateX(-30%);\n\t\tpadding: ${Spacings.SPACING_2B};\n\t\tfont-size: ${Text.SMALL};\n\t\tbackground: ${({ theme }) => theme.palette.background.white};\n\t\tcolor: ${({ theme }) => theme.palette.text.black};\n\t\tbox-shadow: 0 ${Spacings.SPACING_1B} ${Spacings.SPACING_5B} 0 rgb(0 0 0 / 5%);\n\t\tborder-radius: ${Spacings.SPACING_2B};\n\t\ttransition: all 0.15s ease-in;\n\t\tdisplay: inline-block;\n\t\twidth: max-content;\n\t\tmax-width: 180px;\n\t\tmax-height: 120px;\n\t\toverflow: scroll;\n\t\tcursor: initial;\n\n\t\t/* Hide scrollbar for Chrome, Safari and Opera */\n\t\t&::-webkit-scrollbar {\n\t\t\tdisplay: none;\n\t\t}\n\t\t/* Hide scrollbar for IE, Edge and Firefox */\n\t\t& {\n\t\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\t\tscrollbar-width: none; /* Firefox */\n\t\t}\n\n\t\t@media ${Devices.tablet} {\n\t\t\tleft: 0;\n\t\t\ttransform: translateX(-10%);\n\t\t}\n\t}\n\n\t&:hover {\n\t\t& > span {\n\t\t\tvisibility: visible;\n\t\t\topacity: 1;\n\t\t}\n\t}\n`\n\nconst IconWrapper = styled.div`\n\tdisplay: flex;\n\tmargin-left: ${Spacings.SPACING_1B};\n\t& > svg {\n\t\tfont-size: ${Text.LARGE};\n\t}\n`\nconst IconWrapperInfo = styled.div`\n\tdisplay: flex;\n\t& > svg {\n\t\tfont-size: ${Text.XX_LARGE};\n\t}\n`\nconst ImageWrapper = styled.div`\n\twidth: 100%;\n\tborder-top-left-radius: ${Spacings.SPACING_2B};\n\tborder-top-right-radius: ${Spacings.SPACING_2B};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: relative;\n\tcursor: pointer;\n`\n\nconst Img = styled.img`\n\tmax-height: 100%;\n\tmax-width: 100%;\n`\n\nconst PhotosInfo = styled.div`\n\tposition: absolute;\n\tflex-direction: column;\n\tbottom: 0;\n\tleft: 0;\n\twidth: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: ${({ theme }) => theme.palette.background.white};\n\tmin-height: 3.5rem;\n\n\tbox-shadow: 0px ${Spacings.SPACING_1B} ${Spacings.SPACING_3B} 0.125rem ${({ theme }) => theme.palette.background.blue + '17'};\n`\n\nconst ActionButton = styled.a`\n\tcolor: ${({ theme }) => theme.palette.text.blue};\n\tcursor: pointer;\n`\n\nconst Message = styled(H6)`\n\tcolor: ${({ theme }) => theme.palette.text.label};\n\tline-height: ${Text.LINE_HEIGHT_MAX};\n`\n\nconst BidButtonWrapper = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbox-shadow: 0px ${Spacings.SPACING_1B} ${Spacings.SPACING_3B} 0.125rem ${({ theme }) => theme.palette.background.blue + '17'};\n\tpadding: ${Spacings.SPACING_4B};\n\tmin-height: 4rem;\n`\nconst ButtonMessage = styled(H5)`\n\tfont-weight: ${Text.BOLD_600};\n\tcolor: ${({ theme, active }) => (active ? theme.palette.text.messageRed : theme.palette.text.blue)};\n`\n\nconst InfoIcon = withTheme(({ theme }) => (\n\t\n\t\t\n\t\n))\n\nconst MessageView = ({ text }) => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t{text}\n\t\t\n\t)\n}\n\nconst HighLightIcon = withTheme(({ theme }) => (\n\t\n\t\t\n\t\n))\n\nconst ShopCard = memo(({ data, small, clickable, showBorder, status }) => {\n\tconst dispatch = useDispatch()\n\tconst navigate = useNavigate()\n\n\tconst user = useSelector((state) => state.getIn(['user', 'user']))\n\n\tconst bidOnAuctionHandler = () => {\n\t\tnavigate(paths.bid_on_auction(data?.auction_id))\n\t}\n\n\tconst calculateTimeLeft = (openingTime) => {\n\t\treturn moment(openingTime).fromNow()\n\t}\n\n\tconst { active, details, imageDetails } = useMemo(() => {\n\t\tconst active =\n\t\t\tmoment(data?.auction_opening_time).isSameOrBefore(moment(Date())) &&\n\t\t\tmoment(data?.auction_closing_time).isSameOrAfter(moment(Date())) &&\n\t\t\tstatus === auctionStatus.closing\n\n\t\tconst imageDetails = {\n\t\t\tlabel: 'image',\n\t\t\tvalue: data?.auction_item?.product_photos,\n\t\t}\n\n\t\tconst details = [\n\t\t\t{\n\t\t\t\tlabel: strings('product_name'),\n\t\t\t\tvalue: data?.auction_item?.product_name ?? '--',\n\t\t\t\twrap: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: strings(['minimum', 'bid', 'price']) + '/(MT)',\n\t\t\t\tvalue: displayAmount(data?.auction_item?.mb_opening_price),\n\t\t\t\thighlight: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: strings('weight_mt'),\n\t\t\t\tvalue: decimalSeparatedNumber(data?.auction_item?.total_weight / 1000),\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: strings('dispatch', 'location'),\n\t\t\t\tvalue: `${data?.dispatch_address?.city} , ${data?.dispatch_address?.state}`,\n\t\t\t\twrap: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: strings('view', 'tc'),\n\t\t\t\tvalue: data?.auction_item?.tc_doc_path || '--',\n\t\t\t\tisTC: data?.auction_item?.tc_available || false,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: strings('info'),\n\t\t\t\tvalue: data?.auction_item?.message,\n\t\t\t\tisMessage: true,\n\t\t\t\t// highlight: true,\n\t\t\t},\n\t\t]\n\t\treturn {\n\t\t\tactive,\n\t\t\tdetails,\n\t\t\timageDetails,\n\t\t}\n\t}, [status, data])\n\n\tconst viewPhotoHandler = () => {\n\t\tdispatch(toggleFileViewer(true, { files: imageDetails?.value }))\n\t}\n\n\tconst renderImages = () => (\n\t\t\n\t\t\t\n\t\t\t{!imageDetails?.value?.length && (\n\t\t\t\t\n\t\t\t\t\tNo images available\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t)\n\n\tconst renderDetails = () => (\n\t\t\n\t\t\t{details.map(({ label, value, isMessage, isTC, highlight, wrap }, index) => {\n\t\t\t\tconst overflow = isMessage\n\n\t\t\t\tif (isTC) {\n\t\t\t\t\tconst val = value\n\t\t\t\t\tvalue = (\n\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\tdispatch(toggleFileViewer(true, { files: val }))\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tView\n\t\t\t\t\t\t\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\tif (overflow) {\n\t\t\t\t\tvalue = value ? : '--'\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t{highlight && }\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)\n\t\t\t})}\n\t\t\n\t)\n\n\tconst renderBidButton = () => {\n\t\tif (active) {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\tClosing {calculateTimeLeft(data?.auction_closing_time)}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\tOpens {calculateTimeLeft(data?.auction_opening_time)}\n\t\t\t\t\n\t\t\t)\n\t\t}\n\t}\n\n\treturn (\n\t\t\n\t\t\t{renderImages()}\n\t\t\t{renderDetails()}\n\t\t\t{renderBidButton()}\n\t\t\n\t)\n})\n\nexport default ShopCard\n","import React from 'react'\nimport styled from 'styled-components'\nimport { Devices, Spacings, Text } from '@styles'\nimport { Button } from '@base'\nimport { H4 } from '../../basic/Headings'\nimport { strings } from '@constants'\n\nconst CardWrapper = styled.div`\n\twidth: 100%;\n\tpadding: ${Spacings.SPACING_4B};\n`\n\nconst TextWrapper = styled(H4)`\n\tcolor: ${({ theme }) => theme.palette.text.darkblack};\n`\n\nconst CardFooterWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\n\tmargin-top: ${Spacings.SPACING_6B};\n\n\t& > button {\n\t\twidth: 50%;\n\t\tmin-height: 3rem;\n\t\tfont-size: ${Text.LARGE};\n\t}\n\n\t@media ${Devices.tablet} {\n\t\tjustify-content: flex-end;\n\n\t\t& > button {\n\t\t\twidth: initial;\n\t\t\tfont-size: ${Text.MEDIUM};\n\t\t\tmin-height: 2.25rem;\n\t\t}\n\t}\n`\n\nconst ConfirmBox = (props) => {\n\tconst { title, confirmAction } = props\n\n\tconst handlerClose = () => {\n\t\tconfirmAction(false)\n\t}\n\n\tconst handlerConfirm = () => {\n\t\tconfirmAction(true)\n\t}\n\n\treturn (\n\t\t\n\t\t\t{title}\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t)\n}\n\nexport default ConfirmBox\n","import { useEffect, useState, useRef } from 'react'\nimport DatePicker from 'react-datepicker'\nimport 'react-datepicker/dist/react-datepicker.css'\nimport { CalendarToday } from '@material-ui/icons'\nimport styled, { css } from 'styled-components'\n\nimport { showDateFormat, convertLongDate } from '@utils'\nimport { Input } from '@base'\nimport { Devices, Spacings, Text } from '@styles'\n\nconst DatePickerInput = styled(Input)`\n\tcaret-color: transparent;\n\tcursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};\n`\nconst Wrapper = styled.div`\n\tposition: relative;\n\theight: fit-content;\n`\nconst MobileOverlay = styled.div`\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\ttransition: all 100ms cubic-bezier(0, 0, 0.2, 1);\n\tz-index: 99;\n\tbackground: ${({ theme }) => theme.palette.background.light};\n\tvisibility: ${({ show }) => (show ? 'visible' : 'hidden')};\n\twidth: 100vw;\n\theight: 100vh;\n\n\t@media ${Devices.mobile} {\n\t\tdisplay: none;\n\t}\n`\n\nconst getPosition = ({ position }) => {\n\tswitch (position) {\n\t\tcase 'top':\n\t\t\treturn css`\n\t\t\t\tbottom: 100%;\n\t\t\t\tleft: 0;\n\t\t\t`\n\t\tcase 'bottom':\n\t\tdefault:\n\t\t\treturn css`\n\t\t\t\ttop: 100%;\n\t\t\t\tleft: 0;\n\t\t\t`\n\t}\n}\nconst getTriangleStyles = ({ position }) => {\n\tswitch (position) {\n\t\tcase 'top':\n\t\t\treturn css`\n\t\t\t\tleft: ${Spacings.SPACING_5B};\n\t\t\t\tbottom: -${Spacings.SPACING_2B};\n\t\t\t\tborder-left: ${Spacings.SPACING_3B} solid transparent;\n\t\t\t\tborder-right: ${Spacings.SPACING_3B} solid transparent;\n\t\t\t\tborder-top: ${Spacings.SPACING_2B} solid ${({ theme }) => theme.palette.background.blue};\n\t\t\t`\n\t\tcase 'bottom':\n\t\tdefault:\n\t\t\treturn css`\n\t\t\t\tleft: ${Spacings.SPACING_5B};\n\t\t\t\ttop: -${Spacings.SPACING_2B};\n\t\t\t\tborder-left: ${Spacings.SPACING_3B} solid transparent;\n\t\t\t\tborder-right: ${Spacings.SPACING_3B} solid transparent;\n\t\t\t\tborder-bottom: ${Spacings.SPACING_2B} solid ${({ theme }) => theme.palette.background.blue};\n\t\t\t`\n\t}\n}\n\nconst InlineDatePickerWrapper = styled.div`\n\tposition: fixed;\n\tbottom: 0;\n\tleft: 0;\n\twidth: 100vw;\n\tz-index 100;\n\n\t& .react-datepicker {\n\t\twidth: 100%;\n\n\t\tbox-shadow: 0 0 ${Spacings.SPACING_5B} 0 rgb(0 0 0 / 5%);\n\t\tborder: none;\n\n\n\t\t.react-datepicker__navigation-icon::before {\n\t\t\tborder-color: ${({ theme }) => theme.palette.text.white};\n\t\t\tborder-style: solid;\n\t\t\tborder-width: ${Spacings.SPACING_2} ${Spacings.SPACING_2} 0 0;\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\ttop: ${Spacings.SPACING_4B};\n\t\t\theight: ${Spacings.SPACING_3B};\n\t\t\twidth: ${Spacings.SPACING_3B};\n\t\t}\n\t\t.react-datepicker__month-container {\n\t\t\twidth: 100%;\n\t\t\t.react-datepicker__header {\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding: ${Spacings.SPACING_3B} ${Spacings.SPACING_2B} ${Spacings.SPACING_2B};\n\t\t\t\tbackground: ${({ theme }) => theme.palette.background.blue};\n\t\t\t\t.react-datepicker__current-month {\n\t\t\t\t\tfont-size: ${Text.X_LARGE};\n\t\t\t\t\tcolor: ${({ theme }) => theme.palette.text.white};\n\t\t\t\t\tfont-weight: ${Text.BOLD_600};\n\t\t\t\t\tmargin-bottom: ${Spacings.SPACING_2B};\n\t\t\t\t}\n\t\t\t\t.react-datepicker__day-name {\n\t\t\t\t\tfont-size: ${Text.LARGE};\n\t\t\t\t\tcolor: ${({ theme }) => theme.palette.text.white};\n\t\t\t\t\tmargin: ${Spacings.SPACING_2B};\n\t\t\t\t}\n\t\t\t}\n\t\t\t.react-datepicker__month {\n\t\t\t\t\n\t\t\t\t.react-datepicker__day {\n\t\t\t\t\tfont-size: ${Text.LARGE};\n\t\t\t\t\tmargin: ${Spacings.SPACING_2B};\n\t\t\t\t\tcolor: ${({ theme }) => theme.palette.text.darkblack};\n\t\t\t\t}\n\t\t\t\t.react-datepicker__day--selected {\n\t\t\t\t\tbackground: ${({ theme }) => theme.palette.background.blue};\n\t\t\t\t\tcolor: ${({ theme }) => theme.palette.text.white};\n\t\t\t\t}\n\t\t\t\t.react-datepicker__day--disabled {\n\t\t\t\t\tcolor: ${({ theme }) => theme.palette.text.disabled};\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@media ${Devices.mobile} {\n\t\tposition: absolute;\n\t\tleft: initial;\n\t\tbottom: initial;\n\t\twidth: fit-content;\n\t\t${getPosition}\n\n\n\t\t& .react-datepicker {\n\t\t\t.react-datepicker__triangle {\n\t\t\t\tdisplay: static;\n\t\t\t\tposition: absolute;\n\t\t\t\tbox-shadow: 0 0 ${Spacings.SPACING_5B} 0 rgb(0 0 0 / 5%);\n\t\t\t\t${getTriangleStyles}\n\t\t\t\t\n\t\t\t}\n\n\t\t\t.react-datepicker__navigation-icon::before {\n\t\t\t\theight: ${Spacings.SPACING_2B};\n\t\t\t\ttop: ${Spacings.SPACING_3B};\n\t\t\t\twidth: ${Spacings.SPACING_2B};\n\t\t\t}\n\t\t\t.react-datepicker__month-container {\n\t\t\t\tborder: 1px solid ${({ theme }) => theme.palette.background.blue};\n\t\t\t\tborder-radius: ${Spacings.SPACING_2B};\n\t\t\t\toverflow: hidden;\n\t\t\t\t\n\t\t\t\t.react-datepicker__header {\n\t\t\t\t\t.react-datepicker__current-month {\n\t\t\t\t\t\tfont-size: ${Text.LARGE};\n\t\t\t\t\t}\n\t\t\t\t\t.react-datepicker__day-name {\n\t\t\t\t\t\tfont-size: ${Text.MEDIUM};\n\t\t\t\t\t\tmargin: ${Spacings.SPACING_1B};\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t.react-datepicker__month {\n\t\t\t\t\t.react-datepicker__day {\n\t\t\t\t\t\tfont-size: ${Text.MEDIUM};\n\t\t\t\t\t\tmargin: ${Spacings.SPACING_1B};\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n`\n\nconst IconWrapper = styled.div`\n\tposition: absolute;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\tpointer-events: none;\n\ttop: 0;\n\tright: ${Spacings.SPACING_3B};\n\n\t& > svg {\n\t\tfont-size: ${Text.LARGE};\n\t\tfill: ${({ selected, theme }) => (selected ? theme.palette.text.blue : theme.palette.text.label)};\n\t\ttransition: fill 150ms ease-in;\n\t}\n`\n\nfunction Calendar({\n\tposition = 'bottom',\n\tlabel,\n\tplaceholder,\n\tvalue,\n\tminDate,\n\tmaxDate,\n\tonChange,\n\tdisabled,\n\tendOfDay = true,\n\treadOnly,\n\tshowMonthYearPicker = false,\n\tisSearch = false,\n\tshowMonthDropdown = true,\n\tshowYearDropdown = true,\n\t...rest\n}) {\n\tconst [showDatePicker, setShowDatePicker] = useState(false)\n\tconst [selectedDate, setSelectedDate] = useState(convertLongDate(new Date(), endOfDay, isSearch))\n\n\tconst datePickerRefInput = useRef()\n\tconst datePickerRefWrapper = useRef()\n\n\tuseEffect(() => {\n\t\tif (typeof value === 'number') {\n\t\t\tconst val = new Date(value)\n\t\t\tsetSelectedDate(val)\n\t\t} else if (value instanceof Date) {\n\t\t\tsetSelectedDate(value)\n\t\t}\n\t}, [value])\n\n\tuseEffect(() => {\n\t\tconst handler = (e) => {\n\t\t\tconst target = e.target\n\t\t\tif (datePickerRefInput.current && datePickerRefInput.current.contains(target)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (datePickerRefWrapper.current && datePickerRefWrapper.current.contains(target)) {\n\t\t\t\treturn\n\t\t\t} else {\n\t\t\t\tsetShowDatePicker(false)\n\t\t\t}\n\t\t}\n\n\t\tif (showDatePicker) {\n\t\t\twindow.addEventListener('mousedown', handler)\n\t\t} else {\n\t\t\twindow.removeEventListener('mousedown', handler)\n\t\t}\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener('mousedown', handler)\n\t\t}\n\t}, [showDatePicker])\n\n\tconst toggleDatePicker = () => {\n\t\tsetShowDatePicker(!showDatePicker)\n\t}\n\n\tconst changeHandler = (date) => {\n\t\tsetShowDatePicker(false)\n\t\tsetSelectedDate(date)\n\n\t\tconst _d = convertLongDate(date, endOfDay, isSearch)\n\n\t\tif (typeof onChange === 'function') {\n\t\t\tonChange(_d.getTime())\n\t\t}\n\t}\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\t\n\t\t\t\t (datePickerRefInput.current = _ref)}\n\t\t\t\t\tlabel={label ?? 'Select date'}\n\t\t\t\t\tvalue={value ? showDateFormat(selectedDate) : '-'}\n\t\t\t\t\ttype='text'\n\t\t\t\t\tonClick={toggleDatePicker}\n\t\t\t\t\tplaceholder={placeholder ?? 'Select date'}\n\t\t\t\t\tfocussed={showDatePicker}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tinputReadOnly\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t\t{!readOnly && (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{showDatePicker && (\n\t\t\t\t\t (datePickerRefWrapper.current = _ref)}>\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\n\t\t\n\t)\n}\n\nexport default Calendar\n","import React, { useEffect, useRef } from 'react'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { CheckCircle, Close, Error, Info } from '@material-ui/icons'\nimport styled from 'styled-components'\nimport { showToast } from '@data/state/action'\nimport { Devices, Spacings, Text } from '@styles'\nimport { H5, H6 } from '@base'\n\nexport const TOAST_TYPE = {\n\tSUCCESS: 'SUCCESS',\n\tERROR: 'ERROR',\n\tINFO: 'INFO',\n\tNOTIFICATION: 'NOTIFICATION',\n}\n\nconst getBackground = ({ type, theme }) => {\n\tif (type === TOAST_TYPE.SUCCESS) return theme.palette.background.greenDark\n\tif (type === TOAST_TYPE.ERROR) return theme.palette.background.red\n\tif (type === TOAST_TYPE.INFO) return theme.palette.background.blue\n\treturn theme.palette.background.blackGrey\n}\n\nconst getIcon = (type) => {\n\tif (type === TOAST_TYPE.SUCCESS) return \n\tif (type === TOAST_TYPE.ERROR) return \n\tif (type === TOAST_TYPE.INFO) return \n\treturn null\n}\n\nconst Snackbar = styled.div`\n\tpadding: ${Spacings.SPACING_4B};\n\tborder-radius: ${Spacings.SPACING_2B};\n\tbackground: ${getBackground};\n\tcolor: ${({ theme }) => theme.palette.text.white};\n\tbox-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%), 0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);\n\n\tdisplay: flex;\n\talign-items: center;\n\tz-index: 1001;\n\n\tposition: fixed;\n\tmargin: ${Spacings.SPACING_4B};\n\twidth: -webkit-fill-available;\n\ttransition: bottom 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n\n\tleft: 0;\n\tbottom: ${({ open }) => (open ? 0 : '-100%')};\n\tcursor: ${({ cursor }) => cursor};\n\n\t@media ${Devices.tablet} {\n\t\twidth: 22rem;\n\t\tmax-width: 22rem;\n\t}\n`\n\nconst ContentWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n`\nconst CloseIcon = styled.div`\n\tposition: absolute;\n\ttop: ${Spacings.SPACING_1B};\n\tright: ${Spacings.SPACING_1B};\n\t& > svg {\n\t\tfont-size: ${Text.MEDIUM};\n\t}\n`\n\nconst IconWrapper = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tmargin-right: ${Spacings.SPACING_3B};\n\t& > svg {\n\t\tfont-size: ${Text.X_LARGE};\n\t}\n`\n\nconst Message = styled(H5)``\nconst Body = styled(H6)`\n\tmargin-top: ${Spacings.SPACING_2B};\n`\n\nconst Toast = () => {\n\tconst dispatch = useDispatch()\n\tconst toast = useSelector((state) => state.getIn(['root', 'toast']))\n\n\tconst timeoutId = useRef()\n\n\tuseEffect(() => {\n\t\tif (toast.open) {\n\t\t\tif (toast.options?.autoHide) {\n\t\t\t\tclearTimeout(timeoutId.current)\n\t\t\t\ttimeoutId.current = setTimeout(() => {\n\t\t\t\t\tdispatch(showToast(false))\n\t\t\t\t\tif (toast.options?.callActionAfterHide && toast.options?.actions) {\n\t\t\t\t\t\ttoast.options.actions()\n\t\t\t\t\t}\n\t\t\t\t}, toast.options.autoHideTime)\n\n\t\t\t\t// When we want to perform action, but dont want to wait for toast to disappear\n\t\t\t\tif (!toast.options?.callActionAfterHide && toast.options?.actions) {\n\t\t\t\t\ttoast.options.actions()\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// dispatch(showToast(false))\n\t\t\t\tif (!toast.options?.callActionAfterHide && toast.options?.actions) {\n\t\t\t\t\ttoast.options.actions()\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(timeoutId.current)\n\t\t}\n\t}, [toast.open, toast.options?.resetTimer])\n\n\tconst { type, autoHide, closable, onClick } = toast?.options\n\n\tconst close = (e) => {\n\t\tif (e) {\n\t\t\te.stopPropagation()\n\t\t}\n\t\tdispatch(showToast(false))\n\t}\n\n\tconst toastClick = () => {\n\t\tif (typeof onClick === 'function') {\n\t\t\tclose()\n\t\t\tonClick()\n\t\t}\n\t}\n\n\tconst isNotification = type === TOAST_TYPE.NOTIFICATION\n\n\treturn (\n\t\t\n\t\t\t{type ? {getIcon(type)} : null}\n\t\t\t{!autoHide && closable && (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\t\t\t\n\t\t\t\t{toast?.title}\n\t\t\t\t{isNotification && toast.options?.body && {toast.options?.body}}\n\t\t\t\n\t\t\n\t)\n}\n\nexport default Toast\n","import React from 'react'\nimport styled from 'styled-components'\nimport { Devices, Spacings, Text } from '@styles'\nimport { H6 } from '@base'\n\nconst MangerName = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tfont-size: ${Text.SMALL};\n\tcolor: ${({ theme, isPrimary, isPrimarySupply }) => {\n\t\tconst primaryColor = isPrimary ? theme.palette.background.messageRed : theme.palette.background.darkblack\n\t\treturn isPrimarySupply ? theme.palette.background.greenDark : primaryColor\n\t}};\n\tmargin: ${Spacings.SPACING_1B} ${Spacings.SPACING_1B} 0 0;\n\tline-height: 1.6;\n\tfont-weight: 600;\n\n\t&:last-of-type {\n\t\tmargin: ${Spacings.SPACING_1B} 0 0 0;\n\t}\n`\n\nconst ManagerNamesWrapper = styled.div`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n`\nconst Wrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n`\n\nconst Heading = styled(H6)`\n\tcolor: ${({ theme }) => theme.palette.text.label};\n\tfont-weight: ${Text.BOLD_600};\n\t@media ${Devices.tablet} {\n\t\tmargin-right: ${Spacings.SPACING_2B};\n\t}\n`\n\nconst AssignedRelationShipManager = ({ data }) => {\n\tif (!data?.relationship_manager)\n\t\treturn (\n\t\t\t\n\t\t\t\tNot assigned yet\n\t\t\t\n\t\t)\n\n\treturn (\n\t\t\n\t\t\tEnquiry assigned to\n\t\t\t\n\t\t\t\t{data?.relationship_manager.map((_employee, index) => (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{_employee.full_name ?? _employee.mobile_number}\n\t\t\t\t\t\t\t{index < data?.relationship_manager.length - 1 ? ',' : ''}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t))}\n\t\t\t\n\t\t\n\t)\n}\n\nexport default AssignedRelationShipManager\n","import { AddressCard, Button, H5, H6 } from '@base'\nimport { Address } from '@data/model'\nimport { Devices, Spacings, Text } from '@styles'\nimport styled, { css } from 'styled-components'\n\nconst Wrapper = styled.div``\n\nconst Heading = styled(H5)`\n\tmargin: ${Spacings.SPACING_1B} 0 ${Spacings.SPACING_3B};\n\tline-height: ${Text.LINE_HEIGHT_MAX};\n\tcolor: ${({ theme }) => theme.palette.text.black};\n`\n\nconst AddressListWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t@media ${Devices.tablet} {\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t}\n`\n\nconst AddressCardWrapper = styled.div`\n\tmargin-bottom: ${Spacings.SPACING_3B};\n\tflex-grow: 1;\n\n\tborder: 1px solid transparent;\n\tborder-radius: ${Spacings.SPACING_2B};\n\ttransition: border-color 0.15s ease-in-out;\n\t${({ selected }) => {\n\t\tif (selected) {\n\t\t\treturn css`\n\t\t\t\tcursor: initial;\n\t\t\t\tborder-color: ${({ theme }) => theme.palette.background.blue};\n\t\t\t`\n\t\t}\n\t}}\n\n\t${({ hoverable }) => {\n\t\tif (hoverable) {\n\t\t\treturn css`\n\t\t\t\tcursor: pointer;\n\t\t\t\t&:hover {\n\t\t\t\t\tborder-color: ${({ theme }) => theme.palette.background.blue};\n\t\t\t\t}\n\t\t\t`\n\t\t}\n\t}}\n\n\t@media ${Devices.tablet} {\n\t\tflex: 1 1 calc(50% - ${Spacings.SPACING_2B});\n\t\tmax-width: calc(50% - ${Spacings.SPACING_2B});\n\t\t&:nth-child(2n + 1) {\n\t\t\tmargin-right: ${Spacings.SPACING_3B};\n\t\t}\n\t}\n`\nconst HeaderWrapper = styled.div`\n\tdisplay: flex;\n\tmargin-bottom: ${Spacings.SPACING_4B};\n\tuser-select: none;\n\talign-items: center;\n`\n\nconst Message = styled(H6)`\n\tcolor: ${({ theme }) => theme.palette.text.label};\n`\n\nconst defaultLabels = {\n\tchangeButtonLabel: 'Change Address',\n\taddNewButtonLabel: 'Add New Address',\n\torSelectLabel: 'Or, select from existing addresses',\n}\n\nconst AddressSelector = ({ savedAddresses, selectedAddress, onChange, addNewAddressHandler, onlyView, labels }) => {\n\tconst selectSavedAddress = (address) => () => onChange(address)\n\tconst changeAddressButtonClick = () => onChange(new Address())\n\tconst addNew = () => addNewAddressHandler()\n\n\tconst renderAddAddress = () => (selectedAddress?.pincode ? showAddedAddress() : showAddNewAddress())\n\n\tconst showAddedAddress = (dontShowChangeAddressButton) => {\n\t\treturn (\n\t\t\tselectedAddress && (\n\t\t\t\t<>\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{!dontShowChangeAddressButton && (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)\n\t\t)\n\t}\n\n\tconst showAddNewAddress = () => (\n\t\t\n\t\t\t\n\t\t\n\t)\n\tconst renderAddressesFromAddressBook = () => {\n\t\tif (!selectedAddress?.pincode && Array.isArray(savedAddresses)) {\n\t\t\tif (savedAddresses.length === 0) {\n\t\t\t\treturn No saved addresses found\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{labels?.orSelectLabel ?? defaultLabels.orSelectLabel}\n\t\t\t\t\t\n\t\t\t\t\t\t{savedAddresses.map((address) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)\n\t\t}\n\t}\n\n\tconst renderAddressSelector = () => {\n\t\tif (onlyView) {\n\t\t\treturn {showAddedAddress(true)}\n\t\t}\n\n\t\treturn (\n\t\t\t\n\t\t\t\t{renderAddAddress()}\n\t\t\t\t{renderAddressesFromAddressBook()}\n\t\t\t\n\t\t)\n\t}\n\n\treturn renderAddressSelector()\n}\n\nexport default AddressSelector\n","import styled, { css } from 'styled-components'\nimport { Info } from '@material-ui/icons'\nimport { Devices, Spacings, Text } from '@styles'\n\nconst defaultStyles = css`\n\tborder-radius: ${Spacings.SPACING_2B};\n\tborder: 1px solid\n\t\t${({ theme, warning, info }) =>\n\t\t\tinfo ? theme.palette.background.blue : warning ? theme.palette.background.red : theme.palette.background.yellow};\n`\n\nconst BannerWrapper = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ${Spacings.SPACING_2B};\n\tbackground: ${({ theme, warning, info }) =>\n\t\tinfo ? theme.palette.background.white : warning ? theme.palette.background.redLightest : theme.palette.background.yellowLightest};\n\tmargin: ${({ margin }) => margin ?? 0};\n\tflex-grow: 1;\n\n\t${defaultStyles}\n\n\t${({ extendInMobile }) => {\n\t\tif (extendInMobile) {\n\t\t\treturn css`\n\t\t\t\tborder-radius: 0;\n\t\t\t\tborder-left: none;\n\t\t\t\tborder-right: none;\n\t\t\t`\n\t\t}\n\t}}\n\n\t@media ${Devices.tablet} {\n\t\t${defaultStyles}\n\t}\n`\n\nconst IconWrapper = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tuser-select: none;\n\tmargin-right: ${Spacings.SPACING_2B};\n\t& > svg {\n\t\tfill: ${({ theme, warning, info }) =>\n\t\t\tinfo ? theme.palette.background.blue : warning ? theme.palette.background.red : theme.palette.background.yellow};\n\t}\n`\n\nconst Content = styled.div`\n\tfont-size: ${Text.SMALL};\n\tline-height: ${Text.LINE_HEIGHT_MEDIUM};\n\tflex-grow: 1;\n`\n\nconst Banner = ({ text, margin, extendInMobile, warning, info }) => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t{text}\n\t\t\n\t)\n}\n\nexport default Banner\n","import React, { useEffect, useRef, useState } from 'react'\nimport { GoogleMap, useJsApiLoader, Marker, InfoWindow, MarkerClusterer, useGoogleMap } from '@react-google-maps/api'\nimport styled from 'styled-components'\nimport SupplierIcon from '@assets/maps/supplier.png'\nimport BuyerIcon from '@assets/maps/buyer.png'\nimport FactoryIcon from '@assets/maps/factory.png'\nimport LogisticsIcon from '@assets/maps/logistics.png'\nimport { googleMapKey, roles } from '@constants'\nimport { getAllOrgLocations } from '@data'\nimport { Select } from '@base'\nimport { Spacings } from '@styles'\n\nexport const SelectWrapper = styled.div`\n\tmargin: ${Spacings.SPACING_1B} 0 0 ${Spacings.SPACING_2B};\n`\n\nconst MapControl = (props) => {\n\tconst map = useGoogleMap()\n\tconst ref = useRef()\n\tuseEffect(() => {\n\t\tif (map && ref) {\n\t\t\tmap.controls[window.google.maps.ControlPosition[props.position]].push(ref.current)\n\t\t}\n\t}, [map, ref])\n\treturn {props.children}
\n}\n\nconst containerStyle = {\n\twidth: '100%',\n\theight: '100%',\n}\n\nconst center = {\n\tlat: 28.7041,\n\tlng: 77.1025,\n}\n\nconst RoleType = [{ name: 'ALL' }, { name: roles.buyer }, { name: roles.fabricator }, { name: roles.logistic }, { name: roles.trader }]\n\nconst UserLocationMapping = () => {\n\tconst { isLoaded } = useJsApiLoader({\n\t\tid: 'google-map-script',\n\t\tgoogleMapsApiKey: googleMapKey,\n\t})\n\tconst options = {\n\t\timagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', // so you must have m1.png, m2.png, m3.png, m4.png, m5.png and m6.png in that folder\n\t\tmaxZoom: 9,\n\t}\n\n\tconst [activeMarker, setActiveMarker] = useState(null)\n\tconst [selectedRole, setSelectedRole] = useState(RoleType[0])\n\tconst [markers, setMarkers] = useState([])\n\tconst [users, setUsers] = useState([])\n\tconst clustererRef = useRef()\n\n\tuseEffect(() => {\n\t\tgetAllOrgLocations()\n\t\t\t.then((res) => {\n\t\t\t\tconst _resUser = res.filter((_item) => _item.latitude !== -1 && _item.longitude !== -1)\n\t\t\t\tsetMarkers(_resUser)\n\t\t\t\tsetUsers(_resUser)\n\t\t\t})\n\t\t\t.catch((err) => {\n\t\t\t\tconsole.log(err)\n\t\t\t})\n\t}, [])\n\n\tconst handleActiveMarker = (marker) => {\n\t\tif (marker === activeMarker) {\n\t\t\treturn\n\t\t}\n\t\tsetActiveMarker(marker)\n\t}\n\n\tconst markerIcon = (partnerType) => {\n\t\tswitch (partnerType) {\n\t\t\tcase roles.trader:\n\t\t\t\treturn SupplierIcon\n\t\t\tcase roles.buyer:\n\t\t\t\treturn BuyerIcon\n\t\t\tcase roles.fabricator:\n\t\t\tcase roles.manufacturer:\n\t\t\t\treturn FactoryIcon\n\t\t\tcase roles.logistic:\n\t\t\t\treturn LogisticsIcon\n\t\t\tdefault:\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tclustererRef.current?.repaint()\n\t}, [markers.length])\n\n\tconst onChangeHandler = (item) => {\n\t\tsetSelectedRole(item)\n\t\tif (item?.name === 'ALL') {\n\t\t\tsetMarkers(users)\n\t\t\treturn\n\t\t}\n\t\tsetMarkers(users.filter((_item) => _item.role.includes(item?.name)))\n\t}\n\n\treturn isLoaded ? (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\n\t\t\t (clustererRef.current = clusterer)}>\n\t\t\t\t{(clusterer) =>\n\t\t\t\t\tmarkers?.map(({ mobile_number, full_name, role, latitude, longitude }, index) => (\n\t\t\t\t\t\t handleActiveMarker(index)}\n\t\t\t\t\t\t\tonMouseOut={() => handleActiveMarker(null)}\n\t\t\t\t\t\t\tclusterer={clusterer}\n\t\t\t\t\t\t\tnoClustererRedraw={true}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{activeMarker === index ? (\n\t\t\t\t\t\t\t\t setActiveMarker(null)}>\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{full_name} ({mobile_number})\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\n\t\t\t\t\t))\n\t\t\t\t}\n\t\t\t\n\t\t\n\t) : null\n}\n\nexport default UserLocationMapping\n","import { useEffect } from 'react'\n\nconst listenerCallbacks = new WeakMap()\n\nlet observer\n\nconst handleIntersections = (entries) => {\n\tentries.forEach((entry) => {\n\t\tif (listenerCallbacks.has(entry.target)) {\n\t\t\tlet cb = listenerCallbacks.get(entry.target)\n\n\t\t\tif (entry.isIntersecting || entry.intersectionRatio > 0) {\n\t\t\t\tobserver.unobserve(entry.target)\n\t\t\t\tlistenerCallbacks.delete(entry.target)\n\t\t\t\tcb()\n\t\t\t}\n\t\t}\n\t})\n}\n\nconst getIntersectionObserver = () => {\n\tif (!observer) {\n\t\tobserver = new IntersectionObserver(handleIntersections, {\n\t\t\trootMargin: '100px',\n\t\t\tthreshold: '0.15',\n\t\t})\n\t}\n\treturn observer\n}\n\nconst useIntersection = (elem, callback) => {\n\tuseEffect(() => {\n\t\tconst target = elem.current\n\t\tconst observer = getIntersectionObserver()\n\t\tlistenerCallbacks.set(target, callback)\n\t\tobserver.observe(target)\n\n\t\treturn () => {\n\t\t\tlistenerCallbacks.delete(target)\n\t\t\tobserver.unobserve(target)\n\t\t}\n\t}, [])\n}\n\nexport default useIntersection\n","import { memo, useEffect, useRef, useState } from 'react'\nimport styled, { keyframes } from 'styled-components'\nimport { Text } from '@styles'\nimport useIntersection from './useIntersection'\n\nconst Wrapper = styled.div`\n\tmin-width: ${({ width }) => (width ? width + 'px' : '100%')};\n\tmax-width: ${({ width }) => (width ? width + 'px' : '100%')};\n\theight: ${({ height }) => (height ? `${height}px` : '100%')};\n\tmax-height: 100%;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\toverflow: hidden;\n\tposition: relative;\n\tbackground: ${({ noBackground, theme }) => (noBackground ? 'transparent' : theme.palette.background.white)};\n\tpointer-events: ${({ noPointerEvents }) => (noPointerEvents ? 'none' : 'all')};\n`\n\nconst Image = styled.img`\n\tmax-height: 100%;\n\tmax-width: 100%;\n\topacity: ${({ loaded }) => (loaded ? 1 : 0)};\n\tuser-select: none;\n`\n\nconst LoaderWrapper = styled.div`\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n`\n\nconst gradientAnimation = keyframes`\n 0% { background-position: -150% 0; }\n 100% { background-position: 150% 0; }\n`\n\nconst LoadingAnimationDiv = styled.div`\n\tbackground: red;\n\theight: 100%;\n\twidth: 100%;\n\n\tbackground: ${({ theme }) =>\n\t\t`linear-gradient(to right, ${theme.palette.background.white} 10%, ${theme.palette.background.blueLightest} 50%, ${theme.palette.background.white} 90%)`};\n\tbackground-size: 300% 100%;\n\tanimation-name: ${gradientAnimation};\n\tanimation-duration: 2.5s;\n\tanimation-iteration-count: infinite;\n\tanimation-timing-function: linear;\n\tanimation-fill-mode: forwards;\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\n\t& > span {\n\t\tfont-size: ${Text.EXTRA_SMALL};\n\t\tcolor: ${({ theme }) => theme.palette.text.label};\n\t}\n`\n\nconst ImageRenderer = memo(({ src, height, width, onClick, index, noBackground, noPointerEvents, ...rest }) => {\n\tconst isFileInstance = src instanceof File\n\tconst [dataUrl, setDataUrl] = useState()\n\n\tconst [isInView, setIsInView] = useState(false)\n\tconst [loaded, setLoaded] = useState(false)\n\tconst imgRef = useRef()\n\n\tuseIntersection(imgRef, () => {\n\t\tsetIsInView(true)\n\t})\n\n\tuseEffect(() => {\n\t\tif (isFileInstance) {\n\t\t\tconst reader = new FileReader()\n\t\t\treader.readAsDataURL(src)\n\t\t\treader.onload = () => {\n\t\t\t\tsetDataUrl(reader.result)\n\t\t\t}\n\t\t\treader.onerror = (error) => {\n\t\t\t\tconsole.log('Error: ', error)\n\t\t\t\tsetDataUrl('')\n\t\t\t}\n\t\t}\n\t}, [src])\n\n\tconst onLoadHandler = () => {\n\t\tsetLoaded(true)\n\t}\n\n\tconst clickHandler = () => {\n\t\tif (typeof onClick === 'function') {\n\t\t\tonClick(src, index)\n\t\t}\n\t}\n\n\treturn (\n\t\t\n\t\t\t{isInView ? (\n\t\t\t\t<>\n\t\t\t\t\t{!loaded ? (\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tLoading...\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t) : null}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t) : null}\n\t\t\n\t)\n})\n\nexport default ImageRenderer\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport styled, { css } from 'styled-components'\nimport { ChevronLeft, ChevronRight } from '@material-ui/icons'\nimport { getServerUrl } from '@utils'\nimport { Spacings, Text } from '@styles'\nimport { useSwipe } from '@hooks'\nimport ImageRenderer from '../ImageRenderer'\n\nconst Wrapper = styled.div`\n\tmax-width: 100%;\n\twidth: 100%;\n\tposition: relative;\n\tborder: 2px solid ${({ theme }) => theme.palette.background.blueLightest};\n\tborder-radius: ${Spacings.SPACING_2B};\n\toverflow: hidden;\n`\nconst CarousalWindow = styled.div`\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n`\nconst SlidingWindow = styled.div`\n\tdisplay: flex;\n\theight: 100%;\n\tmax-height: 100%;\n\ttransform: translateX(${({ translate }) => `-${translate}px`});\n\ttransition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n\twidth: fit-content;\n`\nconst NavigationIcon = styled.div`\n\tposition: absolute;\n\ttop: 50%;\n\t${({ isLeft }) =>\n\t\tisLeft\n\t\t\t? css`\n\t\t\t\t\tleft: 0;\n\t\t\t\t\tborder-top-right-radius: ${Spacings.SPACING_2B};\n\t\t\t\t\tborder-bottom-right-radius: ${Spacings.SPACING_2B};\n\t\t\t `\n\t\t\t: css`\n\t\t\t\t\tright: 0;\n\t\t\t\t\tborder-top-left-radius: ${Spacings.SPACING_2B};\n\t\t\t\t\tborder-bottom-left-radius: ${Spacings.SPACING_2B};\n\t\t\t `};\n\ttransform: translateY(-50%);\n\theight: ${Spacings.SPACING_12B};\n\twidth: ${Spacings.SPACING_6B};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: ${({ theme }) => theme.palette.background.blueLightest};\n\tcursor: pointer;\n\n\t& > svg {\n\t\tfont-size: ${Text.XX_LARGE};\n\t\tcolor: ${({ theme }) => theme.palette.background.blue};\n\t}\n`\n\nconst Carousal = ({ urls = [], photosInView = 1, onClick }) => {\n\tconst serverUrl = getServerUrl()\n\tconst wrapperRef = useRef()\n\tconst windowRef = useRef()\n\tconst slidingWindowRef = useRef()\n\tconst [imageWidth, setImageWidth] = useState()\n\tconst [step, setStep] = useState(0)\n\n\tconst imageUrls = useMemo(() => {\n\t\treturn urls.map((src) => (src ? serverUrl + src : null)).filter(Boolean)\n\t}, [urls])\n\n\tconst { showPrevButton, showNextButton } = useMemo(\n\t\t() => ({\n\t\t\tshowPrevButton: step !== 0,\n\t\t\tshowNextButton: imageUrls.length > 0 && imageUrls.length >= photosInView && step !== imageUrls.length - photosInView,\n\t\t}),\n\t\t[step, imageUrls, photosInView]\n\t)\n\n\tconst navigate = (next) => () => setStep((s) => (next ? s + 1 : s - 1))\n\n\tconst xMoveHandler = useCallback(\n\t\t(isRightSwipe) => {\n\t\t\tif (!isRightSwipe && showNextButton) {\n\t\t\t\tnavigate(true)()\n\t\t\t} else if (isRightSwipe && showPrevButton) {\n\t\t\t\tnavigate()()\n\t\t\t}\n\t\t},\n\t\t[showPrevButton, showNextButton]\n\t)\n\n\tuseSwipe({ elem: windowRef.current, xMoveHandler })\n\n\tuseEffect(() => {\n\t\tconst handler = () => {\n\t\t\tif (wrapperRef.current) {\n\t\t\t\tconst { width } = wrapperRef.current.getBoundingClientRect()\n\n\t\t\t\tconst _imageWidth = width / photosInView\n\t\t\t\tconst _imageHeight = _imageWidth * (9 / 16)\n\t\t\t\tsetImageWidth(_imageWidth)\n\t\t\t\twrapperRef.current.style.height = `${_imageHeight}px`\n\t\t\t\twrapperRef.current.style['max-height'] = `${_imageHeight}px`\n\t\t\t}\n\t\t}\n\n\t\thandler()\n\t\twindow.addEventListener('resize', handler)\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', handler)\n\t\t}\n\t}, [photosInView])\n\n\treturn (\n\t\t (wrapperRef.current = _r)}>\n\t\t\t (windowRef.current = _r)}>\n\t\t\t\t (slidingWindowRef.current = _r)}>\n\t\t\t\t\t{imageUrls.map((src, index) => (\n\t\t\t\t\t\t\n\t\t\t\t\t))}\n\t\t\t\t\n\t\t\t\n\t\t\t{showPrevButton && (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\t\t\t{showNextButton && (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t)\n}\n\nexport default Carousal\n","import React from 'react'\nimport styled, { withTheme, css } from 'styled-components'\nimport { NewReleases } from '@material-ui/icons'\nimport { Button } from '../'\nimport { Devices, Spacings, Text } from '@styles'\n\nconst EnquiryItemWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder-radius: ${Spacings.SPACING_3B};\n\tbackground: linear-gradient(180deg, rgba(234, 241, 250, 1) 0%, rgba(255, 254, 254, 1) 68%);\n\tborder: 1px solid rgba(234, 241, 250, 1);\n\tmargin-bottom: ${Spacings.SPACING_3B};\n\ttransition: all 0.2s cubic-bezier(0, 0, 0.2, 1);\n\t// box-shadow: 0px ${Spacings.SPACING_1B} ${Spacings.SPACING_3B} 0.125rem ${({ theme }) => theme.palette.background.blue + '17'};\n\t${({ clickable }) => {\n\t\tif (clickable) {\n\t\t\treturn css`\n\t\t\t\tcursor: pointer;\n\t\t\t\t&:hover {\n\t\t\t\t\tborder-color: ${({ theme }) => theme.palette.background.blue};\n\t\t\t\t}\n\t\t\t`\n\t\t}\n\t}}\n\t${({ showBorder }) => {\n\t\tif (showBorder) {\n\t\t\treturn css`\n\t\t\t\tborder-color: ${({ theme }) => theme.palette.background.blue};\n\t\t\t`\n\t\t}\n\t}}\n`\n\nconst InfoWrapper = styled.div`\n\tmargin: ${Spacings.SPACING_3B} ${Spacings.SPACING_2B} ${Spacings.SPACING_2B};\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tflex-grow: 1;\n\tuser-select: none;\n`\n\nconst BottomPanel = styled.div``\n\nconst ItemInfoWrapper = styled.div`\n\twidth: 50%;\n\n\t${({ small }) => {\n\t\tif (small) {\n\t\t\treturn css`\n\t\t\t\twidth: 50%;\n\t\t\t`\n\t\t}\n\t\treturn css`\n\t\t\t@media ${Devices.tablet} {\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t\n\t\t`\n\t}}\n`\n\nconst InnerWrapper = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\tjustify-content: center;\n\tflex-direction: column;\n\tpadding: ${Spacings.SPACING_1B} ${Spacings.SPACING_2B};\n\tmargin-bottom: ${Spacings.SPACING_2B};\n\tmargin-right: ${Spacings.SPACING_2B};\n`\n\nconst ItemInfoLabel = styled.div`\n\tfont-size: ${Text.EXTRA_SMALL};\n\tcolor: ${({ theme }) => theme.palette.text.label};\n\ttext-transform: uppercase;\n\tline-height: 1.6;\n\tdisplay: flex;\n\talign-items: center;\n`\nconst ItemInfoValue = styled.div`\n\tfont-size: ${Text.MEDIUM};\n\tcolor: ${({ theme }) => theme.palette.text.primary};\n\n\t${({ overflow, wrap }) => {\n\t\tif (!overflow) {\n\t\t\treturn css`\n\t\t\t\twhite-space: ${wrap ? 'unset' : 'nowrap'};\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t`\n\t\t}\n\t}}\n`\nconst ActionViewText = styled(Button)``\nconst ViewMessageText = styled.span`\n\tcolor: ${({ theme }) => theme.palette.text.blue};\n\tdisplay: inline-block;\n\tposition: relative;\n\tcursor: pointer;\n\n\t& > span {\n\t\tvisibility: hidden;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t\tbottom: 110%;\n\t\tleft: 50%;\n\t\ttransform: translateX(-30%);\n\t\tpadding: ${Spacings.SPACING_2B};\n\t\tfont-size: ${Text.SMALL};\n\t\tbackground: ${({ theme }) => theme.palette.background.white};\n\t\tcolor: ${({ theme }) => theme.palette.text.black};\n\t\tbox-shadow: 0 ${Spacings.SPACING_1B} ${Spacings.SPACING_5B} 0 rgb(0 0 0 / 5%);\n\t\tborder-radius: ${Spacings.SPACING_2B};\n\t\ttransition: all 0.15s ease-in;\n\t\tdisplay: inline-block;\n\t\twidth: max-content;\n\t\tmax-width: 180px;\n\t\tmax-height: 120px;\n\t\toverflow: scroll;\n\t\tcursor: initial;\n\n\t\t/* Hide scrollbar for Chrome, Safari and Opera */\n\t\t&::-webkit-scrollbar {\n\t\t\tdisplay: none;\n\t\t}\n\t\t/* Hide scrollbar for IE, Edge and Firefox */\n\t\t& {\n\t\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\t\tscrollbar-width: none; /* Firefox */\n\t\t}\n\n\t\t@media ${Devices.tablet} {\n\t\t\tleft: 0;\n\t\t\ttransform: translateX(-10%);\n\t\t}\n\t}\n\n\t&:hover {\n\t\t& > span {\n\t\t\tvisibility: visible;\n\t\t\topacity: 1;\n\t\t}\n\t}\n`\n\nconst IconWrapper = styled.div`\n\tdisplay: flex;\n\tmargin-left: ${Spacings.SPACING_1B};\n\t& > svg {\n\t\tfont-size: ${Text.LARGE};\n\t}\n`\n\nconst MessageView = ({ text }) => {\n\treturn (\n\t\t\n\t\t\tView\n\t\t\t{text}\n\t\t\n\t)\n}\n\nconst HighLightIcon = withTheme(({ theme }) => (\n\t\n\t\t\n\t\n))\n\nconst redirectAction = (actionUrl) => (e) => {\n\te.stopPropagation()\n\tconst a = window.open(actionUrl)\n\ta.focus()\n}\n\nconst CloudInventoryCard = ({ data, id = Math.random() * 1000, small, clickable, clickHandler, renderBottomPanel, showBorder }) => {\n const viewClickHandler = () => {\n\t\tif (!clickable) return\n\t\tclickHandler(id)\n }\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{data.map(({ label, value, isMessage, highlight, actionUrl, wrap }, index) => {\n\t\t\t\t\tconst overflow = isMessage && value?.length > 12\n\t\t\t\t\tif (overflow) {\n\t\t\t\t\t\tvalue = \n\t\t\t\t\t}\n\t\t\t\t\tif (actionUrl) {\n\t\t\t\t\t\tvalue = (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t{highlight && }\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t\n\t\t\t{renderBottomPanel && {renderBottomPanel}}\n\t\t\n\t)\n}\n\nexport default CloudInventoryCard\n","import { Button, Carousal, H6, UploadMultipleFileButton } from '@base'\nimport styled from 'styled-components'\nimport { Spacings } from '@styles'\nimport { useDispatch } from 'react-redux'\nimport { toggleFileViewer } from '@data/state/action/root'\n\nconst Wrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n`\nexport const MessageHeading = styled(H6)`\n\tcolor: ${({ theme }) => theme.palette.text.label};\n\tmargin-bottom: ${Spacings.SPACING_3B};\n`\n\nexport const UploadPhotoWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n\twidth: 100%;\n\tmargin-top: ${({ topMargin }) => (topMargin ? Spacings.SPACING_3B : 0)};\n`\n\nconst ImageHandler = ({ images = [], handler = () => {}, photosInView = 3, viewOnly, downloadAccess, deleteAccess }) => {\n\tconst dispatch = useDispatch()\n\tconst viewPhotoHandler = () => {\n\t\tdispatch(toggleFileViewer(true, { files: images }))\n\t}\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{!images || images?.length === 0 ? 'No images added' : `${images?.length} image${images?.length > 1 ? 's' : ''} available`}\n\t\t\t\n\t\t\t{images?.length > 0 && }\n\t\t\t 0}>\n\t\t\t\t\n\t\t\t\t{!viewOnly && (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\n\t\t\n\t)\n}\n\nexport default ImageHandler\n","import { Input } from '@base'\nimport { strings } from '@constants'\nimport { Spacings, Text } from '@styles'\nimport { displayAmount } from '@utils'\nimport { useEffect } from 'react'\nimport { useCallback, useState } from 'react'\nimport styled from 'styled-components'\n\nconst Wrapper = styled.div`\n\tmargin: ${({ margin }) => margin};\n\tbackground: ${({ theme, viewOnly }) => (viewOnly ? theme.palette.background.white : theme.palette.background.blueLightest)};\n\tborder-radius: ${Spacings.SPACING_2B};\n`\nconst Row = styled.div`\n\tdisplay: grid;\n\tgrid-template-columns: 34% repeat(3, 21%);\n\tgap: ${Spacings.SPACING_1B};\n\n\tfont-size: ${Text.SMALL};\n\tpadding: ${Spacings.SPACING_1B} ${Spacings.SPACING_2B};\n\n\t&:last-of-type {\n\t\tpadding-bottom: ${Spacings.SPACING_2B};\n\t}\n`\nconst Cell = styled.div`\n\tdisplay: ${({ noFlex }) => (noFlex ? 'initial' : 'flex')};\n\talign-items: center;\n\tjustify-content: ${({ alignContent }) => alignContent ?? 'center'};\n`\n\nconst HeaderRow = styled(Row)`\n\tfont-weight: ${Text.BOLD_600};\n\tborder-bottom: 1px solid ${({ theme }) => theme.palette.background.blueLight};\n\tmargin-bottom: ${Spacings.SPACING_1B};\n`\nconst HeaderCell = styled(Cell)``\n\nconst RateCard = ({ data, viewOnly, margin, update, updateKey, isAdmin, isSupplierSide }) => {\n\tconst [hasError, setHasError] = useState({})\n\tconst { items } = data\n\n\tconst renderHeader = () => {\n\t\treturn (\n\t\t\t\n\t\t\t\tProduct Name\n\t\t\t\tOriginal Quote\n\t\t\t\tCounter Quote\n\t\t\t\tNew Quote\n\t\t\t\n\t\t)\n\t}\n\n\tconst onChange = (item) => (value) => {\n\t\tupdate({ productName: item.product_name, updates: { [updateKey]: value } })\n\t}\n\n\tuseEffect(() => {\n\t\tif (typeof update === 'function') {\n\t\t\tupdate({ productName: hasError?.productName, updates: { error: hasError?.error } })\n\t\t}\n\t}, [hasError])\n\n\tconst renderEditableCells = (item) => {\n\t\tconst editableCell = viewOnly ? (\n\t\t\t{displayAmount(item?.[updateKey])} | \n\t\t) : (\n\t\t\t\n\t\t\t\t setHasError({ productName: item.product_name, error })}\n\t\t\t\t/>\n\t\t\t | \n\t\t)\n\n\t\tif (isAdmin) {\n\t\t\tif (isSupplierSide) {\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{editableCell}\n\t\t\t\t\t\t{displayAmount(item.user_counter_price)} | \n\t\t\t\t\t\n\t\t\t\t)\n\t\t\t} else {\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{displayAmount(item.user_counter_price)} | \n\t\t\t\t\t\t{editableCell}\n\t\t\t\t\t\n\t\t\t\t)\n\t\t\t}\n\t\t} else {\n\t\t\tif (isSupplierSide) {\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{displayAmount(item.mb_counter_price)} | \n\t\t\t\t\t\t{editableCell}\n\t\t\t\t\t\n\t\t\t\t)\n\t\t\t} else {\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{editableCell}\n\t\t\t\t\t\t{displayAmount(item.mb_counter_price)} | \n\t\t\t\t\t\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\t}\n\n\tconst renderQuotes = () => {\n\t\treturn items.map((_i) => {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t| {_i.product_name} | \n\t\t\t\t\t{displayAmount(_i.original_price) ?? '-'} | \n\t\t\t\t\t{renderEditableCells(_i)}\n\t\t\t\t
\n\t\t\t)\n\t\t})\n\t}\n\n\treturn (\n\t\t\n\t\t\t{renderHeader()}\n\t\t\t{renderQuotes()}\n\t\t\n\t)\n}\n\nexport default RateCard\n","import { useState } from 'react'\nimport { useRef } from 'react'\nimport styled, { css, withTheme } from 'styled-components'\nimport { Close, Error, Maximize, Message, Minimize, Send } from '@material-ui/icons'\nimport { BasicButton, Button, EmptyState, H5, H6, Input, Loader } from '@base'\nimport { Spacings, Text } from '@styles'\nimport RateCard from './RateCard'\nimport moment from 'moment/moment'\nimport { useEffect } from 'react'\nimport { useEnter } from '@hooks'\nimport { CHAT_STATUS } from '@constants'\n\nconst Wrapper = styled.section`\n\twidth: 100%;\n\theight: 100%;\n\tbackground: ${({ theme }) => theme.palette.background.white};\n\tdisplay: flex;\n\tflex-direction: column;\n\tposition: relative;\n`\nconst Header = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ${Spacings.SPACING_3B} ${Spacings.SPACING_4B};\n\tbackground: ${({ theme, isSupplierSide }) => (isSupplierSide ? theme.palette.background.redLight : theme.palette.background.blueLight)};\n\tbox-shadow: 0 ${Spacings.SPACING_1B} ${Spacings.SPACING_5B} 0 rgb(0 0 0 / 5%);\n`\nconst Body = styled.div`\n\tflex-grow: 1;\n\tpadding: ${Spacings.SPACING_2B} ${Spacings.SPACING_4B} 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: scroll;\n\n\t${({ withLoader }) => {\n\t\tif (withLoader) {\n\t\t\treturn css`\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t`\n\t\t}\n\t}}\n\n\t/* Hide scrollbar for Chrome, Safari and Opera */\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\t/* Hide scrollbar for IE, Edge and Firefox */\n\t& {\n\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\tscrollbar-width: none; /* Firefox */\n\t}\n`\nconst Footer = styled.div`\n\tpadding: ${Spacings.SPACING_3B} ${Spacings.SPACING_4B};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: ${({ justifyContent }) => justifyContent};\n\tbackground: ${({ theme }) => theme.palette.background.blueLightest};\n\tbox-shadow: 0 ${Spacings.SPACING_1B} ${Spacings.SPACING_5B} 0 rgb(0 0 0 / 5%);\n`\n\nconst IconWrapper = styled.div`\n\tmargin: ${({ margin }) => margin};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: pointer;\n\n\t& > svg {\n\t\tfont-size: ${Text.X_LARGE};\n\t\tcolor: ${({ color }) => color};\n\t}\n`\n\nconst InputWrapper = styled.div`\n\tflex-grow: 1;\n\tmargin-right: ${Spacings.SPACING_1B};\n`\n\nconst SendButton = styled(BasicButton)`\n\tjustify-content: center;\n\tborder-radius: 50%;\n\theight: 2.35rem;\n\twidth: 2.35rem;\n\tmargin-left: ${Spacings.SPACING_2B};\n\n\t& > svg {\n\t\tfill: ${({ theme }) => theme.palette.text.white};\n\t\tfont-size: ${Text.X_LARGE};\n\t}\n`\n\nconst CreateOfferWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\n\tbox-shadow: 0 ${Spacings.SPACING_1B} ${Spacings.SPACING_5B} 0 rgb(0 0 0 / 5%);\n\n\tposition: absolute;\n\twidth: 100%;\n\theight: ${({ show }) => (show ? 'calc(100% - 6.7rem)' : '0')};\n\ttop: 2.75rem;\n\tbackground: ${({ theme }) => theme.palette.background.blackGrey + '5e'};\n\n\tvisibility: ${({ show }) => (show ? 'visible' : 'hidden')};\n\n\toverflow: scroll;\n\t/* Hide scrollbar for Chrome, Safari and Opera */\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\t/* Hide scrollbar for IE, Edge and Firefox */\n\t& {\n\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\tscrollbar-width: none; /* Firefox */\n\t}\n`\nconst ButtonWrapper = styled.div`\n\tdisplay: flex;\n\t& > button {\n\t\theight: 2.35rem;\n\t}\n`\n\nconst SubArrayMessageWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n`\nconst BasicMessageWrapper = styled.div`\n\tmargin: ${Spacings.SPACING_1B} 0 ${Spacings.SPACING_1B};\n\talign-self: ${({ isOwn }) => (isOwn ? 'flex-end' : 'flex-start')};\n`\n\nconst TextMessageWrapper = styled(BasicMessageWrapper)`\n\tmax-width: 60%;\n`\n\nconst Avatar = styled.div`\n\twidth: ${({ fitContent }) => (fitContent ? 'fit-content' : '1.75rem')};\n\theight: 1.75rem;\n\tpadding: ${({ fitContent }) => (fitContent ? `0 ${Spacings.SPACING_2B}` : 0)};\n\tborder-radius: ${Spacings.SPACING_6B};\n\tbackground: ${({ theme, isOwn }) => (isOwn ? theme.palette.background.yellow : theme.palette.background.blue)};\n\tcolor: ${({ theme }) => theme.palette.text.white};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-bottom: ${Spacings.SPACING_2};\n\tmargin-top: ${Spacings.SPACING_1B};\n\tfont-size: ${Text.EXTRA_SMALL};\n\t${({ isOwn }) => {\n\t\tif (isOwn) {\n\t\t\treturn css`\n\t\t\t\tmargin-left: auto;\n\t\t\t\tmargin-right: -${Spacings.SPACING_2B};\n\t\t\t\tborder-bottom-left-radius: ${Spacings.SPACING_2B};\n\t\t\t`\n\t\t}\n\t\treturn css`\n\t\t\tmargin-left: -${Spacings.SPACING_2B};\n\t\t\tborder-bottom-right-radius: ${Spacings.SPACING_2B};\n\t\t`\n\t}}\n`\n\nconst OfferMessageWrapper = styled(BasicMessageWrapper)`\n\tposition: sticky;\n\ttop: -${Spacings.SPACING_2B};\n\tbackground: ${({ theme }) => theme.palette.text.white};\n\tmargin: 0 -${Spacings.SPACING_4B};\n\tpadding: 0 ${Spacings.SPACING_4B};\n\twidth: calc(100% + ${Spacings.SPACING_8B});\n`\n\nconst RateCardWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder-radius: ${Spacings.SPACING_2B};\n\tbox-sizing: border-box;\n\tpadding: 0 ${Spacings.SPACING_2B};\n\tbackground: ${({ theme, isOwn }) => (isOwn ? theme.palette.background.chatMessageYellow : theme.palette.background.chatMessageBlue)};\n`\n\nconst MessageText = styled.div`\n\tpadding: ${Spacings.SPACING_2B};\n\tfont-size: ${Text.SMALL};\n\tbackground: ${({ theme, isOwn }) => (isOwn ? theme.palette.background.chatMessageYellow : theme.palette.background.chatMessageBlue)};\n\tborder-radius: ${Spacings.SPACING_2B};\n`\nconst MessageMeta = styled.div`\n\tmargin-top: ${Spacings.SPACING_1B};\n\tfont-size: ${Text.EXTRA_SMALL};\n\tcolor: ${({ theme }) => theme.palette.text.label};\n\tdisplay: flex;\n\tjustify-content: ${({ isOwn }) => (isOwn ? 'flex-end' : 'flex-start')};\n`\n\nconst LastOfferHeading = styled(H6)`\n\tmargin-top: ${Spacings.SPACING_2B};\n\tcolor: ${({ theme, isOwn }) => (isOwn ? theme.palette.text.red : theme.palette.text.blue)};\n`\n\nconst OfferStatus = styled.div`\n\tpadding: ${Spacings.SPACING_3B};\n\tbackground: ${({ theme, isSuccess }) => (isSuccess ? theme.palette.background.green : theme.palette.background.red)};\n\tborder-radius: ${Spacings.SPACING_2B};\n\tmargin-bottom: ${Spacings.SPACING_2B};\n\tcolor: ${({ theme, isSuccess }) => (isSuccess ? theme.palette.text.black : theme.palette.text.white)};\n\tfont-weight: ${Text.BOLD_600};\n\tfont-size: ${Text.SMALL};\n\tdisplay: flex;\n\tjustify-content: center;\n`\n\nconst LiveNegotiation = ({\n\ttheme,\n\tid,\n\tonClose,\n\tdata,\n\tonSubmit,\n\tonMinimise,\n\tonMaximise,\n\tupdateKey = 'user_counter_price',\n\tonCreateOfferClick,\n\tcreateOfferButtonText = '',\n\tisAdmin,\n\tisSupplierSide,\n\tchatStatus,\n\tviewOnly,\n\tcloseNegotiation,\n\tupdateOfferHandler,\n\tuserId,\n\tclosed,\n}) => {\n\tviewOnly = viewOnly || closed\n\n\tconst bodyRef = useRef()\n\tconst [minimised, setMinimised] = useState()\n\tconst [newOffer, setNewOffer] = useState()\n\tconst [message, setMessage] = useState()\n\n\tconst offerStatus = data?.offerStatus\n\n\tconst disableSendButton = newOffer ? !newOffer.isValid(updateKey) : !message\n\n\tuseEffect(() => {\n\t\tsetTimeout(() => {\n\t\t\tif (bodyRef.current) {\n\t\t\t\tbodyRef.current.scrollTop = bodyRef.current?.scrollHeight\n\t\t\t}\n\t\t})\n\t}, [data, minimised])\n\n\tuseEffect(() => {\n\t\tif (userId) {\n\t\t\tsetMessage('')\n\t\t\tdiscardCounterOffer()\n\t\t}\n\t}, [userId])\n\n\tconst enterHandler = () => {\n\t\tif (disableSendButton || viewOnly) return\n\n\t\tnewOffer ? sendOffer() : sendMessage()\n\t}\n\n\tuseEnter(enterHandler)\n\n\tconst miniMaxHandler = () => {\n\t\tsetMinimised((_m) => {\n\t\t\t_m ? onMaximise() : onMinimise()\n\t\t\treturn !_m\n\t\t})\n\t}\n\n\tconst update = ({ productName, updates }) => {\n\t\tsetNewOffer((_offer) => _offer.updateItem(productName, updates))\n\t}\n\n\tconst createOfferHandler = () => {\n\t\tonCreateOfferClick((a) => setNewOffer(a))\n\t\tsetMessage('')\n\t}\n\tconst discardCounterOffer = () => {\n\t\tsetNewOffer(null)\n\t}\n\n\tconst sendOffer = () => {\n\t\tif (!newOffer) return\n\n\t\tonSubmit('offer', newOffer).then(() => {\n\t\t\tsetNewOffer(null)\n\t\t})\n\t}\n\n\tconst sendMessage = () => {\n\t\tif (!message) return\n\n\t\tonSubmit('text', message).then(() => {\n\t\t\tsetMessage('')\n\t\t})\n\t}\n\n\tconst onMessageChange = (value) => {\n\t\tsetMessage(value)\n\t}\n\n\tconst renderMessage = (_m, _si, _i, _arr) => {\n\t\tconst key = _m.created_at + `_message_${_si}_${_i}`\n\t\tconst isOwn = _m.isOwnMessage()\n\t\tconst isLastMessageBlock = _si === _arr.length - 1\n\t\tconst messageMeta = _m.created_at ? {moment(_m.created_at).format('D/MM/YYYY, h:mm a')} : null\n\t\tconst avatar = (\n\t\t\t\n\t\t\t\t{isOwn ? 'You' : isAdmin ? (isSupplierSide ? 'Supplier' : 'Buyer') : 'MB'}\n\t\t\t\n\t\t)\n\n\t\tif (_m.type === 'offer') {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t{avatar}\n\t\t\t\t\t\n\t\t\t\t\t\t{isLastMessageBlock && (\n\t\t\t\t\t\t\t{isOwn ? 'Latest offer sent' : 'Latest offer received'}\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t\n\t\t\t\t\t\t{!_m.status && isLastMessageBlock && !viewOnly && !isOwn && (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t updateOfferHandler(false)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tReject Offer\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{_m.status && (\n\t\t\t\t\t\t\tThis offer was {_m.status.toLowerCase()}\n\t\t\t\t\t\t)}\n\t\t\t\t\t\n\t\t\t\t\t{messageMeta}\n\t\t\t\t\n\t\t\t)\n\t\t}\n\t\treturn (\n\t\t\t\n\t\t\t\t{avatar}\n\t\t\t\t{_m.summary}\n\t\t\t\t{messageMeta}\n\t\t\t\n\t\t)\n\t}\n\n\tconst renderBody = () => {\n\t\tif (chatStatus === CHAT_STATUS.LOADING) {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)\n\t\t}\n\n\t\tif (chatStatus === CHAT_STATUS.ERROR) {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t} noAction text='Failed to load the conversation.' />\n\t\t\t\t\n\t\t\t)\n\t\t}\n\n\t\tif (chatStatus === CHAT_STATUS.NO_MESSAGE) {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t} noAction text='Start a conversation now!' />\n\t\t\t\t\n\t\t\t)\n\t\t}\n\n\t\tconst messages = data?.messages ?? []\n\t\treturn (\n\t\t\t (bodyRef.current = _ref)}>\n\t\t\t\t{messages.map((_subArray, _si, _arr) => {\n\t\t\t\t\treturn {_subArray.map((_m, _i) => renderMessage(_m, _si, _i, _arr))}\n\t\t\t\t})}\n\t\t\t\n\t\t)\n\t}\n\tconst renderFooterActions = () => {\n\t\tif (newOffer) {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{offerStatus?.toLowerCase() !== 'accepted' && (\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t\n\t\t\t)\n\t\t}\n\t}\n\n\tconst showMinimizeButton = onMinimise && onMaximise\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\tLive Negotiation ({id})
\n\t\t\t\t{!viewOnly && (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{showMinimizeButton && (\n\t\t\t\t\t\n\t\t\t\t\t\t{minimised ? : }\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t{!minimised && (\n\t\t\t\t<>\n\t\t\t\t\t{renderBody()}\n\t\t\t\t\t\n\t\t\t\t\t\t{newOffer && (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)}\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t)\n}\n\nexport default withTheme(LiveNegotiation)\n","import styled, { css } from 'styled-components'\nimport { Spacings, Text, Devices } from '@styles'\n\nexport const Wrapper = styled.div`\n\tdisplay: flex;\n\twidth: 100vw;\n\theight: 100%;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 1001;\n\tdisplay: flex;\n\tflex-direction: column;\n`\n\nexport const ViewerWrapper = styled.div`\n\tflex-grow: 1;\n\tbackground: ${({ theme }) => theme.palette.background.dark + 'cc'};\n\tmax-height: 75vh;\n\tpadding: ${Spacings.SPACING_8B} 0rem;\n\t@media ${Devices.mobile} {\n\t\tmax-height: calc(100vh - ${Spacings.SPACING_15B});\n\t\tpadding: 0rem;\n\t}\n`\nexport const ViewerFooter = styled.div`\n\twidth: 100%;\n\tmin-height: ${Spacings.SPACING_15B};\n\tmax-height: ${Spacings.SPACING_15B};\n\tbackground: ${({ theme }) => theme.palette.background.dark};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n`\n\nexport const Tool = styled.div`\n height: ${Spacings.SPACING_8B};\n width: ${Spacings.SPACING_8B};\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: ${({ disabled, theme }) => (disabled ? theme.palette.background.light : theme.palette.background.white)};\n & > svg {\n fill: background: ${({ theme }) => theme.palette.text.dark};\n }\n\n margin: 0 ${Spacings.SPACING_1B};\n cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};\n\n\t${({ isText }) => {\n\t\tif (isText) {\n\t\t\treturn css`\n\t\t\t\twidth: fit-content;\n\t\t\t\tborder-radius: 5rem;\n\t\t\t\tpadding: 0 ${Spacings.SPACING_2B};\n\t\t\t\tfont-size: ${Text.SMALL};\n\t\t\t\tbackground: ${({ theme }) => theme.palette.background.green};\n\t\t\t\t@media ${Devices.tablet} {\n\t\t\t\t\tfont-size: ${Text.MEDIUM};\n\t\t\t\t}\n\t\t\t`\n\t\t}\n\t}}\n`\n\nexport const ZoomLevel = styled.div`\n\tcolor: ${({ theme }) => theme.palette.text.white};\n\tfont-size: ${Text.SMALL};\n\tmargin: 0 ${Spacings.SPACING_1B};\n\tmin-width: ${Spacings.SPACING_9B};\n\ttext-align: center;\n`\n\nexport const NavigationButton = styled(Tool)`\n\t${({ isLeft }) => {\n\t\tif (isLeft) {\n\t\t\treturn css`\n\t\t\t\tmargin-right: auto;\n\t\t\t\tmargin-left: ${Spacings.SPACING_4B};\n\t\t\t\t@media ${Devices.tablet} {\n\t\t\t\t\tmargin-right: ${Spacings.SPACING_1B};\n\t\t\t\t}\n\t\t\t`\n\t\t}\n\t\treturn css`\n\t\t\tmargin-left: auto;\n\t\t\tmargin-right: ${Spacings.SPACING_4B};\n\t\t\t@media ${Devices.tablet} {\n\t\t\t\tmargin-left: ${Spacings.SPACING_1B};\n\t\t\t}\n\t\t`\n\t}}\n`\n\nexport const CloseTool = styled(Tool)`\n\tposition: absolute;\n\ttop: ${Spacings.SPACING_2B};\n\tright: ${Spacings.SPACING_2B};\n\tbackground: ${({ theme }) => theme.palette.background.dark};\n\t& > svg {\n\t\tfill: ${({ theme }) => theme.palette.text.white};\n\t}\n\tz-index: 1001;\n`\n\nexport const ScalingArea = styled.div`\n\tmax-height: 100%;\n\tmax-width: 100%;\n\twidth: 100%;\n\theight: 100%;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 0 ${Spacings.SPACING_4B};\n\n\toverflow: hidden;\n`\nexport const RenderingArea = styled.div`\n\tmax-height: 100%;\n\theight: 100%;\n\tcursor: move;\n\ttransition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\ttransform-origin: center;\n`\n\nexport const ToolbarWrapper = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n`\n\nexport const PdfWrapper = styled.div`\n\toverflow: scroll;\n\tmax-width: 100%;\n\tmax-height: 100%;\n\n\t.rpv-core-inner-page {\n\t\tbackground: transparent !important;\n\t\tmax-width: 100% !important;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t}\n`\n","import { useState, useRef, useEffect, useCallback, useMemo } from 'react'\nimport { ChevronLeft, ChevronRight, ArrowDownward, Add, Remove, Close, RotateLeft, RotateRight, DeleteOutline } from '@material-ui/icons'\nimport { ProgressBar, Viewer, Worker } from '@react-pdf-viewer/core'\nimport { zoomPlugin } from '@react-pdf-viewer/zoom'\nimport { rotatePlugin } from '@react-pdf-viewer/rotate'\nimport { getFilePlugin } from '@react-pdf-viewer/get-file'\n\nimport { ImageRenderer } from '@base'\nimport {\n\tWrapper,\n\tViewerWrapper,\n\tViewerFooter,\n\tTool,\n\tZoomLevel,\n\tNavigationButton,\n\tCloseTool,\n\tScalingArea,\n\tRenderingArea,\n\tToolbarWrapper,\n\tPdfWrapper,\n} from './styles'\nimport '@react-pdf-viewer/core/lib/styles/index.css'\nimport { MODAL_TYPES, strings } from '@constants'\nimport { toggleModal } from '@data/state/action/root'\nimport { useDispatch } from 'react-redux'\n\nconst PdfRenderer = ({ src, zoomPluginInstance, rotatePluginInstance, getFilePluginInstance }) => {\n\tconst isFileInstance = src instanceof File\n\n\tconst [dataUrl, setDataUrl] = useState()\n\n\tuseEffect(() => {\n\t\tif (isFileInstance) {\n\t\t\tconst reader = new FileReader()\n\t\t\treader.readAsDataURL(src)\n\t\t\treader.onload = () => {\n\t\t\t\tsetDataUrl(reader.result)\n\t\t\t}\n\t\t\treader.onerror = (error) => {\n\t\t\t\tconsole.log('Error: ', error)\n\t\t\t\tsetDataUrl('')\n\t\t\t}\n\t\t}\n\t}, [src])\n\n\tif (isFileInstance && !dataUrl) return null\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t (\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t