ordering-ui-external 10.0.1 → 10.2.0

package/src/themes/callcenterOriginal/src/components/Orders/OrdersTable/index.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import moment from 'moment'
 import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
@@ -9,8 +8,6 @@ import {
   useUtils,
   useConfig
 } from 'ordering-components-external'
-import { useTheme } from 'styled-components'
-import { ColumnAllowSettingPopover, Pagination } from '../../Shared'
 
 import {
   OrdersContainer,
@@ -34,8 +31,16 @@ import {
   DragTh
 } from './styles'
 
+import { useTheme } from 'styled-components'
+import { ColumnAllowSettingPopover, Pagination } from '../../Shared'
+import { getCurrenySymbol } from '../../../../../../utils'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+dayjs.extend(utc)
+
 export const OrdersTable = (props) => {
   const {
+    hidePhoto,
     isSelectedOrders,
     orderList,
     pagination,
@@ -53,11 +58,12 @@ export const OrdersTable = (props) => {
     groupStatus,
     allowColumns,
     setAllowColumns,
-    handleDrop
+    handleDrop,
+    saveUserSettings
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [{ parseDate, optimizeImage, getTimeAgo, parsePrice }] = useUtils()
+  const [{ optimizeImage, getTimeAgo, parsePrice }] = useUtils()
   const [isAllChecked, setIsAllChecked] = useState(false)
   const [, setCurrentTime] = useState()
   const [dragOverd, setDragOverd] = useState('')
@@ -69,6 +75,21 @@ export const OrdersTable = (props) => {
     getPageOrders(pageSize, expectedPage)
   }
   const [configState] = useConfig()
+  const isEnabledRowInColor = configState?.configs?.row_in_color_enabled?.value === '1'
+
+  const parseDateCustom = (date, options = {}) => { // method added for NaN errors
+    const formatTime = options?.formatTime || configState.configs.format_time?.value || '24'
+    const formatDate = {
+      inputFormat: options?.inputFormat || ['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD hh:mm:ss A', 'YYYY-MM-DD hh:mm:ss'],
+      outputFormat: options?.outputFormat || (formatTime === '24' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD hh:mm:ss A'),
+      utc: typeof options?.utc === 'boolean' ? options?.utc : true
+    }
+    if (!dayjs(date, formatDate.inputFormat).isValid()) {
+      return t('INVALID_FORMAT', 'invalid format')
+    }
+    const _date = formatDate.utc ? dayjs.utc(date, formatDate.inputFormat).local() : dayjs(date, formatDate.inputFormat)
+    return _date.format(formatDate.outputFormat)
+  }
 
   const optionsDefault = [
     {
@@ -79,6 +100,14 @@ export const OrdersTable = (props) => {
       value: 'orderNumber',
       content: t('INVOICE_ORDER_NO', 'Order No.')
     },
+    {
+      value: 'cartGroupId',
+      content: t('GROUP_ORDER', 'Group Order')
+    },
+    {
+      value: 'driverGroupId',
+      content: t('EXPORT_DRIVER_GROUP_ID', 'Driver Group Id')
+    },
     {
       value: 'dateTime',
       content: t('DATE_TIME', 'Date and time')
@@ -103,21 +132,29 @@ export const OrdersTable = (props) => {
       value: 'timer',
       content: t('SLA_TIMER', 'SLA’s timer')
     },
+    {
+      value: 'eta',
+      content: t('ETA', 'ETA')
+    },
     {
       value: 'total',
       content: t('EXPORT_TOTAL', 'Total')
+    },
+    {
+      value: 'externalId',
+      content: t('EXTERNAL_ID', 'External id')
     }
   ]
 
   const getDelayMinutes = (order) => {
     // targetMin = delivery_datetime  + eta_time - now()
     const offset = 300
-    const cdtToutc = moment(order?.delivery_datetime).add(offset, 'minutes').format('YYYY-MM-DD HH:mm:ss')
+    const cdtToutc = dayjs(order?.delivery_datetime).add(offset, 'minutes').format('YYYY-MM-DD HH:mm:ss')
     const _delivery = order?.delivery_datetime_utc
-      ? parseDate(order?.delivery_datetime_utc)
-      : parseDate(cdtToutc)
+      ? parseDateCustom(order?.delivery_datetime_utc)
+      : parseDateCustom(cdtToutc)
     const _eta = order?.eta_time
-    const diffTimeAsSeconds = moment(_delivery).add(_eta, 'minutes').diff(moment().utc(), 'seconds')
+    const diffTimeAsSeconds = dayjs(_delivery).add(_eta, 'minutes').diff(dayjs().utc(), 'seconds')
     return Math.ceil(diffTimeAsSeconds / 60)
   }
 
@@ -139,11 +176,11 @@ export const OrdersTable = (props) => {
     return finalTaget
   }
 
-  const getStatusClassName = (minutes) => {
-    if (isNaN(Number(minutes))) return 'in_time'
-    const delayTime = configState?.configs?.order_deadlines_delayed_time?.value
-    return minutes > 0 ? 'in_time' : Math.abs(minutes) <= delayTime ? 'at_risk' : 'delayed'
-  }
+  // const getStatusClassName = (minutes) => {
+  //   if (isNaN(Number(minutes))) return 'in_time'
+  //   const delayTime = configState?.configs?.order_deadlines_delayed_time?.value
+  //   return minutes > 0 ? 'in_time' : Math.abs(minutes) <= delayTime ? 'at_risk' : 'delayed'
+  // }
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -221,10 +258,14 @@ export const OrdersTable = (props) => {
 
   const handleChangeAllowColumns = (type) => {
     const _column = allowColumns[type]
-    setAllowColumns({
+    const updatedAllowColumns = {
       ...allowColumns,
       [type]: { ..._column, visable: !_column?.visable }
-    })
+    }
+    setAllowColumns(updatedAllowColumns)
+    if (type === 'externalId') {
+      saveUserSettings(JSON.parse(JSON.stringify(updatedAllowColumns)))
+    }
   }
 
   const handleClickOrder = (order, e) => {
@@ -309,61 +350,59 @@ export const OrdersTable = (props) => {
           {!isSelectedOrders && (
             <thead>
               <tr>
-                {allowColumns && (Object.keys(allowColumns).filter(col => allowColumns[col]?.visable && allowColumns[col]?.order !== 0)?.length === 0 ?
-                (
-                  <th className='orderPrice' key={`noDragTh-${i}`}>
-                    <ColumnAllowSettingPopover
-                      allowColumns={allowColumns}
-                      optionsDefault={optionsDefault}
-                      handleChangeAllowColumns={handleChangeAllowColumns}
-                      isOrder
-                    />
-                  </th>
-                ) : (
-                  Object.keys(allowColumns).filter(col => allowColumns[col]?.visable && allowColumns[col]?.order !== 0)
-                  .sort((col1, col2) => allowColumns[col1]?.order - allowColumns[col2]?.order)
-                  .map((column, i, array) => {
-                    if (column === 'slaBar') {
-                      return
-                    }
-                    if (column === 'orderNumber') {
-                      return (
-                        <React.Fragment key={i}>
-                          <th
-                            className={!(allowColumns?.orderNumber?.visable || allowColumns?.dateTime?.visable) ? 'orderNo small' : 'orderNo'}
-                            key={`noDragTh-${i}`}
-                            colSpan={allowColumns?.slaBar?.visable ? 2 : 1}
-                          >
-                            <CheckBox
-                              isChecked={!orderList.loading && isAllChecked}
-                              onClick={() => handleSelecteAllOrder()}
-                              className='orderCheckBox'
-                            >
-                              {(!orderList.loading && isAllChecked) ? (
-                                <RiCheckboxFill />
-                              ) : (
-                                <RiCheckboxBlankLine />
+                {allowColumns && (Object.keys(allowColumns).filter(col => allowColumns[col]?.visable && allowColumns[col]?.order !== 0).length === 0
+                  ? (
+                    <th className='orderPrice'>
+                      <ColumnAllowSettingPopover
+                        allowColumns={allowColumns}
+                        optionsDefault={optionsDefault}
+                        handleChangeAllowColumns={handleChangeAllowColumns}
+                        isOrder
+                      />
+                    </th>
+                  ) : (
+                    Object.keys(allowColumns).filter(col => allowColumns[col]?.visable && allowColumns[col]?.order !== 0)
+                      .sort((col1, col2) => allowColumns[col1]?.order - allowColumns[col2]?.order)
+                      .map((column, i, array) => {
+                        if (column === 'slaBar') {
+                          return
+                        }
+                        if (column === 'orderNumber') {
+                          return (
+                            <React.Fragment key={i}>
+                              <th
+                                className={!(allowColumns?.orderNumber?.visable || allowColumns?.dateTime?.visable) ? 'orderNo small' : 'orderNo'}
+                                key={`noDragTh-${i}`}
+                                colSpan={allowColumns?.slaBar?.visable ? 2 : 1}
+                              >
+                                <CheckBox
+                                  isChecked={!orderList.loading && isAllChecked}
+                                  onClick={() => handleSelecteAllOrder()}
+                                  className='orderCheckBox'
+                                >
+                                  {(!orderList.loading && isAllChecked) ? (
+                                    <RiCheckboxFill />
+                                  ) : (
+                                    <RiCheckboxBlankLine />
+                                  )}
+                                </CheckBox>
+                                {t('ORDER', 'Order')}
+                              </th>
+                              {column === [...array].pop() && (
+                                <th className='orderPrice' key={`noDragTh-${i}`}>
+                                  <ColumnAllowSettingPopover
+                                    allowColumns={allowColumns}
+                                    optionsDefault={optionsDefault}
+                                    handleChangeAllowColumns={handleChangeAllowColumns}
+                                    isOrder
+                                  />
+                                </th>
                               )}
-                            </CheckBox>
-                            {t('ORDER', 'Order')}
-                          </th>
-                          {column === [...array].pop() && (
-                            <th className='orderPrice' key={`noDragTh-${i}`}>
-                              <ColumnAllowSettingPopover
-                                allowColumns={allowColumns}
-                                optionsDefault={optionsDefault}
-                                handleChangeAllowColumns={handleChangeAllowColumns}
-                                isOrder
-                              />
-                            </th>
-                          )}
-                        </React.Fragment>
-                      )
-                    }
-                    if (column === 'total' || (column !== 'total' && column === [...array].pop())) {
-                      return (
-                        <React.Fragment key={i}>
-                          {(column !== 'total' && column === [...array].pop()) && (
+                            </React.Fragment>
+                          )
+                        }
+                        if (column === 'externalId') {
+                          return (
                             <DragTh
                               key={`dragTh-${i}`}
                               onDragOver={e => handleDragOver?.(e, column)}
@@ -381,38 +420,61 @@ export const OrdersTable = (props) => {
                                 <span>{allowColumns[column]?.title}</span>
                               </div>
                             </DragTh>
-                          )}
-                          <th className='orderPrice' key={`noDragTh-${i}`}>
-                            <ColumnAllowSettingPopover
-                              allowColumns={allowColumns}
-                              optionsDefault={optionsDefault}
-                              handleChangeAllowColumns={handleChangeAllowColumns}
-                              isOrder
-                            />
-                          </th>
-                        </React.Fragment>
-                      )
-                    }
-                    return (column !== 'timer' || (column === 'timer' && (groupStatus === 'pending' || groupStatus === 'inProgress'))) && (
-                      <DragTh
-                        key={`dragTh-${i}`}
-                        onDragOver={e => handleDragOver?.(e, column)}
-                        onDrop={e => handleDrop(e, column)}
-                        onDragEnd={e => handleDragEnd(e)}
-                        colSpan={allowColumns[column]?.colSpan ?? 1}
-                        className={allowColumns[column]?.className}
-                        selectedDragOver={column === dragOverd}
-                      >
-                        <div draggable onDragStart={e => handleDragStart?.(e, column)}>
-                          <img
-                            src={theme.images.icons?.sixDots}
-                            alt='six dots'
-                          />
-                          <span>{allowColumns[column]?.title}</span>
-                        </div>
-                      </DragTh>)
-                  })
-                ))}
+                          )
+                        }
+                        if (column === 'total' || (column !== 'total' && column === [...array].pop())) {
+                          return (
+                            <React.Fragment key={i}>
+                              {(column !== 'total' && column === [...array].pop()) && (
+                                <DragTh
+                                  key={`dragTh-${i}`}
+                                  onDragOver={e => handleDragOver?.(e, column)}
+                                  onDrop={e => handleDrop(e, column)}
+                                  onDragEnd={e => handleDragEnd(e)}
+                                  colSpan={allowColumns[column]?.colSpan ?? 1}
+                                  className={allowColumns[column]?.className}
+                                  selectedDragOver={column === dragOverd}
+                                >
+                                  <div draggable onDragStart={e => handleDragStart?.(e, column)}>
+                                    <img
+                                      src={theme.images.icons?.sixDots}
+                                      alt='six dots'
+                                    />
+                                    <span>{allowColumns[column]?.title}</span>
+                                  </div>
+                                </DragTh>
+                              )}
+                              <th className='orderPrice' key={`noDragTh-${i}`}>
+                                <ColumnAllowSettingPopover
+                                  allowColumns={allowColumns}
+                                  optionsDefault={optionsDefault}
+                                  handleChangeAllowColumns={handleChangeAllowColumns}
+                                  isOrder
+                                />
+                              </th>
+                            </React.Fragment>
+                          )
+                        }
+                        return (column !== 'timer' || (column === 'timer' && (groupStatus === 'pending' || groupStatus === 'inProgress'))) && (
+                          <DragTh
+                            key={`dragTh-${i}`}
+                            onDragOver={e => handleDragOver?.(e, column)}
+                            onDrop={e => handleDrop(e, column)}
+                            onDragEnd={e => handleDragEnd(e)}
+                            colSpan={allowColumns[column]?.colSpan ?? 1}
+                            className={allowColumns[column]?.className}
+                            selectedDragOver={column === dragOverd}
+                          >
+                            <div draggable onDragStart={e => handleDragStart?.(e, column)}>
+                              <img
+                                src={theme.images.icons?.sixDots}
+                                alt='six dots'
+                              />
+                              <span>{allowColumns[column]?.title}</span>
+                            </div>
+                          </DragTh>)
+                      })
+                  ))}
               </tr>
             </thead>
           )}
@@ -442,6 +504,33 @@ export const OrdersTable = (props) => {
                       </div>
                     </OrderNumberContainer>
                   </td>
+                  {allowColumns?.externalId?.visable && (
+                    <td className='externalId'>
+                      <StatusInfo>
+                        <div className='info'>
+                          <p className='bold'><Skeleton width={100} /></p>
+                        </div>
+                      </StatusInfo>
+                    </td>
+                  )}
+                  {allowColumns?.cartGroupId?.visable && (
+                    <td className='statusInfo'>
+                      <StatusInfo>
+                        <div className='info'>
+                          <p className='bold'><Skeleton width={100} /></p>
+                        </div>
+                      </StatusInfo>
+                    </td>
+                  )}
+                  {allowColumns?.driverGroupId?.visable && (
+                    <td className='statusInfo'>
+                      <StatusInfo>
+                        <div className='info'>
+                          <p className='bold'><Skeleton width={100} /></p>
+                        </div>
+                      </StatusInfo>
+                    </td>
+                  )}
                   {allowColumns?.status?.visable && !isSelectedOrders && (
                     <td className='statusInfo'>
                       <StatusInfo>
@@ -454,7 +543,9 @@ export const OrdersTable = (props) => {
                   {allowColumns?.business?.visable && (
                     <td className='businessInfo'>
                       <BusinessInfo>
-                        <Skeleton width={45} height={45} />
+                        {!hidePhoto && (
+                          <Skeleton width={45} height={45} />
+                        )}
                         <div className='info'>
                           <p className='bold'><Skeleton width={80} /></p>
                           <p><Skeleton width={100} /></p>
@@ -465,7 +556,9 @@ export const OrdersTable = (props) => {
                   {allowColumns?.customer?.visable && (
                     <td className='customerInfo'>
                       <CustomerInfo>
-                        <Skeleton width={45} height={45} />
+                        {!hidePhoto && (
+                          <Skeleton width={45} height={45} />
+                        )}
                         <div className='info'>
                           <p className='bold'><Skeleton width={100} /></p>
                           <p><Skeleton width={100} /></p>
@@ -476,7 +569,9 @@ export const OrdersTable = (props) => {
                   {allowColumns?.driver?.visable && !isSelectedOrders && (
                     <td className='driverInfo'>
                       <DriversInfo className='d-flex align-items-center'>
-                        <Skeleton width={45} height={45} />
+                        {!hidePhoto && (
+                          <Skeleton width={45} height={45} />
+                        )}
                         <Skeleton width={100} style={{ margin: '10px' }} />
                       </DriversInfo>
                     </td>
@@ -541,6 +636,7 @@ export const OrdersTable = (props) => {
                 className={parseInt(orderDetailId) === order.id ? 'active' : ''}
                 onClick={(e) => handleClickOrder(order, e)}
                 data-tour={i === 0 ? 'tour_start' : ''}
+                data-status={isEnabledRowInColor && order?.time_status}
               >
                 <tr>
                   {Object.keys(allowColumns).filter(col => allowColumns[col]?.visable)
@@ -550,11 +646,20 @@ export const OrdersTable = (props) => {
                         return (
                           <td key={`slaBar${i}-${index}`}>
                             <Timestatus
-                              timeState={getStatusClassName(getDelayMinutes(order))}
+                              timeState={order?.time_status}
                             />
                           </td>
                         )
                       }
+                      if (column === 'externalId' && !isSelectedOrders) {
+                        return (
+                          <td className='externalId' key={`externalId${i}-${index}`}>
+                            <StatusInfo>
+                              <p className='bold'>{order?.external_id}</p>
+                            </StatusInfo>
+                          </td>
+                        )
+                      }
                       if (column === 'orderNumber') {
                         return (
                           <td
@@ -581,7 +686,11 @@ export const OrdersTable = (props) => {
                                 )}
                                 {allowColumns?.dateTime?.visable && (
                                   <p className='date'>
-                                    {parseDate(order?.delivery_datetime, { utc: false })}
+                                    {
+                                      order?.delivery_datetime_utc
+                                        ? parseDateCustom(order?.delivery_datetime_utc)
+                                        : parseDateCustom(order?.delivery_datetime, { utc: false })
+                                    }
                                   </p>
                                 )}
                               </div>
@@ -598,13 +707,37 @@ export const OrdersTable = (props) => {
                           </td>
                         )
                       }
+                      if (column === 'cartGroupId') {
+                        return (
+                          <td className='orderGroupId' key={`cart_group_id${i}-${index}`}>
+                            <StatusInfo>
+                              {order?.cart_group_id && (
+                                <p className='bold'>{t('No', 'No')}. {order?.cart_group_id}</p>
+                              )}
+                            </StatusInfo>
+                          </td>
+                        )
+                      }
+                      if (column === 'driverGroupId') {
+                        return (
+                          <td className='orderGroupId' key={`cart_group_id${i}-${index}`}>
+                            <StatusInfo>
+                              {order?.driver_group_id && (
+                                <p className='bold'>{t('No', 'No')}. {order?.driver_group_id}</p>
+                              )}
+                            </StatusInfo>
+                          </td>
+                        )
+                      }
                       if (column === 'business') {
                         return (
                           <td className='businessInfo' key={`businessInfo${i}-${index}`}>
                             <BusinessInfo>
-                              <WrapperImage>
-                                <img src={optimizeImage(order.business?.logo || theme.images?.dummies?.businessLogo, 'h_50,c_limit')} loading='lazy' alt='' />
-                              </WrapperImage>
+                              {!hidePhoto && (
+                                <WrapperImage>
+                                  <img src={optimizeImage(order.business?.logo || theme.images?.dummies?.businessLogo, 'h_50,c_limit')} loading='lazy' alt='' />
+                                </WrapperImage>
+                              )}
                               <div className='info'>
                                 <p className='bold'>{order?.business?.name}</p>
                                 <p>{order?.business?.city?.name}</p>
@@ -617,18 +750,22 @@ export const OrdersTable = (props) => {
                         return (
                           <td className='customerInfo' key={`customerInfo${i}-${index}`}>
                             <CustomerInfo>
-                              <WrapperImage>
-                                {order?.customer?.photo ? (
-                                  <img src={optimizeImage(order?.customer?.photo, 'h_50,c_limit')} loading='lazy' alt='' />
-                                ) : (
-                                  <FaUserAlt />
-                                )}
-                                <OrdersCountWrapper isNew={order?.customer?.orders_count === 0}>
-                                  {order?.customer?.orders_count || t('NEW', 'New')}
-                                </OrdersCountWrapper>
-                              </WrapperImage>
+                              {!hidePhoto && (
+                                <WrapperImage>
+                                  {order?.customer?.photo ? (
+                                    <img src={optimizeImage(order?.customer?.photo, 'h_50,c_limit')} loading='lazy' alt='' />
+                                  ) : (
+                                    <FaUserAlt />
+                                  )}
+                                  <OrdersCountWrapper isNew={order?.customer?.orders_count === 0}>
+                                    {order?.customer?.orders_count || t('NEW', 'New')}
+                                  </OrdersCountWrapper>
+                                </WrapperImage>
+                              )}
                               <div className='info'>
-                                <p className='bold'>{order?.customer?.name}</p>
+                                <p className='bold'>
+                                  {(!order?.customer?.email && !order?.customer?.cellphone && !order?.customer?.name) ? t('GUEST_USER', 'Guest user') : order?.customer?.name}
+                                </p>
                                 <p>{order?.customer?.cellphone}</p>
                               </div>
                             </CustomerInfo>
@@ -640,13 +777,15 @@ export const OrdersTable = (props) => {
                           <td key={`driver${i}-${index}`}>
                             {order?.delivery_type === 1 && (
                               <CustomerInfo>
-                                <WrapperImage>
-                                  {order?.driver?.photo ? (
-                                    <img src={optimizeImage(order?.driver?.photo, 'h_50,c_limit')} loading='lazy' alt='' />
-                                  ) : (
-                                    <FaUserAlt />
-                                  )}
-                                </WrapperImage>
+                                {!hidePhoto && (
+                                  <WrapperImage>
+                                    {order?.driver?.photo ? (
+                                      <img src={optimizeImage(order?.driver?.photo, 'h_50,c_limit')} loading='lazy' alt='' />
+                                    ) : (
+                                      <FaUserAlt />
+                                    )}
+                                  </WrapperImage>
+                                )}
                                 <div className='info'>
                                   {order?.driver ? (
                                     <>
@@ -699,7 +838,7 @@ export const OrdersTable = (props) => {
                           <td className='timer' key={`timer${i}-${index}`}>
                             <Timer>
                               <p className='bold'>{t('TIMER', 'Timer')}</p>
-                              <p className={getStatusClassName(getDelayMinutes(order))}>{displayDelayedTime(order)}</p>
+                              <p className={order?.time_status}>{displayDelayedTime(order)}</p>
                             </Timer>
                           </td>
                         )
@@ -709,7 +848,7 @@ export const OrdersTable = (props) => {
                           <td className='orderPrice' key={`total${i}-${index}`}>
                             <div className='info'>
                               {allowColumns?.total?.visable && (
-                                <p className='bold'>{parsePrice(order?.summary?.total, { currency: order?.currency })}</p>
+                                <p className='bold'>{parsePrice(order?.summary?.total, { currency: getCurrenySymbol(order?.currency) })}</p>
                               )}
                               {!(order?.status === 1 || order?.status === 11 || order?.status === 2 || order?.status === 5 || order?.status === 6 || order?.status === 10 || order.status === 12) && (
                                 <p>
@@ -725,6 +864,7 @@ export const OrdersTable = (props) => {
                         )
                       }
                     })}
+                  <td />
                 </tr>
               </OrderTbody>
             ))

package/src/themes/callcenterOriginal/src/components/Orders/OrdersTable/styles.js

@@ -29,7 +29,6 @@ export const OrdersContainer = styled.div`
 export const Table = styled.table`
   width: calc(100% - 10px);
   min-width: 900px;
-  min-height: 35vh;
 
   th,
   td {
@@ -103,6 +102,20 @@ export const OrderTbody = styled.tbody`
   border-bottom: 1px solid ${props => props.theme.colors.borderColor};
   cursor: pointer;
 
+  &[data-status="delayed"] {
+    background-color: ${props => props.theme.colors.danger100};
+    td {
+      border-top: 1px solid ${props => props.theme.colors.danger} !important;
+      border-bottom: 1px solid ${props => props.theme.colors.danger} !important;
+    }
+  }
+  &[data-status="at_risk"] {
+    background-color: ${props => props.theme.colors.warning100};
+    td {
+      border-top: 1px solid ${props => props.theme.colors.warning} !important;
+      border-bottom: 1px solid ${props => props.theme.colors.warning} !important;
+    }
+  }
   &:hover {
     background-color: ${props => props.theme.colors.lightPrimary};
   }