feat: show membership by superior

src/pages/Product/Product.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Button, Card, Col, Input, Row, Tabs } from "antd";
+import { Button, Card, Col, Input, Row, Select, Tabs } from "antd";
 import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { useStore } from "../../utils/useStore";
@@ -9,6 +9,7 @@ import { LINKS } from "../../routes/app";
 
 const { TabPane } = Tabs;
 const { Search } = Input;
+const { Option } = Select;
 
 export const Product = observer(() => {
   const [isLoading, setIsLoading] = useState(false);
@@ -72,14 +73,27 @@ export const Product = observer(() => {
           </Col>
         </Row>
 
-        <Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
+        <Row>
+          <Col span={24}>
+            <Select
+              placeholder="Choose Supplier"
+              onChange={(val) => console.log(val, "SELECTED")}
+              style={{ marginBottom: "20px", width: "100%" }}
+            >
+              <Option value={1}>Hemm</Option>
+              <Option value={2}>Huam</Option>
+            </Select>
+          </Col>
+        </Row>
+
+        {/* <Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
           {store.product.dataCategories.map((item, idx) => (
-            <TabPane tab={item.name} key={item.id}>
-              {/* <ProductComponent category={item.name} /> */}
-              <ProductComponent />
-            </TabPane>
+            <TabPane tab={item.name} key={item.id}> */}
+        {/* <ProductComponent category={item.name} /> */}
+        <ProductComponent />
+        {/* </TabPane>
           ))}
-        </Tabs>
+        </Tabs> */}
       </Card>
     </div>
   );