Added barcode scanning to populate contract form BOD-88

client/src/components/contract-cars/contract-cars.component.jsx

@@ -7,12 +7,12 @@ export default function ContractsCarsComponent({
   loading,
   data,
   selectedCar,
-  handleSelect
+  handleSelect,
 }) {
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" },
-    search: ""
+    search: "",
   });
 
   const { t } = useTranslation();
@@ -24,7 +24,7 @@ export default function ContractsCarsComponent({
       key: "fleetnumber",
       sorter: (a, b) => alphaSort(a.fleetnumber, b.fleetnumber),
       sortOrder:
-        state.sortedInfo.columnKey === "fleetnumber" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "fleetnumber" && state.sortedInfo.order,
     },
     {
       title: t("courtesycars.fields.status"),
@@ -32,21 +32,24 @@ export default function ContractsCarsComponent({
       key: "status",
       sorter: (a, b) => alphaSort(a.status, b.status),
       sortOrder:
-        state.sortedInfo.columnKey === "status" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      render: (text, record) => <div>{t(record.status)}</div>,
     },
     {
       title: t("courtesycars.fields.year"),
       dataIndex: "year",
       key: "year",
       sorter: (a, b) => alphaSort(a.year, b.year),
-      sortOrder: state.sortedInfo.columnKey === "year" && state.sortedInfo.order
+      sortOrder:
+        state.sortedInfo.columnKey === "year" && state.sortedInfo.order,
     },
     {
       title: t("courtesycars.fields.make"),
       dataIndex: "make",
       key: "make",
       sorter: (a, b) => alphaSort(a.make, b.make),
-      sortOrder: state.sortedInfo.columnKey === "make" && state.sortedInfo.order
+      sortOrder:
+        state.sortedInfo.columnKey === "make" && state.sortedInfo.order,
     },
     {
       title: t("courtesycars.fields.model"),
@@ -54,7 +57,7 @@ export default function ContractsCarsComponent({
       key: "model",
       sorter: (a, b) => alphaSort(a.model, b.model),
       sortOrder:
-        state.sortedInfo.columnKey === "model" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "model" && state.sortedInfo.order,
     },
     {
       title: t("courtesycars.fields.plate"),
@@ -62,8 +65,8 @@ export default function ContractsCarsComponent({
       key: "plate",
       sorter: (a, b) => alphaSort(a.plate, b.plate),
       sortOrder:
-        state.sortedInfo.columnKey === "plate" && state.sortedInfo.order
-    }
+        state.sortedInfo.columnKey === "plate" && state.sortedInfo.order,
+    },
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
@@ -74,7 +77,7 @@ export default function ContractsCarsComponent({
     state.search === ""
       ? data
       : data.filter(
-          cc =>
+          (cc) =>
             (cc.fleetnumber || "")
               .toLowerCase()
               .includes(state.search.toLowerCase()) ||
@@ -100,19 +103,19 @@ export default function ContractsCarsComponent({
         <Input.Search
           placeholder={t("general.labels.search")}
           value={state.search}
-          onChange={e => setState({ ...state, search: e.target.value })}
+          onChange={(e) => setState({ ...state, search: e.target.value })}
         />
       )}
       size="small"
       pagination={{ position: "top" }}
-      columns={columns.map(item => ({ ...item }))}
+      columns={columns.map((item) => ({ ...item }))}
       rowKey="id"
       dataSource={filteredData}
       onChange={handleTableChange}
       rowSelection={{
         onSelect: handleSelect,
         type: "radio",
-        selectedRowKeys: [selectedCar]
+        selectedRowKeys: [selectedCar],
       }}
     />
   );