merge login, checkout page, register page

.next/build-manifest.json

@@ -24,11 +24,11 @@
       "static/runtime/polyfills.js",
       "static/runtime/polyfills.js.map"
     ],
-    "/suzuki/home": [
+    "/yamaha/cart/checkout": [
       "static/runtime/webpack.js",
       "static/runtime/main.js"
     ],
-    "/suzuki/product/product_detail": [
+    "/yamaha/product/product": [
       "static/runtime/webpack.js",
       "static/runtime/main.js"
     ]

.next/server/pages-manifest.json

@@ -1 +1 @@
-{"/_app":"static/development/pages/_app.js","/_document":"static/development/pages/_document.js","/_error":"static/development/pages/_error.js","/suzuki/home":"static/development/pages/suzuki/home.js","/suzuki/product/product_detail":"static/development/pages/suzuki/product/product_detail.js"}
+{"/_app":"static/development/pages/_app.js","/_document":"static/development/pages/_document.js","/_error":"static/development/pages/_error.js","/yamaha/cart/checkout":"static/development/pages/yamaha/cart/checkout.js","/yamaha/product/product":"static/development/pages/yamaha/product/product.js"}

assets/jss/nextjs-material-kit.js

@@ -1,266 +1,246 @@
-/*!
-
- =========================================================
- * NextJS Material Kit - v1.1.0 based on Material Kit - v2.0.2 and Material Kit React - v1.8.0
- =========================================================
-
- * Product Page: https://www.creative-tim.com/product/nextjs-material-kit
- * Copyright 2020 Creative Tim (https://www.creative-tim.com)
- * Licensed under MIT (https://github.com/creativetimofficial/nextjs-material-kit/blob/master/LICENSE.md)
-
- =========================================================
-
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
- */
-
-// ##############################
-// // // Variables - Styles that are used on more than one component
-// #############################
-
-const hexColorToRGB = function(hexColor) {
-  let detectShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // #000 vs #000000
-  hexColor = hexColor.replace(detectShorthand, function(m, r, g, b) {
-    return r + r + g + g + b + b;
-  });
-
-  const hex_array = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor); // #000000 to #ffffff
-  return hex_array
-    ? {
-        r: parseInt(hex_array[1], 16), // 0-255
-        g: parseInt(hex_array[2], 16), // 0-255
-        b: parseInt(hex_array[3], 16) // 0-255
-      }
-    : null;
-};
-
-const hexToRGBAlpha = function(hexColor, alpha) {
-  let rgb = hexColorToRGB(hexColor);
-  return `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`;
-};
-
-const drawerWidth = 260;
-
-const transition = {
-  transition: "all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)"
-};
-
-const conatinerFluid = {
-  paddingRight: "15px",
-  paddingLeft: "15px",
-  marginRight: "auto",
-  marginLeft: "auto",
-  width: "100%"
-};
-const container = {
-  ...conatinerFluid,
-  "@media (min-width: 576px)": {
-    maxWidth: "540px"
-  },
-  "@media (min-width: 768px)": {
-    maxWidth: "720px"
-  },
-  "@media (min-width: 992px)": {
-    maxWidth: "960px"
-  },
-  "@media (min-width: 1200px)": {
-    maxWidth: "1140px"
-  }
-};
-
-const boxShadow = {
-  boxShadow:
-    "0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)"
-};
-
-const card = {
-  display: "inline-block",
-  position: "relative",
-  width: "100%",
-  margin: "25px 0",
-  boxShadow: "0 1px 4px 0 rgba(0, 0, 0, 0.14)",
-  borderRadius: "3px",
-  color: "rgba(0, 0, 0, 0.87)",
-  background: "#fff"
-};
-
-const defaultFont = {
-  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-  fontWeight: "300",
-  lineHeight: "1.5em"
-};
-
-const primaryColor = "#9c27b0";
-const warningColor = "#ff9800";
-const dangerColor = "#f44336";
-const successColor = "#4caf50";
-const infoColor = "#00acc1";
-const roseColor = "#e91e63";
-const grayColor = "#999999";
-
-const primaryBoxShadow = {
-  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
-    primaryColor,
-    0.28
-  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
-    primaryColor,
-    0.2
-  )}`
-};
-const infoBoxShadow = {
-  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
-    infoColor,
-    0.28
-  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
-    infoColor,
-    0.2
-  )}`
-};
-const successBoxShadow = {
-  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
-    successColor,
-    0.28
-  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
-    successColor,
-    0.2
-  )}`
-};
-const warningBoxShadow = {
-  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
-    warningColor,
-    0.28
-  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
-    warningColor,
-    0.2
-  )}`
-};
-const dangerBoxShadow = {
-  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
-    dangerColor,
-    0.28
-  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
-    dangerColor,
-    0.2
-  )}`
-};
-const roseBoxShadow = {
-  boxShadow: `0 4px 20px 0px ${hexToRGBAlpha(
-    "#000",
-    0.14
-  )}, 0 7px 10px -5px ${hexToRGBAlpha(roseColor, 0.4)}`
-};
-
-const warningCardHeader = {
-  color: "#fff",
-  background: "linear-gradient(60deg, #ffa726, #fb8c00)",
-  ...warningBoxShadow
-};
-const successCardHeader = {
-  color: "#fff",
-  background: "linear-gradient(60deg, #66bb6a, #43a047)",
-  ...successBoxShadow
-};
-const dangerCardHeader = {
-  color: "#fff",
-  background: "linear-gradient(60deg, #ef5350, #e53935)",
-  ...dangerBoxShadow
-};
-const infoCardHeader = {
-  color: "#fff",
-  background: "linear-gradient(60deg, #26c6da, #00acc1)",
-  ...infoBoxShadow
-};
-const primaryCardHeader = {
-  color: "#fff",
-  background: "linear-gradient(60deg, #ab47bc, #8e24aa)",
-  ...primaryBoxShadow
-};
-const roseCardHeader = {
-  color: "#fff",
-  background: "linear-gradient(60deg, #ec407a, #d81b60)",
-  ...roseBoxShadow
-};
-const cardActions = {
-  margin: "0 20px 10px",
-  paddingTop: "10px",
-  borderTop: "1px solid #eeeeee",
-  height: "auto",
-  ...defaultFont
-};
-
-const cardHeader = {
-  margin: "-30px 15px 0",
-  borderRadius: "3px",
-  padding: "15px"
-};
-
-const defaultBoxShadow = {
-  border: "0",
-  borderRadius: "3px",
-  boxShadow:
-    "0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)",
-  padding: "10px 0",
-  transition: "all 150ms ease 0s"
-};
-
-const title = {
-  color: "#3C4858",
-  margin: "1.75rem 0 0.875rem",
-  textDecoration: "none",
-  fontWeight: "700",
-  fontFamily: `"Roboto Slab", "Times New Roman", serif`
-};
-
-const cardTitle = {
-  ...title,
-  marginTop: ".625rem"
-};
-
-const cardLink = {
-  "& + $cardLink": {
-    marginLeft: "1.25rem"
-  }
-};
-
-const cardSubtitle = {
-  marginBottom: "0",
-  marginTop: "-.375rem"
-};
-
-export {
-  hexToRGBAlpha,
-  //variables
-  drawerWidth,
-  transition,
-  container,
-  conatinerFluid,
-  boxShadow,
-  card,
-  defaultFont,
-  primaryColor,
-  warningColor,
-  dangerColor,
-  successColor,
-  infoColor,
-  roseColor,
-  grayColor,
-  primaryBoxShadow,
-  infoBoxShadow,
-  successBoxShadow,
-  warningBoxShadow,
-  dangerBoxShadow,
-  roseBoxShadow,
-  warningCardHeader,
-  successCardHeader,
-  dangerCardHeader,
-  infoCardHeader,
-  primaryCardHeader,
-  roseCardHeader,
-  cardActions,
-  cardHeader,
-  defaultBoxShadow,
-  title,
-  cardTitle,
-  cardLink,
-  cardSubtitle
-};
+    const hexColorToRGB = function(hexColor) {
+        let detectShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // #000 vs #000000
+        hexColor = hexColor.replace(detectShorthand, function(m, r, g, b) {
+          return r + r + g + g + b + b;
+        });
+  
+        const hex_array = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor); // #000000 to #ffffff
+        return hex_array
+          ? {
+              r: parseInt(hex_array[1], 16), // 0-255
+              g: parseInt(hex_array[2], 16), // 0-255
+              b: parseInt(hex_array[3], 16) // 0-255
+            }
+          : null;
+      };
+  
+      const hexToRGBAlpha = function(hexColor, alpha) {
+        let rgb = hexColorToRGB(hexColor);
+        return `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`;
+      };
+  
+      const drawerWidth = 260;
+  
+      const transition = {
+        transition: "all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)"
+      };
+  
+      const conatinerFluid = {
+        paddingRight: "15px",
+        paddingLeft: "15px",
+        marginRight: "auto",
+        marginLeft: "auto",
+        width: "100%"
+      };
+      const container = {
+        ...conatinerFluid,
+        "@media (min-width: 576px)": {
+          maxWidth: "540px"
+        },
+        "@media (min-width: 768px)": {
+          maxWidth: "720px"
+        },
+        "@media (min-width: 992px)": {
+          maxWidth: "960px"
+        },
+        "@media (min-width: 1200px)": {
+          maxWidth: "1140px"
+        }
+      };
+  
+      const boxShadow = {
+        boxShadow:
+          "0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)"
+      };
+  
+      const card = {
+        display: "inline-block",
+        position: "relative",
+        width: "100%",
+        margin: "25px 0",
+        boxShadow: "0 1px 4px 0 rgba(0, 0, 0, 0.14)",
+        borderRadius: "3px",
+        color: "rgba(0, 0, 0, 0.87)",
+        background: "#fff"
+      };
+  
+      const defaultFont = {
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontWeight: "300",
+        lineHeight: "1.5em"
+      };
+  
+      const primaryColor = "#9c27b0";
+      const warningColor = "#ff9800";
+      const dangerColor = "#f44336";
+      const successColor = "#4caf50";
+      const infoColor = "#00acc1";
+      const roseColor = "#e91e63";
+      const grayColor = "#999999";
+  
+      const primaryBoxShadow = {
+        boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+          primaryColor,
+          0.28
+        )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+          primaryColor,
+          0.2
+        )}`
+      };
+      const infoBoxShadow = {
+        boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+          infoColor,
+          0.28
+        )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+          infoColor,
+          0.2
+        )}`
+      };
+      const successBoxShadow = {
+        boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+          successColor,
+          0.28
+        )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+          successColor,
+          0.2
+        )}`
+      };
+      const warningBoxShadow = {
+        boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+          warningColor,
+          0.28
+        )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+          warningColor,
+          0.2
+        )}`
+      };
+      const dangerBoxShadow = {
+        boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+          dangerColor,
+          0.28
+        )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+          dangerColor,
+          0.2
+        )}`
+      };
+      const roseBoxShadow = {
+        boxShadow: `0 4px 20px 0px ${hexToRGBAlpha(
+          "#000",
+          0.14
+        )}, 0 7px 10px -5px ${hexToRGBAlpha(roseColor, 0.4)}`
+      };
+  
+      const warningCardHeader = {
+        color: "#fff",
+        background: "linear-gradient(60deg, #ffa726, #fb8c00)",
+        ...warningBoxShadow
+      };
+      const successCardHeader = {
+        color: "#fff",
+        background: "linear-gradient(60deg, #66bb6a, #43a047)",
+        ...successBoxShadow
+      };
+      const dangerCardHeader = {
+        color: "#fff",
+        background: "linear-gradient(60deg, #ef5350, #e53935)",
+        ...dangerBoxShadow
+      };
+      const infoCardHeader = {
+        color: "#fff",
+        background: "linear-gradient(60deg, #26c6da, #00acc1)",
+        ...infoBoxShadow
+      };
+      const primaryCardHeader = {
+        color: "#fff",
+        background: "linear-gradient(60deg, #ab47bc, #8e24aa)",
+        ...primaryBoxShadow
+      };
+      const roseCardHeader = {
+        color: "#fff",
+        background: "linear-gradient(60deg, #ec407a, #d81b60)",
+        ...roseBoxShadow
+      };
+      const cardActions = {
+        margin: "0 20px 10px",
+        paddingTop: "10px",
+        borderTop: "1px solid #eeeeee",
+        height: "auto",
+        ...defaultFont
+      };
+  
+      const cardHeader = {
+        margin: "-30px 15px 0",
+        borderRadius: "3px",
+        padding: "15px"
+      };
+  
+      const defaultBoxShadow = {
+        border: "0",
+        borderRadius: "3px",
+        boxShadow:
+          "0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)",
+        padding: "10px 0",
+        transition: "all 150ms ease 0s"
+      };
+  
+      const title = {
+        color: "#3C4858",
+        margin: "1.75rem 0 0.875rem",
+        textDecoration: "none",
+        fontWeight: "700",
+        fontFamily: `"Roboto Slab", "Times New Roman", serif`
+      };
+  
+      const cardTitle = {
+        ...title,
+        marginTop: ".625rem"
+      };
+  
+      const cardLink = {
+        "& + $cardLink": {
+          marginLeft: "1.25rem"
+        }
+      };
+  
+      const cardSubtitle = {
+        marginBottom: "0",
+        marginTop: "-.375rem"
+      };
+  
+      export {
+        hexToRGBAlpha,
+        //variables
+        drawerWidth,
+        transition,
+        container,
+        conatinerFluid,
+        boxShadow,
+        card,
+        defaultFont,
+        primaryColor,
+        warningColor,
+        dangerColor,
+        successColor,
+        infoColor,
+        roseColor,
+        grayColor,
+        primaryBoxShadow,
+        infoBoxShadow,
+        successBoxShadow,
+        warningBoxShadow,
+        dangerBoxShadow,
+        roseBoxShadow,
+        warningCardHeader,
+        successCardHeader,
+        dangerCardHeader,
+        infoCardHeader,
+        primaryCardHeader,
+        roseCardHeader,
+        cardActions,
+        cardHeader,
+        defaultBoxShadow,
+        title,
+        cardTitle,
+        cardLink,
+        cardSubtitle
+      };

