add part & accessories pages

.env-sample

@@ -1,9 +1,9 @@
 //local
-API_URL=http://127.0.0.1:1337
-graphql_uri=http://127.0.0.1:1337/graphql
-BACKEND_SERVER_URI =http://127.0.0.1:1337
+API_URL=http://127.0.0.1:14005
+API_GRAPHQL_URI=http://127.0.0.1:14005/graphql
+BACKEND_SERVER_URI =http://127.0.0.1:14005
 
 //live
-API_URL=http://172.16.1.8:14011
+API_URL=http://172.16.1.8:14009
 API_GRAPHQL_URI=http://172.16.1.8:14009/graphql
-BACKEND_SERVER_URI = http://172.16.1.8:14011
+BACKEND_SERVER_URI=http://172.16.1.8:14009

README.md

@@ -1,245 +0,0 @@
-# [NextJS Material Kit](https://demos.creative-tim.com/nextjs-material-kit?ref=njsmk-readme) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/share?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnextjs-material-kit%2Fcomponents&text=NextJS%20Material%20Kit&via=Creative%20Tim&hashtags=nextjs%20%23creativetim%20%23materialdesign)
-
-
- ![version](https://img.shields.io/badge/version-1.1.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/nextjs-material-kit.svg?maxAge=2592000)](https://github.com/creativetimofficial/nextjs-material-kit/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/nextjs-material-kit.svg?maxAge=2592000)](https://github.com/creativetimofficial/nextjs-material-kit/issues?q=is%3Aissue+is%3Aclosed) [![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)](https://gitter.im/creative-tim-general/Lobby) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy)
-
-
-![Product Presentation Image](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/nextjs-material-kit/nextjs-material-kit.jpg)
-
-**[NextJS Material Kit](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)** is a Free Material-UI Kit with a fresh, new design inspired by Google's material design and is was developed using [NextJS](https://nextjs.org/?ref=creativetim), starting from [this starter project](https://github.com/mui-org/material-ui/tree/master/examples/nextjs) by [Material-UI](https://material-ui.com/?ref=creativetim) and [Material Kit React](https://www.creative-tim.com/product/material-kit-react?ref=njsmk-readme) by Creative Tim. You asked for it, so we built it. It's a great pleasure to introduce to you the material concepts in an easy to use and beautiful set of components. Along with the restyling of the Material-UI elements, you will find three fully-coded example pages, to help you design your NextJS project.
-
-**[NextJS Material Kit](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)** makes use of light, surface and movement. It uses a deliberate color choice, edge-to-edge imagery and large scale typography. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left and the actions on the right.
-
-This new design has elements that have been the result of research regarding ink and paper and the way objects and materials interact in real life. The result is a beautiful and consistent set of elements that can get you started with your next project. NextJS Material Kit is a great tool if you are looking to create a web presence for your web application and need to be consistent, leaving the impression of visually similar elements. It is also a great resource in its own right, looking gorgeous and helping you build your web pages.
-
-**[NextJS Material Kit](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)** was built with the help of [nextjs](https://nextjs.org/?ref=creativetim) and it uses a framework built by our friends from **[Material-UI](https://material-ui.com/?ref=creativetim)**, who did an amazing job creating the backbone for the material effects, animations, ripples and transitions. Big thanks to this team for the effort and forward thinking they put into it.
-
-
-## Table of Contents
-
-* [Versions](#versions)
-* [Demo](#demo)
-* [Quick Start](#quick-start)
-* [Documentation](#documentation)
-* [File Structure](#file-structure)
-* [Browser Support](#browser-support)
-* [Resources](#resources)
-* [Reporting Issues](#reporting-issues)
-* [Licensing](#licensing)
-* [Useful Links](#useful-links)
-
-
-## Versions
-
-[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/html-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-kit?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/nextjs_logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/nextjs-material-kit?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/vue-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/vue-material-kit?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/react-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-kit-react?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/react-native-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-kit-react-native?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/figma-logo.jpg?raw=true" width="60" height="60" />](https://demos.creative-tim.com/material-kit-figma/presentation.html?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/wordpress-logo.jpg?raw=true" width="60" height="60" />](https://themeisle.com/themes/hestia/?ref=creativetim)[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/photoshop-logo.jpg" width="60" height="60" />](https://github.com/creativetimofficial/material-kit/tree/photoshop)[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/sketch-logo.jpg" width="60" height="60" />](https://github.com/creativetimofficial/material-kit/tree/sketch)
-
-
-
-| React Native | Figma | WordPress | NextJS |
-| ---  | --- | --- | --- |
-| [![Material Kit React Native](https://github.com/creativetimofficial/public-assets/blob/master/material-kit-react-native/opt_mkrn_thumbnail.jpg?raw=true)](https://www.creative-tim.com/product/material-kit-react-native?ref=njsmk-readme) | [![Material Kit Figma](https://github.com/creativetimofficial/public-assets/blob/master/material-kit-figma/material-kit-figma.jpg?raw=true)](https://demos.creative-tim.com/material-kit-figma/presentation.html?ref=njsmk-readme) | [![Material Kit WordPress](https://github.com/creativetimofficial/public-assets/blob/master/material-kit-wordpress/opt_smd_thumbnail.jpg?raw=true)](https://themeisle.com/themes/hestia/?ref=creativetim)  | [![NextJS Material Kit](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/nextjs-material-kit.jpg?raw=true)](https://www.creative-tim.com/product/nextjs-material-kit?ref=njsmk-readme)
-
-
-| HTML | React | Vue |
-| --- | --- | --- |
-| [![Material Kit  HTML](https://github.com/creativetimofficial/public-assets/blob/master/material-kit/material-kit.jpeg?raw=true)](https://www.creative-tim.com/product/material-kit?ref=njsmk-readme)  | [![Material Kit React](https://github.com/creativetimofficial/public-assets/blob/master/material-kit-react/material-kit-react.jpeg?raw=true)](https://www.creative-tim.com/product/material-kit-react?ref=njsmk-readme)  | [![Vue Material Kit](https://github.com/creativetimofficial/public-assets/blob/master/vue-material-kit/vue-material-kit.jpeg?raw=true)](https://www.creative-tim.com/product/vue-material-kit?ref=njsmk-readme)
-
-## Demo
-
-| Buttons | Inputs | Navbars  |
-| --- | --- | ---  |
-| [![Buttons](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/buttons.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)  | [![Inputs](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/inputs.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)  | [![Navbar](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/navbars.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)  
-
-| Login Page | Landing Page | Profile Page  |
-| --- | --- | ---  |
-| [![Login Page](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/nextjs-material-kit/login-page.png)](https://demos.creative-tim.com/nextjs-material-kit/login?ref=njsmk-readme)  | [![Landing Page](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/landing-page.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/landing?ref=njsmk-readme)  | [![Profile Page](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/profile-page.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/profile?ref=njsmk-readme)  
-
-[View More](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)
-
-
-## Quick start
-
-- [Download from Github](https://github.com/creativetimofficial/nextjs-material-kit/archive/master.zip).
-- [Download from Creative Tim](https://www.creative-tim.com/product/nextjs-material-kit?ref=njsmk-readme).
-- Clone the repo: `git clone https://github.com/creativetimofficial/nextjs-material-kit.git`.
-- `npm i nextjs-material-kit`
-- Install with [Bower](https://bower.io/?ref=creativetim): ```bower install nextjs-material-kit```.
-
-
-## Documentation
-The documentation for the NextJS Material Kit is hosted at our [website](https://demos.creative-tim.com/nextjs-material-kit/documentation/tutorial?ref=njsmk-readme).
-
-
-## File Structure
-Within the download you'll find the following directories and files:
-
-```
-nextjs-material-kit
-.
-├── CHANGELOG.md
-├── ISSUE_TEMPLATE.md
-├── LICENSE.md
-├── README.md
-├── next.config.js
-├── package.json
-├── Documentation
-│   ├── assets
-│   └── tutorial-components.html
-├── assets
-│   ├── css
-│   ├── img
-│   │   ├── examples
-│   │   └── faces
-│   ├── jss
-│   │   ├── nextjs-material-kit
-│   │   │   ├── components
-│   │   │   └── pages
-│   │   │       ├── componentsSections
-│   │   │       └── landingPageSections
-│   │   └── nextjs-material-kit.js
-│   └── scss
-│       ├── core
-│       │   ├── mixins
-│       │   └── variables
-│       ├── plugins
-│       └── nextjs-material-kit.scss
-├── pages
-│   ├── _app.js
-│   ├── _document.js
-│   ├── _error.js
-│   ├── components.js
-│   ├── index.js
-│   ├── landingpage.js
-│   ├── loginpage.js
-│   └── profilepage.js
-├── components
-│   ├── Badge
-│   │   └── Badge.js
-│   ├── Card
-│   │   ├── Card.js
-│   │   ├── CardBody.js
-│   │   ├── CardFooter.js
-│   │   └── CardHeader.js
-│   ├── Clearfix
-│   │   └── Clearfix.js
-│   ├── CustomButtons
-│   │   └── Button.js
-│   ├── CustomDropdown
-│   │   └── CustomDropdown.js
-│   ├── CustomInput
-│   │   └── CustomInput.js
-│   ├── CustomLinearProgress
-│   │   └── CustomLinearProgress.js
-│   ├── CustomTabs
-│   │   └── CustomTabs.js
-│   ├── Footer
-│   │   └── Footer.js
-│   ├── Grid
-│   │   ├── GridContainer.js
-│   │   └── GridItem.js
-│   ├── Header
-│   │   ├── Header.js
-│   │   └── HeaderLinks.js
-│   ├── InfoArea
-│   │   └── InfoArea.js
-│   ├── NavPills
-│   │   └── NavPills.js
-│   ├── PageChange
-│   │   └── PageChange.js
-│   ├── Pagination
-│   │   └── Pagination.js
-│   ├── Parallax
-│   │   └── Parallax.js
-│   ├── Snackbar
-│   │   └── SnackbarContent.js
-│   └── Typography
-│       ├── Danger.js
-│       ├── Info.js
-│       ├── Muted.js
-│       ├── Primary.js
-│       ├── Quote.js
-│       ├── Small.js
-│       ├── Success.js
-│       └── Warning.js
-└── pages-sections
-    ├── Components-Sections
-    │   ├── SectionBasics.js
-    │   ├── SectionCarousel.js
-    │   ├── SectionCompletedExamples.js
-    │   ├── SectionDownload.js
-    │   ├── SectionExamples.js
-    │   ├── SectionJavascript.js
-    │   ├── SectionLogin.js
-    │   ├── SectionNavbars.js
-    │   ├── SectionNotifications.js
-    │   ├── SectionPills.js
-    │   ├── SectionTabs.js
-    │   └── SectionTypography.js
-    └── LandingPage-Sections
-        ├── ProductSection.js
-        ├── TeamSection.js
-        └── WorkSection.js
-```
-
-
-## Browser Support
-
-At present, we officially aim to support the last two versions of the following browsers:
-
-<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/chrome-logo.png?raw=true" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/firefox-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/edge-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/safari-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/opera-logo.png" width="64" height="64">
-
-
-
-## Resources
-- Demo: <https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme>
-- Download Page: <https://www.creative-tim.com/product/nextjs-material-kit?ref=njsmk-readme>
-- Documentation: <https://demos.creative-tim.com/nextjs-material-kit/documentation/tutorial?ref=njsmk-readme>
-- License Agreement: <https://www.creative-tim.com/license?ref=njsmk-readme>
-- Support: <https://www.creative-tim.com/contact-us?ref=njsmk-readme>
-- Issues: [Github Issues Page](https://github.com/creativetimofficial/nextjs-material-kit/issues)
-- **Dashboards:**
-
-| HTML | React | Vue  | Angular |
-| --- | --- | ---  | ---  |
-| [![Material Dashboard  HTML](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-html/material-dashboard.jpeg?raw=true)](https://www.creative-tim.com/product/material-dashboard?ref=njsmk-readme) | [![Material Dashboard  React](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-react/material-dashboard-react.jpeg?raw=true)](https://www.creative-tim.com/product/material-dashboard-react?ref=njsmk-readme) | [![Vue Material Dashboard](https://github.com/creativetimofficial/public-assets/blob/master/vue-material-dashboard/vue-material-dashboard.jpeg?raw=true)](https://www.creative-tim.com/product/vue-material-dashboard?ref=njsmk-readme)  | [![ Material Dashboard Angular](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-angular/material-dashboard-angular.jpg?raw=true)](https://www.creative-tim.com/product/material-dashboard-angular2?ref=njsmk-readme)
-
-| HTML Dark | Laravel | Vuetify |
-| --- | --- | --- |
-| [![Material Dashboard Dark](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-dark/material-dashboard-dark.jpg?raw=true)](https://www.creative-tim.com/product/material-dashboard-dark?ref=njsmk-readme) |[![Material Dashboard Laravel](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-laravel/material-dashboard-laravel.jpg?raw=true)](https://www.creative-tim.com/product/material-dashboard-laravel?ref=njsmk-readme)| [![Material Dashboard Vuetify](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-vuetify/material-dashboard-vuetify.jpg?raw=true)](https://www.creative-tim.com/product/vuetify-material-dashboard?ref=njsmk-readme)
-
-## Reporting Issues
-
-We use GitHub Issues as the official bug tracker for the NextJS Material Kit. Here are some advices for our users that want to report an issue:
-
-1. Make sure that you are using the latest version of the Material Kit. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/?ref=njsmk-readme).
-2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
-3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
-
-## Licensing
-
-- Copyright 2020 Creative Tim (https://www.creative-tim.com/?ref=njsmk-readme)
-
-- Licensed under MIT (https://github.com/creativetimofficial/nextjs-material-kit/blob/master/LICENSE.md)
-
-## Useful Links
-
-- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)
-- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=njsmk-readme) (earn money)
-- [Blog Creative Tim](http://blog.creative-tim.com/?ref=njsmk-readme)
-- [Free Products](https://www.creative-tim.com/templates/free?direction=desc&sort=created_at&ref=njsmk-readme) from Creative Tim
-- [Premium Products](https://www.creative-tim.com/templates/premium?direction=desc&sort=created_at&ref=njsmk-readme) from Creative Tim
-- [React Products](https://www.creative-tim.com/templates/react?direction=desc&sort=created_at&ref=njsmk-readme) from Creative Tim
-- [Angular Products](https://www.creative-tim.com/templates/angular?direction=desc&sort=created_at&ref=njsmk-readme) from Creative Tim
-- [VueJS Products](https://www.creative-tim.com/templates/vuejs?direction=desc&sort=created_atref=njsmk-readme) from Creative Tim
-- [More products](https://www.creative-tim.com/templates?ref=njsmk-readme) from Creative Tim
-- Check our Bundles [here](https://www.creative-tim.com/bundles?ref=njsmk-readme)
-
-### Social Media
-
-Twitter: <https://twitter.com/CreativeTim>
-
-Facebook: <https://www.facebook.com/CreativeTim>
-
-Dribbble: <https://dribbble.com/creativetim>
-
-Instagram: <https://www.instagram.com/CreativeTimOfficial>

api/product/accessories.js

@@ -40,7 +40,70 @@ async function GetYamalube(token="") {
 	return res;
 }
 
+async function GetHelmet(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            accessories(where: { category: "Helmet" }) {
+                id
+                name
+                description
+                price
+                part_code
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetApparel(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            accessories(where: { category: "Apparel" }) {
+                id
+                name
+                description
+                price
+                part_code
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetAccessories(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            accessories(where: { category: "Accessories" }) {
+                id
+                name
+                description
+                price
+                part_code
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
 module.exports = {
     GetYGP:GetYGP,
     GetYamalube:GetYamalube,
+    GetHelmet:GetHelmet,
+    GetApparel:GetApparel,
+    GetAccessories:GetAccessories,
 };

api/product/product.js

@@ -45,9 +45,7 @@ async function GetDetailProduct(id, token="") {
         }
         overview
         specification
-        film{
-          url
-        }
+        film
         stock
       }
     }	`,
@@ -78,9 +76,7 @@ async function GetProductYamaha(token="") {
         }
         overview
         specification
-        film{
-          url
-        }
+        film
         stock
       }
     }`,
@@ -108,9 +104,7 @@ async function GetProductSuzuki(token="") {
         }
         overview
         specification
-        film{
-          url
-        }
+        film
         stock
       }
     }`,
@@ -138,9 +132,7 @@ async function GetProductHonda(token="") {
         }
         overview
         specification
-        film{
-          url
-        }
+        film
         stock
       }
     }`,
@@ -168,9 +160,7 @@ async function GetProductHino(token="") {
         }
         overview
         specification
-        film{
-          url
-        }
+        film
         stock
       }
     }`,
@@ -198,9 +188,7 @@ async function GetProductMercedes(token="") {
         }
         overview
         specification
-        film{
-          url
-        }
+        film
         stock
       }
     }`,
@@ -228,9 +216,7 @@ async function GetProductBPR(token="") {
         }
         overview
         specification
-        film{
-          url
-        }
+        film
         stock
       }
     }`,
@@ -258,9 +244,7 @@ async function GetProductEmilia(token="") {
         }
         overview
         specification
-        film{
-          url
-        }
+        film
         stock
       }
     }`,
@@ -288,9 +272,7 @@ async function GetProductHomes(token="") {
         }
         overview
         specification
-        film{
-          url
-        }
+        film
         stock
       }
     }`,

components/Header/HeaderLinks.js

@@ -15,7 +15,6 @@ import { Apps, ShareTwoTone } from "@material-ui/icons";
 // core components
 import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";
 import Button from "components/CustomButtons/Button.js";
-
 import styles from "assets/jss/nextjs-material-kit/components/headerLinksStyle.js";
 
 const useStyles = makeStyles(styles);
@@ -54,16 +53,16 @@ export default function HeaderLinks(props) {
             <Link href="/product/ygp">
               <a className={classes.dropdownLink}>YGP</a>
             </Link>,
-            <Link href="/product">
+            <Link href="/product/yamalube">
               <a className={classes.dropdownLink}>Yamalube</a>
             </Link>,
-            <Link href="/product">
+            <Link href="/product/helmet">
               <a className={classes.dropdownLink}>Helmet</a>
             </Link>,
-            <Link href="/product">
+            <Link href="/product/apparel">
               <a className={classes.dropdownLink}>Apparel</a>
             </Link>,
-            <Link href="/product">
+            <Link href="/product/accessories">
               <a className={classes.dropdownLink}>Accessories</a>
             </Link>,
             <Link href="https://booking.thamrin.co.id/">
@@ -154,4 +153,4 @@ export default function HeaderLinks(props) {
       </ListItem>
     </List>
   );
-}
+}

pages-sections/product/accessories.js

@@ -0,0 +1,64 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+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";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+
+const useStyles = makeStyles(styles);
+
+const DataAccessories = function ({ backend, accessories, ...props }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    const imageClasses = classNames(
+        classes.imgRaised,
+        classes.imgRoundedCircle,
+        classes.imgFluid
+    );
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    const ProductAccessories = accessories.map((data) => {
+        console.log(data);
+        return (      
+            <div style={{padding:"40px"}}>
+                <img
+                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>
+                <Button 
+                    color="info" round
+                    href={"/product_detail?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+        );
+    })
+    return (
+        <div>
+        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+            <CardBody>
+            <div align="center" style={{marginTop:"-50px"}}>
+                <h2>Yamaha Accessories</h2>
+                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
+                    {ProductAccessories}
+                    {ProductAccessories}
+                </GridContainer>
+            </div> 
+            </CardBody>
+        </Card>
+        </div>
+    );
+}
+
+export default DataAccessories;

pages-sections/product/apparel.js

@@ -0,0 +1,64 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+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";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+
+const useStyles = makeStyles(styles);
+
+const DataApparel = function ({ backend, apparel, ...props }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    const imageClasses = classNames(
+        classes.imgRaised,
+        classes.imgRoundedCircle,
+        classes.imgFluid
+    );
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    const ProductApparel = apparel.map((data) => {
+        return (      
+            <div style={{padding:"40px"}}>
+                <img
+                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>
+                <Button 
+                    color="info" round
+                    href={"/product_detail?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+        );
+    })
+    return (
+        <div>
+        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+            <CardBody>
+            <div align="center" style={{marginTop:"-50px"}}>
+                <h2>Yamaha Apparel</h2>
+                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
+                    {ProductApparel}
+                    {ProductApparel}
+                    {ProductApparel}
+                </GridContainer>
+            </div> 
+            </CardBody>
+        </Card>
+        </div>
+    );
+}
+
+export default DataApparel;

pages-sections/product/helmet.js

@@ -0,0 +1,62 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+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";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+
+const useStyles = makeStyles(styles);
+
+const DataHelmet = function ({ backend, helmet, ...props }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    const imageClasses = classNames(
+        classes.imgRaised,
+        classes.imgRoundedCircle,
+        classes.imgFluid
+    );
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    const ProductHelmet = 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">
+                <h3>{data.name}</h3>
+                <h4>Rp.{data.price}</h4>
+                <Button 
+                    color="info" round
+                    href={"/product_detail?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+        );
+    })
+    return (
+        <div>
+        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+            <CardBody>
+            <div align="center" style={{marginTop:"-50px"}}>
+                <h2>Yamaha Helmet</h2>
+                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
+                    {ProductHelmet}{ProductHelmet}{ProductHelmet}
+                </GridContainer>
+            </div> 
+            </CardBody>
+        </Card>
+        </div>
+    );
+}
+
+export default DataHelmet;

pages-sections/product/product.js

@@ -39,7 +39,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
             <h4>Rp.{data.price}</h4>
             <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>

pages-sections/product/yamalube.js

@@ -0,0 +1,62 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+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";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+
+const useStyles = makeStyles(styles);
+
+const DataYamalube = function ({ backend, yamalube, ...props }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    const imageClasses = classNames(
+        classes.imgRaised,
+        classes.imgRoundedCircle,
+        classes.imgFluid
+    );
+    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">
+                <h3>{data.name}</h3>
+                <h4>Rp.{data.price}</h4>
+                <Button 
+                    color="info" round
+                    href={"/product_detail?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+        );
+    })
+    return (
+        <div>
+        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+            <CardBody>
+            <div align="center" style={{marginTop:"-50px"}}>
+                <h2>Yamalube Oil</h2>
+                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
+                    {ProductYamalube}
+                </GridContainer>
+            </div> 
+            </CardBody>
+        </Card>
+        </div>
+    );
+}
+
+export default DataYamalube;

pages-sections/product/ygp.js

@@ -1,25 +1,58 @@
 import React from "react";
+import classNames from "classnames";
 import { makeStyles } from "@material-ui/core/styles";
 
+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";
 import Card from "components/Card/Card.js";
 import CardBody from "components/Card/CardBody.js";
-import CardHeader from "components/Card/CardHeader.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
 
 const useStyles = makeStyles(styles);
 
 const DataYGP = function ({ backend, ygp, ...props }) {
     const classes = useStyles();
+    const { ...rest } = props;
+    const imageClasses = classNames(
+        classes.imgRaised,
+        classes.imgRoundedCircle,
+        classes.imgFluid
+    );
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    const ProductYGP = ygp.map((data) => {
+        return (      
+            <div style={{padding:"40px"}}>
+                <img
+                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>
+                <Button 
+                    color="info" round
+                    href={"/product_detail?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+        );
+    })
     return (
         <div>
         <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
-            <div align="center">
-            <CardHeader justify="center" color="info" style={{padding:"10px"}}> 
-                <h2>Yamaha Geniue Part</h2>
-            </CardHeader>
-            </div>
             <CardBody>
+            <div align="center" style={{marginTop:"-50px"}}>
                 <h2>Yamaha Geniue Part</h2>
+                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
+                    {ProductYGP}{ProductYGP}
+                </GridContainer>
+            </div> 
             </CardBody>
         </Card>
         </div>

pages/product/accessories.js

@@ -0,0 +1,56 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+import GetDataAccessories from "../../api/product/accessories.js";
+import DataAccessories from "../../pages-sections/product/accessories.js";
+import DataSnackbarContent from "../../pages-sections/snackbar.js";
+
+const useStyles = makeStyles(styles);
+
+const Accessories = function ({ accessories, backend, ...props }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks />}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white",
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/yamalube.jpg")} height="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <DataSnackbarContent/>
+            <DataAccessories accessories={accessories} backend={backend} />
+        </div>
+        <Footer />
+        </div>
+    );
+};
+
+export default Accessories;
+
+export async function getServerSideProps(context) {
+    var accessories = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+    
+    var res = await GetDataAccessories.GetAccessories();
+    if (res["STATUS"] === 1) {
+        accessories = res["DATA"]["accessories"];
+    }
+
+    return { 
+        props: { accessories, backend }, // will be passed to the page component as props
+    };
+}

pages/product/apparel.js

@@ -0,0 +1,56 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import 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 DataApparel from "../../pages-sections/product/apparel.js";
+import DataSnackbarContent from "../../pages-sections/snackbar.js";
+
+const useStyles = makeStyles(styles);
+
+const Apparel = function ({ apparel, backend, ...props }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks />}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white",
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/yamalube.jpg")} height="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <DataSnackbarContent/>
+            <DataApparel apparel={apparel} backend={backend} />
+        </div>
+        <Footer />
+        </div>
+    );
+};
+
+export default Apparel;
+
+export async function getServerSideProps(context) {
+    var apparel = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+    
+    var res = await GetDataApparel.GetApparel();
+    if (res["STATUS"] === 1) {
+        apparel = res["DATA"]["accessories"];
+    }
+
+    return { 
+        props: { apparel, backend }, // will be passed to the page component as props
+    };
+}

pages/product/helmet.js

@@ -0,0 +1,56 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+import GetDataHelmet from "../../api/product/accessories.js";
+import DataHelmet from "../../pages-sections/product/helmet.js";
+import DataSnackbarContent from "../../pages-sections/snackbar.js";
+
+const useStyles = makeStyles(styles);
+
+const Helmet = function ({ helmet, backend, ...props }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks />}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white",
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/yamalube.jpg")} height="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <DataSnackbarContent/>
+            <DataHelmet helmet={helmet} backend={backend} />
+        </div>
+        <Footer />
+        </div>
+    );
+};
+
+export default Helmet;
+
+export async function getServerSideProps(context) {
+    var helmet = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+    
+    var res = await GetDataHelmet.GetHelmet();
+    if (res["STATUS"] === 1) {
+        helmet = res["DATA"]["accessories"];
+    }
+
+    return { 
+        props: { helmet, backend }, // will be passed to the page component as props
+    };
+}

pages/product/yamalube.js

@@ -0,0 +1,58 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+import GetDataYamalube from "../../api/product/accessories.js";
+import DataYamalube from "../../pages-sections/product/yamalube.js";
+import DataSnackbarContent from "../../pages-sections/snackbar.js";
+
+const useStyles = makeStyles(styles);
+
+const Yamalube = function ({ yamalube, backend, ...props }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks />}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white",
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/yamalube.jpg")} height="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <DataSnackbarContent/>
+            <DataYamalube yamalube={yamalube} backend={backend} />
+        </div>
+        <Footer />
+        </div>
+    );
+};
+
+export default Yamalube;
+
+export async function getServerSideProps(context) {
+    var yamalube = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+    var res = await GetDataYamalube.GetYamalube();
+    console.log(res);
+
+    if (res["STATUS"] === 1) {
+        yamalube = res["DATA"]["accessories"];
+    }
+
+    return { 
+        props: { yamalube, backend }, // will be passed to the page component as props
+    };
+}

pages/product/ygp.js

@@ -5,15 +5,16 @@ 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 DataYGP from "pages-sections/product/ygp.js";
 import Parallax from "components/Parallax/Parallax.js";
 import styles from "assets/jss/nextjs-material-kit/pages/components.js";
 
-import GetAccessories from "../../api/product/accessories.js";
+import GetDataYGP from "../../api/product/accessories.js";
+import DataYGP from "../../pages-sections/product/ygp.js";
+import DataSnackbarContent from "../../pages-sections/snackbar.js";
 
 const useStyles = makeStyles(styles);
 
-const Product = function ({ backend, ygp, ...props }) {
+const YGP = function ({ ygp, backend, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     return (
@@ -28,27 +29,30 @@ const Product = function ({ backend, ygp, ...props }) {
             }}
             {...rest}
         />
-        <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/>
+        <Parallax image={require("assets/img/yamalube.jpg")} height="200px"/>
         <div className={classNames(classes.main, classes.mainRaised)}>
-            <DataYGP backend={backend} />
+            <DataSnackbarContent/>
+            <DataYGP ygp={ygp} backend={backend} />
         </div>
         <Footer />
         </div>
     );
 };
 
-export default Product;
+export default YGP;
 
 export async function getServerSideProps(context) {
     var ygp = [];
     const backend = process.env.BACKEND_SERVER_URI;
 
-    var res = await GetAccessories.GetYGP();
+    var res = await GetDataYGP.GetYGP();
+    console.log(res);
+
     if (res["STATUS"] === 1) {
         ygp = res["DATA"]["accessories"];
     }
 
     return { 
-        props: { backend, ygp, }, // will be passed to the page component as props
+        props: { ygp, backend }, // will be passed to the page component as props
     };
-}
+}