ordering-ui-admin-external 1.33.1 → 1.35.0

package/src/components/BusinessIntelligence/Reports/ReportsSlaOrders/index.js

@@ -0,0 +1,200 @@
+import React, { useRef } from 'react'
+import {
+  useLanguage,
+  useUtils,
+  AdvancedReports as AdvancedReportsController
+} from 'ordering-components-admin-external'
+
+import { AnalyticsCalendar } from '../../AnalyticsCalendar'
+import { Download } from 'react-bootstrap-icons'
+import Skeleton from 'react-loading-skeleton'
+import { AnalyticsFilterTimeZone } from '../../AnalyticsFilterTimeZone'
+
+import {
+  ReportsContainer,
+  ReportsTableContainer,
+  TitleBlock,
+  ButtonActionList,
+  CalendarWrapper,
+  ReportsTable,
+  TableWrapper,
+  EmptyContent,
+  Title,
+  Thead,
+  Tbody,
+  Tfoot,
+  AnalyticsTimeZoneWrapper,
+  TimeZoneAndCalendar
+} from './styles'
+
+const ReportsSlaOrdersUI = (props) => {
+  const {
+    filterList,
+    handleChangeFilterList,
+    reportData
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ parsePrice }] = useUtils()
+
+  const tableRef = useRef(null)
+
+  const handleChangeDate = (date1, date2) => {
+    handleChangeFilterList({ ...filterList, from: date1, to: date2 })
+  }
+
+  const downloadCSV = () => {
+    if (reportData?.content?.body?.rows?.length === 0) return
+    let csv = ''
+    reportData.content.header.rows.forEach((tr) => {
+      tr.forEach((th) => {
+        csv += `${th.value},`
+        for (let i = 1; i < th.colspan; i++) {
+          csv += ' ,'
+        }
+      })
+      csv += '\n'
+    })
+    csv += '\n'
+    reportData.content.body.rows.forEach((tr) => {
+      tr.forEach((th) => {
+        csv += `${th.value},`
+        for (let i = 1; i < th.colspan; i++) {
+          csv += ' ,'
+        }
+      })
+      csv += '\n'
+    })
+    csv += '\n'
+    reportData.content.footer.rows.forEach((tr) => {
+      tr.forEach((th) => {
+        csv += `${th.value},`
+        for (let i = 1; i < th.colspan; i++) {
+          csv += ' ,'
+        }
+      })
+      csv += '\n'
+    })
+    csv += '\n'
+    var downloadLink = document.createElement('a')
+    var blob = new Blob(['\ufeff', csv])
+    var url = URL.createObjectURL(blob)
+    downloadLink.href = url
+    const fileSuffix = new Date().getTime()
+    downloadLink.download = `completed_orders_${fileSuffix}.csv`
+    document.body.appendChild(downloadLink)
+    downloadLink.click()
+    document.body.removeChild(downloadLink)
+  }
+
+  const convertHMS = (value) => {
+    const sec = parseInt(value, 10) // convert value to number if it's string
+    let hours = Math.floor(sec / 3600) // get hours
+    let minutes = Math.floor((sec - (hours * 3600)) / 60) // get minutes
+    let seconds = sec - (hours * 3600) - (minutes * 60) //  get seconds
+    // add 0 if value < 10; Example: 2 => 02
+    if (hours < 10) { hours = '0' + hours }
+    if (minutes < 10) { minutes = '0' + minutes }
+    if (seconds < 10) { seconds = '0' + seconds }
+    return hours + ':' + minutes + ':' + seconds // Return is HH : MM : SS
+  }
+
+  const thObj = {
+    REPORT_HEADER_IN_TIME: t('OK', 'Ok'),
+    REPORT_HEADER_AT_RISK: t('AT_RISK', 'At Risk'),
+    REPORT_HEADER_DELAYED: t('DELAYED', 'Delayed'),
+    REPORT_HEADER_STATUS: t('STATUS', 'Status')
+  }
+
+  return (
+    <ReportsContainer>
+      <Title>{t('SLA_ORDERS', 'SLA orders')}</Title>
+      <ButtonActionList>
+        <TimeZoneAndCalendar>
+          <AnalyticsTimeZoneWrapper>
+            <AnalyticsFilterTimeZone {...props} />
+          </AnalyticsTimeZoneWrapper>
+          <CalendarWrapper>
+            <AnalyticsCalendar
+              handleChangeDate={handleChangeDate}
+              defaultValue={filterList}
+            />
+          </CalendarWrapper>
+        </TimeZoneAndCalendar>
+      </ButtonActionList>
+      <ReportsTableContainer>
+        <TitleBlock active={reportData?.content?.body?.rows?.length > 0}>
+          <h2>{t('SLA_ORDERS', 'SLA orders')}</h2>
+          <Download onClick={() => downloadCSV()} />
+        </TitleBlock>
+        {reportData?.loading ? (
+          <div className='row'>
+            {[...Array(20).keys()].map(i => (
+              <div className='col-md-3 col-sm-3 col-3' key={i}><Skeleton /></div>
+            ))}
+          </div>
+        ) : (
+          <TableWrapper>
+            {reportData?.content?.body?.rows?.length > 0 ? (
+              <ReportsTable ref={tableRef}>
+                {reportData?.content?.header?.rows.length > 0 && (
+                  <Thead>
+                    {
+                      reportData?.content?.header?.rows.map((tr, i) => (
+                        <tr key={i}>
+                          {tr?.map((th, j) => (
+                            <th key={j} colSpan={th.colspan}>{t(th.value.toUpperCase(), thObj[th.value])}</th>
+                          ))}
+                        </tr>
+                      ))
+                    }
+                  </Thead>
+                )}
+                {reportData?.content?.body?.rows.map((tbody, i) => (
+                  <Tbody key={i}>
+                    <tr>
+                      {tbody.map((td, j) => (
+                        <td key={j} colSpan={td.colspan}>
+                          {(td.value_unit === 'seconds' && td.value)
+                            ? convertHMS(td.value)
+                            : (td.value_unit === 'currency'
+                              ? parsePrice(td.value)
+                              : td.value
+                            )}
+                        </td>
+                      ))}
+                    </tr>
+                  </Tbody>
+                ))}
+                {reportData?.content?.footer?.rows.length > 0 && (
+                  <Tfoot>
+                    {
+                      reportData?.content?.footer?.rows.map((tr, i) => (
+                        <tr key={i}>
+                          {tr?.map((td, j) => (
+                            <td key={j} colSpan={td.colspan}>{td.value}</td>
+                          ))}
+                        </tr>
+                      ))
+                    }
+                  </Tfoot>
+                )}
+              </ReportsTable>
+            ) : (
+              <EmptyContent>{t('NO_DATA', 'No Data')}</EmptyContent>
+            )}
+          </TableWrapper>
+        )}
+      </ReportsTableContainer>
+    </ReportsContainer>
+  )
+}
+
+export const ReportsSlaOrders = (props) => {
+  const reportsSlaOrdersProps = {
+    ...props,
+    UIComponent: ReportsSlaOrdersUI,
+    endpoint: 'sla_orders'
+  }
+  return <AdvancedReportsController {...reportsSlaOrdersProps} />
+}

