yarn build

api/product/accessories.js

@@ -100,10 +100,45 @@ async function GetAccessories(token="") {
 	return res;
 }
 
+async function GetDetailAccessories(id, token="") {
+	var res = await apollo.query(
+		`
+        query($input: ID!){
+            accessories(where:{id:$input})
+            {
+                id
+                name
+                description
+                price
+                part_code
+                img {
+                    url
+                }
+                img_relate1{
+                    url
+                }
+                img_relate2{
+                    url
+                }
+                img_relate3{
+                    url
+                }
+                stock
+            }
+        }	`,
+            token, 
+        {	
+        "input": id
+        }
+	);
+	return res;
+}
+
 module.exports = {
     GetYGP:GetYGP,
     GetYamalube:GetYamalube,
     GetHelmet:GetHelmet,
     GetApparel:GetApparel,
     GetAccessories:GetAccessories,
+    GetDetailAccessories:GetDetailAccessories,
 };

pages-sections/product/accessories.js

@@ -36,7 +36,7 @@ const DataAccessories = function ({ backend, accessories, ...props }) {
                 <h4>Rp.{data.price}</h4>
                 <Button 
                     color="info" round
-                    href={"/product_detail?s="+data.id}
+                    href={"/product/accessories_details?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>

pages-sections/product/accessories_details.js

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+import ReactHtmlParser from "react-html-parser";
+import Dashboard from "@material-ui/icons/Dashboard";
+import Icon from "@material-ui/core/Icon";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import GridItem from "components/Grid/GridItem.js";
+import NavPills from "components/NavPills/NavPills.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 Button from "components/CustomButtons/Button.js";
+import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
+import Carousel from "react-slick";
+
+const useStyles = makeStyles(styles);
+
+const DetailDataAccessories = function ({ backend, detailaccessories, ...props })  {
+    const classes = useStyles();
+    const { ...rest } = props;
+    const imageClasses = classNames(
+        classes.imgRaised,
+        classes.imgRoundedCircle,
+        classes.imgFluid
+        );
+        const settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        autoplay: true,
+        time: 5
+    };
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    const Accessoriesdetails = detailaccessories.map((data) => {
+        return (
+            <div>
+                <GridContainer>
+                    <Grid fluid xs={5}> 
+                    <div className={classes.section} id="notifications">
+                        <div className={classes.section}>
+                            <div className={classes.container}>
+                            <GridContainer>
+                                <GridItem className={classes.marginAuto}>
+                                    <Card carousel>
+                                        <Carousel {...settings}>
+                                            <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img["url"]}`} />
+                                        </Carousel>
+                                    </Card>
+                                </GridItem>
+                            </GridContainer>
+                            </div>
+                        </div>
+                    </div>
+                    </Grid>
+                    <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
+                        <h3>{data.name}</h3>
+                        <h3>Rp.{data.price}</h3>
+                        <hr></hr>
+                        <ul>
+                            <li><h4>Stock : {data.stock}</h4></li>
+                            <li><h4>Part Code : {data.part_code}</h4></li>
+                        </ul>
+                    </Grid>
+                </GridContainer>
+                <GridContainer>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                </GridContainer>
+                <div align="center">
+                    <hr></hr>
+                    <h2>Deskripsi</h2>
+                </div>
+                <div align="justify">
+                    <p>{ReactHtmlParser(data.description)}</p>
+                </div>
+            </div> 
+        );
+    })
+    return (
+        <Card className={classes.textCenter}>
+            <div align="center">
+                <CardHeader color="info">Product Detail</CardHeader>
+            </div>
+            <CardBody>
+                <div> 
+                    {Accessoriesdetails}
+                </div>
+            </CardBody>
+            <CardFooter className={classes.textMuted} textAlign="center">
+                © 2020 , All Right Reserved by @Thamrin Brother Company
+            </CardFooter>
+        </Card>
+    );
+}
+
+export default DetailDataAccessories;

pages-sections/product/apparel.js

@@ -35,7 +35,7 @@ const DataApparel = function ({ backend, apparel, ...props }) {
                 <h4>Rp.{data.price}</h4>
                 <Button 
                     color="info" round
-                    href={"/product_detail?s="+data.id}
+                    href={"/product/apparel_details?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>

pages-sections/product/apparel_details.js

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+import ReactHtmlParser from "react-html-parser";
+import Dashboard from "@material-ui/icons/Dashboard";
+import Icon from "@material-ui/core/Icon";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import GridItem from "components/Grid/GridItem.js";
+import NavPills from "components/NavPills/NavPills.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 Button from "components/CustomButtons/Button.js";
+import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
+import Carousel from "react-slick";
+
+const useStyles = makeStyles(styles);
+
+const DetailDataApparel = function ({ backend, detailapparel, ...props })  {
+    const classes = useStyles();
+    const { ...rest } = props;
+    const imageClasses = classNames(
+        classes.imgRaised,
+        classes.imgRoundedCircle,
+        classes.imgFluid
+        );
+        const settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        autoplay: true,
+        time: 5
+    };
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    const Appareldetails = detailapparel.map((data) => {
+        return (
+            <div>
+                <GridContainer>
+                    <Grid fluid xs={5}> 
+                    <div className={classes.section} id="notifications">
+                        <div className={classes.section}>
+                            <div className={classes.container}>
+                            <GridContainer>
+                                <GridItem className={classes.marginAuto}>
+                                    <Card carousel>
+                                        <Carousel {...settings}>
+                                            <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img["url"]}`} />
+                                        </Carousel>
+                                    </Card>
+                                </GridItem>
+                            </GridContainer>
+                            </div>
+                        </div>
+                    </div>
+                    </Grid>
+                    <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
+                        <h3>{data.name}</h3>
+                        <h3>Rp.{data.price}</h3>
+                        <hr></hr>
+                        <ul>
+                            <li><h4>Stock : {data.stock}</h4></li>
+                            <li><h4>Part Code : {data.part_code}</h4></li>
+                        </ul>
+                    </Grid>
+                </GridContainer>
+                <GridContainer>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                </GridContainer>
+                <div align="center">
+                    <hr></hr>
+                    <h2>Deskripsi</h2>
+                </div>
+                <div align="justify">
+                    <p>{ReactHtmlParser(data.description)}</p>
+                </div>
+            </div> 
+        );
+    })
+    return (
+        <Card className={classes.textCenter}>
+            <div align="center">
+                <CardHeader color="info">Product Detail</CardHeader>
+            </div>
+            <CardBody>
+                <div> 
+                    {Appareldetails}
+                </div>
+            </CardBody>
+            <CardFooter className={classes.textMuted} textAlign="center">
+                © 2020 , All Right Reserved by @Thamrin Brother Company
+            </CardFooter>
+        </Card>
+    );
+}
+
+export default DetailDataApparel;

