fix model apparel

api/latest_news/news.js

@@ -24,6 +24,30 @@ async function GetNews(token="", start = 0) {
 	return res;
 }
 
+async function GetOtherNews(token="", start = 0) {
+	var res = await apollo.query(
+      `
+        query($start: Int!) {
+          latestNews(limit:3,start:$start)
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+		token,
+    {
+      start: start,
+    }
+	);
+	return res;
+}
+
 async function GetDetailNews(id, token="") {
 	var res = await apollo.query(
       `
@@ -51,4 +75,5 @@ async function GetDetailNews(id, token="") {
 module.exports = {
 	GetNews: GetNews,
   GetDetailNews: GetDetailNews,
+  GetOtherNews:GetOtherNews,
 };

api/product/apparel.js

@@ -0,0 +1,182 @@
+import apollo from "../../lib/apollo.js";
+
+async function GetApparel(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            apparels(where: { category: "RConcept" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetApparel46Asia(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            apparels(where: { category: "Asia" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetApparelBasic(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            apparels(where: { category: "Basic" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetApparelMerchandise(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            apparels(where: { category: "Merchandise" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetApparelMaxi(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            apparels(where: { category: "Maxi" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetApparelRainSuit(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            apparels(where: { category: "RainSuit" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetApparelMotoGP(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            apparels(where: { category: "motoGP" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetApparelOffRoad(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            apparels(where: { category: "OffRoad" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetDetailApparel(id, token="") {
+	var res = await apollo.query(
+		`
+        query($input: ID!){
+            apparels(where:{id:$input})
+            {
+                id
+                name
+                description
+                price
+                part_code
+                img {
+                    url
+                }
+                stock
+            }
+        }	`,
+            token, 
+        {	
+        "input": id
+        }
+	);
+	return res;
+}
+
+module.exports = {
+    GetApparel:GetApparel,
+    GetApparel46Asia:GetApparel46Asia,
+    GetApparelBasic:GetApparelBasic,
+    GetApparelMerchandise:GetApparelMerchandise,
+    GetApparelMaxi:GetApparelMaxi,
+    GetApparelRainSuit:GetApparelRainSuit,
+    GetApparelMotoGP:GetApparelMotoGP,
+    GetApparelOffRoad:GetApparelOffRoad,
+    GetDetailApparel:GetDetailApparel,
+};

pages-sections/carrer/carrer_details.js

@@ -1,24 +1,62 @@
 import React from 'react';
-import { makeStyles } from "@material-ui/core/styles";
 import ReactHtmlParser from "react-html-parser";
+import { makeStyles } from "@material-ui/core/styles";
 
+import classNames from "classnames";
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import GridItem from "components/Grid/GridItem.js";
 import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
-import CardHeader from "components/Card/CardHeader.js";
+import Carousel from "react-slick";
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
 
+const useStyles = makeStyles(styles);
 const DataCarrer = function ({ backend, detailcarrer, ...props }) {
+    const classes = useStyles();
+    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 carrer = detailcarrer.map((data) => {
         return (
-        <Card>
-            <CardHeader color="info"><h3><div align="center">{data.name}</div></h3></CardHeader>
-            <CardBody>
-                <div align="center">
-                    <img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" />
-                </div>
-                <h5 align="center">Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}</h5>
-                <h5 align="justify">{ReactHtmlParser(data.description)}</h5>
-            </CardBody>
-        </Card>
+            <GridContainer justify="center">
+                <Grid fluid xs={4}> 
+                    <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[0]["url"]}`} />
+                                        </Carousel>
+                                    </Card>
+                                </GridItem>
+                            </GridContainer>
+                            </div>
+                        </div>
+                    </div>
+                </Grid>
+                <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
+                    <h4>{data.name}</h4>
+                    <h4>{data.published_at}</h4>
+                    <hr></hr>
+                    <div align="justify">
+                        <p>{ReactHtmlParser(data.description)}</p>
+                    </div>
+                </Grid>
+            </GridContainer>
         );
     })
     return (

pages-sections/dealers/dealers.js

@@ -19,7 +19,7 @@ const DataDealer = function ({ selected, handleName, backend, dealers, ...props
     const Dealers = dealers.map((data) => {
         return (
             <div>
-                <Grid style={{width:"400px", padding:"30px"}}>
+                <Grid style={{width:"350px", padding:"10px"}}>
                     <Card>
                         <CardHeader color="danger"><div align="center">{data.name}</div></CardHeader>
                         <CardBody>
@@ -59,8 +59,7 @@ const DataDealer = function ({ selected, handleName, backend, dealers, ...props
                         onChange={values => handleName(values)}
                     />
                     <br></br>
-                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
-                        {Dealers}
+                    <GridContainer justify="center">
                         {Dealers}
                     </GridContainer>
                 </div> 

pages-sections/latest_news/news_details.js

@@ -1,62 +1,93 @@
 import React, { useState, useEffect } from "react";
-import Router, { withRouter } from "next/router";
 import ReactHtmlParser from "react-html-parser";
 // @material-ui/core components
 import { makeStyles } from "@material-ui/core/styles";
 import ReactPaginate from "react-paginate";
 
+import classNames from "classnames";
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import GridItem from "components/Grid/GridItem.js";
+import Card from "components/Card/Card.js";
+import Carousel from "react-slick";
+import CardBody from "components/Card/CardBody.js";
+import Button from "components/CustomButtons/Button.js";
+import Icon from "@material-ui/core/Icon";
 import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
 
 const useStyles = makeStyles(styles);
 
-const DataLatestNews = function ({ backend, news, ...props }) {
-    const [isLoading, setLoading] = useState(false); //State for the loading indicator
-    const startLoading = () => setLoading(true);
-    const stopLoading = () => setLoading(false);
-    useEffect(() => {
-        //After the component is mounted set router event handlers
-        Router.events.on("routeChangeStart", startLoading);
-        Router.events.on("routeChangeComplete", stopLoading);
-
-        return () => {
-            Router.events.off("routeChangeStart", startLoading);
-            Router.events.off("routeChangeComplete", stopLoading);
-        };
-    }, []);
-    const pagginationHandler = (page) => {
-        const currentPath = props.router.pathname;
-        const currentQuery = props.router.query;
-        currentQuery.page = page.selected + 1;
-
-        props.router.push({
-            pathname: currentPath,
-            query: currentQuery,
-        });
-    };
-
+const DataLatestNews = function ({ backend, news, othernews,...props }) {
     const classes = useStyles();
+    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 otherlatnews = othernews.map((data) => {
+        return (
+        <Grid align="center" style={{padding:"5px", marginTop:"-50px"}}>
+            <Card style={{width: "20rem"}}>
+                <img
+                style={{height: "180px", width: "100%", display: "block"}}
+                className={classes.imgCardTop}
+                src={`${backend}${data.img[0]["url"]}`}
+                />
+                <CardBody>
+                <p>{data.title}</p>
+                <Button color="info" round href={"/latestnews_details?s="+data.id}>
+                    <Icon className={classes.icons}>open_in_new</Icon>Read More
+                </Button>
+                </CardBody>
+            </Card>
+        </Grid>
+        );
+    })
     const latnews = news.map((data) => {
         return (
-            <div className={classes.section} style={{ padding: "40px" }}>
-                <div align="center" style={{ marginTop: "-40px" }}>
-                    <h2>{data.title}</h2>
-                </div>
-                <br></br>
-                <br></br>
-                <div align="center">
-                    <img
-                        src={`${backend}${data.img[0]["url"]}`}
-                        alt="First slide"
-                        className="slick-image"
-                    />
-                    <div>
-                        <br></br>
-                        {data.published_at}
+            
+            <GridContainer justify="center">
+                <Grid fluid xs={4}> 
+                    <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[0]["url"]}`} />
+                                        </Carousel>
+                                    </Card>
+                                    <hr></hr>
+                                    <div align="center">
+                                        <h3>Other Latest News</h3>
+                                        <h3>{otherlatnews}</h3>
+                                    </div>
+                                </GridItem>
+                            </GridContainer>
+                            </div>
+                        </div>
+                    </div>
+                </Grid>
+                <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
+                    <h4>{data.title}</h4>
+                    <h4>{data.published_at}</h4>
+                    <hr></hr>
+                    <div align="justify">
+                        <p>{ReactHtmlParser(data.description)}</p>
                     </div>
-                </div>
-                <br></br>
-                <h5 align="justify">{ReactHtmlParser(data.description)}</h5>
-            </div>
+                </Grid>
+            </GridContainer>
         );
     });
     return <div>{latnews}</div>;

pages-sections/product/apparel.js

@@ -9,10 +9,11 @@ import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/noti
 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";
 
 const useStyles = makeStyles(styles);
 
-const DataApparel = function ({ selected, handleName, backend, apparel, ...props }) {
+const DataApparel = function ({ selected, handleName, backend, apparel, asia, basic, merchand, maxi, rainsuit, motogp, offroad, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     const imageClasses = classNames(
@@ -21,18 +22,49 @@ const DataApparel = function ({ selected, handleName, backend, apparel, ...props
         classes.imgFluid
     );
     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
-    const ProductApparel = apparel.map((data) => {
-        return (      
-            <div style={{padding:"40px"}}>
+    const ProductApparelRCon = apparel.map((data) => {
+        return (   
+        <div style={{padding: "20px", marginTop:"-40px"}}>   
+        <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
+            <CardBody>
+            <div style={{padding:"10px"}}>
+                <img
+                    alt="..."
+                    style={{ height: "150px", display: "block" }}
+                    src={`${backend}${data.img["url"]}`}
+                    className={navImageClasses}
+                />
+                <div align="center">
+                <h5>{data.name}</h5>
+                <h5>Rp.{data.price}</h5>
+                <Button 
+                    color="info" round
+                    href={"/product/apparel_details?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+            </CardBody>
+        </Card>
+        </div>
+        );
+    })
+    const ProductApparelAsia = asia.map((data) => {
+        return (   
+        <div style={{padding: "20px", marginTop:"-40px"}}>   
+        <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
+            <CardBody>
+            <div style={{padding:"10px"}}>
                 <img
-                alt="..."
-                style={{ height: "150px", display: "block" }}
-                src={`${backend}${data.img["url"]}`}
-                className={navImageClasses}
+                    alt="..."
+                    style={{ height: "150px", display: "block" }}
+                    src={`${backend}${data.img["url"]}`}
+                    className={navImageClasses}
                 />
                 <div align="center">
-                <h3>{data.name}</h3>
-                <h4>Rp.{data.price}</h4>
+                <h5>{data.name}</h5>
+                <h5>Rp.{data.price}</h5>
                 <Button 
                     color="info" round
                     href={"/product/apparel_details?s="+data.id}
@@ -41,13 +73,16 @@ const DataApparel = function ({ selected, handleName, backend, apparel, ...props
                 </Button>
                 </div>
             </div>
+            </CardBody>
+        </Card>
+        </div>
         );
     })
     return (
         <div>
-        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+        <Card className={classes.textCenter} align="center">
             <CardBody>
-            <div align="center" style={{marginTop:"-50px"}}>
+            <div align="center">
                 <h2>Yamaha Apparel</h2>
                 <Select
                     value={(selected)?apparel.filter((i)=>i.id==selected):null} 
@@ -59,11 +94,35 @@ const DataApparel = function ({ selected, handleName, backend, apparel, ...props
                     placeholder="filter by Nama Part"
                     onChange={values => handleName(values)}
                 />
-                <br></br>
-                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
-                    {ProductApparel}{ProductApparel}
+            </div><br></br><br></br><br></br>
+            <div align="center">
+                <div align="center" className={classes.section} id="notifications">
+                    <SnackbarContent
+                    message={
+                        <h4>APPAREL R CONCEPT</h4>
+                    }
+                    align="center"
+                    color="danger"
+                    />
+                </div>
+                <GridContainer justify="center">
+                    {ProductApparelRCon}
+                </GridContainer>
+            </div><br></br><br></br>
+            <div align="center">
+                <div align="center" className={classes.section} id="notifications">
+                    <SnackbarContent
+                    message={
+                        <h4>APPAREL 46ASIA</h4>
+                    }
+                    align="center"
+                    color="danger"
+                    />
+                </div>
+                <GridContainer justify="center">
+                    {ProductApparelAsia}
                 </GridContainer>
-            </div> 
+            </div><br></br><br></br>
             </CardBody>
         </Card>
         </div>

pages-sections/product/apparel_details.js

@@ -64,21 +64,10 @@ const DetailDataApparel = function ({ backend, detailapparel, ...props })  {
                         <hr></hr>
                         <ul>
                             <li><h4>Stock : {data.stock}</h4></li>
-                            <li><h4>Part Code : {data.part_code}</h4></li>
+                            <li><h4>Part Code : {ReactHtmlParser(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>

pages-sections/product/helmet.js

@@ -25,177 +25,193 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extre
     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
     const ProductHelmetRConcepts = helmet.map((data) => {
         return (      
-            <div style={{padding:"40px"}}>
-                <img
-                    alt="..."
-                    style={{ height: "150px", display: "block" }}
-                    src={`${backend}${data.img["url"]}`}
-                    className={navImageClasses}
-                />
-                <div align="center">
-                <h4>{data.name}</h4>
-                <h4>Rp.{data.price}</h4>
-                <Button 
-                    color="info" round
-                    href={"/product/helmet_details?s="+data.id}
-                >
-                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-                </Button>
+            <div style={{padding: "20px", marginTop:"-40px"}}>   
+            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
+                <CardBody>
+                <div align="center" style={{padding:"10px"}}>
+                    <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
+                    />
+                    <div align="center">
+                    <h5>{data.name}</h5>
+                    <h5>Rp.{data.price}</h5>
+                    <Button 
+                        color="info" round
+                        href={"/product/helmet_details?s="+data.id}
+                    >
+                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                    </Button>
+                    </div>
                 </div>
+                </CardBody>
+            </Card>
             </div>
         );
     })
     const ProductHelmetMTX = mtx.map((data) => {
         return (      
-            <div style={{padding:"40px"}}>
-                <img
-                    alt="..."
-                    style={{ height: "150px", display: "block" }}
-                    src={`${backend}${data.img["url"]}`}
-                    className={navImageClasses}
-                />
-                <div align="center">
-                <h4>{data.name}</h4>
-                <h4>Rp.{data.price}</h4>
-                <Button 
-                    color="info" round
-                    href={"/product/helmet_details?s="+data.id}
-                >
-                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-                </Button>
+            <div style={{padding: "20px", marginTop:"-40px"}}>   
+            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
+                <CardBody>
+                <div align="center" style={{padding:"10px"}}>
+                    <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
+                    />
+                    <div align="center">
+                    <h5>{data.name}</h5>
+                    <h5>Rp.{data.price}</h5>
+                    <Button 
+                        color="info" round
+                        href={"/product/helmet_details?s="+data.id}
+                    >
+                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                    </Button>
+                    </div>
                 </div>
+                </CardBody>
+            </Card>
             </div>
         );
     })
     const ProductHelmetExtreme = extreme.map((data) => {
         return (      
-            <div style={{padding:"40px"}}>
-                <img
-                    alt="..."
-                    style={{ height: "150px", display: "block" }}
-                    src={`${backend}${data.img["url"]}`}
-                    className={navImageClasses}
-                />
-                <div align="center">
-                <h4>{data.name}</h4>
-                <h4>Rp.{data.price}</h4>
-                <Button 
-                    color="info" round
-                    href={"/product/helmet_details?s="+data.id}
-                >
-                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-                </Button>
+            <div style={{padding: "20px", marginTop:"-40px"}}>   
+            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
+                <CardBody>
+                <div align="center" style={{padding:"10px"}}>
+                    <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
+                    />
+                    <div align="center">
+                    <h5>{data.name}</h5>
+                    <h5>Rp.{data.price}</h5>
+                    <Button 
+                        color="info" round
+                        href={"/product/helmet_details?s="+data.id}
+                    >
+                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                    </Button>
+                    </div>
                 </div>
+                </CardBody>
+            </Card>
             </div>
         );
     })
     const ProductHelmetRanger = ranger.map((data) => {
         return (      
-            <div style={{padding:"40px"}}>
-                <img
-                    alt="..."
-                    style={{ height: "150px", display: "block" }}
-                    src={`${backend}${data.img["url"]}`}
-                    className={navImageClasses}
-                />
-                <div align="center">
-                <h4>{data.name}</h4>
-                <h4>Rp.{data.price}</h4>
-                <Button 
-                    color="info" round
-                    href={"/product/helmet_details?s="+data.id}
-                >
-                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-                </Button>
+            <div style={{padding: "20px", marginTop:"-40px"}}>   
+            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
+                <CardBody>
+                <div align="center" style={{padding:"10px"}}>
+                    <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
+                    />
+                    <div align="center">
+                    <h5>{data.name}</h5>
+                    <h5>Rp.{data.price}</h5>
+                    <Button 
+                        color="info" round
+                        href={"/product/helmet_details?s="+data.id}
+                    >
+                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                    </Button>
+                    </div>
                 </div>
+                </CardBody>
+            </Card>
             </div>
         );
     })
     const ProductHelmetFighter = fighter.map((data) => {
         return (      
-            <div style={{padding:"40px"}}>
-                <img
-                    alt="..."
-                    style={{ height: "150px", display: "block" }}
-                    src={`${backend}${data.img["url"]}`}
-                    className={navImageClasses}
-                />
-                <div align="center">
-                <h4>{data.name}</h4>
-                <h4>Rp.{data.price}</h4>
-                <Button 
-                    color="info" round
-                    href={"/product/helmet_details?s="+data.id}
-                >
-                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-                </Button>
+            <div style={{padding: "20px", marginTop:"-40px"}}>   
+            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
+                <CardBody>
+                <div align="center" style={{padding:"10px"}}>
+                    <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
+                    />
+                    <div align="center">
+                    <h5>{data.name}</h5>
+                    <h5>Rp.{data.price}</h5>
+                    <Button 
+                        color="info" round
+                        href={"/product/helmet_details?s="+data.id}
+                    >
+                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                    </Button>
+                    </div>
                 </div>
+                </CardBody>
+            </Card>
             </div>
         );
     })
     const ProductHelmetSwirl = swirl.map((data) => {
         return (      
-            <div style={{padding:"40px"}}>
-                <img
-                    alt="..."
-                    style={{ height: "150px", display: "block" }}
-                    src={`${backend}${data.img["url"]}`}
-                    className={navImageClasses}
-                />
-                <div align="center">
-                <h4>{data.name}</h4>
-                <h4>Rp.{data.price}</h4>
-                <Button 
-                    color="info" round
-                    href={"/product/helmet_details?s="+data.id}
-                >
-                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-                </Button>
+            <div style={{padding: "20px", marginTop:"-40px"}}>   
+            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
+                <CardBody>
+                <div align="center" style={{padding:"10px"}}>
+                    <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
+                    />
+                    <div align="center">
+                    <h5>{data.name}</h5>
+                    <h5>Rp.{data.price}</h5>
+                    <Button 
+                        color="info" round
+                        href={"/product/helmet_details?s="+data.id}
+                    >
+                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                    </Button>
+                    </div>
                 </div>
+                </CardBody>
+            </Card>
             </div>
         );
     })
     const ProductHelmetClassic = classic.map((data) => {
         return (      
-            <div style={{padding:"40px"}}>
-                <img
-                    alt="..."
-                    style={{ height: "150px", display: "block" }}
-                    src={`${backend}${data.img["url"]}`}
-                    className={navImageClasses}
-                />
-                <div align="center">
-                <h4>{data.name}</h4>
-                <h4>Rp.{data.price}</h4>
-                <Button 
-                    color="info" round
-                    href={"/product/helmet_details?s="+data.id}
-                >
-                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-                </Button>
+            <div style={{padding: "20px", marginTop:"-40px"}}>   
+            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
+                <CardBody>
+                <div align="center" style={{padding:"10px"}}>
+                    <img style={{ width: "200px", height:"200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
+                    />
+                    <div align="center">
+                    <h5>{data.name}</h5>
+                    <h5>Rp.{data.price}</h5>
+                    <Button 
+                        color="info" round
+                        href={"/product/helmet_details?s="+data.id}
+                    >
+                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                    </Button>
+                    </div>
                 </div>
+                </CardBody>
+            </Card>
             </div>
         );
     })
     const ProductHelmetUno = uno.map((data) => {
         return (      
-            <div style={{padding:"40px"}}>
-                <img
-                    alt="..."
-                    style={{ height: "150px", display: "block" }}
-                    src={`${backend}${data.img["url"]}`}
-                    className={navImageClasses}
-                />
-                <div align="center">
-                <h4>{data.name}</h4>
-                <h4>Rp.{data.price}</h4>
-                <Button 
-                    color="info" round
-                    href={"/product/helmet_details?s="+data.id}
-                >
-                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-                </Button>
+            <div style={{padding: "20px", marginTop:"-40px"}}>   
+            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
+                <CardBody>
+                <div align="center" style={{padding:"10px"}}>
+                    <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
+                    />
+                    <div align="center">
+                    <h5>{data.name}</h5>
+                    <h5>Rp.{data.price}</h5>
+                    <Button 
+                        color="info" round
+                        href={"/product/helmet_details?s="+data.id}
+                    >
+                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                    </Button>
+                    </div>
                 </div>
+                </CardBody>
+            </Card>
             </div>
         );
     })

pages-sections/product/product.js

@@ -28,145 +28,193 @@ const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, mop
     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
     const Productmaxi = maxi.map((data) => {
       return (
-        <div>
-          <div align="center" style={{padding:"30px"}}>
-            <img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
-            />
-            <h5>{data.name}</h5>
-            <h5>Rp.{data.price}</h5>
-            <Button 
-              color="info" round
-              href={"/product/product_detail?s="+data.id}
-            >
-              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-            </Button>
-          </div>
+        <div style={{padding: "20px", marginTop:"-40px"}}>   
+        <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
+            <CardBody>
+            <div style={{padding:"10px"}}>
+                <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
+                />
+                <div align="center">
+                <h5>{data.name}</h5>
+                <h5>Rp.{data.price}</h5>
+                <Button 
+                    color="info" round
+                    href={"/product/product_detail?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+            </CardBody>
+        </Card>
         </div>
       );
     })
     const Productmatic = matic.map((data) => {
       return (
-        <div>
-          <div align="center" style={{padding:"30px"}}>
-            <img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
-            />
-            <h5>{data.name}</h5>
-            <h5>Rp.{data.price}</h5>
-            <Button 
-              color="info" round
-              href={"/product/product_detail?s="+data.id}
-            >
-              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-            </Button>
-          </div>
+        <div style={{padding: "20px", marginTop:"-40px"}}>   
+        <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
+            <CardBody>
+            <div style={{padding:"10px"}}>
+                <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
+                />
+                <div align="center">
+                <h5>{data.name}</h5>
+                <h5>Rp.{data.price}</h5>
+                <Button 
+                    color="info" round
+                    href={"/product/product_detail?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+            </CardBody>
+        </Card>
         </div>
       );
     })
     const Productnaked = naked.map((data) => {
       return (
-        <div>
-          <div align="center" style={{padding:"30px"}}>
-            <img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
-            />
-            <h5>{data.name}</h5>
-            <h5>Rp.{data.price}</h5>
-            <Button 
-              color="info" round
-              href={"/product/product_detail?s="+data.id}
-            >
-              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-            </Button>
-          </div>
+        <div style={{padding: "20px", marginTop:"-40px"}}>   
+        <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
+            <CardBody>
+            <div style={{padding:"10px"}}>
+                <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
+                />
+                <div align="center">
+                <h5>{data.name}</h5>
+                <h5>Rp.{data.price}</h5>
+                <Button 
+                    color="info" round
+                    href={"/product/product_detail?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+            </CardBody>
+        </Card>
         </div>
       );
     })
     const Productsport = sport.map((data) => {
       return (
-        <div>
-          <div align="center" style={{padding:"30px"}}>
-            <img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
-            />
-            <h5>{data.name}</h5>
-            <h5>Rp.{data.price}</h5>
-            <Button 
-              color="info" round
-              href={"/product/product_detail?s="+data.id}
-            >
-              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-            </Button>
-          </div>
+        <div style={{padding: "20px", marginTop:"-40px"}}>   
+        <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
+            <CardBody>
+            <div style={{padding:"10px"}}>
+                <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
+                />
+                <div align="center">
+                <h5>{data.name}</h5>
+                <h5>Rp.{data.price}</h5>
+                <Button 
+                    color="info" round
+                    href={"/product/product_detail?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+            </CardBody>
+        </Card>
         </div>
       );
     })
     const Productoffroad = offroad.map((data) => {
       return (
-        <div>
-          <div align="center" style={{padding:"30px"}}>
-            <img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
-            />
-            <h5>{data.name}</h5>
-            <h5>Rp.{data.price}</h5>
-            <Button 
-              color="info" round
-              href={"/product/product_detail?s="+data.id}
-            >
-              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-            </Button>
-          </div>
+        <div style={{padding: "20px", marginTop:"-40px"}}>   
+        <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
+            <CardBody>
+            <div style={{padding:"10px"}}>
+                <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
+                />
+                <div align="center">
+                <h5>{data.name}</h5>
+                <h5>Rp.{data.price}</h5>
+                <Button 
+                    color="info" round
+                    href={"/product/product_detail?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+            </CardBody>
+        </Card>
         </div>
       );
     })
     const Productmoped = moped.map((data) => {
       return (
-        <div>
-          <div align="center" style={{padding:"30px"}}>
-            <img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
-            />
-            <h5>{data.name}</h5>
-            <h5>Rp.{data.price}</h5>
-            <Button 
-              color="info" round
-              href={"/product/product_detail?s="+data.id}
-            >
-              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-            </Button>
-          </div>
+        <div style={{padding: "20px", marginTop:"-40px"}}>   
+        <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
+            <CardBody>
+            <div style={{padding:"10px"}}>
+                <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
+                />
+                <div align="center">
+                <h5>{data.name}</h5>
+                <h5>Rp.{data.price}</h5>
+                <Button 
+                    color="info" round
+                    href={"/product/product_detail?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+            </CardBody>
+        </Card>
         </div>
       );
     })
     const Productmonsterenergy = monsterenergy.map((data) => {
       return (
-        <div>
-          <div align="center" style={{padding:"30px"}}>
-            <img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
-            />
-            <h5>{data.name}</h5>
-            <h5>Rp.{data.price}</h5>
-            <Button 
-              color="info" round
-              href={"/product/product_detail?s="+data.id}
-            >
-              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-            </Button>
-          </div>
+        <div style={{padding: "20px", marginTop:"-40px"}}>   
+        <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
+            <CardBody>
+            <div style={{padding:"10px"}}>
+                <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
+                />
+                <div align="center">
+                <h5>{data.name}</h5>
+                <h5>Rp.{data.price}</h5>
+                <Button 
+                    color="info" round
+                    href={"/product/product_detail?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+            </CardBody>
+        </Card>
         </div>
       );
     })
     const Productcbu = cbu.map((data) => {
       return (
-        <div>
-          <div align="center" style={{padding:"30px"}}>
-            <img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
-            />
-            <h5>{data.name}</h5>
-            <h5>Rp.{data.price}</h5>
-            <Button 
-              color="info" round
-              href={"/product/product_detail?s="+data.id}
-            >
-              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-            </Button>
-          </div>
+        <div style={{padding: "20px", marginTop:"-40px"}}>   
+        <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
+            <CardBody>
+            <div style={{padding:"10px"}}>
+                <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
+                />
+                <div align="center">
+                <h5>{data.name}</h5>
+                <h5>Rp.{data.price}</h5>
+                <Button 
+                    color="info" round
+                    href={"/product/product_detail?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+            </CardBody>
+        </Card>
         </div>
       );
     })

pages-sections/product/yamalube.js

@@ -24,23 +24,25 @@ const DataYamalube = function ({ selected, handleName, backend, yamalube, ...pro
     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
     const ProductYamalube = yamalube.map((data) => {
         return (      
-            <div style={{padding:"40px"}}>
-                <img
-                alt="..."
-                style={{ height: "150px", display: "block" }}
-                src={`${backend}${data.img["url"]}`}
-                className={navImageClasses}
-                />
-                <div align="center">
-                <h4>{data.name}</h4>
-                <h4>Rp.{data.price}</h4>
-                <Button 
-                    color="info" round
-                    href={"/product/yamalube_details?s="+data.id}
-                >
-                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-                </Button>
+            <div style={{padding: "20px", marginTop:"-40px"}}>   
+            <Card className={classes.textCenter} align="center" style={{width:"300px", height:"350px"}}>
+                <CardBody>
+                <div align="center" style={{padding:"10px"}}>
+                    <img style={{ width: "150px", height:"150px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
+                    />
+                    <div align="center">
+                    <h5>{data.name}</h5>
+                    <h5>Rp.{data.price}</h5>
+                    <Button 
+                        color="info" round
+                        href={"/product/yamalube_detail?s="+data.id}
+                    >
+                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                    </Button>
+                    </div>
                 </div>
+                </CardBody>
+            </Card>
             </div>
         );
     })

pages-sections/product/ygp.js

@@ -24,18 +24,25 @@ const DataYGP = function ({ selected,handleName, backend, ygp, ...props }) {
     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
     const ProductYGP = ygp.map((data) => {
         return (      
-            <div style={{padding:"50px"}} align="center">
-                <img
-                    alt="..."
-                    style={{ height: "150px", width:"250px", display: "block" }}
-                    src={`${backend}${data.img["url"]}`}
-                    className={navImageClasses}
-                />
-                <h4>{data.name}</h4>
-                <h4>Rp.{data.price}</h4>
-                <Button color="info" round href={"/product/ygp_details?s="+data.id}>
-                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
-                </Button>
+            <div style={{padding: "20px", marginTop:"-40px"}}>   
+            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
+                <CardBody>
+                <div align="center" style={{padding:"10px"}}>
+                    <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
+                    />
+                    <div align="center">
+                    <h5>{data.name}</h5>
+                    <h5>Rp.{data.price}</h5>
+                    <Button 
+                        color="info" round
+                        href={"/product/ygp_detail?s="+data.id}
+                    >
+                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                    </Button>
+                    </div>
+                </div>
+                </CardBody>
+            </Card>
             </div>
         );
     })

pages/latestnews_details.js

@@ -14,7 +14,7 @@ import DetailLatestNews from "../pages-sections/latest_news/news_details.js";
 
 const useStyles = makeStyles(styles);
 
-const detailLatestNews = function ({ backend, news, ...props }) {
+const detailLatestNews = function ({ backend, news, othernews, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     <DetailLatestNews news={props.news}/>
@@ -33,7 +33,7 @@ const detailLatestNews = function ({ backend, news, ...props }) {
         <Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"/>
         <div className={classNames(classes.main, classes.mainRaised)}>
             <DataSnackbarContent/>
-            <DetailLatestNews news={news} backend={backend}/> 
+            <DetailLatestNews news={news} othernews={othernews} backend={backend}/> 
         </div>
         <Footer />
         </div>
@@ -45,12 +45,19 @@ export default detailLatestNews;
 export async function getServerSideProps(context) {
     var {query} = context;
 	var news = [];
+    var othernews = [];
     const backend = process.env.BACKEND_SERVER_URI;
+
 	var res = await GetLatestNews.GetDetailNews(query.s||0);
 	if (res["STATUS"] === 1) {
 		news = res["DATA"]["latestNews"];
 	}
+
+    var res = await GetLatestNews.GetOtherNews();
+	if (res["STATUS"] === 1) {
+		othernews = res["DATA"]["latestNews"];
+	}
 	return {
-		props: { news, backend }, // will be passed to the page component as props
+		props: { othernews, news, backend }, // will be passed to the page component as props
 	};
 }

pages/product/apparel.js

@@ -9,7 +9,7 @@ import Footer from "components/Footer/Footer.js";
 import Parallax from "components/Parallax/Parallax.js";
 import styles from "assets/jss/nextjs-material-kit/pages/components.js";
 
-import GetDataApparel from "../../api/product/accessories.js";
+import GetDataApparel from "../../api/product/apparel.js";
 import DataApparel from "../../pages-sections/product/apparel.js";
 import DataSnackbarContent from "../../pages-sections/snackbar.js";
 import Router from 'next/router'
@@ -22,7 +22,7 @@ const handleName = values => {
         query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
     })
 }
-const Apparel = function ({ selected, apparel, backend, ...props }) {
+const Apparel = function ({ selected, apparel, asia, basic, merchand, maxi, rainsuit, motogp, offroad, backend, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     return (
@@ -41,7 +41,7 @@ const Apparel = function ({ selected, apparel, backend, ...props }) {
         <div className={classNames(classes.main, classes.mainRaised)}>
             <QueryClientProvider client={queryClient}>
                 <DataSnackbarContent/>
-                <DataApparel selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} apparel={apparel} backend={backend} />
+                <DataApparel selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} apparel={apparel} asia={asia} basic={basic} merchand={merchand} maxi={maxi} rainsuit={rainsuit} motogp={motogp} offroad={offroad} backend={backend} />
             </QueryClientProvider>
         </div>
         <Footer />
@@ -53,21 +53,83 @@ export default Apparel;
 
 export async function getServerSideProps(context) {
     var apparel = [];
+    var asia = [];
+    var basic = [];
+    var merchand = [];
+    var maxi = [];
+    var rainsuit = [];
+    var motogp = [];
+    var offroad = [];
     var filter = context.query.filter||"";
     var selected = "";
 
     const backend = process.env.BACKEND_SERVER_URI;
     
     var res = await GetDataApparel.GetApparel(filter);
-    
     if (res["STATUS"] === 1) {
-        apparel = res["DATA"]["accessories"];
+        apparel = res["DATA"]["apparels"];
         if (filter !=""){
             selected = apparel.filter((i)=>i.name==filter);
         }
     }
 
+    var res = await GetDataApparel.GetApparel46Asia(filter);
+    if (res["STATUS"] === 1) {
+        asia = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = asia.filter((i)=>i.name==filter);
+        }
+    }
+    
+    var res = await GetDataApparel.GetApparelBasic(filter);
+    if (res["STATUS"] === 1) {
+        basic = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = basic.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataApparel.GetApparelMerchandise(filter);
+    if (res["STATUS"] === 1) {
+        merchand = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = merchand.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataApparel.GetApparelMaxi(filter);
+    if (res["STATUS"] === 1) {
+        maxi = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = maxi.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataApparel.GetApparelRainSuit(filter);
+    if (res["STATUS"] === 1) {
+        rainsuit = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = rainsuit.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataApparel.GetApparelMotoGP(filter);
+    if (res["STATUS"] === 1) {
+        motogp = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = motogp.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataApparel.GetApparelOffRoad(filter);
+    if (res["STATUS"] === 1) {
+        offroad = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = offroad.filter((i)=>i.name==filter);
+        }
+    }
+
     return { 
-        props: { selected, apparel, backend }, // will be passed to the page component as props
+        props: { selected, apparel, asia, basic, merchand, maxi, rainsuit, motogp, offroad, backend }, // will be passed to the page component as props
     };
 }

pages/product/apparel_details.js

@@ -8,7 +8,7 @@ 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"
+import GetDetailApparel from "../../api/product/apparel.js"
 
 const useStyles = makeStyles(styles);
 
@@ -43,11 +43,10 @@ export async function getServerSideProps(context) {
 	var detailapparel = [];
     const backend = process.env.BACKEND_SERVER_URI;
 
-	var res = await GetDetailApparel.GetDetailAccessories(query.s||0);
+	var res = await GetDetailApparel.GetDetailApparel(query.s||0);
 	if (res["STATUS"] === 1) {
-		detailapparel = res["DATA"]["accessories"];
+		detailapparel = res["DATA"]["apparels"];
 	}
-    console.log(detailapparel);
 
 	return {
 		props: { detailapparel, backend }, // will be passed to the page component as props