From 320aa9c1778fa91dde829b0099f7875ea3936d15 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Mon, 6 Jun 2022 12:32:32 -0700
Subject: [PATCH] IO-1923 Add CC warning to CC list page.

---
 .../courtesy-cars-list.component.jsx          | 26 ++++++++++++++++---
 client/src/graphql/courtesy-car.queries.js    |  1 +
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx b/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
index a488368b9..62f6d1119 100644
--- a/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
+++ b/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
@@ -1,12 +1,12 @@
-import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Input, Space, Table } from "antd";
+import { SyncOutlined, WarningFilled } from "@ant-design/icons";
+import { Button, Card, Input, Space, Table, Tooltip } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
-
+import moment from "moment";
 export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
   const [state, setState] = useState({
     sortedInfo: {},
@@ -56,7 +56,25 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       onFilter: (value, record) => value.includes(record.status),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
-      render: (text, record) => t(record.status),
+      render: (text, record) => {
+        const { nextservicedate, nextservicekm, mileage } = record;
+
+        const mileageOver = nextservicekm <= mileage;
+
+        const dueForService =
+          nextservicedate && moment(nextservicedate).isBefore(moment());
+
+        return (
+          <Space>
+            {t(record.status)}
+            {(mileageOver || dueForService) && (
+              <Tooltip title={t("contracts.labels.cardueforservice")}>
+                <WarningFilled style={{ color: "tomato" }} />
+              </Tooltip>
+            )}
+          </Space>
+        );
+      },
     },
     {
       title: t("courtesycars.fields.year"),
diff --git a/client/src/graphql/courtesy-car.queries.js b/client/src/graphql/courtesy-car.queries.js
index d4e19bac8..a5bcbea55 100644
--- a/client/src/graphql/courtesy-car.queries.js
+++ b/client/src/graphql/courtesy-car.queries.js
@@ -80,6 +80,7 @@ export const QUERY_ALL_CC = gql`
       status
       vin
       year
+      mileage
       cccontracts(
         where: { status: { _eq: "contracts.status.out" } }
         order_by: { contract_date: desc }