pages-sections/product/helmet.js

@@ -35,7 +35,7 @@ const DataHelmet = function ({ backend, helmet, ...props }) {
                 <h4>Rp.{data.price}</h4>
                 <Button 
                     color="info" round
-                    href={"/product_detail?s="+data.id}
+                    href={"/product/helmet_details?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>

pages-sections/product/helmet_details.js

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+import ReactHtmlParser from "react-html-parser";
+import Dashboard from "@material-ui/icons/Dashboard";
+import Icon from "@material-ui/core/Icon";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import GridItem from "components/Grid/GridItem.js";
+import NavPills from "components/NavPills/NavPills.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 Button from "components/CustomButtons/Button.js";
+import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
+import Carousel from "react-slick";
+
+const useStyles = makeStyles(styles);
+
+const DetailDataHelmet = function ({ backend, detailhelmet, ...props })  {
+    const classes = useStyles();
+    const { ...rest } = props;
+    const imageClasses = classNames(
+        classes.imgRaised,
+        classes.imgRoundedCircle,
+        classes.imgFluid
+        );
+        const settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        autoplay: true,
+        time: 5
+    };
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    const Helmetdetails = detailhelmet.map((data) => {
+        return (
+            <div>
+                <GridContainer>
+                    <Grid fluid xs={5}> 
+                    <div className={classes.section} id="notifications">
+                        <div className={classes.section}>
+                            <div className={classes.container}>
+                            <GridContainer>
+                                <GridItem className={classes.marginAuto}>
+                                    <Card carousel>
+                                        <Carousel {...settings}>
+                                            <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img["url"]}`} />
+                                        </Carousel>
+                                    </Card>
+                                </GridItem>
+                            </GridContainer>
+                            </div>
+                        </div>
+                    </div>
+                    </Grid>
+                    <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
+                        <h3>{data.name}</h3>
+                        <h3>Rp.{data.price}</h3>
+                        <hr></hr>
+                        <ul>
+                            <li><h4>Stock : {data.stock}</h4></li>
+                            <li><h4>Part Code : {data.part_code}</h4></li>
+                        </ul>
+                    </Grid>
+                </GridContainer>
+                <GridContainer>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                </GridContainer>
+                <div align="center">
+                    <hr></hr>
+                    <h2>Deskripsi</h2>
+                </div>
+                <div align="justify">
+                    <p>{ReactHtmlParser(data.description)}</p>
+                </div>
+            </div> 
+        );
+    })
+    return (
+        <Card className={classes.textCenter}>
+            <div align="center">
+                <CardHeader color="info">Product Detail</CardHeader>
+            </div>
+            <CardBody>
+                <div> 
+                    {Helmetdetails}
+                </div>
+            </CardBody>
+            <CardFooter className={classes.textMuted} textAlign="center">
+                © 2020 , All Right Reserved by @Thamrin Brother Company
+            </CardFooter>
+        </Card>
+    );
+}
+
+export default DetailDataHelmet;

pages-sections/product/yamalube.js

@@ -35,7 +35,7 @@ const DataYamalube = function ({ backend, yamalube, ...props }) {
                 <h4>Rp.{data.price}</h4>
                 <Button 
                     color="info" round
-                    href={"/product_detail?s="+data.id}
+                    href={"/product/yamalube_details?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>

pages-sections/product/yamalube_details.js

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+import ReactHtmlParser from "react-html-parser";
+import Dashboard from "@material-ui/icons/Dashboard";
+import Icon from "@material-ui/core/Icon";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import GridItem from "components/Grid/GridItem.js";
+import NavPills from "components/NavPills/NavPills.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 Button from "components/CustomButtons/Button.js";
+import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
+import Carousel from "react-slick";
+
+const useStyles = makeStyles(styles);
+
+const DetailDataYamalube = function ({ backend, detailyamalube, ...props })  {
+    const classes = useStyles();
+    const { ...rest } = props;
+    const imageClasses = classNames(
+        classes.imgRaised,
+        classes.imgRoundedCircle,
+        classes.imgFluid
+        );
+        const settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        autoplay: true,
+        time: 5
+    };
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    const Yamalubedetails = detailyamalube.map((data) => {
+        return (
+            <div>
+                <GridContainer>
+                    <Grid fluid xs={5}> 
+                    <div className={classes.section} id="notifications">
+                        <div className={classes.section}>
+                            <div className={classes.container}>
+                            <GridContainer>
+                                <GridItem className={classes.marginAuto}>
+                                    <Card carousel>
+                                        <Carousel {...settings}>
+                                            <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img["url"]}`} />
+                                        </Carousel>
+                                    </Card>
+                                </GridItem>
+                            </GridContainer>
+                            </div>
+                        </div>
+                    </div>
+                    </Grid>
+                    <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
+                        <h3>{data.name}</h3>
+                        <h3>Rp.{data.price}</h3>
+                        <hr></hr>
+                        <ul>
+                            <li><h4>Stock : {data.stock}</h4></li>
+                            <li><h4>Part Code : {data.part_code}</h4></li>
+                        </ul>
+                    </Grid>
+                </GridContainer>
+                {/* <GridContainer>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img_relate1["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img_relate2["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img_relate3["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                </GridContainer> */}
+                <div align="center">
+                    <hr></hr>
+                    <h2>Deskripsi</h2>
+                </div>
+                <div align="justify">
+                    <p>{ReactHtmlParser(data.description)}</p>
+                </div>
+            </div> 
+        );
+    })
+    return (
+        <Card className={classes.textCenter}>
+            <div align="center">
+                <CardHeader color="info">Product Detail</CardHeader>
+            </div>
+            <CardBody>
+                <div> 
+                    {Yamalubedetails}
+                </div>
+            </CardBody>
+            <CardFooter className={classes.textMuted} textAlign="center">
+                © 2020 , All Right Reserved by @Thamrin Brother Company
+            </CardFooter>
+        </Card>
+    );
+}
+
+export default DetailDataYamalube;

