feat: initial commit

src/pages/Product/Product.js

@@ -0,0 +1,70 @@
+import React from "react";
+import {Button, Card, Col, Input, Row, Tabs} from "antd";
+import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {Pulsa} from "./Pulsa";
+
+const {TabPane} = Tabs;
+const {Search} = Input;
+
+export const Product = () => {
+  const callback = (key) => {
+    console.log(key);
+  };
+  const routeData = [
+    {
+      route: "/app/home",
+      name: "Home",
+    },
+    {
+      route: "/app/product",
+      name: <span style={{fontWeight: 'bold'}}>Product</span>,
+    },
+  ];
+  return (
+      <div>
+        <BreadcumbComponent data={routeData}/>
+        <Card>
+          <Row style={{marginBottom: 20}}>
+            <Col span={12}>
+              <Button>
+                <FilterOutlined/>
+                Filter
+              </Button>
+            </Col>
+            <Col span={12} style={{textAlign: "right"}}>
+              <Search
+                  placeholder="input search text"
+                  style={{width: 200, marginRight: 10}}
+              />
+              <Button>
+                <PlusSquareOutlined/> New
+              </Button>
+            </Col>
+          </Row>
+          <Tabs
+              defaultActiveKey="1"
+              onChange={callback}
+              size="default"
+              tabBarGutter="50"
+          >
+            <TabPane tab="Pulsa" key="1">
+              <Pulsa/>
+            </TabPane>
+            <TabPane tab="Game Voucher" key="2">
+              Game Voucher
+            </TabPane>
+            <TabPane tab="Product" key="3">
+              Product
+            </TabPane>
+            <TabPane tab="Prduct" key="4">
+              Prduct
+            </TabPane>
+            <TabPane tab="Prdct" key="5">
+              Prdct
+            </TabPane>
+          </Tabs>
+        </Card>
+      </div>
+  );
+};

src/pages/Product/Pulsa.js

@@ -0,0 +1,100 @@
+import React from "react";
+import {Button, Space, Table, Tag} from "antd";
+
+export const Pulsa = () => {
+    const columns = [
+        {
+            title: "Kode",
+            dataIndex: "kode",
+            key: "kode",
+        },
+        {
+            title: "Produk",
+            dataIndex: "produk",
+            key: "produk",
+        },
+        {
+            title: "Harga Beli",
+            dataIndex: "harga_beli",
+            key: "harga_beli",
+        },
+        ,
+        {
+            title: "Harga Jual",
+            dataIndex: "harga_jual",
+            key: "harga_beli",
+        },
+        {
+            title: "Gangguan",
+            dataIndex: "gangguan",
+            key: "gangguan",
+        },
+        {
+            title: "Tersedia",
+            dataIndex: "tersedia",
+            key: "tersedia",
+        },
+        {
+            title: "Action",
+            key: "action",
+            render: (text, record) => (
+                <Space size="middle">
+                    <Button>Edit</Button>
+                    <Button>Delete</Button>
+                </Space>
+            ),
+        },
+    ];
+    const dataSource = [
+        {
+            key: "1",
+            kode: "BROP2",
+            produk: "DATA AXIS 2GB-60HR",
+            harga_beli: "Rp.10.000",
+            harga_beli: "Rp.10.000",
+            harga_jual: "Rp.40.000",
+            gangguan: <Tag color="processing">Active</Tag>,
+            tersedia: <Tag color="processing">Ya</Tag>,
+        },
+        {
+            key: "2",
+            kode: "-",
+            produk: "-",
+            harga_beli: "-",
+            harga_beli: "-",
+            harga_jual: "-",
+            gangguan: <Tag color="#E3E8EE" style={{color: '#4F566B'}}>Gangguan</Tag>,
+            tersedia: <Tag color="#E3E8EE" style={{color: '#4F566B'}}>Tidak</Tag>,
+        },
+        {
+            key: "3",
+            kode: "-",
+            produk: "-",
+            harga_beli: "-",
+            harga_beli: "-",
+            harga_jual: "-",
+            gangguan: <Tag color="processing">Active</Tag>,
+            tersedia: <Tag color="processing">Ya</Tag>,
+        },
+        {
+            key: "4",
+            kode: "-",
+            produk: "-",
+            harga_beli: "-",
+            harga_beli: "-",
+            harga_jual: "-",
+            gangguan: <Tag color="processing">Active</Tag>,
+            tersedia: <Tag color="processing">Ya</Tag>,
+        }
+    ];
+    return (
+        <div>
+            <Table
+                style={{textAlign: "center"}}
+                columns={columns}
+                dataSource={dataSource}
+                bordered
+            />
+        </div>
+    );
+};