yarn build

api/carrer/carrer.js

@@ -8,10 +8,6 @@ async function GetCarrerS1(token="") {
                 {
                     id
                     name
-                    description
-                    img{
-                    url
-                    }
                     start_regis
                     until_regis
                     name_description
@@ -30,10 +26,6 @@ async function GetCarrerD3(token="") {
                 {
                     id
                     name
-                    description
-                    img{
-                    url
-                    }
                     start_regis
                     until_regis
                     name_description
@@ -52,10 +44,6 @@ async function GetCarrerSMA(token="") {
                 {
                     id
                     name
-                    description
-                    img{
-                    url
-                    }
                     start_regis
                     until_regis
                     name_description

api/dealer/dealer.js

@@ -1,11 +1,12 @@
 import apollo from "../../lib/apollo.js";
 
-async function GetDealers(token="") {
+async function GetDealers(filter, token="") {
 	var res = await apollo.query(
         `
-            query {
+            query { ${(filter!="")?`name: "${filter}"`:""}
                 dealers
                 {
+                    id
                     name
                     kota_dealer
                     address
@@ -20,53 +21,6 @@ async function GetDealers(token="") {
 	return res;
 }
 
-async function GetDealersDetails(token="") {
-	var res = await apollo.query(
-        `
-            query($input: ID!) {
-                dealers(where:{id:$input})
-                {
-                    name
-                    kota_dealer
-                    address
-                    telp
-                    email
-                    location
-                }
-            }
-        `,
-            token,
-            {	
-                "input": id
-            }
-	);
-	return res;
-}
-
-async function GetDealersbyFilter(token="") {
-	var res = await apollo.query(
-        `
-            query($input: ID!) {
-                dealers(where:{id:$input})
-                {
-                    name
-                    kota_dealer
-                    address
-                    telp
-                    email
-                    location
-                }
-            }
-        `,
-            token,
-            {	
-                "input": id
-            }
-	);
-	return res;
-}
-
 module.exports = {
 	GetDealers: GetDealers,
-    GetDealersDetails: GetDealersDetails,
 };

api/product/accessories.js

@@ -7,9 +7,7 @@ async function GetYGP(filter, token="") {
             accessories(where: { category: "YGP" ${(filter!="")?`name: "${filter}"`:""}}) {
                 id
                 name
-                description
                 price
-                part_code
                 img {
                     url
                 }
@@ -27,9 +25,7 @@ async function GetYamalube(filter, token="") {
             accessories(where: { category: "Yamalube" ${(filter!="")?`name: "${filter}"`:""}}) {
                 id
                 name
-                description
                 price
-                part_code
                 img {
                     url
                 }
@@ -47,9 +43,7 @@ async function GetHelmet(filter, token="") {
             accessories(where: { category: "Helmet" ${(filter!="")?`name: "${filter}"`:""}}) {
                 id
                 name
-                description
                 price
-                part_code
                 img {
                     url
                 }
@@ -67,9 +61,7 @@ async function GetApparel(filter, token="") {
             accessories(where: { category: "Apparel" ${(filter!="")?`name: "${filter}"`:""}}) {
                 id
                 name
-                description
                 price
-                part_code
                 img {
                     url
                 }
@@ -87,9 +79,7 @@ async function GetAccessories(filter, token="") {
             accessories(where: { category: "Accessories" ${(filter!="")?`name: "${filter}"`:""}}) {
                 id
                 name
-                description
                 price
-                part_code
                 img {
                     url
                 }

api/product/product.js

@@ -1,35 +1,8 @@
 import apollo from "../../lib/apollo.js";
 
-// async function GetProduct(token="", start = 0) {
-// 	var res = await apollo.query(
-// 		`
-//     query($start: Int!) {
-//       products(limit:1,start:$start)
-//       {
-//         id
-//         name
-//         price
-//         description
-//         img{
-//           url
-//         }
-//         business_partner
-//         {
-//           name
-//         }
-//       }
-//     }`,
-// 		token,
-//     {
-//       start: start,
-//     }
-// 	);
-// 	return res;
-// }
-
-async function GetDetailProduct(id, token="") {
-	var res = await apollo.query(
-		`
+async function GetDetailProduct(id, token = "") {
+  var res = await apollo.query(
+    `
     query($input: ID!){
       products(where:{id:$input})
       {
@@ -39,257 +12,209 @@ async function GetDetailProduct(id, token="") {
         img{
           url
         }
-        business_partner
-        {
-          name
-        }
         overview
         specification
         film
         stock
       }
     }	`,
-		token, 
-    {	
+    token, {
       "input": id
     }
-	);
-	return res;
+  );
+  return res;
 }
 
-async function GetProductYamaha(token="") {
-	var res = await apollo.query(
-		`
+async function GetProductMatic(token = "") {
+  var res = await apollo.query(
+    `
     query {
-      products(where: {business_partner: "1"})
-      {
+      products(where: { categories: "matic" }) {
         id
         name
-        description
         price
-        img{
+        img {
           url
         }
-        business_partner
-        {
-          name
-        }
-        overview
-        specification
-        film
-        stock
       }
     }`,
-		token
-	);
-	return res;
+    token
+  );
+  return res;
 }
 
-async function GetProductSuzuki(token="") {
-	var res = await apollo.query(
-		`
+async function GetProductMaxi(token = "") {
+  var res = await apollo.query(
+    `
     query {
-      products(where: {business_partner: "2"})
-      {
+      products(where: { categories: "maxi" }) {
         id
         name
-        description
         price
-        img{
+        img {
           url
         }
-        business_partner
-        {
-          name
-        }
-        overview
-        specification
-        film
-        stock
       }
     }`,
-		token
-	);
-	return res;
+    token
+  );
+  return res;
 }
 
-async function GetProductHonda(token="") {
-	var res = await apollo.query(
-		`
+async function GetProductNaked(token = "") {
+  var res = await apollo.query(
+    `
     query {
-      products(where: {business_partner: "3"})
-      {
+      products(where: { categories: "naked" }) {
         id
         name
-        description
         price
-        img{
+        img {
           url
         }
-        business_partner
-        {
-          name
-        }
-        overview
-        specification
-        film
-        stock
       }
     }`,
-		token
-	);
-	return res;
+    token
+  );
+  return res;
 }
 
-async function GetProductHino(token="") {
-	var res = await apollo.query(
-		`
+async function GetProductSport(token = "") {
+  var res = await apollo.query(
+    `
     query {
-      products(where: {business_partner: "4"})
-      {
+      products(where: { categories: "sport" }) {
         id
         name
-        description
         price
-        img{
+        img {
           url
         }
-        business_partner
-        {
-          name
-        }
-        overview
-        specification
-        film
-        stock
       }
     }`,
-		token
-	);
-	return res;
+    token
+  );
+  return res;
 }
 
-async function GetProductMercedes(token="") {
-	var res = await apollo.query(
-		`
+async function GetProductOffRoad(token = "") {
+  var res = await apollo.query(
+    `
     query {
-      products(where: {business_partner: "5"})
-      {
+      products(where: { categories: "offroad" }) {
         id
         name
-        description
         price
-        img{
+        img {
           url
         }
-        business_partner
-        {
-          name
-        }
-        overview
-        specification
-        film
-        stock
       }
     }`,
-		token
-	);
-	return res;
+    token
+  );
+  return res;
 }
 
-async function GetProductBPR(token="") {
-	var res = await apollo.query(
-		`
+async function GetProductMoped(token = "") {
+  var res = await apollo.query(
+    `
     query {
-      products(where: {business_partner: "6"})
-      {
+      products(where: { categories: "moped" }) {
         id
         name
-        description
         price
-        img{
+        img {
           url
         }
-        business_partner
-        {
-          name
-        }
-        overview
-        specification
-        film
-        stock
       }
     }`,
-		token
-	);
-	return res;
+    token
+  );
+  return res;
 }
 
-async function GetProductEmilia(token="") {
-	var res = await apollo.query(
-		`
+async function GetProductMonsterEnergy(token = "") {
+  var res = await apollo.query(
+    `
     query {
-      products(where: {business_partner: "8"})
-      {
+      products(where: { categories: "monsterenergy" }) {
         id
         name
-        description
         price
-        img{
+        img {
           url
         }
-        business_partner
-        {
-          name
+      }
+    }`,
+    token
+  );
+  return res;
+}
+
+async function GetProductCBU(token = "") {
+  var res = await apollo.query(
+    `
+    query {
+      products(where: { categories: "cbu" }) {
+        id
+        name
+        price
+        img {
+          url
         }
-        overview
-        specification
-        film
-        stock
       }
     }`,
-		token
-	);
-	return res;
+    token
+  );
+  return res;
 }
 
-async function GetProductHomes(token="") {
-	var res = await apollo.query(
-		`
+async function GetProductATV(token = "") {
+  var res = await apollo.query(
+    `
     query {
-      products(where: {business_partner: "9"})
-      {
+      products(where: { categories: "atv" }) {
         id
         name
-        description
         price
-        img{
+        img {
           url
         }
-        business_partner
-        {
-          name
+      }
+    }`,
+    token
+  );
+  return res;
+}
+
+async function GetProductPowerProduct(token = "") {
+  var res = await apollo.query(
+    `
+    query {
+      products(where: { categories: "powerproduct" }) {
+        id
+        name
+        price
+        img {
+          url
         }
-        overview
-        specification
-        film
-        stock
       }
     }`,
-		token
-	);
-	return res;
+    token
+  );
+  return res;
 }
 
 module.exports = {
-	// GetProduct: GetProduct,
-  GetDetailProduct:GetDetailProduct,
-  GetProductYamaha:GetProductYamaha,
-  GetProductSuzuki:GetProductSuzuki,
-  GetProductHonda:GetProductHonda,
-  GetProductHino:GetProductHino,
-  GetProductMercedes:GetProductMercedes,
-  GetProductBPR:GetProductBPR,
-  GetProductEmilia:GetProductEmilia,
-  GetProductHomes:GetProductHomes,
+  GetDetailProduct: GetDetailProduct,
+  GetProductMatic: GetProductMatic,
+  GetProductMaxi: GetProductMaxi,
+  GetProductNaked: GetProductNaked,
+  GetProductSport: GetProductSport,
+  GetProductOffRoad: GetProductOffRoad,
+  GetProductMoped: GetProductMoped,
+  GetProductMonsterEnergy: GetProductMonsterEnergy,
+  GetProductCBU: GetProductCBU,
+  GetProductATV: GetProductATV,
+  GetProductPowerProduct: GetProductPowerProduct,
 };

components/Footer/Footer.js

@@ -11,6 +11,10 @@ import { makeStyles } from "@material-ui/core/styles";
 // @material-ui/icons
 import Favorite from "@material-ui/icons/Favorite";
 
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Card from "components/Card/Card.js";
 import styles from "assets/jss/nextjs-material-kit/components/footerStyle.js";
 
 const useStyles = makeStyles(styles);
@@ -27,60 +31,72 @@ export default function Footer(props) {
     [classes.footerWhiteFont]: whiteFont
   });
   return (
-    <footer className={footerClasses}>
-      <div className={classes.container}>
-        <div className={classes.left}>
-          <List className={classes.list}>
-            {/* <ListItem className={classes.inlineBlock}>
-              <img className={classes.imgCard} src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png" width="250px"/>
-            </ListItem> */}
-            <ListItem className={classes.inlineBlock}>
-              <a
-                href="/home"
-                className={classes.block}
-              >
-                Home
-              </a>
-            </ListItem>
-            <ListItem className={classes.inlineBlock}>
-              <a
-                href="/product/product"
-                className={classes.block}
-              >
-                Product
-              </a>
-            </ListItem>
-            <ListItem className={classes.inlineBlock}>
-              <a
-                href="/latestsnews"
-                className={classes.block}
-              >
-                Latest News
-              </a>
-            </ListItem>
-            <ListItem className={classes.inlineBlock}>
-              <a
-                href="/carrer"
-                className={classes.block}
-              >
-                Carrer
-              </a>
-            </ListItem>
-            <ListItem className={classes.inlineBlock}>
-              <a
-                href="/about_us/aboutus"
-                className={classes.block}
-              >
-                About Us
-              </a>
-            </ListItem>
-          </List>
+    <div>
+    <GridContainer style={{padding: "40px"}} justify="center">
+      <Grid>
+        <div align="center" style={{marginTop:"-20px"}}>
+          <img className={classes.imgCard} src="https://1.bp.blogspot.com/-GTTVvnJ9x0c/Wn70CJxGoYI/AAAAAAAACRY/GSv1ehPFOPQZcvOfiALy_p7Xa7GOBRHKgCLcBGAs/s320/TB.png" width="250px"/>
         </div>
-        <div className={classes.right}>
-          &copy; {1900 + new Date().getYear()} , All Right Reserved{" "} by{" "} @Thamrin Group Company
+      </Grid>
+      <Grid>
+        <div>
+          <footer className={footerClasses}>
+            <div className={classes.container}>
+              <div className={classes.left}>
+                <List className={classes.list}>
+                  <ListItem className={classes.inlineBlock}>
+                    <a href="/home" className={classes.block} > Home </a>
+                  </ListItem>
+                  <ListItem className={classes.inlineBlock}>
+                    <a href="/product/product" className={classes.block}> Motor </a>
+                  </ListItem>
+                  <ListItem className={classes.inlineBlock}>
+                    <a href="/product/ygp" className={classes.block}> YGP </a>
+                  </ListItem>
+                  <ListItem className={classes.inlineBlock}>
+                    <a href="/product/yamalube" className={classes.block}> Yamalube </a>
+                  </ListItem>
+                  <ListItem className={classes.inlineBlock}>
+                    <a href="/product/apparel" className={classes.block}> Apparel </a>
+                  </ListItem>
+                  <ListItem className={classes.inlineBlock}>
+                    <a href="/product/helmet" className={classes.block}> Helmet </a>
+                  </ListItem>
+                  <ListItem className={classes.inlineBlock}>
+                    <a href="/product/accessories" className={classes.block}> Accessories </a>
+                  </ListItem>
+                  <ListItem className={classes.inlineBlock}>
+                    <a href="/product/service" className={classes.block}> Service </a>
+                  </ListItem>
+                  <ListItem className={classes.inlineBlock}>
+                    <a href="/product/dealer" className={classes.block}> Dealer </a>
+                  </ListItem>
+                  <ListItem className={classes.inlineBlock}>
+                    <a href="/latestsnews" className={classes.block}> Latest News </a>
+                  </ListItem>
+                  <ListItem className={classes.inlineBlock}>
+                    <a href="/carrer" className={classes.block}> Carrer </a>
+                  </ListItem>
+                  <ListItem className={classes.inlineBlock}>
+                    <a href="/about_us/aboutus" className={classes.block}> About Us </a>
+                  </ListItem>
+                </List>
+              </div>
+            </div>
+          </footer>
         </div>
+      </Grid>
+    </GridContainer>
+    <GridContainer style={{marginTop: "-40px"}} justify="center">
+    <Grid>
+      <div align="center">
+      <div className={classes.right}>
+              &copy; {1900 + new Date().getYear()} , All Right Reserved{" "} by{" "} @Thamrin Group Company
+          </div>
       </div>
-    </footer>
+    </Grid>
+  </GridContainer>
+  </div>
   );
 }
 

components/Header/HeaderLinks.js

@@ -24,19 +24,22 @@ export default function HeaderLinks(props) {
   return (
     <List className={classes.list}>
       <ListItem className={classes.listItem}>
-        <img
-          src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png"
-          width="180px"
-        />
+      <Link href="/home">
+      <Button color="transparent" className={classes.navLink}>
+          <img
+            src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png" width="180px"
+          />
+          </Button>
+      </Link>
       </ListItem>
       <ListItem className={classes.listItem}>
         <Link href="/home">
-          <Button color="transparent" className={classes.navLink}>
+          <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
             <Icon className={classes.icons}>home</Icon> Home
           </Button>
         </Link>
       </ListItem>
-      <ListItem className={classes.listItem}>
+      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
         <CustomDropdown
           noLiPadding
           navDropdown
@@ -68,29 +71,25 @@ export default function HeaderLinks(props) {
             <Link href="https://booking.thamrin.co.id/">
               <a className={classes.dropdownLink}>Service</a>
             </Link>,
+            <Link href="/dealers">
+            <a className={classes.dropdownLink}>Dealers</a>
+          </Link>,
           ]}
         />
       </ListItem>
-      <ListItem className={classes.listItem}>
-        <Link href="/dealers">
-          <Button color="transparent" className={classes.navLink}>
-            <Icon className={classes.icons}>event</Icon> Dealers
-          </Button>
-        </Link>
-      </ListItem>
-      <ListItem className={classes.listItem}>
+      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
         <Link href="/latestnews">
           <Button color="transparent" className={classes.navLink}>
             <Icon className={classes.icons}>event</Icon> Latest News
           </Button>
         </Link>
       </ListItem>
-      <ListItem className={classes.listItem}>
+      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
         <Button href="/carrer" color="transparent" className={classes.navLink}>
-          <Icon className={classes.icons}>wallet_travel</Icon> Carrer
+          <Icon className={classes.icons}>wallet_travel</Icon> Career
         </Button>
       </ListItem>
-      <ListItem className={classes.listItem}>
+      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
         <CustomDropdown
           noLiPadding
           navDropdown
@@ -134,7 +133,7 @@ export default function HeaderLinks(props) {
           ]}
         />
       </ListItem>
-      <ListItem className={classes.listItem}>
+      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
         <Button
           href="abous_us/aboutus"
           color="transparent"
@@ -143,12 +142,12 @@ export default function HeaderLinks(props) {
           <Icon className={classes.icons}>account_balance</Icon> About Us
         </Button>
       </ListItem>
-      <ListItem className={classes.listItem}>
+      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
         <Button href="/chart" color="transparent" className={classes.navLink}>
           <Chart className={classes.icons} />
         </Button>
       </ListItem>
-      {/* <ListItem className={classes.listItem}>
+      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
         <Button
           href="/login"
           className={classes.registerNavLink}
@@ -157,7 +156,7 @@ export default function HeaderLinks(props) {
         >
           <Icon className={classes.icons}>input</Icon> Login
         </Button>
-      </ListItem> */}
+      </ListItem>
     </List>
   );
 }

pages-sections/dealers/dealers.js

@@ -13,15 +13,9 @@ import Button from "components/CustomButtons/Button.js";
 import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
 
 const useStyles = makeStyles(styles);
-const DataDealer = function ({ backend, dealers, ...props })  {
+const DataDealer = function ({ selected, handleName, backend, dealers, ...props })  {
     const classes = useStyles();
-    
-    // const handleKotaDealer = value => {
-    //     console.log(value)
-    // }
-    const handleName = values => {
-        console.log(values)
-    }
+
     const Dealers = dealers.map((data) => {
         return (
             <div>
@@ -49,32 +43,29 @@ const DataDealer = function ({ backend, dealers, ...props })  {
             );
         })
         return (
-        <div className={classes.section} id="notifications">
-            <div align="center">
-                <h2>Dealers & Service</h2>
-            </div>
-            <Select 
-                getOptionLabel={option => `${option.name} ${option.kota_dealer}`}
-                getOptionValue={option => option.id}
-                options={dealers}
-                instanceId="name"
-                placeholder="filter by Nama Dealer"
-                onChange={values => handleName(values)}
-            />
-            <br></br>
-            {/* <Select 
-                getOptionLabel={option => `${option.kota_dealer} ${option.kota_dealer}`}
-                getOptionValue={option => option.id}
-                options={dealers}
-                instanceId="kota_dealer"
-                placeholder="filter by Kota Dealer"
-                onChange={value => handleKotaDealer(value.map(kota_dealer => kota_dealer.id))}
-            /> */}
-            <div>
-            <GridContainer justify="center">
-                {Dealers}
-            </GridContainer>
-            </div>
+        <div>
+            <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+                <CardBody>
+                <div align="center" style={{marginTop:"-50px"}}>
+                    <h2>Yamaha Dealers</h2>
+                    <Select
+                        value={(selected)?accessories.filter((i)=>i.id==selected):null} 
+                        getOptionLabel={option => `${option.name}`}
+                        getOptionValue={option => option.id}
+                        options={dealers}
+                        isMulti
+                        instanceId="name"
+                        placeholder="filter by Nama Part"
+                        onChange={values => handleName(values)}
+                    />
+                    <br></br>
+                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
+                        {Dealers}
+                        {Dealers}
+                    </GridContainer>
+                </div> 
+                </CardBody>
+            </Card>
         </div>
     );
 }

pages-sections/dealers/filter.js

@@ -1,28 +0,0 @@
-import React from "react";
-import Select from 'react-select';
-
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-
-// Component
-import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
-
-const useStyles = makeStyles(styles);
-
-const DataSnackbarContent = function()  {
-    const classes = useStyles();
-    return (
-        <div align="center">
-        <div align="center" className={classes.section} id="notifications">
-            <Select 
-                // options={name}
-                instanceId="name"
-                isMulti
-                placeholder="filter by name"
-                />
-        </div>
-        </div>
-    );
-}
-
-export default DataSnackbarContent;

pages-sections/home/carousel.js

@@ -6,6 +6,7 @@ import GridItem from "components/Grid/GridItem.js";
 import Card from "components/Card/Card.js";
 import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
 import Carousel from "react-slick";
+import Grid from '@material-ui/core/Grid';
 
 const useStyles = makeStyles(styles);
 const DataCarousel = function ({ backend, carousel, ...props })  {
@@ -39,6 +40,18 @@ const DataCarousel = function ({ backend, carousel, ...props })  {
               </Card>
               </GridItem>
             </GridContainer>
+            <GridContainer style={{marginTop:"-30px"}}>
+                <Grid style={{padding:"35px"}}>
+                    <Card>
+                      <iframe width="555" height="450" src="https://www.youtube.com/embed/zkbnKHqcez4?list=PLGDlwziWaTGKL0aphOH8j_6D29JQ1TgYY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style={{height: "300px", width: "500px", display: "block"}}/>
+                    </Card>
+                </Grid>
+                <Grid  style={{padding:"35px"}}>
+                    <Card>
+                      <iframe width="555" height="450" src="https://www.youtube.com/embed/zkbnKHqcez4?list=PLGDlwziWaTGKL0aphOH8j_6D29JQ1TgYY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style={{height: "300px", width: "500px", display: "block"}}/>
+                    </Card>
+                </Grid>
+            </GridContainer>
           </div>
         </div>
       </div>

pages-sections/home/feature.js

@@ -0,0 +1,119 @@
+import React, { Component } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Button from "components/CustomButtons/Button.js";
+import Icon from "@material-ui/core/Icon";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import Card from "components/Card/Card.js";
+import SnackbarContent from "components/Snackbar/SnackbarContent.js";
+
+import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js";
+import { cardTitle } from "assets/jss/nextjs-material-kit.js";
+
+const styles = {
+    ...imagesStyles,
+    cardTitle,
+};
+
+const useStyles = makeStyles(styles);
+const DataFeature = function ({ backend, service, ...props })  {
+    const classes = useStyles();
+    return (
+        <div className={classes.section} id="notifications">
+            <div align="center" className={classes.section} id="notifications">
+                <SnackbarContent
+                message={
+                    <h4>Feature Product</h4>
+                }
+                align="center"
+                color="danger"
+                />
+            </div>
+            <GridContainer justify="center" style={{padding:"50px", marginTop:"-70px"}}>
+                <Grid>
+                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
+                        <img className={classes.imgCard} src="https://a.ipricegroup.com/media/0630/2006_sprint12/harga_yamaha_motor.jpg" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/>
+                        {/* <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"120px"}}>
+                            <Button color="white" href="https://www.instagram.com/yamahaindonesia/" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div> */}
+                    </Card>
+                </Grid>
+                <Grid>
+                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
+                        <img className={classes.imgCard} src="https://www.akhtarnews.com/wp-content/uploads/2019/03/harga-sparepart-yamaha.jpg" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/>
+                        {/* <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"120px"}}>
+                            <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div> */}
+                    </Card>
+                </Grid>
+                <Grid>
+                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
+                        <div align="center">
+                            <img className={classes.imgCard} src="https://2.bp.blogspot.com/-pzpJ-ltEFsA/V6Kh26cBoNI/AAAAAAAAAKY/ZLnJ9v_lDIcKUUNcoVKM8Qw0Izawq08_wCLcB/s1600/yamalube%2B2.jpg" alt="Card-img" style={{height: "200px", width: "300px", display: "block"}}/>
+                        </div>
+                        {/* <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"120px"}}>
+                            <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div> */}
+                    </Card>
+                </Grid>
+                <Grid>
+                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
+                        <div align="center">
+                            <img className={classes.imgCard} src="https://aomc.mx/mm5/graphics/00000001/X0779100X.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/>
+                        </div>
+                        {/* <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"120px"}}>
+                            <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div> */}
+                    </Card>
+                </Grid>
+                <Grid>
+                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
+                        <div align="center">
+                            <img className={classes.imgCard} src="https://content.motosport.com/images/items/900/TLD/TLDY0AF/X001.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/>
+                        </div>
+                        {/* <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"120px"}}>
+                            <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div> */}
+                    </Card>
+                </Grid>
+                <Grid>
+                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
+                        <div align="center">
+                            <img className={classes.imgCard} src="https://static.wixstatic.com/media/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.jpg/v1/fill/w_960,h_429,al_c,q_85/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.webp" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/>
+                        </div>
+                        {/* <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"120px"}}>
+                            <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div> */}
+                    </Card>
+                </Grid>
+            </GridContainer>
+        </div>
+    );
+}
+
+export default DataFeature;

pages-sections/home/sosmed.js

@@ -20,15 +20,6 @@ const styles = {
 const useStyles = makeStyles(styles);
 const DataService = function ({ backend, service, ...props })  {
     const classes = useStyles();
-    const settings = {
-        dots: true,
-        infinite: true,
-        speed: 500,
-        slidesToShow: 1,
-        slidesToScroll: 1,
-        autoplay: true,
-        time: 5
-    };
     return (
         <div className={classes.section} id="notifications">
             <div align="center" className={classes.section} id="notifications">

pages-sections/latest_news/news.js

@@ -26,6 +26,7 @@ const DataLatestNews = function ({ backend, news, ...props }) {
         />
         <CardBody>
           <p>{data.title}</p>
+          <p>{data.published_at}</p>
           <Button color="info" round href={"/latestnews_details?s="+data.id}>
             <Icon className={classes.icons}>open_in_new</Icon>Read More
           </Button>

pages-sections/product/accessories.js

@@ -23,7 +23,6 @@ const DataAccessories = function ({ selected, handleName, backend, accessories,
     );
     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
     const ProductAccessories = accessories.map((data) => {
-        console.log(data);
         return (      
             <div style={{padding:"40px"}}>
                 <img

pages-sections/product/product.js

@@ -14,9 +14,10 @@ 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 Icon from "@material-ui/core/Icon";
+import { Motorcycle } from "@material-ui/icons";
 
 const useStyles = makeStyles(styles);
-const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes, bpr, emilia, homes, ...props })  {
+const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, moped, monsterenergy, cbu, ...props })  {
     const classes = useStyles();
     const { ...rest } = props;
     const imageClasses = classNames(
@@ -25,18 +26,14 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
       classes.imgFluid
     );
     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
-    const Productyamaha = yamaha.map((data) => {
+    const Productmaxi = maxi.map((data) => {
       return (
         <div>
-          <img
-            alt="..."
-            style={{ height: "350px", display: "block" }}
-            src={`${backend}${data.img[0]["url"]}`}
-            className={navImageClasses}
-          />
-          <div align="center">
-            <h3>{data.name}</h3>
-            <h4>Rp.{data.price}</h4>
+          <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}
@@ -47,21 +44,17 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
         </div>
       );
     })
-    const Productsuzuki = suzuki.map((data) => {
+    const Productmatic = matic.map((data) => {
       return (
         <div>
-          <img
-            alt="..."
-            style={{ height: "350px", display: "block" }}
-            src={`${backend}${data.img[0]["url"]}`}
-            className={navImageClasses}
-          />
-          <div align="center">
-            <h3>{data.name}</h3>
-            <h4>Rp.{data.price}</h4>
+          <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_detail?s="+data.id}
+              href={"/product/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
@@ -69,21 +62,17 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
         </div>
       );
     })
-    const Producthonda = honda.map((data) => {
+    const Productnaked = naked.map((data) => {
       return (
         <div>
-          <img
-            alt="..."
-            style={{ height: "350px", display: "block" }}
-            src={`${backend}${data.img[0]["url"]}`}
-            className={navImageClasses}
-          />
-          <div align="center">
-            <h3>{data.name}</h3>
-            <h4>Rp.{data.price}</h4>
+          <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_detail?s="+data.id}
+              href={"/product/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
@@ -91,21 +80,17 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
         </div>
       );
     })
-    const Producthino = hino.map((data) => {
+    const Productsport = sport.map((data) => {
       return (
         <div>
-          <img
-            alt="..."
-            style={{ height: "350px", display: "block" }}
-            src={`${backend}${data.img[0]["url"]}`}
-            className={navImageClasses}
-          />
-          <div align="center">
-            <h3>{data.name}</h3>
-            <h4>Rp.{data.price}</h4>
+          <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_detail?s="+data.id}
+              href={"/product/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
@@ -113,21 +98,17 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
         </div>
       );
     })
-    const Productmercedes = mercedes.map((data) => {
+    const Productoffroad = offroad.map((data) => {
       return (
         <div>
-          <img
-            alt="..."
-            style={{ height: "350px", display: "block" }}
-            src={`${backend}${data.img[0]["url"]}`}
-            className={navImageClasses}
-          />
-          <div align="center">
-            <h3>{data.name}</h3>
-            <h4>Rp.{data.price}</h4>
+          <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_detail?s="+data.id}
+              href={"/product/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
@@ -135,21 +116,17 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
         </div>
       );
     })
-    const Productbpr = bpr.map((data) => {
+    const Productmoped = moped.map((data) => {
       return (
         <div>
-          <img
-            alt="..."
-            style={{ height: "350px", display: "block" }}
-            src={`${backend}${data.img[0]["url"]}`}
-            className={navImageClasses}
-          />
-          <div align="center">
-            <h3>{data.name}</h3>
-            <h4>Rp.{data.price}</h4>
+          <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_detail?s="+data.id}
+              href={"/product/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
@@ -157,21 +134,17 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
         </div>
       );
     })
-    const Productemilia = emilia.map((data) => {
+    const Productmonsterenergy = monsterenergy.map((data) => {
       return (
         <div>
-          <img
-            alt="..."
-            style={{ height: "350px", display: "block" }}
-            src={`${backend}${data.img[0]["url"]}`}
-            className={navImageClasses}
-          />
-          <div align="center">
-            <h3>{data.name}</h3>
-            <h4>Rp.{data.price}</h4>
+          <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_detail?s="+data.id}
+              href={"/product/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
@@ -179,21 +152,17 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
         </div>
       );
     })
-    const Producthomes = homes.map((data) => {
+    const Productcbu = cbu.map((data) => {
       return (
         <div>
-          <img
-            alt="..."
-            style={{ height: "350px", display: "block" }}
-            src={`${backend}${data.img[0]["url"]}`}
-            className={navImageClasses}
-          />
-          <div align="center">
-            <h3>{data.name}</h3>
-            <h4>Rp.{data.price}</h4>
+          <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_detail?s="+data.id}
+              href={"/product/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
@@ -217,92 +186,83 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
                 color="primary"
                 tabs={[
                   {
-                    tabButton: "Maxi Yamaha",
-                    tabIcon: Dashboard,
+                    tabButton: "Maxi",
+                    tabIcon: Motorcycle,
                     tabContent: (
                       <GridContainer justify="center">
-                        {Productyamaha}
+                        {Productmaxi}
                       </GridContainer>
                     ),
                   },
                   {
                     tabButton: "Matic",
-                    tabIcon: Dashboard,
+                    tabIcon: Motorcycle,
                     tabContent: (
                       <GridContainer justify="center">
-                        {Productsuzuki}
+                        {Productmatic}
                       </GridContainer>
                     ),
                   },
                   {
                     tabButton: "Naked Bike",
-                    tabIcon: Dashboard,
+                    tabIcon: Motorcycle,
                     tabContent: (
                       <GridContainer justify="center">
-                        {Producthonda}
+                        {Productnaked}
                       </GridContainer>
                     ),
                   },
                   {
                     tabButton: "Sport",
-                    tabIcon: Dashboard,
+                    tabIcon: Motorcycle,
                     tabContent: (
                       <GridContainer justify="center">
-                        {Producthino}
+                        {Productsport}
                       </GridContainer>
                     ),
                   },
                   {
                     tabButton: "Off Road",
-                    tabIcon: Dashboard,
+                    tabIcon: Motorcycle,
                     tabContent: (
                       <GridContainer justify="center">
-                        {Productmercedes}
+                        {Productoffroad}
                       </GridContainer>
                     ),
                   },
                   {
                     tabButton: "Moped",
-                    tabIcon: Dashboard,
+                    tabIcon: Motorcycle,
                     tabContent: (
                       <GridContainer justify="center">
-                        {Productmercedes}
+                        {Productmoped}
                       </GridContainer>
                     ),
                   },
                   {
                     tabButton: "Monster Energy MotoGP",
-                    tabIcon: Dashboard,
+                    tabIcon: Motorcycle,
                     tabContent: (
                       <GridContainer justify="center">
-                        {Productemilia}
+                        {Productmonsterenergy}
                       </GridContainer>
                     ),
                   },
                   {
                     tabButton: "CBU",
-                    tabIcon: Dashboard,
+                    tabIcon: Motorcycle,
                     tabContent: (
                       <GridContainer justify="center">
-                        {Producthomes}
+                        {Productcbu}
                       </GridContainer>
                     ),
                   },
                   {
                     tabButton: "ATV",
-                    tabIcon: Dashboard,
-                    tabContent: (
-                      <GridContainer justify="center">
-                        {Producthomes}
-                      </GridContainer>
-                    ),
-                  },
-                  {
-                    tabButton: "Power Product",
-                    tabIcon: Dashboard,
+                    tabIcon: Motorcycle,
                     tabContent: (
                       <GridContainer justify="center">
-                        {Producthomes}
+                        {Productcbu}
                       </GridContainer>
                     ),
                   },

pages-sections/product/ygp.js

@@ -24,20 +24,18 @@ const DataYGP = function ({ selected,handleName, backend, ygp, ...props }) {
     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
     const ProductYGP = ygp.map((data) => {
         return (      
-            <div style={{padding:"40px"}}>
+            <div style={{padding:"50px"}} align="center">
                 <img
                     alt="..."
-                    style={{ height: "150px", display: "block" }}
+                    style={{ height: "150px", width:"250px", display: "block" }}
                     src={`${backend}${data.img["url"]}`}
                     className={navImageClasses}
                 />
-                <div align="center">
                 <h3>{data.name}</h3>
                 <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>
             </div>
         );
     })

pages/carrer.js

@@ -5,9 +5,10 @@ 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 SectionCarrer from "pages-sections/carrer/carrer.js";
 import Parallax from "components/Parallax/Parallax.js";
 import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+import SectionCarrer from "pages-sections/carrer/carrer.js";
 import Getcarrer from "../api/carrer/carrer.js"
 
 const useStyles = makeStyles(styles);
@@ -58,7 +59,7 @@ export async function getServerSideProps(context) {
 	if (res["STATUS"] === 1) {
 		sma = res["DATA"]["carrers"];
 	}
-
+  
 	return {
 		props: { s1, d3, sma, backend }, // will be passed to the page component as props
 	};

pages/dealers.js

@@ -1,20 +1,29 @@
 import React from "react";
 import classNames from "classnames";
 import { makeStyles } from "@material-ui/core/styles";
+import Router from 'next/router'
 
 import Header from "components/Header/Header.js";
 import HeaderLinks from "components/Header/HeaderLinks.js";
 import Parallax from "components/Parallax/Parallax.js";
 import styles from "assets/jss/nextjs-material-kit/pages/components.js";
 import Footer from "components/Footer/Footer.js";
+
 import Getdealer from "../api/dealer/dealer.js";
 import DataSnackbarContent from "../pages-sections/snackbar.js";
 import DataDealers from "../pages-sections/dealers/dealers.js";
 import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
 const queryClient = new QueryClient()
+const handleName = values => {
+    Router.push({
+        pathname: '/dealers',
+        query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
+    })
+}
+
 const useStyles = makeStyles(styles);
-const Dealers = function ({ backend, dealers, ...props }) {
+const Dealers = function ({ selected, backend, dealers, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
 
@@ -34,8 +43,7 @@ const Dealers = function ({ backend, dealers, ...props }) {
         <div className={classNames(classes.main, classes.mainRaised)}>
             <QueryClientProvider client={queryClient}>
                 <DataSnackbarContent />
-                <DataDealers dealers={dealers} backend={backend} />
-                {/* <Filter /> */}
+                <DataDealers selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} dealers={dealers} backend={backend} />
             </QueryClientProvider>
         </div>
         <Footer />
@@ -47,16 +55,20 @@ export default Dealers;
 
 export async function getServerSideProps(context) {
     var dealers = [];
+    var filter = context.query.filter||"";
+    var selected = "";
+
     const backend = process.env.BACKEND_SERVER_URI;
 
-    var res = await Getdealer.GetDealers();
+    var res = await Getdealer.GetDealers(filter);
     if (res["STATUS"] === 1) {
         dealers = res["DATA"]["dealers"];
+        if (filter !=""){
+            selected = dealers.filter((i)=>i.name==filter);
+        }
     }
 
-    console.log(res);
-
     return {
-        props: { dealers, backend }, // will be passed to the page component as props
+        props: { selected, dealers, backend, }, // will be passed to the page component as props
     };
 }

pages/home.js

@@ -7,6 +7,7 @@ import HeaderLinks from "components/Header/HeaderLinks.js";
 import Parallax from "components/Parallax/Parallax.js";
 import styles from "assets/jss/nextjs-material-kit/pages/components.js";
 import Footer from "components/Footer/Footer.js";
+
 import GetbusinessPartners from "../api/home/businessPartner.js";
 import Getservices from "../api/home/service.js";
 import Getcarousels from "../api/home/carousel.js";
@@ -16,6 +17,7 @@ import DataService from "../pages-sections/home/service.js";
 import DataBusinessPartner from "../pages-sections/home/business_partner.js";
 import DataSosmed from "../pages-sections/home/sosmed.js";
 import CoreValue from "../pages-sections/home/core_value.js";
+import DataFeature from "../pages-sections/home/feature.js";
 
 const useStyles = makeStyles(styles);
 const Home = function ({
@@ -47,6 +49,7 @@ const Home = function ({
         <CoreValue />
         <DataCarousel carousel={carousel} backend={backend} />
         <DataService service={service} backend={backend} />
+        <DataFeature />
         <DataBusinessPartner businessPartners={businessPartners} backend={backend} />
         <DataSosmed service={service} backend={backend} />
       </div>

pages/product/product.js

@@ -15,14 +15,14 @@ const useStyles = makeStyles(styles);
 
 const Product = function ({
   backend,
-  yamaha,
-  suzuki,
-  honda,
-  hino,
-  mercedes,
-  bpr,
-  emilia,
-  homes,
+  maxi,
+  matic,
+  naked,
+  sport,
+  offroad,
+  moped,
+  monsterenergy,
+  cbu,
   ...props
 }) {
   const classes = useStyles();
@@ -42,14 +42,14 @@ const Product = function ({
       <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/>
       <div className={classNames(classes.main, classes.mainRaised)}>
         <DataProduct
-          yamaha={yamaha}
-          suzuki={suzuki}
-          honda={honda}
-          hino={hino}
-          mercedes={mercedes}
-          bpr={bpr}
-          emilia={emilia}
-          homes={homes}
+          maxi={maxi}
+          matic={matic}
+          naked={naked}
+          sport={sport}
+          offroad={offroad}
+          moped={moped}
+          monsterenergy={monsterenergy}
+          cbu={cbu}
           backend={backend}
         />
       </div>
@@ -61,66 +61,68 @@ const Product = function ({
 export default Product;
 
 export async function getServerSideProps(context) {
-  var yamaha = [];
-  var suzuki = [];
-  var honda = [];
-  var hino = [];
-  var mercedes = [];
-  var bpr = [];
-  var emilia = [];
-  var homes = [];
+  var maxi = [];
+  var matic = [];
+  var naked = [];
+  var sport = [];
+  var offroad = [];
+  var moped = [];
+  var monsterenergy = [];
+  var cbu = [];
   const backend = process.env.BACKEND_SERVER_URI;
 
-  var res = await Getproduct.GetProductYamaha();
+  var res = await Getproduct.GetProductMaxi();
   if (res["STATUS"] === 1) {
-    yamaha = res["DATA"]["products"];
+    maxi = res["DATA"]["products"];
   }
 
-  var res = await Getproduct.GetProductSuzuki();
+  var res = await Getproduct.GetProductMatic();
   if (res["STATUS"] === 1) {
-    suzuki = res["DATA"]["products"];
+    matic = res["DATA"]["products"];
   }
 
-  var res = await Getproduct.GetProductHonda();
+  var res = await Getproduct.GetProductNaked();
   if (res["STATUS"] === 1) {
-    honda = res["DATA"]["products"];
+    naked = res["DATA"]["products"];
   }
 
-  var res = await Getproduct.GetProductHino();
+  var res = await Getproduct.GetProductSport();
   if (res["STATUS"] === 1) {
-    hino = res["DATA"]["products"];
+    sport = res["DATA"]["products"];
   }
 
-  var res = await Getproduct.GetProductMercedes();
+  var res = await Getproduct.GetProductOffRoad();
   if (res["STATUS"] === 1) {
-    mercedes = res["DATA"]["products"];
+    offroad = res["DATA"]["products"];
   }
 
-  var res = await Getproduct.GetProductBPR();
+  var res = await Getproduct.GetProductMoped();
   if (res["STATUS"] === 1) {
-    bpr = res["DATA"]["products"];
+    moped = res["DATA"]["products"];
   }
 
-  var res = await Getproduct.GetProductEmilia();
+  var res = await Getproduct.GetProductMonsterEnergy();
   if (res["STATUS"] === 1) {
-    emilia = res["DATA"]["products"];
+    monsterenergy = res["DATA"]["products"];
   }
 
-  var res = await Getproduct.GetProductHomes();
+  var res = await Getproduct.GetProductCBU();
   if (res["STATUS"] === 1) {
-    homes = res["DATA"]["products"];
+    cbu = res["DATA"]["products"];
   }
 
+  console.log(cbu);
+
   return {
     props: {
-      yamaha,
-      suzuki,
-      honda,
-      hino,
-      mercedes,
-      bpr,
-      emilia,
-      homes,
+      maxi,
+      matic,
+      naked,
+      sport,
+      offroad,
+      moped,
+      monsterenergy,
+      cbu,
       backend,
     }, // will be passed to the page component as props
   };

pages/product/ygp.js

@@ -22,7 +22,6 @@ const handleName = values => {
         pathname: '/product/ygp',
         query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
     })
-
 }
 const YGP = function ({ selected,ygp, backend, ...props }) {
     const classes = useStyles();