pages-sections/product/ygp.js

@@ -35,7 +35,7 @@ const DataYGP = function ({ backend, ygp, ...props }) {
                 <h4>Rp.{data.price}</h4>
                 <Button 
                     color="info" round
-                    href={"/product_detail?s="+data.id}
+                    href={"/product/ygp_details?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>

pages-sections/product/ygp_details.js

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+import ReactHtmlParser from "react-html-parser";
+import Dashboard from "@material-ui/icons/Dashboard";
+import Icon from "@material-ui/core/Icon";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import GridItem from "components/Grid/GridItem.js";
+import NavPills from "components/NavPills/NavPills.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 Button from "components/CustomButtons/Button.js";
+import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
+
+const useStyles = makeStyles(styles);
+
+const DetailDataYGP = function ({ backend, detailygp, ...props })  {
+    const classes = useStyles();
+    const { ...rest } = props;
+    const imageClasses = classNames(
+        classes.imgRaised,
+        classes.imgRoundedCircle,
+        classes.imgFluid
+        );
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    const YGPdetails = detailygp.map((data) => {
+        return (
+            <div>
+                <GridContainer>
+                    <Grid fluid xs={5}> 
+                    <div className={classes.section} id="notifications">
+                        <div className={classes.section}>
+                            <div className={classes.container}>
+                            <GridContainer>
+                                <GridItem className={classes.marginAuto}>
+                                    <Card>
+                                        <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img["url"]}`} />
+                                    </Card>
+                                </GridItem>
+                            </GridContainer>
+                            </div>
+                        </div>
+                    </div>
+                    </Grid>
+                    <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
+                        <h3>{data.name}</h3>
+                        <h3>Rp.{data.price}</h3>
+                        <hr></hr>
+                        <ul>
+                            <li><h4>Stock : {data.stock}</h4></li>
+                            <li><h4>Part Code : {data.part_code}</h4></li>
+                        </ul>
+                    </Grid>
+                </GridContainer>
+                <GridContainer>
+                    <Grid className={classes.marginAuto} style={{padding:"11px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img_relate1["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                    <Grid className={classes.marginAuto} style={{padding:"11px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img_relate2["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                    <Grid className={classes.marginAuto} style={{padding:"11px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img_relate3["url"]}`} height="165px" width="200px"/>
+                    </Grid>
+                </GridContainer>
+                <div align="center">
+                    <hr></hr>
+                    <h2>Deskripsi</h2>
+                </div>
+                <div align="justify">
+                    <p>{ReactHtmlParser(data.description)}</p>
+                </div>
+            </div> 
+        );
+    })
+    return (
+        <Card className={classes.textCenter}>
+            <div align="center">
+                <CardHeader color="info">Product Detail</CardHeader>
+            </div>
+            <CardBody>
+                <div> 
+                    {YGPdetails}
+                </div>
+            </CardBody>
+            <CardFooter className={classes.textMuted} textAlign="center">
+                © 2020 , All Right Reserved by @Thamrin Brother Company
+            </CardFooter>
+        </Card>
+    );
+}
+
+export default DetailDataYGP;

