UI Updates & Bill Entering

client/src/components/vendors-list/vendors-list.component.jsx

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Input, Table } from "antd";
+import { Button, Card, Input, Space, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -75,47 +75,44 @@ export default function VendorsListComponent({
     : [];
 
   return (
-    <Table
-      loading={loading}
-      title={() => {
-        return (
-          <div className="imex-table-header">
-            <Button onClick={handleNewVendor}>
-              {t("vendors.actions.new")}
-            </Button>
-
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
-            <Input.Search
-              className="imex-table-header__search"
-              placeholder={t("general.labels.search")}
-              onChange={(e) => {
-                setSearchText(e.target.value);
-              }}
-              value={searchText}
-              enterButton
-            />
-          </div>
-        );
-      }}
-      pagination={{ position: "top" }}
-      columns={columns}
-      rowKey="id"
-      onChange={handleTableChange}
-      dataSource={filteredVendors}
-      rowSelection={{
-        onSelect: handleOnRowClick,
-        type: "radio",
-        selectedRowKeys: [selectedvendor],
-      }}
-      onRow={(record, rowIndex) => {
-        return {
-          onClick: (event) => {
-            handleOnRowClick(record);
-          },
-        };
-      }}
-    />
+    <Card
+      extra={
+        <Space wrap>
+          <Button onClick={handleNewVendor}>{t("vendors.actions.new")}</Button>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            onChange={(e) => {
+              setSearchText(e.target.value);
+            }}
+            value={searchText}
+            enterButton
+          />
+        </Space>
+      }
+    >
+      <Table
+        loading={loading}
+        pagination={{ position: "top" }}
+        columns={columns}
+        rowKey="id"
+        onChange={handleTableChange}
+        dataSource={filteredVendors}
+        rowSelection={{
+          onSelect: handleOnRowClick,
+          type: "radio",
+          selectedRowKeys: [selectedvendor],
+        }}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: (event) => {
+              handleOnRowClick(record);
+            },
+          };
+        }}
+      />
+    </Card>
   );
 }

client/src/components/vendors-list/vendors-list.container.jsx

@@ -1,10 +1,10 @@
-import React from "react";
 import { useQuery } from "@apollo/client";
+import queryString from "query-string";
+import React from "react";
+import { useHistory, useLocation } from "react-router-dom";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import VendorsListComponent from "./vendors-list.component";
-import queryString from "query-string";
-import { useHistory, useLocation } from "react-router-dom";
 
 export default function VendorsListContainer() {
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_VENDORS);