package/src/components/BusinessIntelligence/Reports/ReportsSlaOrders/styles.js

@@ -0,0 +1,239 @@
+import styled, { css } from 'styled-components'
+
+export const ReportsContainer = styled.div`
+  padding: 25px 15px 70px 15px;
+  width: 100%;
+  overflow: auto;
+
+  @media (min-width: 700px) {
+    padding: 25px 35px 70px 35px;
+  }
+`
+
+export const Title = styled.h2`
+  font-weight: bold;
+  font-size: 20px;
+  color: ${props => props.theme?.colors.headingColor};
+  margin-top: 0;
+  margin-bottom: 30px;
+  margin-right: 35px;
+  ${props => props.theme?.rtl && css`
+    margin-right: 0;
+    margin-left: 35px;
+  `}
+`
+
+export const ButtonActionList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+`
+
+export const CalendarWrapper = styled.div`
+  position: relative;
+
+  > button {
+    margin-top: 5px;
+    padding: 7px 15px;
+    color: ${props => props.theme?.colors.secundaryContrast};
+    background: ${props => props.theme?.colors.secundary};
+    border-radius: 7.6px;
+    border: none;
+    text-align: left;
+    margin-left: 10px;
+
+    ${props => props.theme?.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+
+    svg {
+      font-size: 16px;
+      margin-right: 12px;
+
+      ${props => props.theme.rtl && css`
+        margin-right: 0px;
+        margin-left: 12px;
+      `}
+    }
+  }
+
+  @media only screen and (min-width: 374px) and (max-width: 450px) {
+    .ordering-calendar {
+      right: calc((100vw - 364px) / 2);
+    }
+  }
+
+  @media (max-width: 450px) {
+    width: 100%;
+    flex-wrap: wrap;
+    > button {
+      width: 100%;
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+  }
+`
+
+export const ReportsTableContainer = styled.div`
+  width: 100%;
+  margin-top: 25px;
+  padding: 20px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 7.6px;
+`
+
+export const TitleBlock = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+  h2 {
+    font-weight: 600;
+    font-size: 12px;
+    margin: 0;
+    text-transform: uppercase;
+  }
+
+  svg {
+    font-size: 16px;
+    color: #212121;
+    cursor: pointer;
+  }
+
+  ${({ active }) => !active && css`
+    svg {
+      cursor: not-allowed;
+    }
+  `}
+`
+
+export const ReportsTable = styled.table`
+  width: 100%;
+  min-width: 500px;
+`
+
+export const Thead = styled.thead`
+  position: sticky;
+  top: 0px;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  border-bottom: 1px solid ${props => props.theme?.colors.secundaryDarkContrast};
+
+  tr {
+    th {
+      padding: 12px 5px;
+      font-weight: 500;
+      font-size: 12px;
+      text-transform: uppercase;
+    }
+
+    &:first-child {
+      th {
+        text-align: center;
+      }
+    }
+
+    &:nth-child(2) {
+      th {
+        text-align: center;
+        &:nth-child(3n-1) {
+          border-left: 1px solid ${props => props.theme?.colors.secundaryDarkContrast};
+        }
+        &:first-child, &:nth-child(2) {
+          border: none;
+        }
+        &:first-child {
+          border-right: 1px solid ${props => props.theme?.colors.secundaryDarkContrast};
+        }
+      }
+    }
+  }
+`
+
+export const Tbody = styled.tbody`
+  border-bottom: 1px solid ${props => props.theme?.colors.secundaryDarkContrast};
+
+  tr {
+    td {
+      padding: 12px 5px;
+      font-size: 12px;
+      text-align: center;
+      color: ${props => props.theme?.colors.lightGray};
+      white-space: nowrap;
+
+      &:nth-child(3n-1) {
+        border-left: 1px solid ${props => props.theme?.colors.secundaryDarkContrast};
+      }
+      &:first-child, &:nth-child(2) {
+        color: ${props => props.theme?.colors.headingColor};
+        border: none;
+      }
+      &:first-child {
+        border-right: 1px solid ${props => props.theme?.colors.secundaryDarkContrast};
+      }
+    }
+  }
+`
+
+export const Tfoot = styled.tfoot`
+  tr {
+    td {
+      font-weight: 500;
+      font-size: 12px;
+      padding: 12px 0;
+
+      &:not(:first-child) {
+        text-align: center;
+      }
+    }
+  }
+`
+
+export const TableWrapper = styled.div`
+  width: 100%;
+  overflow: auto;
+  max-height: 650px;
+`
+
+export const EmptyContent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+`
+
+export const AnalyticsTimeZoneWrapper = styled.div`
+  width: 100%;
+  button {
+    margin-top: 5px;
+    background: ${props => props.theme.colors.secundary};
+    border-radius: 7.6px;
+    padding: 7px 15px;
+    font-size: 14px;
+    color: ${props => props.theme.colors.secundaryContrast};
+    border: none;
+  }
+
+  @media (min-width: 600px) {
+    width: fit-content;
+    margin-left: 10px;
+    ${props => props.theme.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+  }
+`
+
+export const TimeZoneAndCalendar = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+
+  @media (min-width: 600px) {
+    flex-direction: row;
+    width: fit-content;
+  }
+`

package/src/components/BusinessIntelligence/Reports/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { IconButton } from '../../../styles'
 import { useWindowSize } from '../../../hooks/useWindowSize'
@@ -24,7 +24,8 @@ import {
   CreditCard,
   ShopWindow,
   Bag,
-  Tag
+  Tag,
+  ListTask
 } from 'react-bootstrap-icons'
 import { useLanguage } from 'ordering-components-admin-external'
 import { SideBar } from '../../Shared'
@@ -49,6 +50,8 @@ import { ReportsPaymethodSales } from '../ReportsPaymethodSales'
 import { ReportsSaleAndCategory } from '../ReportsSaleAndCategory'
 import { ReportsAverageSales } from '../ReportsAverageSales'
 import { ReportsGeneralSales } from '../ReportsGeneralSales'
+import { ReportsSlaOrders } from './ReportsSlaOrders'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   ReportsContainer,
@@ -57,7 +60,6 @@ import {
 } from './styles'
 
 export const Reports = (props) => {
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
@@ -86,20 +88,21 @@ export const Reports = (props) => {
     { id: 17, name: t('PAYMETHOD_SALES', 'Paymethod sales'), description: t('PAYMETHOD_SALES_DESC', 'Paymethod sales description'), icon: <CreditCard /> },
     { id: 18, name: t('AVERAGE_SALES', 'Average sales'), description: t('AVERAGE_SALES_DESC', 'Average sales description'), icon: <ShopWindow /> },
     { id: 19, name: t('GENERAL_SALES', 'General sales'), description: t('GENERAL_SALES_DESC', 'General sales description'), icon: <Bag /> },
-    { id: 20, name: t('TOP_SELLING_AND_CATEOGRY', 'Top selling and category'), description: t('TOP_SELLING_AND_CATEOGRY_DESC', 'Top selling and category description'), icon: <Tag /> }
+    { id: 20, name: t('TOP_SELLING_AND_CATEOGRY', 'Top selling and category'), description: t('TOP_SELLING_AND_CATEOGRY_DESC', 'Top selling and category description'), icon: <Tag /> },
+    { id: 21, name: t('SLA_ORDERS', 'SLA orders'), description: t('SLA_ORDERS_DESC', 'SLA orders description'), icon: <ListTask /> }
   ]
 
   const handleCloseSidebar = () => {
     setIsOpen(false)
     setSelectedReport(0)
-    history.replace(`${location.pathname}`)
+    removeQueryToUrl(['id'])
   }
 
   const handleOpenSlider = (index, isInitialRender) => {
     setSelectedReport(index)
     setIsOpen(true)
     if (!isInitialRender) {
-      history.replace(`${location.pathname}?id=${index}`)
+      addQueryToUrl({ id: index })
     }
   }
 
@@ -167,6 +170,7 @@ export const Reports = (props) => {
           {selectedReport === 18 && <ReportsAverageSales />}
           {selectedReport === 19 && <ReportsGeneralSales />}
           {selectedReport === 20 && <ReportsSaleAndCategory />}
+          {selectedReport === 21 && <ReportsSlaOrders />}
         </SideBar>
       )}
     </ReportsContainer>

package/src/components/BusinessIntelligence/ReviewProductsListing/index.js

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, useUtils, ReviewProductList as ReviewProductListController } from 'ordering-components-admin-external'
 import { ImageFill, StarFill } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
 import { Pagination, SideBar } from '../../Shared'
 import { ProductReviewDetails } from '../ProductReviewDetails'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   ReviewsListingContainer,
@@ -23,10 +24,13 @@ export const ReviewProductsListingUI = (props) => {
     handleChangeSearch,
     searchValue,
     parentSearchValue,
-    businessId
+    businessId,
+    isUseQuery,
+    defaultPage,
+    defaultPageSize,
+    firstRender
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
@@ -36,8 +40,8 @@ export const ReviewProductsListingUI = (props) => {
   const [curProductId, setCurProductId] = useState(null)
   const [curCategoryId, setCurCategoryId] = useState(null)
 
-  const [currentPage, setCurrentPage] = useState(1)
-  const [productsPerPage, setProductsPerPage] = useState(10)
+  const [currentPage, setCurrentPage] = useState(defaultPage || 1)
+  const [productsPerPage, setProductsPerPage] = useState(defaultPageSize || 10)
   const [currentProducts, setCurrentProducts] = useState([])
   const [totalPages, setTotalPages] = useState(null)
 
@@ -70,21 +74,21 @@ export const ReviewProductsListingUI = (props) => {
     setCurCategoryId(product?.category?.id)
     setOpenReview(true)
     if (!isInitialRender) {
-      const tab = query.get('tab')
-      const business = query.get('business')
-      history.replace(`${location.pathname}?tab=${tab}&business=${business}&category=${product?.category?.id}&product=${product.id}`)
+      addQueryToUrl({
+        category: product?.category?.id,
+        product: product.id
+      })
     }
   }
 
   const handleCloseReviewDetails = () => {
     setCurProduct(null)
     setOpenReview(false)
-    const tab = query.get('tab')
-    const business = query.get('business')
-    history.replace(`${location.pathname}?tab=${tab}&business=${business}`)
+    removeQueryToUrl(['category', 'product'])
   }
 
   useEffect(() => {
+    if (firstRender) return
     setCurrentPage(1)
   }, [searchValue])
 
@@ -102,6 +106,14 @@ export const ReviewProductsListingUI = (props) => {
     }
   }, [])
 
+  useEffect(() => {
+    if (!isUseQuery || !currentPage || !productsPerPage || !totalPages) return
+    addQueryToUrl({
+      page: currentPage,
+      pageSize: productsPerPage
+    })
+  }, [currentPage, productsPerPage, totalPages])
+
   return (
     <>
       <ReviewsListingContainer>