pages/product/accessories_details.js

@@ -0,0 +1,55 @@
+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 Footer from "components/Footer/Footer.js";
+import AccessoriesDetail from "pages-sections/product/accessories_details.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import GetDetailAccessories from "../../api/product/accessories.js"
+
+const useStyles = makeStyles(styles);
+
+const AccessoriesDetails = function ({ backend, detailaccessories, ...props })  {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks/>}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white"
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/yamalube.jpg")} width="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <AccessoriesDetail detailaccessories={detailaccessories} backend={backend}/>  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default AccessoriesDetails;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var detailaccessories = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetDetailAccessories.GetDetailAccessories(query.s||0);
+	if (res["STATUS"] === 1) {
+		detailaccessories = res["DATA"]["accessories"];
+	}
+    console.log(detailaccessories);
+
+	return {
+		props: { detailaccessories, backend }, // will be passed to the page component as props
+	};
+}

pages/product/apparel_details.js

@@ -0,0 +1,55 @@
+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 Footer from "components/Footer/Footer.js";
+import ApparelDetail from "pages-sections/product/apparel_details.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import GetDetailApparel from "../../api/product/accessories.js"
+
+const useStyles = makeStyles(styles);
+
+const ApparelDetails = function ({ backend, detailapparel, ...props })  {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks/>}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white"
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/yamalube.jpg")} width="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <ApparelDetail detailapparel={detailapparel} backend={backend}/>  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default ApparelDetails;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var detailapparel = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetDetailApparel.GetDetailAccessories(query.s||0);
+	if (res["STATUS"] === 1) {
+		detailapparel = res["DATA"]["accessories"];
+	}
+    console.log(detailapparel);
+
+	return {
+		props: { detailapparel, backend }, // will be passed to the page component as props
+	};
+}