components/Header/HeaderLinks.js

@@ -7,6 +7,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import Icon from "@material-ui/core/Icon";
+// import People from "@material-ui/core/People";
 import Chart from "@material-ui/icons/LocalGroceryStore";
 
 // @material-ui/icons
@@ -73,7 +74,7 @@ export default function HeaderLinks(props) {
           <Icon className={classes.icons}>wallet_travel</Icon> Career
         </Button>
       </ListItem>
-      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
+      {/* <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
         <CustomDropdown
           noLiPadding
           navDropdown
@@ -96,7 +97,7 @@ export default function HeaderLinks(props) {
             <a href="https://www.hino.co.id/" className={classes.dropdownLink}>Ketty Resto</a>,
           ]}
         />
-      </ListItem>
+      </ListItem> */}
       <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
         <Button
           href="/yamaha/abous_us/aboutus"
@@ -107,6 +108,15 @@ export default function HeaderLinks(props) {
         </Button>
       </ListItem>
       <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
+        <Button
+          href="/yamaha/profile/profile"
+          color="transparent"
+          className={classes.navLink}
+        >
+          <Icon className={classes.icons}>people</Icon> Profile
+        </Button>
+      </ListItem>
+      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
         <Button href="/yamaha/cart/cart" color="transparent" className={classes.navLink}>
           <Chart className={classes.icons} />
         </Button>

pages-sections/yamaha/cart/checkout.js

@@ -1,20 +1,15 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import { MDBJumbotron, MDBContainer } from "mdbreact";
 import clsx from 'clsx';
 
 import SnackbarContent from "components/Snackbar/SnackbarContent.js";
 import Button1 from "components/CustomButtons/Button.js";
 import image1 from "../../../assets/img/mail.png"
 import GridContainer from "components/Grid/GridContainer.js";
-import Card from "components/Card/Card.js";
 import classNames from "classnames";
 
 import Icon from "@material-ui/core/Icon";
-import Stepper from '@material-ui/core/Stepper';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
-import StepContent from '@material-ui/core/StepContent';
-import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
@@ -33,8 +28,13 @@ import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormControl from '@material-ui/core/FormControl';
-import FormLabel from '@material-ui/core/FormLabel';
-import value from '@material-ui/core/FormLabel';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CardFooter from "components/Card/CardFooter.js";
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -97,10 +97,6 @@ const useStyles = makeStyles((theme) => ({
     },
 }));
 
-function getSteps() {
-    return ['Alamat Pengiriman', 'Pesanan Produk', 'Metode Pembayaran'];
-}
-
 function StyledRadio(props) {
     const classes = useStyles();
     return (
@@ -121,31 +117,13 @@ const Transition = React.forwardRef(function Transition(props, ref) {
 
 const DataCheckout = function ({ backend, checkoutproduct, ...props }) {
     const classes = useStyles();
-    const [activeStep, setActiveStep] = React.useState(0);
-    const steps = getSteps();
-
-    const handleNext = () => {
-        setActiveStep((prevActiveStep) => prevActiveStep + 1);
-    };
-
-    const handleBack = () => {
-        setActiveStep((prevActiveStep) => prevActiveStep - 1);
-    };
-
-    const handleReset = () => {
-        setActiveStep(0);
-    };
-
     const [open, setOpen] = React.useState(false);
-
     const handleClickOpen = () => {
         setOpen(true);
     };
-
     const handleClose = () => {
         setOpen(false);
     };
-
     const { ...rest } = props;
     const imageClasses = classNames(
         classes.imgRaised,
@@ -154,201 +132,254 @@ const DataCheckout = function ({ backend, checkoutproduct, ...props }) {
     );
     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
 
-    const CartAlamat = checkoutproduct.map((data) => {
+    const CheckoutAlamat = checkoutproduct.map((data) => {
         return (
             <div align="center">
-                <img src={image1} style={{width:"1100px"}}/><br></br>
-                <h4>Alamat Pengiriman</h4>
-                <hr></hr>
-                <h5>Yusmar</h5>
-                <h5>087797315685</h5>
-                <h5>Thamrin Indrapura Jl.Aipda Karel Satsuit Tubun,17 Ilir, Kec.Ilir Tim.I, Palembang, KOTA PALEMBANG - ILIR TIMUR II, SUMATERA SELATAN, ID 30114</h5>
+                <Card className={classes.textCenter} align="center">
+                    <CardBody>
+                    <div style={{padding:"10px"}}>
+                        <Typography variant="h6" align="left" className={classes.title}>
+                            Alamat Pengiriman
+                        </Typography><br></br>
+                        <img src={image1} style={{width:"1100px"}}/><br></br>
+                        <h5>Yusmar</h5>
+                        <h5>087797315685</h5>
+                        <h5>Thamrin Indrapura Jl.Aipda Karel Satsuit Tubun,17 Ilir, Kec.Ilir Tim.I, Palembang, KOTA PALEMBANG - ILIR TIMUR II, SUMATERA SELATAN, ID 30114</h5>
 
-                <Button1 color="info" href={"/yamaha/cart/checkout?s="+data.id}>
-                    <Icon className={classes.icons}>cached</Icon>
-                    Ubah Alamat
-                </Button1>
+                        <Button1 color="info" href={"/yamaha/profile/profile"}>
+                            <Icon className={classes.icons}>cached</Icon>
+                            Ubah Alamat
+                        </Button1>
+                    </div>
+                    </CardBody>
+                </Card>
             </div>
         );
     })
 
-    const CartProdukPesanan = checkoutproduct.map((data) => {
+    const CheckoutProdukPesanan = checkoutproduct.map((data) => {
+        const handleChange = (event) => {
+            setAge(event.target.value);
+        };
+        const [age, setAge] = React.useState('');
         return (
             <div align="center">
-                <GridContainer>
-                    <Grid item xs>
-                        <div align="center">
-                            <h4>Produk Dipesan</h4>
-                            <img className={navImageClasses} width="200px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
-                        </div>
-                    </Grid>
-                    <Grid item xs>
-                        <div align="center">
-                            <h4></h4><br></br><br></br><br></br><br></br>
-                            <h5>{data.name}</h5>
-                        </div>
-                    </Grid>
-                    <Grid item xs>
-                        <div align="center">
-                            <h4>Harga Satuan</h4><br></br><br></br><br></br>
-                            <h5>Rp.{data.price}</h5>
-                        </div>
-                    </Grid>
-                    <Grid item xs>
-                        <div align="center">
-                            <h4>Jumlah Unit</h4><br></br><br></br><br></br>
-                            <h5>1 Unit</h5>
-                        </div>
-                    </Grid>
-                    <Grid item xs>
-                        <div align="center">
-                            <h4>Sub Total Produk</h4><br></br><br></br><br></br>
-                            <h5>Total Rp.{data.price}</h5>
-                        </div>
-                    </Grid>
-                </GridContainer>
-                <GridContainer style={{padding:"20px"}}>
-                    <Grid item xs style={{padding:"20px"}}>
-                        <TextField
-                            id="outlined-full-width"
-                            label="Pesan"
-                            style={{ margin: 8 }}
-                            placeholder="( Opsional ) Tinggalkan Pesan Kepada Dealer"
-                            fullWidth
-                            margin="normal"
-                            InputLabelProps={{
-                                shrink: true,
-                            }}
-                            variant="outlined"
-                        />
-                    </Grid>
-                    <Grid item xs style={{padding:"20px"}}><br></br>
-                        <Button variant="outlined" color="primary" onClick={handleClickOpen}>
-                            Pilih Opsi Pengiriman
-                        </Button>
-                        <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
-                            <AppBar className={classes.appBar}>
-                            <Toolbar>
-                                <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
-                                <CloseIcon />
-                                </IconButton>
-                                <Typography variant="h6" className={classes.title}>
-                                    Pilih Opsi Pengiriman
-                                </Typography>
-                                <Button autoFocus color="inherit" onClick={handleClose}>
-                                    Pilih
-                                </Button>
-                            </Toolbar>
-                            </AppBar>
-                            <List>
-                            <ListItem button>
-                                <ListItemText primary="Reguler" secondary="Akan diterima pada tanggal 2 Apr - 6 Apr" />
-                            </ListItem>
-                            <Divider />
-                            <ListItem button>
-                                <ListItemText primary="Kargo" secondary="Akan diterima pada tanggal 30 Mar - 2 Apr" />
-                            </ListItem>
-                            <ListItem button>
-                                <ListItemText primary="Hemat" secondary="Akan diterima pada tanggal 1 Apr - 4 Apr, COD (Bayar di Tempat) tidak didukung" />
-                            </ListItem>
-                            </List>
-                        </Dialog>
-                    </Grid>
-                    <Grid item xs align="right" style={{padding:"20px"}}><br></br>
-                        Total Rp. {data.price}
-                    </Grid>
-                </GridContainer>
-            </div>
-        );
-    })
-
-    const CartMetodePembayaran = checkoutproduct.map((data) => {
-        return (
-            <div>
-                <div align="center">
-                    <Typography variant="h6" className={classes.title}>
-                        Pilih Metode Pembayaran
-                    </Typography><br></br>
-                    <FormControl component="fieldset">
-                        <RadioGroup defaultValue="female" aria-label="gender">
-                        <GridContainer justify="center" style={{marginTop:"-50px"}}>
-                            <Grid style={{padding:"25px"}}>
-                                <Card style={{width: "200px"}}>
-                                    <div align="center">
-                                    <FormControlLabel value="1" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
-                                    <img src="https://1.bp.blogspot.com/-ghcXZfSaQBI/X6I02Zg-NfI/AAAAAAAAHaY/OxF9Klx83zQGKNETJ9qEnZCCmjsJ1DifQCLcBGAsYHQ/s1000/logo%2Bbank%2Bbca-01.png" width="100px"/>
-                                    <h4>Bank BCA</h4>
-                                    </div>
-                                </Card>
+                <Card className={classes.textCenter} align="center">
+                    <CardBody>
+                        <div style={{padding:"10px"}}>
+                        <Typography variant="h6" align="left" className={classes.title}>
+                            Pesanan Produk
+                        </Typography><br></br><hr></hr>
+                        <GridContainer>
+                            <Grid item xs>
+                                <div align="center">
+                                    <h4>Produk Dipesan</h4>
+                                    <img className={navImageClasses} width="200px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
+                                </div>
                             </Grid>
-                            <Grid style={{padding:"25px"}}>
-                                <Card style={{width: "200px"}}>
-                                    <div align="center">
-                                    <FormControlLabel value="2" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
-                                    <img src="https://cdn.ayobandung.com/images-bandung/post/articles/2020/02/03/78361/logo-bri-bank-rakyat-indonesia-png-terbaru.png" width="120px"/>
-                                    <h4>Bank BRI</h4>
-                                    </div>
-                                </Card>
+                            <Grid item xs>
+                                <div align="center">
+                                    <h4></h4><br></br><br></br><br></br><br></br>
+                                    <h5>{data.name}</h5>
+                                </div>
                             </Grid>
-                            <Grid style={{padding:"25px"}}>
-                                <Card style={{width: "200px"}}>
-                                    <div align="center">
-                                    <FormControlLabel value="3" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
-                                    <img src="https://cdn3.iconfinder.com/data/icons/banks-in-indonesia-logo-badge/100/Mandiri-512.png" width="140px"/>
-                                    <h4>Bank Mandiri</h4>
-                                    </div>
-                                </Card>
+                            <Grid item xs>
+                                <div align="center">
+                                    <h4>Warna</h4><br></br><br></br><br></br>
+                                    <FormControl className={classes.formControl}>
+                                        <Select
+                                        labelId="demo-simple-select-label"
+                                        id="demo-simple-select"
+                                        value={age}
+                                        onChange={handleChange}
+                                        >
+                                        <MenuItem value={10}>Hitam</MenuItem>
+                                        <MenuItem value={20}>Merah</MenuItem>
+                                        <MenuItem value={30}>Biru</MenuItem>
+                                        <MenuItem value={30}>Putih</MenuItem>
+                                        </Select>
+                                    </FormControl>
+                                </div>
                             </Grid>
-                            <Grid style={{padding:"25px"}}>
-                                <Card style={{width: "200px"}}>
-                                    <div align="center">
-                                    <FormControlLabel value="4" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
-                                    <img src="https://cdn3.iconfinder.com/data/icons/banks-in-indonesia-logo-badge/100/BNI-512.png" width="140px"/>
-                                    <h4>Bank BNI</h4>
-                                    </div>
-                                </Card>
+                            <Grid item xs>
+                                <div align="center">
+                                    <h4>Harga Satuan</h4><br></br><br></br><br></br>
+                                    <h5>Rp.{data.price}</h5>
+                                </div>
                             </Grid>
-                        </GridContainer>
-                        <GridContainer justify="center" style={{marginTop:"-50px"}}>
-                            <Grid style={{padding:"25px"}}>
-                                <Card style={{width: "200px"}}>
-                                    <div align="center">
-                                    <FormControlLabel value="5" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
-                                    <img src="https://statik.tempo.co/?id=997833&width=650" width="140px"/>
-                                    <h4>Bank BSI</h4>
-                                    </div>
-                                </Card>
+                            <Grid item xs>
+                                <div align="center">
+                                    <h4>Jumlah Unit</h4><br></br><br></br><br></br>
+                                    <FormControl className={classes.formControl}>
+                                        <TextField
+                                            id="outlined-number"
+                                            type="number"
+                                            align="center"
+                                            InputLabelProps={{
+                                                shrink: true,
+                                            }}
+                                        />
+                                    </FormControl>
+                                </div>
                             </Grid>
-                            <Grid style={{padding:"25px"}}>
-                                <Card style={{width: "200px"}}>
-                                    <div align="center">
-                                    <FormControlLabel value="6" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
-                                    <img src="https://internationalinvestorclub.com/wp-content/uploads/2020/10/BNLI-Bank-Permata.jpg" width="150px"/>
-                                    <h4>Bank Permata</h4>
-                                    </div>
-                                </Card>
+                            <Grid item xs>
+                                <div align="center">
+                                    <h4>Sub Total Produk</h4><br></br><br></br><br></br>
+                                    <h5>Total Rp.{data.price}</h5>
+                                </div>
                             </Grid>
-                            <Grid style={{padding:"25px"}}>
-                                <Card style={{width: "200px"}}>
-                                    <div align="center">
-                                    <FormControlLabel value="7" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
-                                    <img src="https://cdn.ayobandung.com/images-bandung/post/articles/2018/11/10/40370/images.png" width="135px"/>
-                                    <h4>Bank Danamon</h4>
-                                    </div>
-                                </Card>
+                        </GridContainer>
+                        <GridContainer style={{padding:"20px"}}>
+                            <Grid item xs style={{padding:"20px"}}>
+                                <TextField
+                                    id="outlined-full-width"
+                                    label="Pesan"
+                                    style={{ margin: 8 }}
+                                    placeholder="( Opsional ) Tinggalkan Pesan Kepada Dealer"
+                                    fullWidth
+                                    margin="normal"
+                                    InputLabelProps={{
+                                        shrink: true,
+                                    }}
+                                    variant="outlined"
+                                />
+                            </Grid>
+                            <Grid item xs style={{padding:"20px"}}><br></br>
+                                <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+                                    Pilih Opsi Pengiriman
+                                </Button>
+                                <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
+                                    <AppBar className={classes.appBar}>
+                                    <Toolbar>
+                                        <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
+                                        <CloseIcon />
+                                        </IconButton>
+                                        <Typography variant="h6" className={classes.title}>
+                                            Pilih Opsi Pengiriman
+                                        </Typography>
+                                        <Button autoFocus color="inherit" onClick={handleClose}>
+                                            Pilih
+                                        </Button>
+                                    </Toolbar>
+                                    </AppBar>
+                                    <List>
+                                    <ListItem button>
+                                        <ListItemText primary="Reguler" secondary="Akan diterima pada tanggal 2 Apr - 6 Apr" />
+                                    </ListItem>
+                                    <Divider />
+                                    <ListItem button>
+                                        <ListItemText primary="Kargo" secondary="Akan diterima pada tanggal 30 Mar - 2 Apr" />
+                                    </ListItem>
+                                    <ListItem button>
+                                        <ListItemText primary="Hemat" secondary="Akan diterima pada tanggal 1 Apr - 4 Apr, COD (Bayar di Tempat) tidak didukung" />
+                                    </ListItem>
+                                    </List>
+                                </Dialog>
                             </Grid>
-                            <Grid style={{padding:"25px"}}>
-                                <Card style={{width: "200px"}}>
-                                    <div align="center">
-                                    <FormControlLabel value="8" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
-                                    <img src="https://seekvectorlogo.com/wp-content/uploads/2020/04/maybank-vector-logo.png" width="145px"/>
-                                    <h4>Bank Maybank</h4>
-                                    </div>
-                                </Card>
+                            <Grid item xs align="right" style={{padding:"20px"}}><br></br>
+                                Total Rp. {data.price}
                             </Grid>
                         </GridContainer>
-                        </RadioGroup>
-                    </FormControl>
+                        </div>
+                    </CardBody>
+                </Card>
+            </div>
+        );
+    })
+
+    const CheckoutMetodePembayaran = checkoutproduct.map((data) => {
+        return (
+            <div>
+                <div align="center">
+                    <Card className={classes.textCenter} align="center">
+                        <CardBody>
+                        <div style={{padding:"10px"}}>
+                        <Typography variant="h6" align="left" className={classes.title}>
+                            Pilih Metode Pembayaran
+                        </Typography><br></br><hr></hr>
+                        <FormControl component="fieldset">
+                            <RadioGroup defaultValue="female" aria-label="gender">
+                            <GridContainer justify="center" style={{marginTop:"-50px"}}>
+                                <Grid style={{padding:"25px"}}>
+                                    <Card style={{width: "200px"}}>
+                                        <div align="center">
+                                        <FormControlLabel value="1" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
+                                        <img src="https://1.bp.blogspot.com/-ghcXZfSaQBI/X6I02Zg-NfI/AAAAAAAAHaY/OxF9Klx83zQGKNETJ9qEnZCCmjsJ1DifQCLcBGAsYHQ/s1000/logo%2Bbank%2Bbca-01.png" width="100px"/>
+                                        <h4>Bank BCA</h4>
+                                        </div>
+                                    </Card>
+                                </Grid>
+                                <Grid style={{padding:"25px"}}>
+                                    <Card style={{width: "200px"}}>
+                                        <div align="center">
+                                        <FormControlLabel value="2" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
+                                        <img src="https://cdn.ayobandung.com/images-bandung/post/articles/2020/02/03/78361/logo-bri-bank-rakyat-indonesia-png-terbaru.png" width="120px"/>
+                                        <h4>Bank BRI</h4>
+                                        </div>
+                                    </Card>
+                                </Grid>
+                                <Grid style={{padding:"25px"}}>
+                                    <Card style={{width: "200px"}}>
+                                        <div align="center">
+                                        <FormControlLabel value="3" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
+                                        <img src="https://cdn3.iconfinder.com/data/icons/banks-in-indonesia-logo-badge/100/Mandiri-512.png" width="140px"/>
+                                        <h4>Bank Mandiri</h4>
+                                        </div>
+                                    </Card>
+                                </Grid>
+                                <Grid style={{padding:"25px"}}>
+                                    <Card style={{width: "200px"}}>
+                                        <div align="center">
+                                        <FormControlLabel value="4" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
+                                        <img src="https://cdn3.iconfinder.com/data/icons/banks-in-indonesia-logo-badge/100/BNI-512.png" width="140px"/>
+                                        <h4>Bank BNI</h4>
+                                        </div>
+                                    </Card>
+                                </Grid>
+                            </GridContainer>
+                            <GridContainer justify="center" style={{marginTop:"-50px"}}>
+                                <Grid style={{padding:"25px"}}>
+                                    <Card style={{width: "200px"}}>
+                                        <div align="center">
+                                        <FormControlLabel value="5" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
+                                        <img src="https://statik.tempo.co/?id=997833&width=650" width="140px"/>
+                                        <h4>Bank BSI</h4>
+                                        </div>
+                                    </Card>
+                                </Grid>
+                                <Grid style={{padding:"25px"}}>
+                                    <Card style={{width: "200px"}}>
+                                        <div align="center">
+                                        <FormControlLabel value="6" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
+                                        <img src="https://internationalinvestorclub.com/wp-content/uploads/2020/10/BNLI-Bank-Permata.jpg" width="150px"/>
+                                        <h4>Bank Permata</h4>
+                                        </div>
+                                    </Card>
+                                </Grid>
+                                <Grid style={{padding:"25px"}}>
+                                    <Card style={{width: "200px"}}>
+                                        <div align="center">
+                                        <FormControlLabel value="7" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
+                                        <img src="https://cdn.ayobandung.com/images-bandung/post/articles/2018/11/10/40370/images.png" width="135px"/>
+                                        <h4>Bank Danamon</h4>
+                                        </div>
+                                    </Card>
+                                </Grid>
+                                <Grid style={{padding:"25px"}}>
+                                    <Card style={{width: "200px"}}>
+                                        <div align="center">
+                                        <FormControlLabel value="8" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
+                                        <img src="https://seekvectorlogo.com/wp-content/uploads/2020/04/maybank-vector-logo.png" width="145px"/>
+                                        <h4>Bank Maybank</h4>
+                                        </div>
+                                    </Card>
+                                </Grid>
+                            </GridContainer>
+                            </RadioGroup>
+                        </FormControl>
+                        </div>
+                        </CardBody>
+                    </Card>
                 </div>
             </div>
         );
@@ -357,56 +388,35 @@ const DataCheckout = function ({ backend, checkoutproduct, ...props }) {
     return (
         <div style={{padding:"50px"}}>
             <div align="center" className={classes.section} id="notifications">
-                    <SnackbarContent
-                        message={
-                            <h2><b>Checkout</b></h2>
-                        }
-                        align="center"
-                        color="danger"
-                    />
-                </div>
-                <Stepper activeStep={activeStep} orientation="vertical">
-                    {steps.map((label, index) => (
-                    <Step key={label}>
-                        <StepLabel>{label}</StepLabel>
-                        <StepContent>
-                        <Typography>{CartMetodePembayaran}</Typography>
-                        <div className={classes.actionsContainer}>
-                            <div>
-                            <Button
-                                disabled={activeStep === 0}
-                                onClick={handleBack}
-                                className={classes.button}
-                            >
-                                Back
-                            </Button>
-                            <Button
-                                variant="contained"
-                                color="primary"
-                                onClick={handleNext}
-                                className={classes.button}
-                            >
-                                {activeStep === steps.length - 1 ? 'Buat Pesanan' : 'Next'}
-                            </Button>
-                            </div>
-                        </div>
-                        </StepContent>
-                    </Step>
-                    ))}
-                </Stepper>
-                {activeStep === steps.length && (
-                    <Paper square elevation={0} className={classes.resetContainer}>
-                    <Typography>Semua Langkah Sudah Selesai !!!</Typography>
-                    <Button1 color="info" href={"/yamaha/cart/checkout?s="+data.id}>
-                        <Icon className={classes.icons}>shopping_cart</Icon>
-                        Checkout
-                    </Button1>
-                    <Button1 onClick={handleReset} color="info">
-                        <Icon className={classes.icons}>restore</Icon>
-                        Reset
-                    </Button1>
-                    </Paper>
-                )}
+                <SnackbarContent
+                    message={
+                        <h2><b>Checkout</b></h2>
+                    }
+                    align="center"
+                    color="danger"
+                />
+            </div>
+            <div>
+                {CheckoutAlamat}
+            </div>
+            <div>
+                {CheckoutProdukPesanan}
+            </div>
+            <div>
+                {CheckoutMetodePembayaran}
+            </div>
+            <div>
+                <Card className={classes.textCenter} align="center">
+                    <CardBody>
+                    <div style={{padding:"10px"}}>
+                        <Button1 color="info" href={"/yamaha/profile/profile"} style={{width:"100%"}}>
+                            <Icon className={classes.icons}>shop</Icon>
+                            Buat Pesanan
+                        </Button1>
+                    </div>
+                    </CardBody>
+                </Card>
+            </div>
         </div>
     );
 }

pages-sections/yamaha/product/product.js

@@ -43,7 +43,7 @@ const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, mop
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>
-                <Button 
+                <Button
                     color="info" round
                     href={"/yamaha/cart/checkout?s="+data.id}
                 >

pages-sections/yamaha/profile/profile.js

@@ -0,0 +1,352 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+import Select from 'react-select';
+
+import People from "@material-ui/icons/People";
+import LocationOn from "@material-ui/icons/LocationOn";
+import Lock from "@material-ui/icons/Lock";
+import image1 from "../../../assets/img/mail.png"
+
+import CustomInput from "components/CustomInput/CustomInput.js";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import Button from "components/CustomButtons/Button.js";
+import Icon from "@material-ui/core/Icon";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import SnackbarContent from "components/Snackbar/SnackbarContent.js";
+import NavPills from "components/NavPills/NavPills.js";
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/pillsStyle.js";
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        flexGrow: 1,
+    },
+    paper: {
+        padding: theme.spacing(2),
+        textAlign: 'center',
+        color: theme.palette.text.secondary,
+    },
+}));
+
+const DataApparel = function ({ selected, handleName, backend, apparel, asia, basic, merchand, maxi, rainsuit, motogp, offroad, ...props }) {
+    const [pass, setPass] = React.useState("");
+    const classes = useStyles();
+    const { ...rest } = props;
+    const imageClasses = classNames(
+        classes.imgRaised,
+        classes.imgRoundedCircle,
+        classes.imgFluid
+    );
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    return (
+        <div>
+        <Card className={classes.textCenter} align="center">
+            <CardBody>
+                <div align="center">
+                    <div align="center" className={classes.section} id="notifications" style={{marginTop:"-50px"}}>
+                        <SnackbarContent
+                        message={
+                            <h4>Profile</h4>
+                        }
+                        align="center"
+                        color="info"
+                        />
+                    </div>
+                    <GridContainer justify="center" style={{padding: "10px"}}>
+                        <NavPills
+                            color="info"
+                            horizontal={{
+                                tabsGrid: { xs: 4, sm: 3, md: 3 },
+                                contentGrid: { xs: 14, sm: 9, md: 9 }
+                            }}
+                            tabs={[
+                            {
+                                tabButton: "Profile",
+                                tabIcon: People,
+                                tabContent: (
+                                    <Grid container>
+                                        <Grid item xs={12}>
+                                            <div align="left">
+                                                <h3>Profile Saya</h3>
+                                                <span>Kelola informasi profil Anda untuk mengontrol, melindungi dan mengamankan akun</span><hr></hr>
+                                            </div>
+                                        </Grid>
+                                        <Grid container style={{padding:"10px"}}>
+                                            <Grid item xs>
+                                                <div align="left">
+                                                    Username
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs={6}>
+                                                <div align="left">
+                                                    : Yusmar15
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid container style={{padding:"10px"}}>
+                                            <Grid item xs>
+                                                <div align="left">
+                                                    Nama
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs={6}>
+                                                <div align="left">
+                                                    : Yusmar
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid container style={{padding:"10px"}}>
+                                            <Grid item xs>
+                                                <div align="left">
+                                                    Email
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs={6}>
+                                                <div align="left">
+                                                    : yusmardianto@thamrin.co.id
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid container style={{padding:"10px"}}>
+                                            <Grid item xs>
+                                                <div align="left">
+                                                    Nomer Telpon
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs={6}>
+                                                <div align="left">
+                                                    : 087797315685
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid container style={{padding:"10px"}}>
+                                            <Grid item xs>
+                                                <div align="left">
+                                                    Jenis Kelamin
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs={6}>
+                                                <div align="left">
+                                                    : Laki - Laki
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs>
+                                            </Grid>
+                                        </Grid>
+                                        <Button 
+                                        color="info" round
+                                        href={"/yamaha/product/product_detail?s="}
+                                        >
+                                            <Icon className={classes.icons}>open_in_new</Icon>Edit Profile
+                                        </Button>
+                                    </Grid>
+                                )
+                            },
+                            {
+                                tabButton: "Alamat",
+                                tabIcon: LocationOn,
+                                tabContent: (
+                                    <Grid container>
+                                        <Grid item xs={12}>
+                                            <div align="left">
+                                                <h3>Alamat Saya</h3>
+                                                <span>Kelola informasi Alamat Anda untuk Proses Pengirim Barang</span>
+                                            </div><hr></hr>
+                                        </Grid>
+                                        <img src={image1} style={{width:"920px"}}/><br></br>
+                                        <Grid container style={{padding:"10px"}}>
+                                            <Grid item xs>
+                                                <div align="left">
+                                                    Nama
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs={6}>
+                                                <div align="left">
+                                                    : Yusmar
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid container style={{padding:"10px"}}>
+                                            <Grid item xs>
+                                                <div align="left">
+                                                    Telpon
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs={6}>
+                                                <div align="left">
+                                                    : 087797315685
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid container style={{padding:"10px"}}>
+                                            <Grid item xs>
+                                                <div align="left">
+                                                    Alamat
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs={6}>
+                                                <div align="left">
+                                                    : Thamrin Indrapura Jl.Aipda Karel Satsuit Tubun,17 Ilir, Kec.Ilir Tim.I, Palembang, KOTA PALEMBANG - ILIR TIMUR II, SUMATERA SELATAN, ID 30114
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs>
+                                            </Grid>
+                                        </Grid>
+                                        <Button 
+                                        color="info" round
+                                        href={"/yamaha/product/product_detail?s="}
+                                        >
+                                            <Icon className={classes.icons}>open_in_new</Icon>Edit Alamat
+                                        </Button>
+                                    </Grid>
+                                )
+                            },
+                            {
+                                tabButton: "Ubah Password",
+                                tabIcon: Lock,
+                                tabContent: (
+                                    <Grid container>
+                                        <Grid item xs={12}>
+                                            <div align="left">
+                                                <h3>Ubah Password</h3>
+                                                <span>Untuk keamanan akun Anda, mohon untuk tidak menyebarkan password Anda ke orang lain</span>
+                                            </div><hr></hr>
+                                        </Grid>
+                                        <Grid container style={{padding:"10px"}}>
+                                            <Grid item xs>
+                                                <div align="left">
+                                                    <br></br>
+                                                    Password Saat Ini
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs={6}>
+                                                <div align="left">
+                                                <CustomInput
+                                                    labelText="Password Saat Ini"
+                                                    id="pass"
+                                                    value={pass}
+                                                    formControlProps={{
+                                                        fullWidth: true,
+                                                    }}
+                                                    inputProps={{
+                                                        onChange: (event) => setPass(event.target.value),
+                                                        type: "password",
+                                                        endAdornment: (
+                                                        <InputAdornment position="end">
+                                                            <Icon className={classes.inputIconsColor}>
+                                                            lock_outline
+                                                            </Icon>
+                                                        </InputAdornment>
+                                                        ),
+                                                        autoComplete: "off",
+                                                    }}
+                                                />
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid container style={{padding:"10px"}}>
+                                            <Grid item xs>
+                                                <div align="left">
+                                                <br></br>
+                                                    Password Baru
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs={6}>
+                                                <div align="left">
+                                                <CustomInput
+                                                    labelText="Password Baru"
+                                                    id="pass"
+                                                    value={pass}
+                                                    formControlProps={{
+                                                        fullWidth: true,
+                                                    }}
+                                                    inputProps={{
+                                                        onChange: (event) => setPass(event.target.value),
+                                                        type: "password",
+                                                        endAdornment: (
+                                                        <InputAdornment position="end">
+                                                            <Icon className={classes.inputIconsColor}>
+                                                            lock_outline
+                                                            </Icon>
+                                                        </InputAdornment>
+                                                        ),
+                                                        autoComplete: "off",
+                                                    }}
+                                                />
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid container style={{padding:"10px"}}>
+                                            <Grid item xs>
+                                                <div align="left">
+                                                <br></br>
+                                                    Konfirmasi Password
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs={6}>
+                                                <div align="left">
+                                                <CustomInput
+                                                    labelText="Konfirmasi Password"
+                                                    id="pass"
+                                                    value={pass}
+                                                    formControlProps={{
+                                                        fullWidth: true,
+                                                    }}
+                                                    inputProps={{
+                                                        onChange: (event) => setPass(event.target.value),
+                                                        type: "password",
+                                                        endAdornment: (
+                                                        <InputAdornment position="end">
+                                                            <Icon className={classes.inputIconsColor}>
+                                                            lock_outline
+                                                            </Icon>
+                                                        </InputAdornment>
+                                                        ),
+                                                        autoComplete: "off",
+                                                    }}
+                                                />
+                                                </div>
+                                            </Grid>
+                                            <Grid item xs>
+                                            </Grid>
+                                        </Grid>
+                                        <Button 
+                                        color="info" round
+                                        href={"/yamaha/product/product_detail?s="}
+                                        >
+                                            <Icon className={classes.icons}>open_in_new</Icon> Simpan
+                                        </Button>
+                                    </Grid>
+                                )
+                            }
+                            ]}
+                        />
+                    </GridContainer>
+                </div><br></br><br></br>
+            </CardBody>
+        </Card>
+        </div>
+    );
+}
+
+export default DataApparel;

pages/_(index).js

@@ -3,7 +3,7 @@ import Router from "next/router";
 
 export default class Index extends Component {
   componentDidMount = () => {
-    Router.push("/yamaha/home");    
+    Router.push("/suzuki/home");    
   };
 
   render() {

pages/yamaha/home.js

@@ -50,7 +50,7 @@ const Home = function ({
       />
       <div className={classNames(classes.main, classes.mainRaised)}>
         <DataSnackbarContent />
-        <CoreValue />
+        {/* <CoreValue /> */}
         <DataCarousel carousel={carousel} backend={backend} />
         <DataService service={service} backend={backend} />
         <DataFeature />
@@ -91,12 +91,12 @@ export async function getServerSideProps(context) {
     businessPartners = res["DATA"]["businessPartners"];
   }
 
-  var res = await Getservices.Getservices();
+  var res = await Getservices.GetservicesYamaha();
   if (res["STATUS"] === 1) {
     service = res["DATA"]["services"];
   }
 
-  var res = await Getcarousels.GetCarousels();
+  var res = await Getcarousels.GetCarouselsYamaha();
   if (res["STATUS"] === 1) {
     carousel = res["DATA"]["carousels"];
   }

pages/yamaha/login.js

@@ -86,7 +86,7 @@ export default function LoginPage(props) {
           {error}
         </Alert>
       </Collapse>
-      <Header absolute color="info" rightLinks={<HeaderLinks />} {...rest} />
+      {/* <Header absolute color="info" rightLinks={<HeaderLinks />} {...rest} /> */}
       <div
         className={classes.pageHeader}
         style={{
@@ -97,42 +97,13 @@ export default function LoginPage(props) {
       >
         <div className={classes.container}>
           <GridContainer justify="center">
-            <GridItem xs={12} sm={6} md={4}>
+            <GridItem xs={6}>
               <Card className={classes[cardAnimaton]}>
                 <form onSubmit={submitHandler} className={classes.form}>
                   <CardHeader color="info" className={classes.cardHeader}>
                     <h4>Login</h4>
-                    <div className={classes.socialLine}>
-                      <Button
-                        justIcon
-                        href="#pablo"
-                        target="_blank"
-                        color="transparent"
-                        onClick={(e) => e.preventDefault()}
-                      >
-                        <i className={"fab fa-twitter"} />
-                      </Button>
-                      <Button
-                        justIcon
-                        href="#pablo"
-                        target="_blank"
-                        color="transparent"
-                        onClick={(e) => e.preventDefault()}
-                      >
-                        <i className={"fab fa-facebook"} />
-                      </Button>
-                      <Button
-                        justIcon
-                        href="#pablo"
-                        target="_blank"
-                        color="transparent"
-                        onClick={(e) => e.preventDefault()}
-                      >
-                        <i className={"fab fa-google-plus-g"} />
-                      </Button>
-                    </div>
                   </CardHeader>
-                  <p className={classes.divider}>Welcome to Thamrin Brothers</p>
+                  <p className={classes.divider}>Selamat Datang di Halaman Login Thamrin Brothers</p>
                   <CardBody>
                     <CustomInput
                       labelText="Email..."
@@ -176,6 +147,9 @@ export default function LoginPage(props) {
                     <Button type="submit" color="info" size="lg">
                       Login
                     </Button>
+                    <Button href="/yamaha/register" color="info" size="lg">
+                      Register
+                    </Button>
                   </CardFooter>
                 </form>
               </Card>

pages/yamaha/profile/profile.js

@@ -0,0 +1,47 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import Footer from "components/Footer/Footer.js";
+
+import DataProfile from "../../../pages-sections/yamaha/profile/profile.js"
+import Cookies from "cookies";
+
+const useStyles = makeStyles(styles);
+const Home = function ({
+    backend,
+    businessPartners,
+    service,
+    carousel,
+    ...props
+    }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks username={props.user} />}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white",
+            }}
+            {...rest}
+        />
+        <Parallax
+            image={require("assets/img/Promotion_2-1.jpg")}
+            styles={{ marginTop: "50px" }}
+        />
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <DataProfile/>
+        </div>
+        <Footer />
+        </div>
+    );
+};
+export default Home;

pages/yamaha/register.js

@@ -0,0 +1,218 @@
+import React from "react";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import Icon from "@material-ui/core/Icon";
+// @material-ui/icons
+import Email from "@material-ui/icons/Email";
+import Event from "@material-ui/icons/Event";
+import People from "@material-ui/icons/People";
+// core components
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import Button from "components/CustomButtons/Button.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CardFooter from "components/Card/CardFooter.js";
+import CustomInput from "components/CustomInput/CustomInput.js";
+
+import styles from "assets/jss/nextjs-material-kit/pages/loginPage.js";
+
+import image from "assets/img/bgtbg.jpg";
+
+import Collapse from "@material-ui/core/Collapse";
+import Alert from "@material-ui/lab/Alert";
+import IconButton from "@material-ui/core/IconButton";
+import CloseIcon from "@material-ui/icons/Close";
+import { useRouter } from "next/router";
+const useStyles = makeStyles(styles);
+
+export default function RegisterPage(props) {
+    const [cardAnimaton, setCardAnimation] = React.useState("cardHidden");
+    const [first_name] = React.useState("");
+    const [last_name] = React.useState("");
+    const [date_birth, setDate] = React.useState("");
+    const [email, setEmail] = React.useState("");
+    const [pass, setPass] = React.useState("");
+    const [open, setOpen] = React.useState(false);
+    const [error, setError] = React.useState("");
+    const router = useRouter();
+    setTimeout(function () {
+        setCardAnimation("");
+    }, 700);
+    const classes = useStyles();
+    const { ...rest } = props;
+
+    const submitHandler = async (event) => {
+        event.preventDefault();
+        const res = await fetch("../api/auth/login", {
+        body: JSON.stringify({
+            partner: "yamaha",
+            first_name: first_name,
+            last_name: last_name,
+            date_birth: date_birth,
+            email: email,
+            pass: pass,
+        }),
+        headers: {
+            "Content-Type": "application/json",
+        },
+        method: "POST",
+        });
+        // console.log("res", res.S);
+        if (res.ok) {
+        router.push("/yamaha/home");
+        } else {
+        setError(await res.text());
+        setOpen(true);
+        }
+    };
+
+    return (
+        <div>
+        <Collapse className={classes.collapsible} in={open}>
+            <Alert
+            severity="error"
+            action={
+                <IconButton
+                aria-label="close"
+                color="inherit"
+                size="small"
+                onClick={() => {
+                    setOpen(false);
+                }}
+                >
+                <CloseIcon fontSize="inherit" />
+                </IconButton>
+            }
+            >
+            {error}
+            </Alert>
+        </Collapse>
+        {/* <Header absolute color="info" rightLinks={<HeaderLinks />} {...rest} /> */}
+        <div
+            className={classes.pageHeader}
+            style={{
+            backgroundImage: "url(" + image + ")",
+            backgroundSize: "cover",
+            backgroundPosition: "top center",
+            }}
+        >
+            <div className={classes.container}>
+            <GridContainer justify="center">
+                <GridItem xs={6}>
+                <Card className={classes[cardAnimaton]}>
+                    <form onSubmit={submitHandler} className={classes.form}>
+                    <CardHeader color="info" className={classes.cardHeader}>
+                        <h4>Register</h4>
+                    </CardHeader>
+                    <p className={classes.divider}>Selamat Datang di Halaman Register Thamrin Brothers</p>
+                    <CardBody>
+                        <CustomInput
+                            labelText="Nama Depan"
+                            id="first_name"
+                            value={first_name}
+                            formControlProps={{
+                                fullWidth: true,
+                            }}
+                            inputProps={{
+                                type: "text",
+                                endAdornment: (
+                                <InputAdornment position="end">
+                                    <People className={classes.inputIconsColor} />
+                                </InputAdornment>
+                                ),
+                            }}
+                        />
+                        <CustomInput
+                            labelText="Nama Belakang"
+                            id="last_name"
+                            value={last_name}
+                            formControlProps={{
+                                fullWidth: true,
+                            }}
+                            inputProps={{
+                                type: "text",
+                                endAdornment: (
+                                <InputAdornment position="end">
+                                    <People className={classes.inputIconsColor} />
+                                </InputAdornment>
+                                ),
+                            }}
+                        />
+                        {/* <CustomInput
+                            labelText="Tanggal Lahir"
+                            id="date_birth"
+                            value={date_birth}
+                            formControlProps={{
+                                fullWidth: true,
+                            }}
+                            inputProps={{
+                                type: "date",
+                                onChange: (event) => setDate(event.target.value),
+                                endAdornment: (
+                                <InputAdornment position="end">
+                                    <Event className={classes.inputIconsColor} />
+                                </InputAdornment>
+                                ),
+                            }}
+                        /> */}
+                        <CustomInput
+                            labelText="Email..."
+                            id="email"
+                            value={email}
+                            formControlProps={{
+                                fullWidth: true,
+                            }}
+                            inputProps={{
+                                type: "email",
+                                onChange: (event) => setEmail(event.target.value),
+                                endAdornment: (
+                                <InputAdornment position="end">
+                                    <Email className={classes.inputIconsColor} />
+                                </InputAdornment>
+                                ),
+                            }}
+                        />
+                        <CustomInput
+                            labelText="Password"
+                            id="pass"
+                            value={pass}
+                            formControlProps={{
+                                fullWidth: true,
+                            }}
+                            inputProps={{
+                                onChange: (event) => setPass(event.target.value),
+                                type: "password",
+                                endAdornment: (
+                                <InputAdornment position="end">
+                                    <Icon className={classes.inputIconsColor}>
+                                    lock_outline
+                                    </Icon>
+                                </InputAdornment>
+                                ),
+                                autoComplete: "off",
+                            }}
+                        />
+                    </CardBody>
+                    <div align="center">
+                        <a href="/yamaha/login">Sudah Punya Akun ? Silahkan Login</a>
+                    </div><br></br>
+                    <CardFooter className={classes.cardFooter}>
+                        <Button type="submit" color="info" size="lg">
+                        Register
+                        </Button>
+                    </CardFooter>
+                    </form>
+                </Card>
+                </GridItem>
+            </GridContainer>
+            </div>
+        </div>
+        </div>
+    );
+}