create profile, trace-code page

package-lock.json

@@ -9028,6 +9028,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "bootstrap": "^4.6.0",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",

src/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 import './App.css';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { Routes } from "./routes";
+import Home from "./components/Home/index";
 import Profile from "./components/Profile/index";
 import TraceCode from "./components/TraceCode/index";
 
@@ -10,6 +11,9 @@ function App() {
   return (
     <Router>
         <Switch>
+          <Route exact path="/">
+            <Home />
+          </Route>
           <Route path={Routes.Profile.path}>
             <Profile />
           </Route>

src/components/Home/index.js

+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Routes } from '../../routes';
+
+const Home = () => {
+  return (
+    <ul>
+      <Link to={Routes.Profile.path}>Profile</Link>
+    </ul>
+  );
+}
+
+export default Home;
\ No newline at end of file

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 dummyData from '../../data/index.json';
 import { Routes } from '../../routes';
 
 const Profile = () => {
@@ -11,51 +11,49 @@ const Profile = () => {
       dummyData.data.map((data, key) => {
         return (
           <Card className="px-0 px-md-4 py-0 border-0">
-            <Card.Header>
+            <Card.Body>
               <Row className="mb-2">
-                <Col xs={6}>
+                <Col xs={8}>
                   <h5 className="text-primary fw-bold">{data.name}</h5>
+                  <img src={window.location.origin + data.logo} alt="logo" height="250px" />
                 </Col>
-                <Col xs={6}>
-                  {/* <h5 className="text-primary fw-bold">{data.logo}</h5> */}
+                <Col xs={4} className="text-right">
+                  <img src={window.location.origin + data.qr_code} alt="qrcode" />
                 </Col>
-                <Col xs={6} className="text-right">
-                  {/* <img src={data.qr_code} /> */}
+              </Row>
+              <Row>
+                <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>
               </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>
         );

src/components/TraceCode/index.js

 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { Card, Row, Col, Tab, Nav } from 'react-bootstrap';
+import { formatDateTime } from '../../constans';
 
 
 const TraceCode = () => {
@@ -14,14 +15,13 @@ const TraceCode = () => {
         <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 className="h5 mb-3" style={{ color: '#33CC66' }}>Giá: {product.cost}</div>
         </div>
       </Card.Header>
       <Card.Body>
-        <div className="text-center">
+        <div className="main-container">
           <Row className="wrapper-search py-4">
             <Tab.Container defaultActiveKey="general-information">
               <Row>
@@ -47,15 +47,33 @@ const TraceCode = () => {
                 <Col xs={12}>
                   <Tab.Content>
                     <Tab.Pane eventKey="general-information">
-                      <div>
-                        
+                      <div className="mt-3 mb-3">
+                        <div className="h5">Mô tả</div>
+                        <div>{product.description}</div>
+                      </div>
+                      <div className="mb-3">
+                        <div className="h5">Điều kiện nuôi trồng</div>
+                        <div>{product.growing_conditions}</div>
                       </div>
                     </Tab.Pane>
                     <Tab.Pane eventKey="product-chain-diary">
-
+                      {product.product_chain_diary.map(diary => (
+                        <div>
+                          <Row className="h6 mt-3">{diary.company}</Row>
+                          <Row className="mb-3">
+                            <Col>{formatDateTime(diary.date)}</Col>
+                            <Col>{diary.description}</Col>
+                          </Row>
+                        </div>
+                      ))}
                     </Tab.Pane>
                     <Tab.Pane eventKey="product-certification">
-
+                    {product.product_certification.map(certificate => (
+                        <div>
+                          <div className="h6 mt-3 mb-3">{certificate.certification_information}</div>
+                          <img src={window.location.origin + certificate.image} alt="certificate" height="250px" />
+                        </div>
+                      ))}
                     </Tab.Pane>
                   </Tab.Content>
                 </Col>

src/constans/index.js

+import moment from "moment";
+
+export const formatDateTime = (timeDate) => {
+    let newDate = moment(new Date(Number(timeDate))).format("DD/MM/YYYY");
+    return newDate.toString();
+}

src/data/index.json

@@ -4,7 +4,7 @@
       "id": "d70d1e14-fbb9-4dd3-af84-8247efe74a92",
       "code": "KIS",
       "name": "Công ty TNHH sáng tạo KIS",
-      "logo": "/image/logo/kis-logo.jpg",
+      "logo": "/image/logo/kis-academy.jpg",
       "address": "Ha Noi",
       "phone_number": "0978549632",
       "qr_code": "/image/qrcode/qr-code.png",
@@ -18,42 +18,43 @@
           "origin": "Việt Nam",
           "image": "/image/product/tom-su.jpg",
           "description": "Tôm sú nước ngọt",
+          "growing_conditions": "Nuôi trồng tại vùng nguyên liệu tôm, cơ sở chế biến: Tỉnh Trà Vinh",
           "product_chain_diary": [
             {
-              "company": "Cty Vinashrimp",
+              "company": "Công ty Vinashrimp",
               "description": "Bắt đầu nuôi trồng",
-              "date": 1624870109921
+              "date": 1616300741111
             },
             {
-              "company": "Cty Vinashrimp",
-              "description": "Thu hoach",
-              "date": 1624870109921
+              "company": "Công ty Vinashrimp",
+              "description": "Thu hoạch",
+              "date": 1626841541222
             },
             {
-              "company": "Cty Coopmart",
+              "company": "Công ty Coopmart",
               "description": "Thu mua, nhập kho đông lạnh Cần Thơ",
-              "date": 1624870109921
+              "date": 1626841541222
             },
             {
-              "company": "Cty Coopmart",
+              "company": "Công ty Coopmart",
               "description": "Trưng bày siêu thị",
-              "date": 1624870109921
+              "date": 1627014341333
             },
             {
-              "company": "Cty Coopmart",
+              "company": "Công ty Coopmart",
               "description": "Bán cho người tiêu dùng",
-              "date": 1624870109921
+              "date": 1627619141213
             }
           ],
           "product_certification": [
             {
               "certification_information": "Chứng nhận certificate",
-              "image": "publish/image/certificate/certificate.jpg",
+              "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
             },
             {
               "certification_information": "Chứng nhận certificate",
-              "image": "publish/image/certificate/certificate.jpg",
+              "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
             }
           ]

src/routes.js

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