pages/product/helmet_details.js

@@ -0,0 +1,55 @@
+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 Footer from "components/Footer/Footer.js";
+import HelmetDetail from "pages-sections/product/helmet_details.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import GetDetailHelmet from "../../api/product/accessories.js"
+
+const useStyles = makeStyles(styles);
+
+const HelmetDetails = function ({ backend, detailhelmet, ...props })  {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks/>}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white"
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/yamalube.jpg")} width="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <HelmetDetail detailhelmet={detailhelmet} backend={backend}/>  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default HelmetDetails;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var detailhelmet = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetDetailHelmet.GetDetailAccessories(query.s||0);
+	if (res["STATUS"] === 1) {
+		detailhelmet = res["DATA"]["accessories"];
+	}
+    console.log(detailhelmet);
+
+	return {
+		props: { detailhelmet, backend }, // will be passed to the page component as props
+	};
+}

pages/product/yamalube_details.js

@@ -0,0 +1,55 @@
+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 Footer from "components/Footer/Footer.js";
+import YamalubeDetail from "pages-sections/product/yamalube_details.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import GetDetailYamalube from "../../api/product/accessories.js"
+
+const useStyles = makeStyles(styles);
+
+const YamalubeDetails = function ({ backend, detailyamalube, ...props })  {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks/>}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white"
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/yamalube.jpg")} width="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <YamalubeDetail detailyamalube={detailyamalube} backend={backend}/>  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default YamalubeDetails;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var detailyamalube = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetDetailYamalube.GetDetailAccessories(query.s||0);
+	if (res["STATUS"] === 1) {
+		detailyamalube = res["DATA"]["accessories"];
+	}
+    console.log(detailyamalube);
+
+	return {
+		props: { detailyamalube, backend }, // will be passed to the page component as props
+	};
+}

pages/product/ygp_details.js

@@ -0,0 +1,55 @@
+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 Footer from "components/Footer/Footer.js";
+import YGPDetail from "pages-sections/product/ygp_details.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import GetDetailYGP from "../../api/product/accessories.js"
+
+const useStyles = makeStyles(styles);
+
+const YGPDetails = function ({ backend, detailygp, ...props })  {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks/>}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white"
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/yamalube.jpg")} width="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <YGPDetail detailygp={detailygp} backend={backend}/>  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default YGPDetails;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var detailygp = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetDetailYGP.GetDetailAccessories(query.s||0);
+	if (res["STATUS"] === 1) {
+		detailygp = res["DATA"]["accessories"];
+	}
+    console.log(detailygp);
+
+	return {
+		props: { detailygp, backend }, // will be passed to the page component as props
+	};
+}