Merge branch 'master' into CR/tampilan

36 files changed, 1461 insertions, 87 deletions

diff --git a/.env.example b/.env.example
index e958d550..71977847 100644
--- a/.env.example
+++ b/.env.example
@@ -13,6 +13,13 @@ MIDTRANS_ENV=
 MIDTRANS_SERVER_KEY=
 MIDTRANS_CLIENT_KEY=
 
+
+GOOGLE_CLIENT_ID="396438712998-308hckshgeekr34phr5jskj1f6qltfvk.apps.googleusercontent.com"
+GOOGLE_CLIENT_SECRET=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
+
+JWT_SECRET=NTNv7j0TuYARvmNMmWXo6fKvM4o6nvaUi9ryX38ZHL1bkrnD1ObOQ8JAUmHCBq7Iy7otZcyAagBLHVKvvYaIpmMuxmARQ97jUVG16Jkpkp1wXOPsrF9zwew6TpczyHkHgX5EuLg2MeBuiTqJACs1J0apruOOJCggOtkjB4c
+
+
 NEXT_PUBLIC_SELF_HOST=$SELF_HOST
 NEXT_PUBLIC_ODOO_API_HOST=$ODOO_API_HOST
 NEXT_PUBLIC_ODOO_HOST=$ODOO_HOST
diff --git a/package.json b/package.json
index f74b5a69..cb85bd28 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "lodash-contrib": "^4.1200.1",
     "midtrans-client": "^1.3.1",
     "next": "13.0.0",
+    "next-auth": "^4.22.3",
     "next-progress": "^2.2.0",
     "next-pwa": "^5.6.0",
     "next-seo": "^5.15.0",
