init code base

package.json

@@ -6,8 +6,11 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "bootstrap": "^4.6.0",
     "react": "^17.0.2",
+    "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

src/App.js

-import logo from './logo.svg';
+import React from 'react';
 import './App.css';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { Routes } from "./routes";
+import Profile from "./components/Profile/index";
+import TraceCode from "./components/TraceCode/index";
+
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+        <Switch>
+          <Route path={Routes.Profile.path}>
+            <Profile />
+          </Route>
+          <Route path={Routes.TraceCode.path}>
+            <TraceCode />
+          </Route>
+        </Switch>
+    </Router>
   );
 }
 

src/components/Profile/index.js

+import React from 'react';
+import { Card, Row, Col } from 'react-bootstrap';
+import { useHistory } from 'react-router-dom';
+import dummyData from '../../data/index.json'; 
+import { Routes } from '../../routes';
+
+const Profile = () => {
+  const history = useHistory();
+  return (
+    dummyData.data && dummyData.data.length > 0 ?
+      dummyData.data.map((data, key) => {
+        return (
+          <Card className="px-0 px-md-4 py-0 border-0">
+            <Card.Header>
+              <Row className="mb-2">
+                <Col xs={6}>
+                  <h5 className="text-primary fw-bold">{data.name}</h5>
+                </Col>
+                <Col xs={6}>
+                  {/* <h5 className="text-primary fw-bold">{data.logo}</h5> */}
+                </Col>
+                <Col xs={6} className="text-right">
+                  {/* <img src={data.qr_code} /> */}
+                </Col>
+              </Row>
+            </Card.Header>
+            <Card.Body>
+              <Col>
+                <div className="mb-3">
+                  <div className="h5">Số điện thoại</div>
+                  <div>{data.phone_number}</div>
+                </div>
+                <div className="mb-3">
+                  <div className="h5">Địa chỉ</div>
+                  <div>{data.address}</div>
+                </div>
+                <div className="mb-3">
+                  <div className="h5">Sản phẩm</div>
+                  <div>{data.profile_product && data.profile_product.length > 0 ? data.profile_product.map(product => {
+                    const onHandleTraceCode = () => {
+                      history.push({
+                        pathname: Routes.TraceCode.path,
+                        state: { product }
+                      });
+                    }
+                    return (
+                      <>
+                        <div className="mb-3">{product.name}</div>
+                        <img className="mb-3" src={window.location.origin + product.image} alt="product" onClick={onHandleTraceCode} />
+                        <div>
+                          <div className="h5">Mô tả</div>
+                          <div>{product.description}</div>
+                        </div>
+                      </>
+                    );
+                  }) : null}</div>
+                </div>
+              </Col>
+            </Card.Body>
+          </Card>
+        );
+      }) : <div></div>
+  );
+}
+
+export default Profile;
+

src/components/TraceCode/index.js

+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Card, Row, Col, Tab, Nav } from 'react-bootstrap';
+
+
+const TraceCode = () => {
+  const history = useHistory();
+  let state = { ...history.location.state };
+  const product = state.product;
+  console.log("product", product);
+  return (
+    <Card className="px-0 px-md-4 py-0 border-0">
+      <Card.Header>
+        <div className="text-center">
+          <img className="mb-3" src={window.location.origin + product.image} alt="product" />
+          <div className="h4 font-weight-bold mb-3">{product.name}</div>
+          <div className="h4 mb-3">Giá: {product.cost}</div>
+          <hr />
+          <div className="mb-3">Mã sản phẩm {product.trace_code}</div>
+          <div className="mb-3">Xuất xứ {product.origin}</div>
+        </div>
+      </Card.Header>
+      <Card.Body>
+        <div className="text-center">
+          <Row className="wrapper-search py-4">
+            <Tab.Container defaultActiveKey="general-information">
+              <Row>
+                <Col xs={12}>
+                  <Nav className="nav-tabs">
+                    <Nav.Item>
+                      <Nav.Link eventKey="general-information" className="mb-sm-3 mb-md-0">
+                        Thông tin chung
+                      </Nav.Link>
+                    </Nav.Item>
+                    <Nav.Item>
+                      <Nav.Link eventKey="product-chain-diary" className="mb-sm-3 mb-md-0">
+                        Nhật kí chuỗi
+                      </Nav.Link>
+                    </Nav.Item>
+                    <Nav.Item>
+                      <Nav.Link eventKey="product-certification" className="mb-sm-3 mb-md-0">
+                        Chứng nhận
+                      </Nav.Link>
+                    </Nav.Item>
+                  </Nav>
+                </Col>
+                <Col xs={12}>
+                  <Tab.Content>
+                    <Tab.Pane eventKey="general-information">
+                      <div>
+                        
+                      </div>
+                    </Tab.Pane>
+                    <Tab.Pane eventKey="product-chain-diary">
+
+                    </Tab.Pane>
+                    <Tab.Pane eventKey="product-certification">
+
+                    </Tab.Pane>
+                  </Tab.Content>
+                </Col>
+              </Row>
+            </Tab.Container>
+          </Row>
+        </div>
+      </Card.Body>
+    </Card>
+  );
+}
+
+export default TraceCode;
+

src/data/index.json

+{
+  "data": [
+    {
+      "id": "d70d1e14-fbb9-4dd3-af84-8247efe74a92",
+      "code": "KIS",
+      "name": "Công ty TNHH sáng tạo KIS",
+      "logo": "/image/logo/kis-logo.jpg",
+      "address": "Ha Noi",
+      "phone_number": "0978549632",
+      "qr_code": "/image/qrcode/qr-code.png",
+      "created_at": 1624870109921,
+      "profile_product": [
+        {
+          "trace_code": "VNC12345678",
+          "product_id": "u20d1e14-fbb9-4dd3-af84-8247efe74a92",
+          "name": "Tôm",
+          "cost": "Liên hệ",
+          "origin": "Việt Nam",
+          "image": "/image/product/tom-su.jpg",
+          "description": "Tôm sú nước ngọt",
+          "product_chain_diary": [
+            {
+              "company": "Cty Vinashrimp",
+              "description": "Bắt đầu nuôi trồng",
+              "date": 1624870109921
+            },
+            {
+              "company": "Cty Vinashrimp",
+              "description": "Thu hoach",
+              "date": 1624870109921
+            },
+            {
+              "company": "Cty Coopmart",
+              "description": "Thu mua, nhập kho đông lạnh Cần Thơ",
+              "date": 1624870109921
+            },
+            {
+              "company": "Cty Coopmart",
+              "description": "Trưng bày siêu thị",
+              "date": 1624870109921
+            },
+            {
+              "company": "Cty Coopmart",
+              "description": "Bán cho người tiêu dùng",
+              "date": 1624870109921
+            }
+          ],
+          "product_certification": [
+            {
+              "certification_information": "Chứng nhận certificate",
+              "image": "publish/image/certificate/certificate.jpg",
+              "date": 1624870109921
+            },
+            {
+              "certification_information": "Chứng nhận certificate",
+              "image": "publish/image/certificate/certificate.jpg",
+              "date": 1624870109921
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.render(
   <React.StrictMode>

src/routes.js

+
+export const Routes = {
+    Profile: { path: "/profile" },
+    TraceCode: { path: "/trace-code" }
+};
\ No newline at end of file