diff --git a/public/images/BOX(1).svg b/public/images/BOX(1).svg
new file mode 100644
index 00000000..61e41e62
--- /dev/null
+++ b/public/images/BOX(1).svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E20613;}
+</style>
+<g>
+	<path class="st0" d="M170.1,354.3c-16.9-7.3-33.9-14.4-50.8-21.6c-1.6-0.7-3.3-0.9-5-1c-6.1-0.1-11.3,4.1-12.6,10.2
+		c-1.3,5.7,1.7,11.6,7.6,14.2c16.9,7.3,33.9,14.5,50.8,21.6c2,0.8,4,1.3,6.2,1c6.2-0.9,10.7-5.1,11.6-10.9
+		C178.7,362.2,175.8,356.7,170.1,354.3z M170.1,354.3c-16.9-7.3-33.9-14.4-50.8-21.6c-1.6-0.7-3.3-0.9-5-1
+		c-6.1-0.1-11.3,4.1-12.6,10.2c-1.3,5.7,1.7,11.6,7.6,14.2c16.9,7.3,33.9,14.5,50.8,21.6c2,0.8,4,1.3,6.2,1
+		c6.2-0.9,10.7-5.1,11.6-10.9C178.7,362.2,175.8,356.7,170.1,354.3z M170.1,354.3c-16.9-7.3-33.9-14.4-50.8-21.6
+		c-1.6-0.7-3.3-0.9-5-1c-6.1-0.1-11.3,4.1-12.6,10.2c-1.3,5.7,1.7,11.6,7.6,14.2c16.9,7.3,33.9,14.5,50.8,21.6c2,0.8,4,1.3,6.2,1
+		c6.2-0.9,10.7-5.1,11.6-10.9C178.7,362.2,175.8,356.7,170.1,354.3z M170.1,354.3c-16.9-7.3-33.9-14.4-50.8-21.6
+		c-1.6-0.7-3.3-0.9-5-1c-6.1-0.1-11.3,4.1-12.6,10.2c-1.3,5.7,1.7,11.6,7.6,14.2c16.9,7.3,33.9,14.5,50.8,21.6c2,0.8,4,1.3,6.2,1
+		c6.2-0.9,10.7-5.1,11.6-10.9C178.7,362.2,175.8,356.7,170.1,354.3z M447.6,130.4c-66.3-24.8-132.5-49.6-198.7-74.6
+		c-5-1.9-9.6-1.8-14.6,0.4c-57.6,24.8-115.2,49.4-172.8,74c-7.7,3.3-11.3,8.3-11.3,17.1c0.2,74.2,0.2,148.4,0,222.6
+		c0,8.5,3.4,13.5,11.1,16.8c57.8,24.6,115.5,49.4,173.2,74.2c1.4,0.6,3,0.8,4.1,2h6.4c12.4-5.4,25.1-9.7,37.7-14.4
+		c54.8-20.6,109.7-41.2,164.5-61.7c5.5-2.1,9.8-5,11.6-10.9V141.2C457,135.7,453,132.5,447.6,130.4z M229.1,428.1
+		c0,0.6-0.1,1.3-0.1,2.5c-3.5-1.5-6.7-2.8-10-4.2c-46.7-20-93.3-40-140-59.9c-2.3-1-3.2-1.9-3.2-4.5c0.1-65.5,0.1-130.9,0.1-196.3
+		v-2.6c16.9,7.3,33.2,14.3,49.5,21.3c33.5,14.4,67,28.7,100.5,43c2.2,1,3.2,1.9,3.2,4.5C229.1,297.2,229.1,362.6,229.1,428.1z
+		 M243.3,206c-1.2,0.5-2.1,0.1-3-0.3c-47.8-20.5-95.7-41.1-143.5-61.6c-0.1,0-0.2-0.2-0.3-0.3c0.3-1.3,1.6-1.3,2.4-1.6
+		C145.7,122,192.5,102,239.2,82c1.8-0.8,3.3-1.2,5.3-0.5c54.2,20.4,108.4,40.7,162.6,61.1c0.6,0.2,1.4,0.1,1.6,1.4
+		c-9.4,3.6-19.1,6.7-28.3,10.8c-7.3,3.3-13.5,2.9-20.8-0.6c-19.6-9.4-39.6-17.9-59.4-26.9c-4.8-2.2-9.2-2.3-14.1-0.1
+		c-15.8,6.9-31.7,13.5-47.5,20.3c-7.7,3.3-11,9.6-8.7,16.4c1.5,4.4,4.7,6.9,8.8,8.5c13.9,5.7,27.7,11.5,41.5,17.2
+		c0.8,0.4,1.8,0.4,2.5,1.6C269.5,196.2,256.4,201,243.3,206z M332.7,199.7c7.9-2.9,15.8-5.9,24.1-8.9c0,20.3,0,40.2,0,60.2
+		c0,1.6-0.6,2.3-2.1,2.8c-7.7,2.8-15.4,5.7-23.5,8.8c0-20.4,0-40.2,0-60C331.2,201.3,331.2,200.2,332.7,199.7z M319.5,177.4
+		c-1,0.4-1.8,0-2.6-0.3c-13.8-5.7-27.6-11.4-42-17.3c6-2.6,11.4-4.9,16.9-7.3c1.3-0.6,2.3,0.1,3.4,0.6c13.3,5.9,26.6,11.9,40.7,18.2
+		C329.9,173.5,324.7,175.4,319.5,177.4z M430,365.9c-57.2,21.4-114.4,42.8-171.7,64.3c-1.1,0.4-2.2,0.8-3.7,1.3v-4.2
+		c0-64.8,0-129.6-0.1-194.3c0-3,0.8-4.3,3.7-5.4c14.7-5.3,29.3-10.9,44-16.3c1.1-0.4,2.2-0.8,3.5-1.2c0,23.3,0,46.3,0,69.3
+		c0,6,2.1,10.6,7.7,13.2c2.8,1.3,5.7,1.6,8.5,0.6c17.4-6.4,34.8-12.9,52.1-19.5c6.1-2.3,8.3-7.4,8.3-13.7c-0.1-24.9,0-49.8-0.1-74.6
+		c0-3.1,0.7-4.6,3.8-5.7c15.7-5.6,31.3-11.6,47.4-17.6v3.7c0,65,0,130.1,0.1,195.1C433.5,363.7,432.6,364.9,430,365.9z M170.1,354.3
+		c-16.9-7.3-33.9-14.4-50.8-21.6c-1.6-0.7-3.3-0.9-5-1c-6.1-0.1-11.3,4.1-12.6,10.2c-1.3,5.7,1.7,11.6,7.6,14.2
+		c16.9,7.3,33.9,14.5,50.8,21.6c2,0.8,4,1.3,6.2,1c6.2-0.9,10.7-5.1,11.6-10.9C178.7,362.2,175.8,356.7,170.1,354.3z M170.1,354.3
+		c-16.9-7.3-33.9-14.4-50.8-21.6c-1.6-0.7-3.3-0.9-5-1c-6.1-0.1-11.3,4.1-12.6,10.2c-1.3,5.7,1.7,11.6,7.6,14.2
+		c16.9,7.3,33.9,14.5,50.8,21.6c2,0.8,4,1.3,6.2,1c6.2-0.9,10.7-5.1,11.6-10.9C178.7,362.2,175.8,356.7,170.1,354.3z M170.1,354.3
+		c-16.9-7.3-33.9-14.4-50.8-21.6c-1.6-0.7-3.3-0.9-5-1c-6.1-0.1-11.3,4.1-12.6,10.2c-1.3,5.7,1.7,11.6,7.6,14.2
+		c16.9,7.3,33.9,14.5,50.8,21.6c2,0.8,4,1.3,6.2,1c6.2-0.9,10.7-5.1,11.6-10.9C178.7,362.2,175.8,356.7,170.1,354.3z"/>
+	<path class="st0" d="M177.9,367.8c-0.9,5.8-5.4,10-11.6,10.9c-2.2,0.3-4.2-0.2-6.2-1c-17-7.2-33.9-14.3-50.8-21.6
+		c-6-2.6-8.9-8.5-7.6-14.2c1.4-6,6.6-10.2,12.6-10.2c1.7,0.1,3.4,0.3,5,1c16.9,7.2,33.9,14.3,50.8,21.6
+		C175.8,356.7,178.7,362.2,177.9,367.8z"/>
+	<path class="st0" d="M177.9,367.8c-0.9,5.8-5.4,10-11.6,10.9c-2.2,0.3-4.2-0.2-6.2-1c-17-7.2-33.9-14.3-50.8-21.6
+		c-6-2.6-8.9-8.5-7.6-14.2c1.4-6,6.6-10.2,12.6-10.2c1.7,0.1,3.4,0.3,5,1c16.9,7.2,33.9,14.3,50.8,21.6
+		C175.8,356.7,178.7,362.2,177.9,367.8z"/>
+</g>
+</svg>
diff --git a/public/images/BOX_DELIVERY_GREEN.svg b/public/images/BOX_DELIVERY_GREEN.svg
new file mode 100644
index 00000000..45ae81c4
--- /dev/null
+++ b/public/images/BOX_DELIVERY_GREEN.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#15803D;}
+</style>
+<g>
+	<path class="st0" d="M60.6,304.1c0.2,4.8-2.9,8.6-7.8,8.9c-4.5,0.3-9.1,0.2-13.6,0c-3.8-0.2-5.8-3-7.8-5.8c0.4-0.1,0.9-0.2,1.2,0.2
+		c5.5,6.9,13.2,4.7,20.2,4.3c4.4-0.2,6.6-3.5,6.4-7.6c-0.2-4-2.9-6.5-7.3-6.8c-3.5-0.2-7.1-0.1-10.7,0c-3,0-5.6,1-7.5,3.4
+		c-0.6,0.7-1.1,1.7-2.4,1.4c2.3-4.5,5.9-6.5,11.1-6.1c3.2,0.3,6.5,0,9.8,0.1C57.1,296.3,60.4,299.6,60.6,304.1z"/>
+	<path class="st0" d="M74.9,251.7c-4.7,0.1-8.6-3.7-8.6-8.5c0-4.7,3.6-8.4,8.2-8.5c4.7-0.1,8.8,3.8,8.8,8.5
+		C83.2,247.6,79.4,251.5,74.9,251.7z"/>
+	<path class="st0" d="M468.4,258.1c0.1,4.7-3.9,8.7-8.6,8.6c-4.8,0-8.6-4-8.4-8.8c0.1-4.6,3.9-8.2,8.6-8.1
+		C464.6,249.8,468.3,253.5,468.4,258.1z"/>
+	<path class="st0" d="M468.5,327.6c-0.3-11.4-0.1-22.8-0.1-34.1c0-5.9-3.4-9.6-8.5-9.5c-5.2,0-8.5,3.6-8.5,9.6
+		c-0.1,9.3-0.2,18.5,0.1,27.7c0.1,3.4-1.1,5-3.9,6.5c-28.8,15.7-57.5,31.5-86.2,47.2c-13,7.2-26.1,14.3-39.6,21.7
+		c-0.1-1.1-0.2-1.5-0.2-2c0-45.5,0-91-0.1-136.5c0-2.6,0.9-3.7,3.1-4.8c5.3-2.7,10.5-5.7,15.7-8.6c7.3-4,14.6-8,21.9-12
+		c1,1.7,0.6,3.1,0.6,4.5c0,9.8,0,19.6,0,29.4c0.1,8.8,6.4,12.5,14.1,8.3c9.5-5.2,18.9-10.5,28.4-15.5c4.2-2.3,6.2-5.3,6.1-10.2
+		c-0.2-12.8,0.1-25.6-0.2-38.4c-0.1-3.7,0.8-5.8,4.3-7.6c10.9-5.6,21.4-11.6,32.2-17.4c1.1-0.6,2-1.7,3.6-1.3v33.6
+		c0,1.6,0,3.1,0,4.7c0.1,5.9,3.4,9.7,8.5,9.7s8.6-3.8,8.6-9.6c0-17.1-0.1-34.1,0.1-51.2c0.1-5.4-2.1-8.7-6.7-11.2
+		c-47.5-26-95-52.1-142.5-78.2c-4.5-2.5-8.3-2.3-12.7,0.2c-20.3,11.3-40.8,22.4-61.1,33.6c-27.3,15-54.7,30.1-82,45
+		c-3.9,2.1-5.9,5.1-5.7,9.6c0.1,4-0.2,8,0.1,11.9c0.2,3.2-0.6,4.3-4.1,4.2c-30.2-0.1-60.3-0.1-90.5-0.1c-1.6,0-3.1-0.1-4.7,0.1
+		c-4.8,0.4-8,4.2-7.7,9c0.3,5,4,8,10.1,8c30.7,0,61.4,0.1,92.2-0.1c4.1,0,4.8,1.2,4.7,4.9c-0.3,7.1-0.3,14.2,0,21.3
+		c0.1,3.6-0.6,4.8-4.5,4.7c-14.5-0.3-29-0.2-43.5-0.1c-6.4,0-10.1,4.2-9.3,9.9c0.7,4.4,4.2,7.1,9.6,7.1c14.6,0,29.3,0.1,43.9-0.1
+		c2.9,0,3.8,0.6,3.8,3.7c-0.2,12.4-0.2,24.7,0,37.1c0,3-0.7,3.8-3.7,3.8C133.1,296,112.1,296,91,296c-2,0-4-0.1-6,0.1
+		c-3.8,0.4-6.9,3.4-7.4,7.2c-0.5,4,1.2,6.9,4.7,8.8c1.8,1,3.8,1,5.8,1c22.1,0,44.1,0,66.1-0.1c2.6,0,3.8,0.5,3.6,3.4
+		c-0.3,3.8,0.1,7.7-0.1,11.5c-0.3,5.3,1.8,8.7,6.6,11.2c47.7,26,95.3,52.2,142.8,78.4c4.2,2.3,7.8,2.4,12,0c9-5.1,18.1-10,27.2-15
+		c38.4-21.1,76.8-42.2,115.3-63.2C466.5,336.8,468.7,333.3,468.5,327.6z M392.5,247c-4,2.1-7.9,4.3-12.6,6.8c0-10.3,0-20,0-29.7
+		c0-1.1,0.7-1.5,1.4-1.9c4.1-2.3,8.2-4.5,13-7.1c0,10.1,0,19.5,0,28.9C394.3,245.5,393.8,246.4,392.5,247z M311.2,99.5
+		c1.4-0.8,2.5-0.8,3.9,0c42,23.1,84,46.2,125.9,69.3c0.2,0.1,0.4,0.4,0.8,0.7c-12.4,6.8-24.7,13.5-36.9,20.3c-2.2,1.2-3.5,0-5-0.8
+		c-28.5-15.6-56.9-31.3-85.4-46.9c-13.3-7.3-26.6-14.6-40.4-22.2C286.9,112.9,299,106.3,311.2,99.5z M254.8,130.5
+		c2-1.2,3.2,0.1,4.6,0.9c30.1,16.5,60.1,33,90.2,49.5c10.9,6,21.9,12,32.8,18c0.8,0.5,1.6,1,3,1.7c-4.6,2.5-8.7,4.7-12.7,7
+		c-2.1,1.2-3.2-0.5-4.6-1.3c-30.3-16.6-60.6-33.3-90.9-49.9c-10.2-5.6-20.4-11.2-30.6-16.8c-1.2-0.7-2.3-1.4-3.9-2.4
+		C247,134.8,251,132.8,254.8,130.5z M304.6,394.5c0,0.5-0.1,1.1-0.2,2.1c-5-2.7-9.7-5.2-14.4-7.8c-37.3-20.5-74.6-41-111.9-61.4
+		c-2.1-1.2-3.4-2.2-3.4-5c0.1-45.4,0.1-90.7,0.1-136.1c0-0.6,0.1-1.1,0.1-1.7c1.2-0.7,1.9,0.3,2.7,0.7c41.3,22.6,82.5,45.3,123.8,68
+		c2,1.1,3.3,2,3.2,4.7C304.5,303.5,304.6,349,304.6,394.5z M314.6,239.4c-1.4,0.7-2.4,0.3-3.6-0.4c-42-23.1-84-46.2-126-69.3
+		c-0.2-0.1-0.3-0.3-0.6-0.7c12.9-7.1,25.7-14,38.4-21.2c2.1-1.2,3.5,0,5,0.9c29.6,16.2,59.2,32.5,88.7,48.8
+		c12.2,6.7,24.3,13.4,37,20.3C340.3,225.3,327.5,232.3,314.6,239.4z"/>
+	<path class="st0" d="M52.9,313c-4.5,0.3-9.1,0.2-13.6,0c-3.8-0.2-5.8-3-7.8-5.8v-5.1c2.3-4.5,5.9-6.5,11.1-6.1
+		c3.2,0.3,6.5,0,9.8,0.1c4.8,0.2,8.1,3.5,8.3,8C60.8,308.9,57.7,312.7,52.9,313z"/>
+	<path class="st0" d="M468.5,327.6c-0.3-11.4-0.1-22.8-0.1-34.1c0-5.9-3.4-9.6-8.5-9.5c-5.2,0-8.5,3.6-8.5,9.6
+		c-0.1,9.3-0.2,18.5,0.1,27.7c0.1,3.4-1.1,5-3.9,6.5c-28.8,15.7-57.5,31.5-86.2,47.2c-13,7.2-26.1,14.3-39.6,21.7
+		c-0.1-1.1-0.2-1.5-0.2-2c0-45.5,0-91-0.1-136.5c0-2.6,0.9-3.7,3.1-4.8c5.3-2.7,10.5-5.7,15.7-8.6c7.3-4,14.6-8,21.9-12
+		c1,1.7,0.6,3.1,0.6,4.5c0,9.8,0,19.6,0,29.4c0.1,8.8,6.4,12.5,14.1,8.3c9.5-5.2,18.9-10.5,28.4-15.5c4.2-2.3,6.2-5.3,6.1-10.2
+		c-0.2-12.8,0.1-25.6-0.2-38.4c-0.1-3.7,0.8-5.8,4.3-7.6c10.9-5.6,21.4-11.6,32.2-17.4c1.1-0.6,2-1.7,3.6-1.3v33.6
+		c0,1.6,0,3.1,0,4.7c0.1,5.9,3.4,9.7,8.5,9.7s8.6-3.8,8.6-9.6c0-17.1-0.1-34.1,0.1-51.2c0.1-5.4-2.1-8.7-6.7-11.2
+		c-47.5-26-95-52.1-142.5-78.2c-4.5-2.5-8.3-2.3-12.7,0.2c-20.3,11.3-40.8,22.4-61.1,33.6c-27.3,15-54.7,30.1-82,45
+		c-3.9,2.1-5.9,5.1-5.7,9.6c0.1,4-0.2,8,0.1,11.9c0.2,3.2-0.6,4.3-4.1,4.2c-30.2-0.1-60.3-0.1-90.5-0.1c-1.6,0-3.1-0.1-4.7,0.1
+		c-4.8,0.4-8,4.2-7.7,9c0.3,5,4,8,10.1,8c30.7,0,61.4,0.1,92.2-0.1c4.1,0,4.8,1.2,4.7,4.9c-0.3,7.1-0.3,14.2,0,21.3
+		c0.1,3.6-0.6,4.8-4.5,4.7c-14.5-0.3-29-0.2-43.5-0.1c-6.4,0-10.1,4.2-9.3,9.9c0.7,4.4,4.2,7.1,9.6,7.1c14.6,0,29.3,0.1,43.9-0.1
+		c2.9,0,3.8,0.6,3.8,3.7c-0.2,12.4-0.2,24.7,0,37.1c0,3-0.7,3.8-3.7,3.8C133.1,296,112.1,296,91,296c-2,0-4-0.1-6,0.1
+		c-3.8,0.4-6.9,3.4-7.4,7.2c-0.5,4,1.2,6.9,4.7,8.8c1.8,1,3.8,1,5.8,1c22.1,0,44.1,0,66.1-0.1c2.6,0,3.8,0.5,3.6,3.4
+		c-0.3,3.8,0.1,7.7-0.1,11.5c-0.3,5.3,1.8,8.7,6.6,11.2c47.7,26,95.3,52.2,142.8,78.4c4.2,2.3,7.8,2.4,12,0c9-5.1,18.1-10,27.2-15
+		c38.4-21.1,76.8-42.2,115.3-63.2C466.5,336.8,468.7,333.3,468.5,327.6z M392.5,247c-4,2.1-7.9,4.3-12.6,6.8c0-10.3,0-20,0-29.7
+		c0-1.1,0.7-1.5,1.4-1.9c4.1-2.3,8.2-4.5,13-7.1c0,10.1,0,19.5,0,28.9C394.3,245.5,393.8,246.4,392.5,247z M311.2,99.5
+		c1.4-0.8,2.5-0.8,3.9,0c42,23.1,84,46.2,125.9,69.3c0.2,0.1,0.4,0.4,0.8,0.7c-12.4,6.8-24.7,13.5-36.9,20.3c-2.2,1.2-3.5,0-5-0.8
+		c-28.5-15.6-56.9-31.3-85.4-46.9c-13.3-7.3-26.6-14.6-40.4-22.2C286.9,112.9,299,106.3,311.2,99.5z M254.8,130.5
+		c2-1.2,3.2,0.1,4.6,0.9c30.1,16.5,60.1,33,90.2,49.5c10.9,6,21.9,12,32.8,18c0.8,0.5,1.6,1,3,1.7c-4.6,2.5-8.7,4.7-12.7,7
+		c-2.1,1.2-3.2-0.5-4.6-1.3c-30.3-16.6-60.6-33.3-90.9-49.9c-10.2-5.6-20.4-11.2-30.6-16.8c-1.2-0.7-2.3-1.4-3.9-2.4
+		C247,134.8,251,132.8,254.8,130.5z M304.6,394.5c0,0.5-0.1,1.1-0.2,2.1c-5-2.7-9.7-5.2-14.4-7.8c-37.3-20.5-74.6-41-111.9-61.4
+		c-2.1-1.2-3.4-2.2-3.4-5c0.1-45.4,0.1-90.7,0.1-136.1c0-0.6,0.1-1.1,0.1-1.7c1.2-0.7,1.9,0.3,2.7,0.7c41.3,22.6,82.5,45.3,123.8,68
+		c2,1.1,3.3,2,3.2,4.7C304.5,303.5,304.6,349,304.6,394.5z M314.6,239.4c-1.4,0.7-2.4,0.3-3.6-0.4c-42-23.1-84-46.2-126-69.3
+		c-0.2-0.1-0.3-0.3-0.6-0.7c12.9-7.1,25.7-14,38.4-21.2c2.1-1.2,3.5,0,5,0.9c29.6,16.2,59.2,32.5,88.7,48.8
+		c12.2,6.7,24.3,13.4,37,20.3C340.3,225.3,327.5,232.3,314.6,239.4z"/>
+	<path class="st0" d="M83.3,243.1c0,4.5-3.8,8.4-8.3,8.5c-4.7,0.1-8.6-3.7-8.6-8.5c0-4.7,3.6-8.4,8.2-8.5
+		C79.2,234.6,83.3,238.5,83.3,243.1z"/>
+	<path class="st0" d="M468.4,258.1c0.1,4.7-3.9,8.7-8.6,8.6c-4.8,0-8.6-4-8.4-8.8c0.1-4.6,3.9-8.2,8.6-8.1
+		C464.6,249.8,468.3,253.5,468.4,258.1z"/>
+</g>
+</svg>
diff --git a/public/images/BOX_DELIVER_(1).svg b/public/images/BOX_DELIVER_(1).svg
new file mode 100644
index 00000000..c4a9d809
--- /dev/null
+++ b/public/images/BOX_DELIVER_(1).svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FAD147;}
+	.st1{fill:#F8C20A;}
+</style>
+<g>
+	<path class="st0" d="M60.6,304.1c0.2,4.8-2.9,8.6-7.8,8.9c-4.5,0.3-9.1,0.2-13.6,0c-3.8-0.2-5.8-3-7.8-5.8c0.4-0.1,0.9-0.2,1.2,0.2
+		c5.5,6.9,13.2,4.7,20.2,4.3c4.4-0.2,6.6-3.5,6.4-7.6c-0.2-4-2.9-6.5-7.3-6.8c-3.5-0.2-7.1-0.1-10.7,0c-3,0-5.6,1-7.5,3.4
+		c-0.6,0.7-1.1,1.7-2.4,1.4c2.3-4.5,5.9-6.5,11.1-6.1c3.2,0.3,6.5,0,9.8,0.1C57.1,296.3,60.4,299.6,60.6,304.1z"/>
+	<path class="st0" d="M74.9,251.7c-4.7,0.1-8.6-3.7-8.6-8.5c0-4.7,3.6-8.4,8.2-8.5c4.7-0.1,8.8,3.8,8.8,8.5
+		C83.2,247.6,79.4,251.5,74.9,251.7z"/>
+	<path class="st0" d="M468.4,258.1c0.1,4.7-3.9,8.7-8.6,8.6c-4.8,0-8.6-4-8.4-8.8c0.1-4.6,3.9-8.2,8.6-8.1
+		C464.6,249.8,468.3,253.5,468.4,258.1z"/>
+	<path class="st0" d="M468.5,327.6c-0.3-11.4-0.1-22.8-0.1-34.1c0-5.9-3.4-9.6-8.5-9.5c-5.2,0-8.5,3.6-8.5,9.6
+		c-0.1,9.3-0.2,18.5,0.1,27.7c0.1,3.4-1.1,5-3.9,6.5c-28.8,15.7-57.5,31.5-86.2,47.2c-13,7.2-26.1,14.3-39.6,21.7
+		c-0.1-1.1-0.2-1.5-0.2-2c0-45.5,0-91-0.1-136.5c0-2.6,0.9-3.7,3.1-4.8c5.3-2.7,10.5-5.7,15.7-8.6c7.3-4,14.6-8,21.9-12
+		c1,1.7,0.6,3.1,0.6,4.5c0,9.8,0,19.6,0,29.4c0.1,8.8,6.4,12.5,14.1,8.3c9.5-5.2,18.9-10.5,28.4-15.5c4.2-2.3,6.2-5.3,6.1-10.2
+		c-0.2-12.8,0.1-25.6-0.2-38.4c-0.1-3.7,0.8-5.8,4.3-7.6c10.9-5.6,21.4-11.6,32.2-17.4c1.1-0.6,2-1.7,3.6-1.3v33.6
+		c0,1.6,0,3.1,0,4.7c0.1,5.9,3.4,9.7,8.5,9.7s8.6-3.8,8.6-9.6c0-17.1-0.1-34.1,0.1-51.2c0.1-5.4-2.1-8.7-6.7-11.2
+		c-47.5-26-95-52.1-142.5-78.2c-4.5-2.5-8.3-2.3-12.7,0.2c-20.3,11.3-40.8,22.4-61.1,33.6c-27.3,15-54.7,30.1-82,45
+		c-3.9,2.1-5.9,5.1-5.7,9.6c0.1,4-0.2,8,0.1,11.9c0.2,3.2-0.6,4.3-4.1,4.2c-30.2-0.1-60.3-0.1-90.5-0.1c-1.6,0-3.1-0.1-4.7,0.1
+		c-4.8,0.4-8,4.2-7.7,9c0.3,5,4,8,10.1,8c30.7,0,61.4,0.1,92.2-0.1c4.1,0,4.8,1.2,4.7,4.9c-0.3,7.1-0.3,14.2,0,21.3
+		c0.1,3.6-0.6,4.8-4.5,4.7c-14.5-0.3-29-0.2-43.5-0.1c-6.4,0-10.1,4.2-9.3,9.9c0.7,4.4,4.2,7.1,9.6,7.1c14.6,0,29.3,0.1,43.9-0.1
+		c2.9,0,3.8,0.6,3.8,3.7c-0.2,12.4-0.2,24.7,0,37.1c0,3-0.7,3.8-3.7,3.8C133.1,296,112.1,296,91,296c-2,0-4-0.1-6,0.1
+		c-3.8,0.4-6.9,3.4-7.4,7.2c-0.5,4,1.2,6.9,4.7,8.8c1.8,1,3.8,1,5.8,1c22.1,0,44.1,0,66.1-0.1c2.6,0,3.8,0.5,3.6,3.4
+		c-0.3,3.8,0.1,7.7-0.1,11.5c-0.3,5.3,1.8,8.7,6.6,11.2c47.7,26,95.3,52.2,142.8,78.4c4.2,2.3,7.8,2.4,12,0c9-5.1,18.1-10,27.2-15
+		c38.4-21.1,76.8-42.2,115.3-63.2C466.5,336.8,468.7,333.3,468.5,327.6z M392.5,247c-4,2.1-7.9,4.3-12.6,6.8c0-10.3,0-20,0-29.7
+		c0-1.1,0.7-1.5,1.4-1.9c4.1-2.3,8.2-4.5,13-7.1c0,10.1,0,19.5,0,28.9C394.3,245.5,393.8,246.4,392.5,247z M311.2,99.5
+		c1.4-0.8,2.5-0.8,3.9,0c42,23.1,84,46.2,125.9,69.3c0.2,0.1,0.4,0.4,0.8,0.7c-12.4,6.8-24.7,13.5-36.9,20.3c-2.2,1.2-3.5,0-5-0.8
+		c-28.5-15.6-56.9-31.3-85.4-46.9c-13.3-7.3-26.6-14.6-40.4-22.2C286.9,112.9,299,106.3,311.2,99.5z M254.8,130.5
+		c2-1.2,3.2,0.1,4.6,0.9c30.1,16.5,60.1,33,90.2,49.5c10.9,6,21.9,12,32.8,18c0.8,0.5,1.6,1,3,1.7c-4.6,2.5-8.7,4.7-12.7,7
+		c-2.1,1.2-3.2-0.5-4.6-1.3c-30.3-16.6-60.6-33.3-90.9-49.9c-10.2-5.6-20.4-11.2-30.6-16.8c-1.2-0.7-2.3-1.4-3.9-2.4
+		C247,134.8,251,132.8,254.8,130.5z M304.6,394.5c0,0.5-0.1,1.1-0.2,2.1c-5-2.7-9.7-5.2-14.4-7.8c-37.3-20.5-74.6-41-111.9-61.4
+		c-2.1-1.2-3.4-2.2-3.4-5c0.1-45.4,0.1-90.7,0.1-136.1c0-0.6,0.1-1.1,0.1-1.7c1.2-0.7,1.9,0.3,2.7,0.7c41.3,22.6,82.5,45.3,123.8,68
+		c2,1.1,3.3,2,3.2,4.7C304.5,303.5,304.6,349,304.6,394.5z M314.6,239.4c-1.4,0.7-2.4,0.3-3.6-0.4c-42-23.1-84-46.2-126-69.3
+		c-0.2-0.1-0.3-0.3-0.6-0.7c12.9-7.1,25.7-14,38.4-21.2c2.1-1.2,3.5,0,5,0.9c29.6,16.2,59.2,32.5,88.7,48.8
+		c12.2,6.7,24.3,13.4,37,20.3C340.3,225.3,327.5,232.3,314.6,239.4z"/>
+	<path class="st0" d="M52.9,313c-4.5,0.3-9.1,0.2-13.6,0c-3.8-0.2-5.8-3-7.8-5.8v-5.1c2.3-4.5,5.9-6.5,11.1-6.1
+		c3.2,0.3,6.5,0,9.8,0.1c4.8,0.2,8.1,3.5,8.3,8C60.8,308.9,57.7,312.7,52.9,313z"/>
+	<path class="st1" d="M468.5,327.6c-0.3-11.4-0.1-22.8-0.1-34.1c0-5.9-3.4-9.6-8.5-9.5c-5.2,0-8.5,3.6-8.5,9.6
+		c-0.1,9.3-0.2,18.5,0.1,27.7c0.1,3.4-1.1,5-3.9,6.5c-28.8,15.7-57.5,31.5-86.2,47.2c-13,7.2-26.1,14.3-39.6,21.7
+		c-0.1-1.1-0.2-1.5-0.2-2c0-45.5,0-91-0.1-136.5c0-2.6,0.9-3.7,3.1-4.8c5.3-2.7,10.5-5.7,15.7-8.6c7.3-4,14.6-8,21.9-12
+		c1,1.7,0.6,3.1,0.6,4.5c0,9.8,0,19.6,0,29.4c0.1,8.8,6.4,12.5,14.1,8.3c9.5-5.2,18.9-10.5,28.4-15.5c4.2-2.3,6.2-5.3,6.1-10.2
+		c-0.2-12.8,0.1-25.6-0.2-38.4c-0.1-3.7,0.8-5.8,4.3-7.6c10.9-5.6,21.4-11.6,32.2-17.4c1.1-0.6,2-1.7,3.6-1.3v33.6
+		c0,1.6,0,3.1,0,4.7c0.1,5.9,3.4,9.7,8.5,9.7s8.6-3.8,8.6-9.6c0-17.1-0.1-34.1,0.1-51.2c0.1-5.4-2.1-8.7-6.7-11.2
+		c-47.5-26-95-52.1-142.5-78.2c-4.5-2.5-8.3-2.3-12.7,0.2c-20.3,11.3-40.8,22.4-61.1,33.6c-27.3,15-54.7,30.1-82,45
+		c-3.9,2.1-5.9,5.1-5.7,9.6c0.1,4-0.2,8,0.1,11.9c0.2,3.2-0.6,4.3-4.1,4.2c-30.2-0.1-60.3-0.1-90.5-0.1c-1.6,0-3.1-0.1-4.7,0.1
+		c-4.8,0.4-8,4.2-7.7,9c0.3,5,4,8,10.1,8c30.7,0,61.4,0.1,92.2-0.1c4.1,0,4.8,1.2,4.7,4.9c-0.3,7.1-0.3,14.2,0,21.3
+		c0.1,3.6-0.6,4.8-4.5,4.7c-14.5-0.3-29-0.2-43.5-0.1c-6.4,0-10.1,4.2-9.3,9.9c0.7,4.4,4.2,7.1,9.6,7.1c14.6,0,29.3,0.1,43.9-0.1
+		c2.9,0,3.8,0.6,3.8,3.7c-0.2,12.4-0.2,24.7,0,37.1c0,3-0.7,3.8-3.7,3.8C133.1,296,112.1,296,91,296c-2,0-4-0.1-6,0.1
+		c-3.8,0.4-6.9,3.4-7.4,7.2c-0.5,4,1.2,6.9,4.7,8.8c1.8,1,3.8,1,5.8,1c22.1,0,44.1,0,66.1-0.1c2.6,0,3.8,0.5,3.6,3.4
+		c-0.3,3.8,0.1,7.7-0.1,11.5c-0.3,5.3,1.8,8.7,6.6,11.2c47.7,26,95.3,52.2,142.8,78.4c4.2,2.3,7.8,2.4,12,0c9-5.1,18.1-10,27.2-15
+		c38.4-21.1,76.8-42.2,115.3-63.2C466.5,336.8,468.7,333.3,468.5,327.6z M392.5,247c-4,2.1-7.9,4.3-12.6,6.8c0-10.3,0-20,0-29.7
+		c0-1.1,0.7-1.5,1.4-1.9c4.1-2.3,8.2-4.5,13-7.1c0,10.1,0,19.5,0,28.9C394.3,245.5,393.8,246.4,392.5,247z M311.2,99.5
+		c1.4-0.8,2.5-0.8,3.9,0c42,23.1,84,46.2,125.9,69.3c0.2,0.1,0.4,0.4,0.8,0.7c-12.4,6.8-24.7,13.5-36.9,20.3c-2.2,1.2-3.5,0-5-0.8
+		c-28.5-15.6-56.9-31.3-85.4-46.9c-13.3-7.3-26.6-14.6-40.4-22.2C286.9,112.9,299,106.3,311.2,99.5z M254.8,130.5
+		c2-1.2,3.2,0.1,4.6,0.9c30.1,16.5,60.1,33,90.2,49.5c10.9,6,21.9,12,32.8,18c0.8,0.5,1.6,1,3,1.7c-4.6,2.5-8.7,4.7-12.7,7
+		c-2.1,1.2-3.2-0.5-4.6-1.3c-30.3-16.6-60.6-33.3-90.9-49.9c-10.2-5.6-20.4-11.2-30.6-16.8c-1.2-0.7-2.3-1.4-3.9-2.4
+		C247,134.8,251,132.8,254.8,130.5z M304.6,394.5c0,0.5-0.1,1.1-0.2,2.1c-5-2.7-9.7-5.2-14.4-7.8c-37.3-20.5-74.6-41-111.9-61.4
+		c-2.1-1.2-3.4-2.2-3.4-5c0.1-45.4,0.1-90.7,0.1-136.1c0-0.6,0.1-1.1,0.1-1.7c1.2-0.7,1.9,0.3,2.7,0.7c41.3,22.6,82.5,45.3,123.8,68
+		c2,1.1,3.3,2,3.2,4.7C304.5,303.5,304.6,349,304.6,394.5z M314.6,239.4c-1.4,0.7-2.4,0.3-3.6-0.4c-42-23.1-84-46.2-126-69.3
+		c-0.2-0.1-0.3-0.3-0.6-0.7c12.9-7.1,25.7-14,38.4-21.2c2.1-1.2,3.5,0,5,0.9c29.6,16.2,59.2,32.5,88.7,48.8
+		c12.2,6.7,24.3,13.4,37,20.3C340.3,225.3,327.5,232.3,314.6,239.4z"/>
+	<path class="st0" d="M83.3,243.1c0,4.5-3.8,8.4-8.3,8.5c-4.7,0.1-8.6-3.7-8.6-8.5c0-4.7,3.6-8.4,8.2-8.5
+		C79.2,234.6,83.3,238.5,83.3,243.1z"/>
+	<path class="st0" d="M468.4,258.1c0.1,4.7-3.9,8.7-8.6,8.6c-4.8,0-8.6-4-8.4-8.8c0.1-4.6,3.9-8.2,8.6-8.1
+		C464.6,249.8,468.3,253.5,468.4,258.1z"/>
+</g>
+</svg>
diff --git a/public/images/icon/icon_daftar_alamat.svg b/public/images/icon/icon_daftar_alamat.svg
new file mode 100644
index 00000000..294f4e5e
--- /dev/null
+++ b/public/images/icon/icon_daftar_alamat.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M449.8,240.2c-2.4,6.1-8.7,10.5-15.2,9.6c-3.5-0.5-7.1-2.2-9.9-4.3c-6.7-4.9-12.9-10.5-20.2-16.5v6.1
+		c0,45.2,0,90.4,0,135.6c0,21-12.7,33.7-33.6,33.7c-9,0-18,0-27,0c-9.8-0.1-16.7-6.6-16.6-15.6c0.1-8.8,6.9-15.2,16.4-15.3
+		c9.5-0.1,19,0,28.5-0.1c0.3,0,0.6-0.2,1.4-0.5V368c0-53.3,0-106.5,0-159.8c0-2.8-0.3-5-2.8-7.1c-39.7-33.1-79.2-66.2-118.8-99.4
+		c-0.6-0.5-1.2-0.9-2.1-1.6c-14.2,11.8-28.2,23.6-42.3,35.3c-25.8,21.6-51.5,43.2-77.4,64.7c-2.9,2.4-4,4.8-4,8.5
+		c0.1,52.9,0.1,105.9,0.1,158.8v6c7.7,0,15.2,0,22.7,0c3.1,0,6.1-0.1,9.2,0.1c8.1,0.5,14.4,7.3,14.5,15.3c0,8-6.2,15.2-14.3,15.4
+		c-11.6,0.3-23.2,0.6-34.7-0.1c-16.3-0.9-28.2-14.6-28.2-31.7c-0.1-45.5,0-91.1,0-136.6v-7.1c-7.6,6.4-14.3,12.1-21.1,17.6
+		c-5.3,4.3-12.1,4.8-17.6,1.4c-5.5-3.4-8.8-8.7-7.3-15c1-4,3.5-8.5,6.7-11.1c37.1-31.3,74.5-62.3,111.9-93.4
+		c23.5-19.6,47-39.1,70.5-58.7c8-6.7,14.9-6.8,22.9-0.1c60.8,50.6,121.6,101.3,182.4,152C450.4,226.9,452.4,233.4,449.8,240.2z"/>
+	<path d="M326.4,285.9c-4.7-35.5-32.4-62.3-69.1-66.6c-33.7-4-67.7,17.4-79.8,50.1c-7.7,20.8-5.5,41.5,0.6,62
+		c11.2,37.8,33.2,69.3,59.6,97.9c7.6,8.3,16.9,8.2,24.7-0.2c18.5-19.8,34.4-41.6,46.7-65.9c10.6-20.9,17.7-42.7,18.2-68.1
+		C327.1,293.3,326.9,289.6,326.4,285.9z M296,304.3c-1.8,14.2-6,27.6-12.1,40.5c-8.8,18.6-20.3,35.4-34.5,52.5
+		c-8.5-12.5-17-24-24.5-36.1c-10.7-17.4-18.3-36-20.9-56.5c-3.6-28.7,16.3-53.7,43.9-54.7C277.6,248.9,299.7,274.1,296,304.3z"/>
+	<path d="M265.4,297.1c-0.5,8.4-7.7,15-16.1,14.6c-8.4-0.4-15-7.6-14.7-16c0.3-8.6,7.8-15.3,16.4-14.8
+		C259.2,281.3,265.8,288.8,265.4,297.1z"/>
+</g>
+</svg>
diff --git a/public/images/icon/icon_daftar_quotation.svg b/public/images/icon/icon_daftar_quotation.svg
new file mode 100644
index 00000000..aab22634
--- /dev/null
+++ b/public/images/icon/icon_daftar_quotation.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M463.2,156.5c0-13.4-4.5-24.5-14-33.9c-24-23.9-48-47.9-71.9-71.9c-9.4-9.5-20.5-14-33.9-14c-56.2,0.1-112.4,0-168.6,0.1
+		c-26.9,0-45,18.1-45,44.9c0,30.7,0,61.4,0,92v5.5c-1.6,0.5-3,0.8-4.3,1.2c-50.3,13.9-86.2,58.4-88.6,109.6
+		c-2.7,56.9,33.5,107,88.4,122.2c3.8,1,4.6,2.5,4.6,6.2c0,26.5,18.2,44.7,44.7,44.7c81.2,0,162.4,0,243.7,0
+		c26.6,0,44.8-18.1,44.9-44.6C463.2,331.2,463.1,243.9,463.2,156.5z M354.7,64.6c26.7,26.8,53.8,54,80.5,80.8
+		c-19.9,0-41.2,0.2-62.5-0.1c-9.4-0.1-17.7-7.9-17.9-17.2C354.4,106.5,354.7,84.9,354.7,64.6z M60.1,295.6
+		c0.1-52.9,44-96.1,97.6-95.9c52.9,0.1,96.3,43.9,96.2,96.8c-0.2,53.7-43.6,97.1-97.1,96.9C103,393.3,60,349.8,60.1,295.6z
+		 M439.9,173.8c0,81.4,0,162.8,0,244.1c0,14.2-7.7,22-21.7,22c-81.4,0-162.7,0-244.1,0c-13.7,0-21.8-8.9-20.7-23
+		c39.9-0.1,73.1-14.9,98.1-46.4c18.5-23.3,26.9-50.2,25.5-79.9c-3.2-67.3-61-117.6-123.9-114.7V94.3c0-4.5,0-9,0-13.6
+		c0.1-12.5,8.1-20.6,20.6-20.6c32,0,63.9,0,95.9,0h61.8v5.2c0,19.7,0,39.4,0,59.1c0.1,25.8,18.4,44.1,44.3,44.2
+		c21.1,0.1,42.3,0,64.2,0V173.8z"/>
+	<path d="M401.1,218.9c0.1,7.1-5.3,11.7-13.6,11.7c-12.4,0-24.8,0-37.2,0c-12.1,0-24.2,0-36.3,0c-8.3,0-13.7-4.7-13.6-11.8
+		c0.1-6.9,5.3-11.5,13.3-11.5c24.7,0,49.3,0,74,0C395.8,207.4,401,212,401.1,218.9z"/>
+	<path d="M401.1,343.2c-0.1,6.7-5.3,11.5-12.9,11.5c-25,0.1-50,0.1-75,0c-7.6,0-12.8-4.8-12.8-11.5c-0.1-6.9,5.2-11.7,13.1-11.7
+		c12.6,0,25.2,0,37.7,0c12.3,0,24.5,0,36.8,0C395.9,331.5,401.2,336.3,401.1,343.2z"/>
+	<path d="M401.1,281c0,6.8-5.2,11.6-12.8,11.6c-10,0.1-20,0-30,0c-9.8,0-19.7,0-29.5,0c-7.8,0-13.1-4.9-13-11.9
+		c0.1-6.7,5.3-11.3,13-11.4c19.8,0,39.7-0.1,59.5,0C395.9,269.4,401.1,274.3,401.1,281z"/>
+	<path d="M292.6,157c0,6.6-5.1,11.5-12.3,11.6c-7.6,0.1-15.2,0-22.7,0c-7.4,0-14.8,0.1-22.2,0c-7.5-0.1-12.6-5.1-12.5-11.9
+		c0.1-6.6,5.2-11.3,12.5-11.4c15-0.1,30-0.1,44.9,0C287.5,145.4,292.6,150.4,292.6,157z"/>
+	<path d="M169.1,294.8c0,4.7-1.6,8.4-5,11.5c-7.5,6.9-14.8,13.9-22.2,20.9c-5.7,5.3-10.6,5.5-15.3,0.8c-4.6-4.6-4.8-11.4,0-16.5
+		c5.1-5.4,10.3-10.7,15.8-15.7c2.5-2.4,3.6-4.9,3.6-8.4c-0.2-12.3-0.3-24.5,0-36.8c0.2-9.3,8.5-14.7,16.3-11.1
+		c4.8,2.2,6.8,6.2,6.8,11.3c0,0.3,0,0.6,0,1v21.8C169,280.7,169,287.8,169.1,294.8z"/>
+</g>
+</svg>
diff --git a/public/images/icon/icon_daftar_transaksi.svg b/public/images/icon/icon_daftar_transaksi.svg
new file mode 100644
index 00000000..cd4cfb67
--- /dev/null
+++ b/public/images/icon/icon_daftar_transaksi.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M434.9,122.5c0-22.6-17.3-42.7-39.7-45.5c-11.3-1.4-22.9-0.8-34.4-1c-5-0.1-10,0-15.5,0c0-6.2,0.1-11.8,0-17.5
+		c-0.1-5.4-2.1-8.2-7.4-9.6c-2.5-0.7-5.1-0.8-7.7-0.8c-9.2-0.1-18.4,0.1-27.6-0.2c-1.5-0.1-3.7-1.4-4.3-2.8
+		c-9.5-21.2-26.6-30.5-49-30.7c-22.6-0.2-38.9,10.3-48.5,30.8c-1.2,2.4-2.6,2.9-4.9,2.9c-9.8-0.1-19.6-0.2-29.4,0.1
+		c-8.7,0.2-11.8,3.6-11.8,12.2c0,5.1,0,10.3,0,15.6c-14.7,0-28.7-0.2-42.6,0c-26.5,0.5-47,21.4-47,47.8c0,105.6,0,211.3,0,316.9
+		c0,19.4,9.5,32.4,26.7,40.2c4.4,2,9.2,3,13.9,4.5h288.9c1.2-0.3,2.3-0.7,3.5-1c21.6-4.1,37-21.2,37-41.9
+		C435,336,435.1,229.3,434.9,122.5z M177.5,70.5h18.5c2.9,0,5.8,0,8.7,0c8,0,11.8-2.9,13.9-10.6c3.9-13.9,15-23.5,28.3-24.5
+		c14.7-1.1,28.1,8.7,32.3,23.4c2.6,9.2,5.9,11.7,15.4,11.7c9.2,0,18.3,0,27.9,0v44.6H177.5V70.5z M412.7,439.9
+		c0,12.3-6.9,20.5-19.1,22.5c-2.5,0.4-5.2,0.6-7.8,0.6c-90.6,0-181.2,0-271.8,0c-6.4,0-12.5-1.2-17.9-4.8c-5.6-3.8-8.6-9-8.8-15.8
+		c0-1.2,0-2.5,0-3.7V126.5c0-17.8,10.1-27.9,27.9-28c12.6,0,25.1,0,37.7,0.1c0.3,0,0.6,0.2,1.7,0.5c0,8.1,0,16.2,0,24.3
+		c0,10,4.3,14.3,14.2,14.3c54,0,107.9,0,161.9,0c10.3,0,14.6-4.5,14.7-15c0-7.9,0-15.8,0-24.3h12.9c9.4,0,18.7-0.1,28.1,0
+		c16,0.2,26.3,10.8,26.3,26.8C412.7,230.2,412.7,335.1,412.7,439.9z"/>
+	<path d="M369.9,221.6c-1.9,0.4-4,0.4-5.9,0.4c-40.4,0-80.9,0-121.3,0c-1.7,0-3.4,0-5-0.2c-6.1-0.8-10-5.3-9.9-11.2
+		c0.1-5.8,4.2-10.5,10.3-11c4-0.3,8-0.1,11.9-0.1h53.3c21,0,42,0,63,0c6.5,0,10.9,3,12.4,8.2C380.3,213.9,376.4,220.4,369.9,221.6z"
+		/>
+	<path d="M378.9,390.7c-0.2,5-3.6,9.1-8.4,10.2c-1.8,0.4-3.6,0.5-5.5,0.5c-41.2,0-82.4,0-123.6,0c-2.4,0-5-0.3-7.2-1.2
+		c-4.9-1.9-7.3-7.1-6.3-12.5c1-4.9,5.3-8.6,10.9-8.8c6.6-0.2,13.2-0.1,19.8-0.1c15,0,30,0,45,0c20.4,0,40.7,0,61.1,0
+		c2.3,0,4.6,0.2,6.8,0.8C376.2,381.2,379.1,385.7,378.9,390.7z"/>
+	<path d="M368.4,311.5c-2.4,0.2-4.9,0.1-7.3,0.1c-40.1,0-80.3,0-120.4,0c-7.8,0-12.7-4-12.9-10.6c-0.3-6.9,4.3-11.6,11.8-11.6
+		c15-0.1,30,0,45-0.1c6.3,0,12.6,0,18.8,0c11.4,0,22.8,0,34.3,0c9.6,0,19.1,0,28.7,0c7,0,11.5,3.5,12.4,9.2
+		C379.8,305.2,375.2,311.1,368.4,311.5z"/>
+	<path d="M206.4,281.1c-12.6,12.1-25.3,24.1-37.9,36.1c-2,1.9-3.9,3.9-6.1,5.6c-4.8,4-10.5,3.9-14.9-0.5
+		c-7.8-7.8-15.5-15.6-23.1-23.7c-4.5-4.8-4.3-12,0.1-16.2c4.5-4.3,11-3.9,16,1c2.5,2.5,4.9,5.1,7.4,7.6c2.4,2.3,4.9,4.6,7.8,7.3
+		c11.1-10.6,22.3-21.3,33.5-31.9c2-1.9,4.6-3.7,7.3-4.4c4.9-1.4,9.9,1.3,12.4,5.8C211.4,272.4,210.7,277,206.4,281.1z"/>
+	<path d="M206.9,190.8c-14.7,14.3-29.6,28.4-44.6,42.3c-4.6,4.3-10.4,3.9-14.8-0.6c-7.6-7.6-15.1-15.2-22.5-23
+		c-5-5.3-5.1-12.4-0.5-16.8c4.4-4.2,11.3-3.6,16.4,1.5c4.6,4.7,9.2,9.4,13.8,14.1c0.1,0.1,0.3,0.1,0.9,0.3
+		c11.5-10.9,22.9-21.8,34.3-32.6c4.7-4.4,9.4-5.2,14.2-2.6C210.9,177.2,212.5,185.4,206.9,190.8z"/>
+	<path d="M207,370.1c-14.7,14.3-29.6,28.4-44.6,42.3c-4.7,4.4-10.5,3.9-15.2-0.7c-7.5-7.5-14.9-15-22.2-22.6
+		c-5-5.3-5.2-12.4-0.7-16.9c4.5-4.4,11.3-3.6,16.7,1.6c4.7,4.6,9.6,9,14.9,13.8c11.1-10.6,22.6-21.6,34.1-32.5
+		c5-4.7,10.5-5.1,15.3-1.4C211.2,358,212.1,365.2,207,370.1z"/>
+</g>
+</svg>
diff --git a/public/images/icon/icon_invoice.svg b/public/images/icon/icon_invoice.svg
new file mode 100644
index 00000000..46a4b451
--- /dev/null
+++ b/public/images/icon/icon_invoice.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M409.5,315.5c-3.1-2.1-4.1-4.1-4.1-7.7c0.1-87.1,0.1-174.1,0.1-261.2c0-10.9-3.2-14.1-14.2-14.1H67.9
+			c-11.6,0-14.7,3.1-14.7,14.6c0,60.7,0,121.4,0,182.1c0,60.5,0,121,0,181.6c0,12.6,2.7,15.3,15.5,15.3c72.8,0,145.7,0,218.5-0.1
+			c3.7,0,5.7,1.2,7.8,4.2c15.3,22.6,36.7,35.3,63.9,37.2c37.6,2.6,71.9-20.7,83.8-56.4C454.5,375.2,441,336.2,409.5,315.5z
+			 M297.4,53.4h87v250.5c-6.7-0.9-13.4-1.7-20.5-2.6v-5.8c0-55.3-0.1-110.6,0.1-165.9c0-5.8-1.8-10.1-5.9-14.1
+			c-19.4-19.1-38.5-38.4-57.8-57.5c-1.2-1.2-3.1-1.8-4.6-2.7C296.3,54.6,296.9,54,297.4,53.4z M281.3,70c14.8,14.8,30,30,44.8,44.8
+			h-44.8V70z M294.8,339.4c-2.2,2.7-3.9,3.9-7.4,3.9c-59.4-0.1-118.8-0.1-178.2-0.1c-1.8,0-3.6-0.1-5.3,0.1
+			c-5.5,0.7-9.5,5.3-9.2,10.7c0.2,5.2,4.2,9.3,9.6,9.8c1.8,0.1,3.6,0.1,5.3,0.1c55.8,0,111.7,0,167.5,0h6.5c-3.2,14-3.4,27.4,0,41.2
+			H74.3V53.4h186.2v5.4c0,21.3,0,42.7,0,64.1c0,9.7,3.5,13.2,13.1,13.2c23,0,45.9,0,69.3,0v166.4c-10.5,5.9-21,10.7-30.1,17.4
+			C305.8,325.1,300.4,332.5,294.8,339.4z M364,446.9c-34,0-62.1-28.1-62.2-62.1c0-34.2,27.7-62,62-62.1
+			c34.4-0.1,62.1,27.3,62.3,61.7C426.2,418.8,398.3,446.9,364,446.9z"/>
+		<path d="M322.6,229.1c0.1,5.7-4.3,10.4-10.5,10.4c-16.3,0.2-32.7,0.1-49,0.1c-18.1,0-36.3,0-54.4,0c-33.3,0-66.7,0-100,0
+			c-2.1,0-4.3,0.1-6.3-0.4c-4.6-1-8-5.6-7.7-10.4c0.3-4.8,3.9-8.9,8.7-9.7c1.6-0.3,3.2-0.2,4.8-0.2h200.5c1.1,0,2.3,0,3.4,0
+			C318.1,219.3,322.4,223.5,322.6,229.1z"/>
+		<path d="M322.5,292c-0.3,5.1-4.1,9.1-9.3,9.6c-1.8,0.2-3.6,0.1-5.3,0.1c-33.2,0-66.3,0-99.5,0c-33,0-66,0-99,0
+			c-1.8,0-3.6,0-5.3-0.1c-5.3-0.5-9.3-4.8-9.4-10c-0.1-5.2,3.8-9.7,9-10.4c1.4-0.2,2.9-0.1,4.4-0.1c67,0,134,0,201,0
+			c1.6,0,3.3-0.1,4.8,0.2C319.1,282.1,322.9,286.9,322.5,292z"/>
+		<path d="M392.6,370.4c-2.9,3.3-6,6.3-9.1,9.4c-10.6,10.7-21.2,21.3-31.9,31.9c-4.3,4.3-8.8,5.1-13.1,2.7
+			c-6.4-3.4-7.3-11.4-1.6-17.2c10.4-10.6,21-21.1,31.5-31.6c2.9-2.9,5.5-5.9,8.7-8.5c2.1-1.8,4.8-2.8,6.1-3.5
+			c5.9,0.1,9.1,2,10.9,5.9C395.7,363.4,395.4,367.2,392.6,370.4z"/>
+		<path d="M353.7,364.1c-0.1,5.5-4.8,10.1-10.3,10.2c-5.7,0-10.5-4.8-10.4-10.5c0.1-5.6,4.6-10,10.3-10.1
+			C349,353.7,353.8,358.4,353.7,364.1z"/>
+		<path d="M394.9,405.3c0,5.8-4.7,10.5-10.4,10.4c-5.5-0.1-10.1-4.8-10.1-10.3c0-5.7,4.8-10.5,10.5-10.4
+			C390.5,395.1,394.9,399.6,394.9,405.3z"/>
+	</g>
+	<g>
+		<path d="M134.3,138.7l-8.4-19.2h-6.7v19.2h-18.4V77.8h32.5c14.2,0,21.9,9.5,21.9,20.9c0,10.5-6.1,16.1-11,18.4l11,21.6H134.3z
+			 M136.5,98.6c0-3.3-2.9-4.7-6-4.7h-11.2v9.6h11.2C133.6,103.4,136.5,102,136.5,98.6z"/>
+		<path d="M176.9,134v21.5h-16.4V94.6h16.4v4.7c3.6-4.2,7.9-5.8,12.4-5.8c11,0,19.4,8,19.4,23.1c0,15.2-8.4,23.2-19.4,23.2
+			C184.8,139.8,180.6,138.2,176.9,134z M191.9,116.6c0-5.5-3.8-8.6-8.2-8.6c-2.1,0-5.2,1.1-6.8,3v11.2c1.5,1.8,4.7,3,6.8,3
+			C188.1,125.2,191.9,122.1,191.9,116.6z"/>
+	</g>
+</g>
+</svg>
diff --git a/public/images/icon/icon_layanan_pelanggan.svg b/public/images/icon/icon_layanan_pelanggan.svg
new file mode 100644
index 00000000..3e68e4e5
--- /dev/null
+++ b/public/images/icon/icon_layanan_pelanggan.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<g>
+	<path d="M441.6,285.2c-1,3.6-1.7,7.2-2.9,10.7c-6.9,20.2-25.4,34.1-46.7,35.1c-5.7,0.3-11.5,0.1-17.2,0.1
+		c-7.8-0.1-12.5-4.8-12.5-12.7c0-31.8,0-63.6,0-95.4c0-13.6,0.5-27.2-2.4-40.6c-9.9-46.9-49.2-82.7-96.8-88.1
+		c-56.2-6.4-107.6,28.6-121.7,83.4c-2.5,9.7-3.5,19.9-3.6,29.9c-0.4,36.4-0.2,72.8-0.2,109.3c0,9.4-2.8,13.4-12,14.4
+		c-21.9,2.3-41.8-1.9-56.4-20.3c-7.3-9.2-10.8-19.8-10.9-31.6c-0.1-10.7-0.1-21.5,0-32.2c0.2-28.6,22.6-51.5,51.3-52.3
+		c1.4,0,2.7,0,4.3,0c4.5-42.1,23.3-75.8,57.6-100.4c25.7-18.4,54.8-26.4,86.4-24.7C328,73.4,382.5,131,386.1,194.5
+		c4.3,0.4,8.6,0.5,12.8,1.4c22.2,4.3,38.4,21,42,43.2c0.1,0.7,0.4,1.4,0.7,2.1C441.6,255.7,441.6,270.5,441.6,285.2z"/>
+	<path d="M250.1,430.5c-5,0-10,0.1-15,0c-13.4-0.3-23.7-10.6-23.9-23.8c-0.1-12.8,10.1-23.7,23.2-24.1c10.3-0.3,20.7-0.3,31,0
+		c13.1,0.4,23.3,11.4,23.1,24.2c-0.2,13-10.4,23.3-23.6,23.6C260.1,430.6,255.1,430.5,250.1,430.5z"/>
+	<path d="M198.1,400c0,4.4,0,8.6,0,12.8c-44.6,5.4-83.5-28.1-88.8-67.6c4.3,0,8.6,0,12.9,0C133.2,383.2,158.8,401.1,198.1,400z"/>
+</g>
+<path class="st0" d="M326.4,291.4c-8.8,23.1-39.4,40.2-75.9,40.2c-36.2,0-66.7-16.9-75.7-39.7"/>
+</svg>
diff --git a/public/images/icon/icon_logout.svg b/public/images/icon/icon_logout.svg
new file mode 100644
index 00000000..1e70b078
--- /dev/null
+++ b/public/images/icon/icon_logout.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M4.4,76.5c0.8-3.9,1.4-7.8,2.4-11.7C15.5,29.7,46.2,5,82.4,4.8c53.9-0.3,107.7-0.3,161.6,0c43.3,0.3,77.1,33.5,78.5,76.8
+		c0.5,16.6,0.3,33.2,0.1,49.9c-0.2,12.5-8.6,21.6-20.6,23.1c-11.1,1.3-21.7-5.9-24.6-17c-0.7-2.6-0.7-5.4-0.7-8.1
+		c-0.1-14.5,0-29.1,0-43.6c-0.1-21.4-13.7-35.2-35-35.2c-51.9,0-103.9,0-155.8,0c-21.4,0-35.1,13.7-35.1,35c0,109.6,0,219.2,0,328.9
+		c0,21,13.8,34.8,34.9,34.8c52.1,0,104.2,0,156.3,0c21,0,34.7-13.8,34.8-34.9c0.1-18.2-0.1-36.4,0.1-54.7
+		c0.2-11.1,8.5-20.2,19.3-21.7c11.4-1.6,21.6,4.6,25.2,15.3c0.7,2.1,1.3,4.4,1.3,6.5c-0.1,21.7,0.7,43.5-0.7,65.2
+		c-2.3,35.3-31.9,65.1-67.2,69.5c-1.2,0.2-2.4,0.6-3.7,0.9c-58.2,0-116.4,0-174.5,0c-0.9-0.3-1.8-0.7-2.7-0.8
+		c-33.1-4.5-58.9-27.4-66.8-59.4c-0.9-3.8-1.6-7.8-2.4-11.7C4.4,307.9,4.4,192.2,4.4,76.5z"/>
+	<path d="M417.2,227c-14.6-14.6-28.3-28.3-41.9-41.9c-4.9-4.8-7.7-10.5-7.6-17.5c0.1-9.1,4-16,12.1-20.3c8.2-4.3,16.3-3.6,24,1.7
+		c1.8,1.3,3.4,2.9,5,4.4c25.9,25.8,51.8,51.7,77.7,77.6c12.2,12.2,12.3,25.6,0.2,37.7c-26.3,26.3-52.7,52.6-79,78.9
+		c-7.1,7-15.4,9.7-25,6.2c-8.9-3.2-14-9.9-15.1-19.3c-0.9-7.5,1.8-13.8,7.1-19.1c12.8-12.8,25.5-25.5,38.3-38.3
+		c1.1-1.1,2.2-2.3,4.1-4.3c-2.6,0-4.2,0-5.9,0c-63.9,0-127.8,0-191.7,0c-12.8,0-22-7.2-24.3-18.7c-2.6-13.7,7.4-26.6,21.3-27.3
+		c1.8-0.1,3.5,0,5.3,0c63,0,125.9,0,188.9,0C412.3,227,414,227,417.2,227z"/>
+</g>
+</svg>
diff --git a/public/images/icon/icon_pengiriman.svg b/public/images/icon/icon_pengiriman.svg
new file mode 100644
index 00000000..02d60867
--- /dev/null
+++ b/public/images/icon/icon_pengiriman.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M478.5,277.6c-0.3-20.4-14-38.4-33.6-44.1c-3.3-1-4.8-2.6-5.9-5.7c-8.9-24.3-17.9-48.5-27-72.7
+		c-6.9-18.2-19.8-29.6-39.1-32.4c-9.5-1.4-19.3-0.6-28.9-0.9c-1.4,0-3.5-0.6-3.9-1.6c-3.2-7.3-8.9-9.1-16.3-9.1
+		c-94.9,0.1-189.9,0.1-284.8-0.1c-8.2,0-14.1,2.4-17.5,9.9v217c3.6,7.7,9.7,10.4,18,9.9c8.9-0.5,17.8-0.1,26.5-0.1
+		c7.2,24.6,22.7,39.7,48.1,40.6c27.8,1,44.7-14.5,52.5-40.5h178.6c10.2,27.3,25.9,40.3,49.2,40.8c23.7,0.6,39.2-11.7,51.4-40.7
+		c0.1,0,0.3-0.1,0.4-0.1c6.1,0,12.2,0,18.3-0.2c8.4-0.1,14.1-5.6,14.1-14C478.6,315.1,478.7,296.4,478.5,277.6z M116.1,362.1
+		c-13.2,0-24.2-11-24.2-24.2c0-13.3,10.8-24,24.2-24c13.4,0,24.1,10.6,24.1,24C140.2,351.3,129.4,362.1,116.1,362.1z M313.5,321.1
+		h-4.8c-46.7,0-93.4,0-140.2,0c-3,0-4.5-0.7-6-3.7c-9.3-19.5-24.8-30.3-46.5-30.2c-21.7,0-37.2,10.8-46.5,30.3
+		c-1.3,2.7-2.6,3.8-5.6,3.6c-5-0.3-10.1-0.1-15.5-0.1V138.3h265V321.1z M398.5,197.7c4.4,10.9,8.5,21.8,13,33.3h-70.6v-35.8
+		c18.6,0,36.4,0,54.3,0.1C396.3,195.3,398,196.6,398.5,197.7z M340.7,149c9.5,0,18.9-0.7,28.1,0.2c9.9,0.9,16.8,8.5,18.8,18.9h-46.9
+		V149z M395.4,362.1c-13.3,0-24.1-10.8-24.1-24.2c0-13.4,10.7-24,24.1-24c13.4,0,24.2,10.7,24.2,24
+		C419.6,351.1,408.6,362.1,395.4,362.1z M451.7,319.6c0,0.1,0,0.2,0,0.3c0,0.1,0,0.1,0,0.2c0,0,0,0.1,0,0.2c0,0.1,0,0.1-0.1,0.2h0
+		c-6.8,1.7-7.3,1.4-10.2-4.3c-9.6-18.7-24.9-29-46.1-28.9c-21.1,0-36.6,10.4-45.8,29.2c-2.1,4.2-4.2,5.5-8.7,4.3v-62.4
+		c1.5-0.1,3.1-0.3,4.7-0.3c27.5,0,55,0,82.6,0c15.8,0,23.7,8.1,23.7,24C451.8,294.6,451.7,307.1,451.7,319.6z"/>
+</g>
+</svg>
diff --git a/public/images/icon/icon_profile.svg b/public/images/icon/icon_profile.svg
new file mode 100644
index 00000000..f6c9e3cf
--- /dev/null
+++ b/public/images/icon/icon_profile.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M248.3,451.3c-37.5-0.6-76.1-5.1-113-19.5c-16-6.2-31.1-14.2-42.8-27.2c-8.6-9.5-13.1-20.4-12.7-33.4
+		c1.2-45.4,17.4-84.4,49-116.9c6.7-6.9,16-7.4,22.4-1.3c6.6,6.2,6.7,15.7-0.2,22.8c-21.3,21.8-34.3,47.7-38.8,77.8
+		c-0.8,5.2-0.8,10.6-1.5,15.9c-0.9,7.5,2.4,13.1,7.7,17.8c9.3,8.3,20.4,13.4,32,17.6c28.8,10.4,58.7,14.6,89.1,15.3
+		c37.4,0.9,74.4-2.3,109.9-15.4c9.6-3.5,18.7-8.6,27.5-13.8c9.7-5.7,13.4-14.4,12.3-26.2c-3.2-34.4-16-64.1-40.2-88.8
+		c-3.8-3.9-6.3-8.2-5.7-13.8c0.7-6.3,4.1-10.8,10.1-13c6.2-2.3,11.8-0.8,16.4,3.8c18.5,18.3,32.1,39.7,40.8,64.3
+		c5.9,16.8,8.8,34.2,9.6,52c0.7,16-5.4,28.8-16.8,39.5c-14.1,13.1-31.2,20.9-49.2,26.9C320.4,446.9,285.4,450.9,248.3,451.3z"/>
+	<path d="M250.2,48.7c60.3,0.1,108.2,48.8,108.1,109.9c-0.1,58.4-49.4,107-108.3,106.8c-60.3-0.2-108.6-48.9-108.4-109.2
+		C141.8,97,190.7,48.6,250.2,48.7z M249.9,234.4c42.9-0.1,77.5-34.6,77.5-77.5c0-42.7-34.8-77.2-77.8-77.2c-42.1,0-77,34.9-77,77
+		C172.6,199.7,207.2,234.5,249.9,234.4z"/>
+</g>
+</svg>
diff --git a/public/images/icon/icon_wishlist.svg b/public/images/icon/icon_wishlist.svg
new file mode 100644
index 00000000..97b45cab
--- /dev/null
+++ b/public/images/icon/icon_wishlist.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M462.1,161.3C448.9,77.6,351.7,36.6,282.3,85.1c-10.9,7.6-19.9,17.3-29.1,26.7c-2.7,2.7-3.9,2.3-6.2-0.2
+		c-4.8-5.1-9.8-10-14.8-14.8c-22.4-21.3-49.2-32-79.8-32.4C121.6,64.8,95,75,72.8,95.8C25,140.5,23.8,215,70.5,262.1
+		c55.6,56.2,111.7,111.9,167.7,167.8c7.5,7.5,16.1,7.7,23.5,0.2c56.4-56.3,113-112.5,168.9-169.2
+		C457.8,233.4,468.2,199.6,462.1,161.3z M409.5,238.8c-33.7,34.5-68,68.3-102.1,102.4c-18.1,18.1-36.3,36.2-54.3,54.4
+		c-2.6,2.6-3.8,2.4-6.3-0.1c-51.4-51.6-103.1-103-154.4-154.7c-23.7-23.9-31.5-52.7-21.9-85c9.6-32.3,32.1-51.6,64.8-59.2
+		c2.6-0.6,5.3-1,8-1.2c2.8-0.2,5.7,0,8.6,0c22.8,0,42.5,7.8,59,23.5c9.2,8.8,18,18,27.1,26.9c7.9,7.8,16.2,7.8,24.2,0
+		c8.5-8.4,16.7-17,25.3-25.3c24.4-23.4,53.2-31.4,85.6-21.5c32.4,9.9,52.3,32.5,58.7,65.7C437.2,192.9,429.6,218.3,409.5,238.8z"/>
+</g>
+</svg>
diff --git a/public/images/icons8-google.svg b/public/images/icons8-google.svg
new file mode 100644
index 00000000..c0669b38
--- /dev/null
+++ b/public/images/icons8-google.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/><path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/><path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/><path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"/></svg>
\ No newline at end of file
diff --git a/public/images/open-box(1).svg b/public/images/open-box(1).svg
new file mode 100644
index 00000000..f9dccef1
--- /dev/null
+++ b/public/images/open-box(1).svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#15803D;}
+</style>
+<g>
+	<path class="st0" d="M447,278.9c-14.2-23.5-28.5-46.9-42.7-70.3c-1.5-2.5-3.5-4.1-6.4-4.7c-40-9-79.9-18-119.9-27
+		c-5.6-1.2-9.5,1.1-10.5,5.7c-1,4.7,1.7,8.2,7.3,9.5c7.4,1.7,14.8,3.3,22.2,5c21.9,4.9,43.7,9.8,66.2,14.9c-1.5,0.6-2.4,1-3.3,1.3
+		c-39.5,10.1-79,20.2-118.5,30.4c-1.9,0.5-3.8,0.5-5.7,0c-38.4-10.5-76.8-21-115.4-31.5c0.7-1.4,1.6-1.3,2.3-1.4
+		c22.8-5.1,45.6-10.2,68.5-15.4c5.6-1.3,8.5-5,7.5-9.4c-1.1-4.8-5.2-7-11-5.7c-33.8,7.6-67.7,15.2-101.5,22.7
+		c-3.4,0.8-5.8,2.5-7.6,5.4c-14.8,23.5-29.5,47-44.2,70.6c-3.9,6.3-2,11.3,5.1,13.3c12.2,3.5,24.4,7.2,36.8,10.4
+		c3.9,1,4.9,2.6,4.9,6.5c-0.2,36.7-0.1,73.4-0.1,110.1c0,7,1.6,9,8.1,10.6c48,12,96.1,24,144.1,36c3,0.8,5.9,1,9,0.2
+		c21.3-5,42.8-9.9,64.1-14.8c6.2-1.4,9.1-5.2,7.9-10c-1.1-4.6-5.4-6.5-11.4-5.2c-8.7,2-17.3,4.1-25.9,6.1
+		c-10.1,2.3-20.2,4.6-30.4,6.9V284.9c1.3,2.3,2,3.6,2.8,5c7.4,14.1,14.8,28.3,22.3,42.4c2.6,5,5.3,6.1,10.7,4.7
+		c10-2.7,19.9-5.5,29.8-8.4c25.6-7.2,51.2-14.5,76.9-21.8c0.1,1.1,0.3,1.8,0.3,2.6c0,34.4-0.1,68.9,0.1,103.3c0,3.5-1.8,3.9-4.2,4.5
+		c-15.7,3.6-31.4,7.2-47.2,10.8c-6,1.4-8.8,5-7.7,9.7c1.2,4.8,5.3,6.9,11.1,5.5c18.1-4.2,36.1-8.3,54.2-12.5c8-1.9,9.1-3.4,9.2-11.7
+		c0-37.2,0.1-74.4-0.1-111.6c0-4.3,1.4-5.7,5.3-6.7c10.6-2.7,21.1-5.8,31.7-8.9C448.5,289.9,450.6,284.9,447,278.9z M230.5,449.2
+		c-18.1-4.5-35.9-8.9-53.7-13.4c-25.5-6.4-51-12.8-76.5-19.1c-3-0.7-3.9-1.7-3.9-4.8c0.1-33.2,0.1-66.3,0-99.5c0-3.7,1-3.8,4.1-2.9
+		c7.2,2.2,14.6,4.2,21.9,6.2c5.6,1.5,9.5-0.3,10.9-4.9c1.4-4.5-1.1-8.4-6.7-10c-23.5-6.8-47.1-13.6-70.7-20.1
+		c-3.8-1-3.3-2.1-1.7-4.6c11.1-17.6,22.2-35.3,33.1-53c1.6-2.7,3.1-3.3,6.2-2.4c43.2,11.9,86.5,23.6,129.8,35.2c3.6,1,3.7,1.9,2.1,5
+		c-9.4,18.5-18.7,37.1-27.9,55.8c-1.3,2.7-2.4,3.7-5.8,2.7c-9.7-3.1-19.5-5.6-29.3-8.4c-1.1-0.3-2.2-0.6-3.3-0.9
+		c-4.5-0.9-8.3,1.3-9.5,5.3c-1.2,3.9,1,8.2,5.4,9.5c14.1,4.1,28.2,8.1,42.3,12.1c5,1.4,7.9-1.3,10-5.4c6.8-13.5,13.5-27.1,20.3-40.6
+		c0.7-1.4,1-3,2.8-4.3L230.5,449.2L230.5,449.2z M399.3,287.7c-37.5,10.6-75.1,21.2-112.6,31.8c-2,0.6-3.7,1.6-5.2-1.2
+		c-10.4-20.2-21-40.3-31.8-60.8c14.3-3.7,28.3-7.3,42.3-10.9c32.5-8.3,65-16.7,97.4-25c1.9-0.5,3.7-1.5,5.3,1.2
+		c11.2,18.7,22.6,37.3,34.2,56.4C418.9,282.1,409.1,285,399.3,287.7z"/>
+	<path class="st0" d="M236.3,209.6c2.3-44.9,19.1-82.5,56.4-109.7c5.7-4.2,11.8-7.9,18.3-10.7c5.2-2.2,9.5-0.8,11.4,3.6
+		c1.8,4.2-0.1,8.1-5.1,10.5c-36.2,17.6-56,47.3-63.3,86.1c-1.8,9.4-2.2,18.9-2.3,28.4c-0.1,3.7-1.6,6.5-5.3,7.9
+		c-2.9,1.1-5.4,0.4-7.6-1.5c-1.9-1.6-2.5-3.7-2.5-6C236.3,215.4,236.3,212.6,236.3,209.6z"/>
+	<path class="st0" d="M230.2,189.4c0,2.6,0.1,5.2,0,7.8c-0.2,4.8-3,7.8-7.4,8s-7.6-2.6-8-7.3c-0.6-7.2-0.4-14.5-1.3-21.7
+		c-5.8-42.3-25.5-74.9-64.9-93.9c-4.7-2.3-6.4-6.5-4.3-10.7c2.1-4.2,6.2-5.6,11.1-3.2c25.6,12.3,44.9,31.2,58.2,56.2
+		C224.4,144.7,229.3,166.5,230.2,189.4z"/>
+	<path class="st0" d="M253.5,59c-10.3,4.3-16.7,11.5-20.1,21.9c-4.2-10.3-11.3-16.9-21.9-20.3c10-4.3,16.9-11,20.1-21.7
+		C236.1,49.1,243.1,55.6,253.5,59z"/>
+	<path class="st0" d="M333.7,118.9c7.2-3.3,12.1-8.3,14.6-17.2c3.3,8.4,8.2,13.2,17,15.6c-8.1,3.6-13.3,8.3-15.4,17.2
+		C346.2,126.5,341.7,121,333.7,118.9z"/>
+	<path class="st0" d="M142.3,117.6c-8.2,3.2-12.7,8-15.1,16.3c-3.5-7.8-7.8-12.9-16.7-14.7c7.9-3.6,13-8,15.1-16.8
+		C129,110.3,133.9,115,142.3,117.6z"/>
+	<path class="st0" d="M292.1,153.3c5.1-2.4,8.3-6,10-11.8c2.7,5.1,5.5,9.1,12.1,10.5c-5.5,2.9-9.4,6-10.9,12.2
+		C300.6,158.8,297.8,154.7,292.1,153.3z"/>
+</g>
+</svg>
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 0aa9febf..655c4732 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -10,15 +10,17 @@ import DesktopView from '../../views/DesktopView'
 import dynamic from 'next/dynamic'
 import IndoteknikLogo from '@/images/logo.png'
 import Category from '@/lib/category/components/Category'
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import useAuth from '@/core/hooks/useAuth'
 import NavbarUserDropdown from './NavbarUserDropdown'
 import { getCountCart } from '@/core/utils/cart'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import { useRouter } from 'next/router'
-import { getAuth } from '@/core/utils/auth'
+import { getAuth, setAuth } from '@/core/utils/auth'
 import { createSlug, getIdFromSlug } from '@/core/utils/slug'
 import productApi from '@/lib/product/api/productApi'
+import { useSession } from 'next-auth/react'
+import { AuthContext } from '@/pages/_app'
 import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton'
 
 const Search = dynamic(() => import('./Search'))
@@ -28,6 +30,7 @@ const TopBanner = dynamic(() => import('./TopBanner'), {
 
 const NavbarDesktop = () => {
   const [isOpenCategory, setIsOpenCategory] = useState(false)
+  const {authenticated} = useContext(AuthContext)
   const auth = useAuth()
 
   const [cartCount, setCartCount] = useState(0)
@@ -37,7 +40,7 @@ const NavbarDesktop = () => {
   const [urlPath, setUrlPath] = useState(null)
 
   const router = useRouter()
-
+  
   useEffect(() => {
     const handleCartChange = () => {
       const cart = async () => {
diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
index 7848124c..1851ce84 100644
--- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
+++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
@@ -1,13 +1,15 @@
 import { deleteAuth } from '@/core/utils/auth'
 import Link from '../Link/Link'
 import { useRouter } from 'next/router'
+import { signOut, useSession } from 'next-auth/react'
 
 const NavbarUserDropdown = () => {
   const router = useRouter()
 
-  const logout = () => {
-    deleteAuth()
-    router.push('/login')
+  const logout = async () => {
+    deleteAuth().then(() => {
+      router.push('/login')
+    })
   }
 
   return (
@@ -15,6 +17,7 @@ const NavbarUserDropdown = () => {
       <div className='navbar-user-dropdown'>
         <Link href='/my/quotations'>Daftar Quotation</Link>
         <Link href='/my/transactions'>Daftar Transaksi</Link>
+        <Link href='/my/shipments'>Daftar Pengiriman</Link>
         <Link href='/my/invoices'>Invoice & Faktur Pajak</Link>
         <Link href='/my/wishlist'>Wishlist</Link>
         <Link href='/my/address'>Daftar Alamat</Link>
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index f84cce40..266223d8 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -6,10 +6,11 @@ import { useEffect, useState } from 'react'
 import axios from 'axios'
 import odooApi from '@/core/api/odooApi'
 import { useRouter } from 'next/router'
-import { getURL } from 'next/dist/shared/lib/utils'
 import productApi from '@/lib/product/api/productApi'
-import { getAuth } from '@/core/utils/auth'
+import { getAuth, setAuth } from '@/core/utils/auth'
 import { createSlug, getIdFromSlug } from '@/core/utils/slug'
+import { useSession } from 'next-auth/react'
+import { setCookie } from 'cookies-next'
 
 const Navbar = dynamic(() => import('../elements/Navbar/Navbar'))
 const AnimationLayout = dynamic(() => import('./AnimationLayout'))
diff --git a/src/core/utils/auth.js b/src/core/utils/auth.js
index cddff2b8..a7244747 100644
--- a/src/core/utils/auth.js
+++ b/src/core/utils/auth.js
@@ -1,4 +1,5 @@
 import { deleteCookie, getCookie, setCookie } from 'cookies-next'
+import { signOut } from 'next-auth/react'
 
 /**
  * Retrieves authentication data from cookie and returns it as an object.
@@ -27,7 +28,8 @@ const setAuth = (user) => {
  *
  * @returns {boolean} - Returns `true`.
  */
-const deleteAuth = () => {
+const deleteAuth = async() => {
+  // await signOut()
   deleteCookie('auth')
   return true
 }
diff --git a/src/lib/auth/components/LoginDesktop.jsx b/src/lib/auth/components/LoginDesktop.jsx
index 8ce2e4e3..838054cd 100644
--- a/src/lib/auth/components/LoginDesktop.jsx
+++ b/src/lib/auth/components/LoginDesktop.jsx
@@ -3,11 +3,46 @@ import useLogin from '../hooks/useLogin'
 import Link from '@/core/components/elements/Link/Link'
 import PageContent from '@/lib/content/components/PageContent'
 import Alert from '@/core/components/elements/Alert/Alert'
+import { useSession, signIn, SignOut } from 'next-auth/react'
+import Image from 'next/image'
+import { useRouter } from 'next/router'
+import { useContext, useEffect, useState } from 'react'
+import { getAuth, setAuth } from '@/core/utils/auth'
+import { setCookie } from 'cookies-next'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
+import odooApi from '@/core/api/odooApi'
 
 const LoginDesktop = () => {
-  const { handleSubmit, handleChangeInput, isLoading, isValid, alert, emailRef, passwordRef } =
+  const { handleSubmit, handleChangeInput, isLoading, isValid, alert, emailRef, passwordRef, handleGoogleSubmit } =
     useLogin()
 
+  const router = useRouter()
+  const [query, setQuery] = useState(router?.query?.next || '/')
+  const { data: session } = useSession()
+
+  const handleGoogle = async () => {
+    const url = query != '/' ? '/login?source=google&next=' + query : '/login?source=google'
+    await signIn('google', { callbackUrl: url })
+  }
+  useEffect(() => {
+    if (session) {
+      handleGoogleSubmit(session)
+    }
+  }, [session])
+
+  if (router.query.source) {
+    return (
+      <BottomPopup active={true} close=''>
+        <div className='leading-7 text-gray_r-12/80 flex justify-center'>Mohon Tunggu</div>
+        <div className='container flex justify-center my-4'>
+          <LogoSpinner width={48} height={48} />
+        </div>
+      </BottomPopup>
+    )
+  }
+
   return (
     <DesktopView>
       <div className='container mx-auto'>
@@ -60,6 +95,26 @@ const LoginDesktop = () => {
                 {!isLoading ? 'Masuk' : 'Loading...'}
               </button>
             </form>
+            {/* <div className='flex  items-center mt-3 mb-3'>
+              <hr className='flex-1' />
+              <p className='text-gray-400'>ATAU</p>
+              <hr className='flex-1' />
+            </div> */}
+
+            {/* <button
+              type='submit'
+              className='border border-gray-500 p-2 rounded-md hover:bg-gray-100  w-full mt-2 flex items-center justify-center gap-x-2'
+              onClick={() => handleGoogle()}
+            >
+              <Image
+                src='/images/icons8-google.svg'
+                alt='google image'
+                className='h-7 w-7'
+                width={10}
+                height={10}
+              />
+              <p>Masuk dengan Google</p>
+            </button> */}
 
             <div className='text-gray_r-11 mt-10'>
               Belum punya akun Indoteknik?{' '}
diff --git a/src/lib/auth/components/LoginMobile.jsx b/src/lib/auth/components/LoginMobile.jsx
index b365330b..2d6501cd 100644
--- a/src/lib/auth/components/LoginMobile.jsx
+++ b/src/lib/auth/components/LoginMobile.jsx
@@ -5,10 +5,45 @@ import Alert from '@/core/components/elements/Alert/Alert'
 import MobileView from '@/core/components/views/MobileView'
 import useLogin from '../hooks/useLogin'
 
+import { useSession, signIn, SignOut } from 'next-auth/react'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { setCookie } from 'cookies-next'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
+import odooApi from '@/core/api/odooApi'
+import { getAuth } from '@/core/utils/auth'
+
 const LoginMobile = () => {
-  const { handleSubmit, handleChangeInput, isLoading, isValid, alert, emailRef, passwordRef } =
+  const { handleSubmit, handleChangeInput, isLoading, isValid, alert, emailRef, passwordRef, handleGoogleSubmit } =
     useLogin()
 
+  const router = useRouter()
+  const [query, setQuery] = useState(router?.query?.next || '/')
+  const { data: session } = useSession()
+  const auth = getAuth()
+
+  const handleGoogle = async () => {
+    const url = query != '/' ? '/login?source=google&next=' + query : '/login?source=google'
+    await signIn('google', { callbackUrl: url })
+  }
+  useEffect(() => {
+    if (session) {
+      handleGoogleSubmit(session)
+    }
+  }, [session])
+
+  if (router.query.source) {
+    return (
+      <BottomPopup active={true} close={true}>
+        <div className='leading-7 text-gray_r-12/80 flex justify-center'>Mohon Tunggu</div>
+        <div className='container flex justify-center my-4'>
+          <LogoSpinner width={48} height={48} />
+        </div>
+      </BottomPopup>
+    )
+  }
+
   return (
     <MobileView>
       <div className='p-6 pt-10 flex flex-col items-center min-h-screen'>
@@ -56,6 +91,26 @@ const LoginMobile = () => {
             {!isLoading ? 'Masuk' : 'Loading...'}
           </button>
         </form>
+        {/* <div className='flex  items-center mt-3 mb-3'>
+          <hr className='flex-1' />
+          <p className='text-gray-400'>ATAU</p>
+          <hr className='flex-1' />
+        </div> */}
+
+        {/* <button
+          type='submit'
+          className='border border-gray-500 p-2 rounded-md hover:bg-gray-100  w-full mt-2 flex items-center justify-center gap-x-2'
+          onClick={() => handleGoogle()}
+        >
+          <Image
+            src='/images/icons8-google.svg'
+            alt='google image'
+            className='h-7 w-7'
+            width={10}
+            height={10}
+          />
+          <p>Masuk dengan Google</p>
+        </button> */}
 
         <div className='text-gray_r-11 mt-4'>
           Belum punya akun Indoteknik?{' '}
diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index 386b817c..939a0d5f 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -1,5 +1,6 @@
 import Link from '@/core/components/elements/Link/Link'
 import { useRouter } from 'next/router'
+import ImageNext from 'next/image'
 
 const Menu = () => {
   const router = useRouter()
@@ -10,30 +11,61 @@ const Menu = () => {
     <div className='grid grid-cols-1 bg-white border border-gray_r-6 rounded py-2 px-4 sticky top-48'>
       <div className='mt-4 mb-1 font-medium'>Menu</div>
       <LinkItem href='/my/quotations' active={routeStartWith('/my/quotations')}>
-        Daftar Quotation
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_daftar_quotation.svg' width={18} height={20} />
+          <p>Daftar Quotation</p>
+        </div>
       </LinkItem>
       <LinkItem href='/my/transactions' active={routeStartWith('/my/transactions')}>
-        Daftar Transaksi
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_daftar_transaksi.svg' width={18} height={20} />
+          <p>Daftar Transaksi</p>
+        </div>
+      </LinkItem>
+      <LinkItem href='/my/shipments' active={routeStartWith('/my/shipments')}>
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_pengiriman.svg' width={18} height={20} />
+          <p>Daftar Pengiriman</p>
+        </div>
       </LinkItem>
       <LinkItem href='/my/invoices' active={routeStartWith('/my/invoices')}>
-        Invoice & Faktur Pajak
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_invoice.svg' width={18} height={20} />
+          <p>Invoice & Faktur Pajak</p>
+        </div>
       </LinkItem>
       <LinkItem href='/my/wishlist' active={routeStartWith('/my/wishlist')}>
-        Wishlist
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_wishlist.svg' width={18} height={20} />
+          <p>Wishlist</p>
+        </div>
       </LinkItem>
-
       <div className='mt-4 mb-1 font-medium'>Pusat Bantuan</div>
-      <LinkItem href='/'>Layanan Pelanggan</LinkItem>
 
+      <LinkItem href='/'>
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_layanan_pelanggan.svg' width={18} height={20} />
+          <p>Layanan Pelanggan</p>
+        </div>
+      </LinkItem>
       <div className='mt-4 mb-1 font-medium'>Pengaturan Akun</div>
       <LinkItem href='/my/address' active={routeStartWith('/my/address')}>
-        Daftar Alamat
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_daftar_alamat.svg' width={18} height={20} />
+          <p>Daftar Alamat</p>
+        </div>
       </LinkItem>
       <LinkItem href='/my/profile' active={routeStartWith('/my/profile')}>
-        Profil Saya
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_profile.svg' width={18} height={20} />
+          <p>Profil Saya</p>
+        </div>
       </LinkItem>
       <button type='button' className='text-gray_r-12/80 p-2 text-left'>
-        Keluar Akun
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_logout.svg' width={18} height={20} />
+          <p>Keluar Akun</p>
+        </div>
       </button>
     </div>
   )
diff --git a/src/lib/auth/components/RegisterDesktop.jsx b/src/lib/auth/components/RegisterDesktop.jsx
index 93b505ab..6072bfb9 100644
--- a/src/lib/auth/components/RegisterDesktop.jsx
+++ b/src/lib/auth/components/RegisterDesktop.jsx
@@ -5,6 +5,12 @@ import Alert from '@/core/components/elements/Alert/Alert'
 import PageContent from '@/lib/content/components/PageContent'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import ReCAPTCHA from 'react-google-recaptcha'
+import Image from 'next/image'
+import { useEffect } from 'react'
+import { setCookie } from 'cookies-next'
+import { signIn, useSession } from 'next-auth/react'
+import { useRouter } from 'next/router'
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
 
 const RegisterDesktop = () => {
   const {
@@ -21,6 +27,31 @@ const RegisterDesktop = () => {
     tnd,
     setTnd
   } = useRegister()
+  
+  const { data: session } = useSession()
+  const router = useRouter()
+  
+  const handleGoogle = async () => {
+    await signIn('google', { callbackUrl: '/register?source=google' })
+  }
+
+  useEffect(() => {
+    if(session){
+      setCookie('auth', JSON.stringify(session?.odooUser))
+      router.push('/')
+    }
+  },[session])
+
+  if (router.query.source) {
+    return (
+      <BottomPopup active={true} close=''>
+        <div className='leading-7 text-gray_r-12/80 flex justify-center'>Mohon Tunggu</div>
+        <div className='container flex justify-center my-4'>
+          <LogoSpinner width={48} height={48} />
+        </div>
+      </BottomPopup>
+    )
+  }
 
   return (
     <DesktopView>
@@ -121,6 +152,26 @@ const RegisterDesktop = () => {
                 <PageContent path='/register#tnd'></PageContent>
               </BottomPopup>
             </div>
+            {/* <div className='flex  items-center mt-3 mb-3'>
+              <hr className='flex-1' />
+              <p className='text-gray-400'>ATAU</p>
+              <hr className='flex-1' />
+            </div>
+
+            <button
+              type='submit'
+              className='border border-gray-500 p-2 rounded-md hover:bg-gray-100  w-full mt-2 flex items-center justify-center gap-x-2'
+              onClick={() => handleGoogle()}
+            >
+              <Image
+                src='/images/icons8-google.svg'
+                alt='google image'
+                className='h-7 w-7'
+                width={10}
+                height={10}
+              />
+              <p>Daftar dengan Google</p>
+            </button> */}
 
             <div className='text-gray_r-11 mt-10'>
               Sudah punya akun Indoteknik?{' '}
diff --git a/src/lib/auth/components/RegisterMobile.jsx b/src/lib/auth/components/RegisterMobile.jsx
index da6efaf5..1b0d2adf 100644
--- a/src/lib/auth/components/RegisterMobile.jsx
+++ b/src/lib/auth/components/RegisterMobile.jsx
@@ -7,6 +7,11 @@ import MobileView from '@/core/components/views/MobileView'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import PageContent from '@/lib/content/components/PageContent'
 import ReCAPTCHA from 'react-google-recaptcha'
+import { signIn, useSession } from 'next-auth/react'
+import { useRouter } from 'next/router'
+import { setCookie } from 'cookies-next'
+import { useEffect } from 'react'
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
 
 const RegisterMobile = () => {
   const {
@@ -24,6 +29,30 @@ const RegisterMobile = () => {
     setTnd
   } = useRegister()
 
+  const { data: session } = useSession()
+  const router = useRouter()
+  
+  const handleGoogle = async () => {
+    await signIn('google', { callbackUrl: '/register?source=google' })
+  }
+
+  useEffect(() => {
+    if(session){
+      setCookie('auth', JSON.stringify(session?.odooUser))
+      router.push('/')
+    }
+  },[session])
+
+  if (router.query.source) {
+    return (
+      <BottomPopup active={true} close=''>
+        <div className='leading-7 text-gray_r-12/80 flex justify-center'>Mohon Tunggu</div>
+        <div className='container flex justify-center my-4'>
+          <LogoSpinner width={48} height={48} />
+        </div>
+      </BottomPopup>
+    )
+  }
   return (
     <MobileView>
       <div className='p-6 pt-10 flex flex-col items-center min-h-screen'>
@@ -122,6 +151,27 @@ const RegisterMobile = () => {
           </BottomPopup>
         </div>
 
+        {/* <div className='flex  items-center mt-3 mb-3'>
+          <hr className='flex-1' />
+          <p className='text-gray-400'>ATAU</p>
+          <hr className='flex-1' />
+        </div>
+
+        <button
+          type='submit'
+          className='border border-gray-500 p-2 rounded-md hover:bg-gray-100  w-full mt-2 flex items-center justify-center gap-x-2'
+          onClick={() => handleGoogle()}
+        >
+          <Image
+            src='/images/icons8-google.svg'
+            alt='google image'
+            className='h-7 w-7'
+            width={10}
+            height={10}
+          />
+          <p>Daftar dengan Google</p>
+        </button> */}
+
         <div className='text-gray_r-11 mt-4'>
           Sudah punya akun Indoteknik?{' '}
           <Link href='/login' className='inline'>
diff --git a/src/lib/auth/hooks/useLogin.js b/src/lib/auth/hooks/useLogin.js
index 1d5ff43d..34605614 100644
--- a/src/lib/auth/hooks/useLogin.js
+++ b/src/lib/auth/hooks/useLogin.js
@@ -3,6 +3,9 @@ import { setAuth } from '@/core/utils/auth'
 import { useRouter } from 'next/router'
 import { useRef, useState } from 'react'
 import loginApi from '../api/loginApi'
+import odooApi from '@/core/api/odooApi'
+import { setCookie } from 'cookies-next'
+import { useSession } from 'next-auth/react'
 
 const useLogin = () => {
   const router = useRouter()
@@ -60,6 +63,19 @@ const useLogin = () => {
     }
   }
 
+  const handleGoogleSubmit = async (session) => {
+    const params = {
+      access_token: session.accessToken
+    }
+    const data = await odooApi('POST', '/api/v1/user/validate-sso', params)
+    if (data.isAuth) {
+      session.odooUser = data.user
+      setCookie('auth', JSON.stringify(session?.odooUser))
+      router.push(router?.query?.next ?? '/')
+      return
+    }
+  }
+
   return {
     handleChangeInput,
     handleSubmit,
@@ -67,7 +83,8 @@ const useLogin = () => {
     isValid,
     alert,
     emailRef,
-    passwordRef
+    passwordRef,
+    handleGoogleSubmit
   }
 }
 
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 27a00aa8..ce691403 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -297,10 +297,12 @@ const Checkout = () => {
       order_line: JSON.stringify(productOrder),
       delivery_amount: biayaKirim,
       carrier_id: selectedCarrierId,
+      estimated_arrival_days: splitDuration(etd),
       delivery_service_type: selectedExpedisiService,
       voucher: activeVoucher,
       type: 'sale_order'
     }
+
     if (query) {
       data.source = 'buy'
     }
@@ -1494,6 +1496,22 @@ function calculateEstimatedArrival(duration) {
   return ''
 }
 
+function splitDuration(duration){
+  if (duration) {
+    let estimationDate = null
+    if (duration.includes('-')){
+      estimationDate = duration.split('-')
+      estimationDate = parseInt(estimationDate[1])
+    }else{
+      estimationDate = parseInt(duration)
+    }
+
+    return estimationDate
+  }
+
+  return ''
+}
+
 const extractDuration = (text) => {
   const matches = text.match(/\d+(?:-\d+)?/g)
 
diff --git a/src/lib/shipment/api/listShipment.js b/src/lib/shipment/api/listShipment.js
new file mode 100644
index 00000000..a9237b76
--- /dev/null
+++ b/src/lib/shipment/api/listShipment.js
@@ -0,0 +1,9 @@
+import odooApi from "@/core/api/odooApi";
+import { getAuth } from "@/core/utils/auth"
+
+export const listShipments = async ({query}) => {
+    const auth = getAuth()
+    const list = await odooApi('GET', `/api/v1/partner/${auth.partnerId}/stock-picking?${query}`)
+
+    return list;
+}
diff --git a/src/lib/shipment/components/Shipments.jsx b/src/lib/shipment/components/Shipments.jsx
new file mode 100644
index 00000000..8b369a11
--- /dev/null
+++ b/src/lib/shipment/components/Shipments.jsx
@@ -0,0 +1,313 @@
+import DesktopView from '@/core/components/views/DesktopView'
+import MobileView from '@/core/components/views/MobileView'
+import Menu from '@/lib/auth/components/Menu'
+import { EllipsisVerticalIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline'
+import ImageNext from 'next/image'
+import { useRouter } from 'next/router'
+import { useQuery } from 'react-query'
+import _ from 'lodash-contrib'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
+import Manifest from '@/lib/treckingAwb/component/Manifest'
+import { useState } from 'react'
+import Pagination from '@/core/components/elements/Pagination/Pagination'
+import Link from 'next/link'
+import TransactionStatusBadge from '@/lib/transaction/components/TransactionStatusBadge'
+
+const { listShipments } = require('../api/listShipment')
+
+const Shipments = () => {
+  const router = useRouter()
+  const { q = '', page = 1 } = router.query
+
+  const limit = 15
+
+  const query = {
+    q: q,
+    offset: (page - 1) * limit,
+    limit
+  }
+  const [inputQuery, setInputQuery] = useState(q)
+  const queryString = _.toQuery(query)
+
+  const { data: shipments } = useQuery('shipments', () => listShipments({ query: queryString }))
+  const [idAWB, setIdAWB] = useState(null)
+
+  const pageCount = Math.ceil(shipments?.pickingTotal / limit)
+  let pageQuery = _.omit(query, ['limit', 'offset', 'context'])
+  pageQuery = _.pickBy(pageQuery, _.identity)
+  pageQuery = _.toQuery(pageQuery)
+
+  const closePopup = () => {
+    setIdAWB(null)
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    router.push(`${router.pathname}?q=${inputQuery}`)
+  }
+  return (
+    <>
+      <MobileView>
+        <div className='p-4 flex flex-col gap-y-4'>
+          <div className='flex justify-between gap-x-1'>
+            <div className='flex justify-between items-center gap-x-2 p-2 bg-white border border-gray-200 rounded-lg shadow'>
+              <div>
+                <ImageNext src='/images/BOX(1).svg' width={15} height={20} />
+              </div>
+              <h1 className='text-xs'>Pending</h1>
+              <h1 className='text-xs'>
+                {' '}
+                {shipments?.summary?.pendingCount} {'>'}
+              </h1>
+            </div>
+            <div className='flex justify-between items-center gap-x-2 p-2 bg-white border border-gray-200 rounded-lg shadow'>
+              <div>
+                <ImageNext src='/images/BOX_DELIVER_(1).svg' width={18} height={20} />
+              </div>
+              <h1 className='text-xs'>Pengiriman</h1>
+              <h1 className='text-xs'>
+                {' '}
+                {shipments?.summary?.shipmentCount} {'>'}
+              </h1>
+            </div>
+            <div className='flex justify-between items-center gap-x-2 p-2 bg-white border border-gray-200 rounded-lg shadow'>
+              <div>
+                <ImageNext src='/images/open-box(1).svg' width={16} height={20} />
+              </div>
+              <h1 className='text-xs'>Selesai</h1>
+              <h1 className='text-xs'>
+                {' '}
+                {shipments?.summary?.shipmentCount} {'>'}
+              </h1>
+            </div>
+          </div>
+
+          <form className='flex gap-x-3' onSubmit={handleSubmit}>
+            <input
+              type='text'
+              className='form-input'
+              placeholder='Cari Pengiriman...'
+              value={inputQuery}
+              onChange={(e) => setInputQuery(e.target.value)}
+            />
+            <button className='btn-light bg-transparent px-3' type='submit'>
+              <MagnifyingGlassIcon className='w-6' />
+            </button>
+          </form>
+
+          {shipments?.pickings.map((shipment) => (
+            <div className='p-4 shadow border border-gray_r-3 rounded-md' key={shipment.id}>
+              <div className='flex justify-between items-center mb-3'>
+                <div className='text-caption-2 text-gray_r-11'>
+                  <p>
+                    Kurir :{' '}
+                    <span className='text-gray_r-11 font-semibold'>
+                      {shipment.carrierName || '-'}
+                    </span>
+                  </p>
+                  <p className='mt-2'>No. Resi : {shipment.trackingNumber || '-'}</p>
+                </div>
+                <div className='flex justify-between'>
+                  {shipment?.delivered && (
+                    <div className='bg-green-100 p-2 rounded '>
+                      <p className='text-green-600 text-sm'>Pesanan Tiba</p>
+                    </div>
+                  )}
+                  {!shipment?.delivered && (
+                    <div className='bg-red-100 p-2 rounded '>
+                      <p className='text-red-600 text-sm'>Sedang Dikirim</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+              <hr />
+              <div className='flex justify-between mt-2 items-center mb-5'>
+                <div>
+                  <span className='text-caption-2 text-gray_r-11'>No. Transaksi</span>
+                  <Link href={`/my/transactions/${shipment.saleOrder.id}`}>
+                    <h2 className='text-danger-500 mt-1 mb-2'>{shipment.saleOrder.name}</h2>
+                  </Link>
+                  <span className='text-caption-2 text-gray_r-11'>{shipment.date}</span>
+                </div>
+                <div>
+                  <button
+                    onClick={() => setIdAWB(shipment.id)}
+                    className='bg-red-600 p-2 border border-red-600 rounded text-white w-24'
+                  >
+                    {!shipment.delivered ? 'Lacak' : 'Histori'}
+                  </button>
+                </div>
+              </div>
+              <hr />
+              <button
+                onClick={() => setIdAWB(shipment.id)}
+                className='flex items-center mt-1 gap-x-1 min-w-full'
+              >
+                <ImageNext src={`/images/BOX_DELIVERY_GREEN.svg`} width={20} height={20} />
+                <p className='text-sm text-green-700 truncate'>
+                  {shipment.lastManifest.description}
+                </p>
+                <p className='ml-auto'>{'>'}</p>
+              </button>
+            </div>
+          ))}
+
+          <Pagination
+            pageCount={pageCount}
+            currentPage={parseInt(page)}
+            url={router.pathname + pageQuery}
+            className='mt-2 mb-2'
+          />
+        </div>
+
+        <Manifest idAWB={idAWB} closePopup={closePopup} />
+      </MobileView>
+      <DesktopView>
+        <div className='container mx-auto flex py-10'>
+          <div className='w-3/12 pr-4'>
+            <Menu />
+          </div>
+          <div className='w-9/12'>
+            <div className='p-4 bg-white border border-gray_r-6 rounded mb-2'>
+              <h1 className='text-title-sm font-semibold'>Pengiriman</h1>
+              <div
+                class='flex items-center p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50'
+                role='alert'
+              >
+                <svg
+                  class='flex-shrink-0 inline w-4 h-4 mr-3'
+                  aria-hidden='true'
+                  fill='currentColor'
+                  viewBox='0 0 20 20'
+                >
+                  <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
+                </svg>
+                <div>
+                  Lacak pengiriman untuk setiap transaksi anda semakin mudah di Indoteknik.com
+                </div>
+              </div>
+              <div className='flex justify-between gap-x-5'>
+                <div class='max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow min-w-[268px]'>
+                  <h2 class='mb-2 text-lg font-bold tracking-tight'>Pending</h2>
+                  <div className='bg-red-100 border border-red-200 rounded-sm p-2 w-20 h-[39px] mb-2'>
+                    <div>
+                      <ImageNext
+                        src='/images/BOX(1).svg'
+                        width={25}
+                        height={20}
+                        style={{ stroke: 'red' }}
+                      />
+                    </div>
+                  </div>
+                  <h1 className='text-xl font-bold'>
+                    {shipments?.summary?.pendingCount} <span className='text-sm'>Pesanan</span>
+                  </h1>
+                </div>
+                <div class='max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow min-w-[268px]'>
+                  <h5 class='mb-2 text-lg font-bold tracking-tight'>Pengiriman</h5>
+                  <div className='bg-yellow-100 border border-yellow-200 rounded-sm p-1 w-20 mb-2'>
+                    <div>
+                      <ImageNext src='/images/BOX_DELIVER_(1).svg' width={30} height={20} />
+                    </div>
+                  </div>
+                  <h1 className='text-xl font-bold'>
+                    {shipments?.summary?.shipmentCount} <span className='text-sm'>Pesanan</span>
+                  </h1>
+                </div>
+                <div class='max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow min-w-[268px]'>
+                  <h5 class='mb-2 text-lg font-bold tracking-tight'>Pesanan Tiba</h5>
+                  <div className='bg-green-100 border border-green-200 rounded-sm p-1 w-20 mb-2'>
+                    <div>
+                      <ImageNext
+                        src='/images/open-box(1).svg'
+                        width={30}
+                        height={20}
+                        className='stroke-orange-600'
+                      />
+                    </div>
+                  </div>
+                  <h1 className='text-xl font-bold'>
+                    {shipments?.summary?.completedCount} <span className='text-sm'>Pesanan</span>
+                  </h1>
+                </div>
+              </div>
+            </div>
+            <div className='p-4 bg-white border border-gray_r-6 rounded'>
+              <div className='flex mb-6 items-center justify-between'>
+                <h1 className='text-title-sm font-semibold'>Detail Pengiriman</h1>
+                <form className='flex gap-x-2' onSubmit={handleSubmit}>
+                  <input
+                    type='text'
+                    className='form-input'
+                    placeholder='Cari Pengiriman...'
+                    value={inputQuery}
+                    onChange={(e) => setInputQuery(e.target.value)}
+                  />
+                  <button className='btn-light bg-transparent px-3' type='submit'>
+                    <MagnifyingGlassIcon className='w-6' />
+                  </button>
+                </form>
+              </div>
+              <table className='table-data'>
+                <thead>
+                  <tr>
+                    <th>Tanggal</th>
+                    <th>No. Resi</th>
+                    <th>No. Pengiriman</th>
+                    <th>Sales Order</th>
+                    <th>Purchase Order</th>
+                    <th>Expedisi</th>
+                    <th>Status</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {!shipments && (
+                    <tr>
+                      <td colSpan={7}>
+                        <div className='flex justify-center my-2'>
+                          <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+                  {shipments && shipments?.pickings?.length == 0 && (
+                    <tr>
+                      <td colSpan={7}>Tidak ada transaksi</td>
+                    </tr>
+                  )}
+                  {shipments?.pickings.map((shipment) => (
+                    <tr key={shipment.id}>
+                      <td>{shipment.date || '-'}</td>
+                      <td>{shipment.trackingNumber || '-'}</td>
+                      <td>{shipment.name || '-'}</td>
+                      <td>{shipment.saleOrder.name || '-'}</td>
+                      <td>{shipment.saleOrder.clientOrderRef || '-'}</td>
+                      <td>{shipment.carrierName || '-'}</td>
+                      <td>
+                        <button
+                          onClick={() => setIdAWB(shipment.id)}
+                          className='bg-red-600 border border-red-600 rounded-md text-sm text-white p-1 w-20'
+                        >
+                          Lacak
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              <Pagination
+                pageCount={pageCount}
+                currentPage={parseInt(page)}
+                url={router.pathname + pageQuery}
+                className='mt-2 mb-2'
+              />
+            </div>
+          </div>
+        </div>
+        <Manifest idAWB={idAWB} closePopup={closePopup} />
+      </DesktopView>
+    </>
+  )
+}
+
+export default Shipments
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 74f3dbd5..82eb1775 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -21,6 +21,7 @@ import Image from '@/core/components/elements/Image/Image'
 import { createSlug } from '@/core/utils/slug'
 import toTitleCase from '@/core/utils/toTitleCase'
 import useAirwayBill from '../hooks/useAirwayBill'
+import Manifest from '@/lib/treckingAwb/component/Manifest'
 
 const Transaction = ({ id }) => {
   const { transaction } = useTransaction({ id })
@@ -31,6 +32,7 @@ const Transaction = ({ id }) => {
   const poNumber = useRef(null)
   const poFile = useRef(null)
   const [uploadPo, setUploadPo] = useState(false)
+  const [idAWB, setIdAWB] = useState(null)
   const openUploadPo = () => setUploadPo(true)
   const closeUploadPo = () => setUploadPo(false)
   const submitUploadPo = async () => {
@@ -110,6 +112,10 @@ const Transaction = ({ id }) => {
     )
   }
 
+  const closePopup = () => {
+    setIdAWB(null)
+  }
+
   return (
     transaction.data?.name && (
       <>
@@ -158,6 +164,7 @@ const Transaction = ({ id }) => {
             </button>
           </div>
         </BottomPopup>
+        <Manifest idAWB={idAWB} closePopup={closePopup}></Manifest>
 
         <MobileView>
           <div className='flex flex-col gap-y-4 p-4'>
@@ -179,26 +186,28 @@ const Transaction = ({ id }) => {
           <div className='p-4'>
             <div className='font-medium'>Pengiriman</div>
             <div className='flex flex-col gap-y-3 mt-4'>
-              {queryAirwayBill.data?.airways?.map((airway) => (
+              {transaction?.data?.pickings?.map((airway) => (
                 <button
-                  className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between items-center text-left'
-                  key={airway?.waybillNumber}
-                  onClick={() => setAirwayBillPopup(airway?.waybillNumber)}
+                  className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left'
+                  key={airway?.id}
+                  onClick={() => setIdAWB(airway?.id)}
                 >
                   <div>
-                    <span className='text-sm text-gray_r-11'>No Resi</span>
-                    <p className='mt-1 font-medium'>{airway?.waybillNumber}</p>
+                    <span className='text-sm text-gray_r-11'>
+                      No Resi : {airway?.trackingNumber || '-'}{' '}
+                    </span>
+                    <p className='mt-1 font-medium'>{airway?.name}</p>
                   </div>
                   <div className='flex gap-x-2'>
-                    <div className='text-sm text-gray_r-11 badge-green'>
-                      {airway?.deliveryStatus?.status}
+                    <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1'>
+                      {airway?.delivered ? 'Pesanan Tiba' : 'Sedang Dikirim'}
                     </div>
                     <ChevronRightIcon className='w-5 stroke-2' />
                   </div>
                 </button>
               ))}
             </div>
-            {!queryAirwayBill?.data?.airways && (
+            {transaction?.data?.pickings == 0 && (
               <div className='badge-red text-sm px-2'>Belum ada pengiriman</div>
             )}
           </div>
@@ -368,27 +377,29 @@ const Transaction = ({ id }) => {
               </div>
 
               <div className='text-h-sm font-semibold mt-10 mb-4'>Pengiriman</div>
-              <div className='grid grid-cols-3 gap-4'>
-                {queryAirwayBill.data?.airways?.map((airway) => (
+              <div className='grid grid-cols-3 gap-1'>
+                {transaction?.data?.pickings?.map((airway) => (
                   <button
-                    className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between items-center text-left'
-                    key={airway?.waybillNumber}
-                    onClick={() => setAirwayBillPopup(airway?.waybillNumber)}
+                    className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left'
+                    key={airway?.id}
+                    onClick={() => setIdAWB(airway?.id)}
                   >
                     <div>
-                      <span className='text-sm text-gray_r-11'>No Resi</span>
-                      <p className='mt-1 font-medium'>{airway?.waybillNumber}</p>
+                      <span className='text-sm text-gray_r-11'>
+                        No Resi : {airway?.trackingNumber || '-'}{' '}
+                      </span>
+                      <p className='mt-1 font-medium'>{airway?.name}</p>
                     </div>
                     <div className='flex gap-x-2'>
-                      <div className='text-sm text-gray_r-11 badge-green'>
-                        {airway?.deliveryStatus?.status}
+                      <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1'>
+                        {airway?.delivered ? 'Pesanan Tiba' : 'Sedang Dikirim'}
                       </div>
                       <ChevronRightIcon className='w-5 stroke-2' />
                     </div>
                   </button>
                 ))}
               </div>
-              {!queryAirwayBill.data?.airways && (
+              {transaction?.data?.pickings.length == 0 && (
                 <div className='badge-red text-sm'>Belum ada pengiriman</div>
               )}
 
@@ -514,7 +525,7 @@ const Transaction = ({ id }) => {
           </div>
         </DesktopView>
 
-        {queryAirwayBill.data?.airways?.map((airway) => (
+        {/* {queryAirwayBill.data?.airways?.map((airway) => (
           <BottomPopup
             key={airway.waybillNumber}
             title='Detail Pengiriman'
@@ -564,7 +575,7 @@ const Transaction = ({ id }) => {
               </ol>
             </div>
           </BottomPopup>
-        ))}
+        ))} */}
       </>
     )
   )
diff --git a/src/lib/treckingAwb/api/getManifest.js b/src/lib/treckingAwb/api/getManifest.js
new file mode 100644
index 00000000..7d78a5f2
--- /dev/null
+++ b/src/lib/treckingAwb/api/getManifest.js
@@ -0,0 +1,9 @@
+const { default: odooApi } = require("@/core/api/odooApi")
+const { getAuth } = require("@/core/utils/auth")
+
+export const getManifest = async ({id}) => {
+    const auth = getAuth() 
+    const manifest = await odooApi('GET', `/api/v1/partner/${auth.partnerId}/stock-picking/${id}/tracking`)
+
+    return manifest
+}
\ No newline at end of file
diff --git a/src/lib/treckingAwb/component/Manifest.jsx b/src/lib/treckingAwb/component/Manifest.jsx
new file mode 100644
index 00000000..185a9d55
--- /dev/null
+++ b/src/lib/treckingAwb/component/Manifest.jsx
@@ -0,0 +1,177 @@
+import odooApi from '@/core/api/odooApi'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
+import { getAuth } from '@/core/utils/auth'
+import { useEffect, useState } from 'react'
+import { toast } from 'react-hot-toast'
+import ImageNext from 'next/image'
+
+const Manifest = ({ idAWB, closePopup }) => {
+  const [manifests, setManifests] = useState(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const formatCustomDate = (date) => {
+    const months = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec'
+    ]
+
+    const parts = date.split(' ') // Pisahkan tanggal dan waktu
+    const [datePart, timePart] = parts
+    const [yyyy, mm, dd] = datePart.split('-')
+    const [hh, min] = timePart.split(':')
+
+    const monthAbbreviation = months[parseInt(mm, 10) - 1]
+
+    return `${dd} ${monthAbbreviation} ${hh}:${min}`
+  }
+
+  const getManifest = async () => {
+    setIsLoading(true)
+    const auth = getAuth()
+    const list = await odooApi(
+      'GET',
+      `/api/v1/partner/${auth.partnerId}/stock-picking/${idAWB}/tracking`
+    )
+    setManifests(list)
+    setIsLoading(false)
+  }
+
+  useEffect(() => {
+    if (idAWB) {
+      getManifest()
+    } else {
+      setManifests(null)
+    }
+  }, [idAWB])
+
+  const [copied, setCopied] = useState(false)
+
+  const handleCopyClick = () => {
+    const textToCopy = manifests?.waybillNumber
+    navigator.clipboard.writeText(textToCopy)
+    setCopied(true)
+    toast.success('No Resi Berhasil di Copy')
+    setTimeout(() => setCopied(false), 2000) // Reset copied state after 2 seconds
+  }
+
+  return (
+    <>
+      {isLoading && (
+        <BottomPopup active={true} close=''>
+          <div className='leading-7 text-gray_r-12/80 flex justify-center'>Mohon Tunggu</div>
+          <div className='container flex justify-center my-4'>
+            <LogoSpinner width={48} height={48} />
+          </div>
+        </BottomPopup>
+      )}
+      {!isLoading && (
+        <BottomPopup
+          key={manifests?.waybillNumber}
+          title='Detail Pengiriman'
+          active={idAWB}
+          close={closePopup}
+        >
+          <div className='flex justify-between items-center mb-5'>
+            <h1 className='text-body-1'>Status Pesanan</h1>
+            {manifests?.delivered && (
+              <div className='bg-green-100 p-2 rounded '>
+                <p className='text-green-600 text-sm'>Pesanan Tiba</p>
+              </div>
+            )}
+            {!manifests?.delivered && (
+              <div className='bg-red-100 p-2 rounded '>
+                <p className='text-red-600 text-sm'>Sedang Dikirim</p>
+              </div>
+            )}
+          </div>
+          <div className=''>
+            <h1 className='text-body-1'>
+              Estimasi tiba pada <span className='text-gray_r-11 text-sm'>({manifests?.eta})</span>
+            </h1>
+            <h1 className='text-sm mt-2 mb-3'>
+              Dikirim Menggunakan{' '}
+              <span className='text-red-500 font-semibold'>{manifests?.deliveryOrder.carrier}</span>
+            </h1>
+            {manifests?.waybillNumber && (
+              <div className='flex justify-between items-center'>
+                <h1>No. Resi</h1>
+                <div className='flex justify-between gap-x-2 items-center'>
+                  <h1 className='font-semibold'>{manifests?.waybillNumber}</h1>
+                  <button
+                    className={`${copied ? 'text-gray-400' : 'text-red-600 '}`}
+                    onClick={() => handleCopyClick()}
+                  >
+                    <svg
+                      aria-hidden='true'
+                      fill='none'
+                      stroke='currentColor'
+                      stroke-width='1.5'
+                      viewBox='0 0 24 24'
+                      className='w-5 h-6'
+                    >
+                      <path
+                        d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75'
+                        stroke-linecap='round'
+                        stroke-linejoin='round'
+                      ></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+          <hr className='mt-4' />
+          <div className='pt-4'>
+            <ol class='relative border-l border-gray_r-7'>
+              {manifests?.manifests?.map((manifest, index) => (
+                <>
+                  <li class='mb-6 ml-4' key={index}>
+                    {manifests.delivered == true && index == 0 ? (
+                      <div
+                        class={`absolute w-6 h-6 rounded-full mt-1.5 -left-3 border ${
+                          index == 0 ? 'bg-green-100 border-green-100' : 'bg-gray_r-7 border-white'
+                        }`}
+                      >
+                        <ImageNext src='/images/open-box(1).svg' width={30} height={20} />
+                      </div>
+                    ) : (
+                      <div
+                        class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border bg-gray_r-7 border-white`}
+                      />
+                    )}
+                    {manifests.delivered != true && (
+                      <div
+                        class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border ${index == 0 ? 'bg-green-600 border-green-600' : 'bg-gray_r-7 border-white'} `}
+                      />
+                    )}
+
+                    <time class='text-sm leading-none text-gray-400'>
+                      {formatCustomDate(manifest.datetime)}
+                    </time>
+                    {manifests.delivered == true && index == 0 && (
+                      <p class={`leading-6 font-semibold text-sm text-green-600 `}>Sudah Sampai</p>
+                    )}
+                    <p class={`leading-6 text-[12px] text-gray_r-11`}>{manifest.description}</p>
+                  </li>
+                </>
+              ))}
+            </ol>
+          </div>
+        </BottomPopup>
+      )}
+    </>
+  )
+}
+
+export default Manifest
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 03147219..7f23b94b 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -6,16 +6,29 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { Toaster } from 'react-hot-toast'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import useDevice from '@/core/hooks/useDevice'
-import { useEffect, useState } from 'react'
+import { createContext, useContext, useEffect, useState } from 'react'
 import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
+import { SessionProvider } from 'next-auth/react'
+import { getAuth } from '@/core/utils/auth'
 
 const queryClient = new QueryClient()
 
-function MyApp({ Component, pageProps }) {
+export const AuthContext = createContext({
+  authenticated : false,
+  setAuthenticated : (auth) => {}
+})
+
+function MyApp({ Component, pageProps: { session, ...pageProps } }) {
   const router = useRouter()
   const { isMobile } = useDevice()
 
   const [animateLoader, setAnimateLoader] = useState(false)
+  const [authenticated, setAuthenticated] = useState(null)
+  const auth = getAuth()
+
+  // useEffect(() => {
+  //   setAuthenticated(auth)
+  // }, [auth])
 
   useEffect(() => {
     const handleRouteChangeStart = () => setAnimateLoader(true)
@@ -48,41 +61,43 @@ function MyApp({ Component, pageProps }) {
   }, [isMobile])
 
   return (
-    <>
-      <AnimatePresence>
-        {animateLoader && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{
-              duration: 0.1
-            }}
-            className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center'
-          >
-            <LogoSpinner />
-          </motion.div>
-        )}
-      </AnimatePresence>
-      <Toaster
-        position='top-center'
-        containerStyle={toasterStyle}
-        toastOptions={{
-          duration: 3000,
-          className: 'border border-gray_r-8'
-        }}
-      />
-      <NextProgress color='#F01C21' options={{ showSpinner: false }} />
-      <QueryClientProvider client={queryClient}>
-        <AnimatePresence
-          mode='popLayout'
-          initial={false}
-          onExitComplete={() => window.scrollTo(0, 0)}
-        >
-          {!animateLoader && <Component {...pageProps} key={router.asPath} />}
+    // <AuthContext.Provider value={{authenticated, setAuthenticated}}>
+      <SessionProvider session={session}>
+        <AnimatePresence>
+          {animateLoader && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{
+                duration: 0.1
+              }}
+              className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center'
+            >
+              <LogoSpinner />
+            </motion.div>
+          )}
         </AnimatePresence>
-      </QueryClientProvider>
-    </>
+        <Toaster
+          position='top-center'
+          containerStyle={toasterStyle}
+          toastOptions={{
+            duration: 3000,
+            className: 'border border-gray_r-8'
+          }}
+        />
+        <NextProgress color='#F01C21' options={{ showSpinner: false }} />
+        <QueryClientProvider client={queryClient}>
+          <AnimatePresence
+            mode='popLayout'
+            initial={false}
+            onExitComplete={() => window.scrollTo(0, 0)}
+          >
+            {!animateLoader && <Component {...pageProps} key={router.asPath} />}
+          </AnimatePresence>
+        </QueryClientProvider>
+      </SessionProvider>
+    // </AuthContext.Provider>
   )
 }
 
diff --git a/src/pages/api/auth/[...nextauth].js b/src/pages/api/auth/[...nextauth].js
new file mode 100644
index 00000000..3c433167
--- /dev/null
+++ b/src/pages/api/auth/[...nextauth].js
@@ -0,0 +1,26 @@
+import odooApi from '@/core/api/odooApi'
+import NextAuth from 'next-auth/next'
+import GoogleProvider from 'next-auth/providers/google'
+
+export default NextAuth({
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET
+    })
+  ],
+  callbacks: {
+    async jwt({ token, account }) {
+      if (account) {
+        token.accessToken = account.access_token
+      }
+      return token
+    },
+    async session({ session, token, user }) {
+      session.accessToken = token.accessToken
+     
+      return session
+    }
+  },
+  secret: process.env.JWT_SECRET
+})
diff --git a/src/pages/my/menu.jsx b/src/pages/my/menu.jsx
index c8e1e7e9..a0ce223e 100644
--- a/src/pages/my/menu.jsx
+++ b/src/pages/my/menu.jsx
@@ -5,15 +5,19 @@ import useAuth from '@/core/hooks/useAuth'
 import { deleteAuth } from '@/core/utils/auth'
 import IsAuth from '@/lib/auth/components/IsAuth'
 import { ChevronRightIcon, UserIcon } from '@heroicons/react/24/solid'
+import { signOut, useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
+import ImageNext from 'next/image'
 
 export default function Menu() {
   const auth = useAuth()
   const router = useRouter()
+  const { data: session } = useSession()
 
   const logout = () => {
-    deleteAuth()
-    router.push('/login')
+    deleteAuth().then(() => {
+      router.push('/login')
+    })
   }
 
   return (
@@ -40,10 +44,38 @@ export default function Menu() {
             <MenuHeader>Aktivitas Pembelian</MenuHeader>
 
             <div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
-              <LinkItem href='/my/quotations'>Daftar Quotation</LinkItem>
-              <LinkItem href='/my/transactions'>Daftar Transaksi</LinkItem>
-              <LinkItem href='/my/invoices'>Invoice & Faktur Pajak</LinkItem>
-              <LinkItem href='/my/wishlist'>Wishlist</LinkItem>
+              <LinkItem href='/my/quotations'>
+                {' '}
+                <div className='flex gap-x-3 items-center'>
+                  <ImageNext src='/images/icon/icon_daftar_quotation.svg' width={18} height={20} />
+                  <p>Daftar Quotation</p>
+                </div>
+              </LinkItem>
+              <LinkItem href='/my/transactions'>
+                <div className='flex gap-x-3 items-center'>
+                  <ImageNext src='/images/icon/icon_daftar_transaksi.svg' width={18} height={20} />
+                  <p>Daftar Transaksi</p>
+                </div>
+              </LinkItem>
+              <LinkItem href='/my/shipments'>
+                <div className='flex gap-x-3 items-center'>
+                  <ImageNext src='/images/icon/icon_pengiriman.svg' width={18} height={20} />
+                  <p>Daftar Pengiriman</p>
+                </div>
+              </LinkItem>
+              <LinkItem href='/my/invoices'>
+                {' '}
+                <div className='flex gap-x-3 items-center'>
+                  <ImageNext src='/images/icon/icon_invoice.svg' width={18} height={20} />
+                  <p>Invoice & Faktur Pajak</p>
+                </div>
+              </LinkItem>
+              <LinkItem href='/my/wishlist'>
+                <div className='flex gap-x-3 items-center'>
+                  <ImageNext src='/images/icon/icon_wishlist.svg' width={18} height={20} />
+                  <p>Wishlist</p>
+                </div>
+              </LinkItem>
             </div>
           </div>
 
@@ -51,7 +83,13 @@ export default function Menu() {
             <MenuHeader>Pusat Bantuan</MenuHeader>
 
             <div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
-              <LinkItem href='/'>Layanan Pelanggan</LinkItem>
+              <LinkItem href='/'>
+                {' '}
+                <div className='flex gap-x-3 items-center'>
+                  <ImageNext src='/images/icon/icon_layanan_pelanggan.svg' width={18} height={20} />
+                  <p>Layanan Pelanggan</p>
+                </div>
+              </LinkItem>
             </div>
           </div>
 
@@ -59,10 +97,15 @@ export default function Menu() {
             <MenuHeader>Pengaturan Akun</MenuHeader>
 
             <div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
-              <LinkItem href='/my/address'>Daftar Alamat</LinkItem>
+              <LinkItem href='/my/address'>
+                <div className='flex gap-x-3 items-center'>
+                  <ImageNext src='/images/icon/icon_daftar_alamat.svg' width={18} height={20} />
+                  <p>Daftar Alamat</p>
+                </div>
+              </LinkItem>
             </div>
 
-            <div onClick={logout} className='p-4 mt-2'>
+            <div onClick={() => logout()} className='p-4 mt-2'>
               <button className='w-full btn-red'>Keluar Akun</button>
             </div>
           </div>
diff --git a/src/pages/my/shipments/index.jsx b/src/pages/my/shipments/index.jsx
new file mode 100644
index 00000000..cb69c4e9
--- /dev/null
+++ b/src/pages/my/shipments/index.jsx
@@ -0,0 +1,29 @@
+import Seo from '@/core/components/Seo'
+import AppLayout from '@/core/components/layouts/AppLayout'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import DesktopView from '@/core/components/views/DesktopView'
+import MobileView from '@/core/components/views/MobileView'
+import IsAuth from '@/lib/auth/components/IsAuth'
+import dynamic from 'next/dynamic'
+
+const ShipmentsComponent = dynamic(() => import('@/lib/shipment/components/Shipments'))
+
+export default function MyShipments() {
+  return (
+    <IsAuth>
+      <Seo title='Shipments - Indoteknik.com' />
+
+      <MobileView>
+        <AppLayout title='Pengiriman'>
+          <ShipmentsComponent />
+        </AppLayout>
+      </MobileView>
+
+      <DesktopView>
+        <BasicLayout>
+          <ShipmentsComponent />
+        </BasicLayout>
+      </DesktopView>
+    </IsAuth>
+  )
+}