add icon menu sidebar, add pagination

13 files changed, 531 insertions, 79 deletions

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/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index e54992be..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,33 +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')}>
-        Daftar Pengiriman
+        <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/shipment/components/Shipments.jsx b/src/lib/shipment/components/Shipments.jsx
index eb14c77f..d62afcb7 100644
--- a/src/lib/shipment/components/Shipments.jsx
+++ b/src/lib/shipment/components/Shipments.jsx
@@ -1,7 +1,7 @@
 import DesktopView from '@/core/components/views/DesktopView'
 import MobileView from '@/core/components/views/MobileView'
 import Menu from '@/lib/auth/components/Menu'
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
+import { EllipsisVerticalIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline'
 import ImageNext from 'next/image'
 import { useRouter } from 'next/router'
 import { useQuery } from 'react-query'
@@ -9,6 +9,9 @@ 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')
 
@@ -19,21 +22,30 @@ const Shipments = () => {
   const limit = 15
 
   const query = {
-    name: q,
+    q: q,
     offset: (page - 1) * limit,
     limit
   }
-
+  console.log('ini query', query)
+  const [inputQuery, setInputQuery] = useState(q)
   const queryString = _.toQuery(query)
 
   const { data: shipments } = useQuery('shipments', () => listShipments({ query: queryString }))
-  const [ idAWB, setIdAWB ] = useState(null)
+  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 () => {}
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    router.push(`${router.pathname}?q=${inputQuery}`)
+  }
   return (
     <>
       <MobileView>
@@ -44,21 +56,30 @@ const Shipments = () => {
                 <ImageNext src='/images/BOX(1).svg' width={15} height={20} />
               </div>
               <h1 className='text-xs'>Pending</h1>
-              <h1 className='text-xs'>99 {'>'}</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={15} height={20} />
+                <ImageNext src='/images/BOX_DELIVER_(1).svg' width={18} height={20} />
               </div>
               <h1 className='text-xs'>Pengiriman</h1>
-              <h1 className='text-xs'>99 {'>'}</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'>99 {'>'}</h1>
+              <h1 className='text-xs'>
+                {' '}
+                {shipments?.summary?.shipmentCount} {'>'}
+              </h1>
             </div>
           </div>
 
@@ -67,14 +88,80 @@ const Shipments = () => {
               type='text'
               className='form-input'
               placeholder='Cari Pengiriman...'
-              value=''
+              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_DELIVER_(1).svg`} width={20} height={20} />
+                <p className='text-sm text-green-600 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'>
@@ -155,7 +242,7 @@ const Shipments = () => {
                     type='text'
                     className='form-input'
                     placeholder='Cari Pengiriman...'
-                    value=''
+                    value={inputQuery}
                     onChange={(e) => setInputQuery(e.target.value)}
                   />
                   <button className='btn-light bg-transparent px-3' type='submit'>
@@ -199,7 +286,10 @@ const Shipments = () => {
                       <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'>
+                        <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>
@@ -207,10 +297,16 @@ const Shipments = () => {
                   ))}
                 </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}/>
+        <Manifest idAWB={idAWB} closePopup={closePopup} />
       </DesktopView>
     </>
   )
diff --git a/src/lib/treckingAwb/api/getManifest.js b/src/lib/treckingAwb/api/getManifest.js
index e69de29b..7d78a5f2 100644
--- a/src/lib/treckingAwb/api/getManifest.js
+++ 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
index b8ad78c4..185a9d55 100644
--- a/src/lib/treckingAwb/component/Manifest.jsx
+++ b/src/lib/treckingAwb/component/Manifest.jsx
@@ -1,70 +1,175 @@
+import odooApi from '@/core/api/odooApi'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
-import { useState } from 'react'
+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 }) => {
-  console.log('ini adalah', idAWB)
-  const airway = {
-    waybillNumber: '1234',
-    deliveryOrder: {
-      name: 'name',
-      carrier: 'carrier'
-    },
-    manifests: [
-      {
-        datetime: '12/12/2023',
-        description: 'ini descripsi'
-      }
+  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 (
     <>
-      <BottomPopup
-        key={airway.waybillNumber}
-        title='Detail Pengiriman'
-        active={idAWB}
-        close={closePopup}
-      >
-        <div className='flex flex-col gap-y-4 my-4'>
-          <div className='flex justify-between'>
-            <div className='text-gray_r-11'>No Pengiriman</div>
-            <div>{airway?.deliveryOrder?.name}</div>
+      {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>
-          <div className='flex justify-between'>
-            <div className='text-gray_r-11'>Kurir</div>
-            <div>{airway?.deliveryOrder?.carrier}</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='flex justify-between'>
-            <div className='text-gray_r-11'>No Resi</div>
-            <div>{airway?.waybillNumber}</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>
-        </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'} `}
+                      />
+                    )}
 
-        <div className='pt-4'>
-          <div className='font-semibold text-body-1 mb-4'>Status Pengiriman</div>
-          <ol class='relative border-l border-gray_r-7'>
-            {airway?.manifests?.map((manifest, index) => (
-              <li class='mb-6 ml-4' key={index}>
-                <div
-                  class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border ${
-                    index == 0 ? 'bg-red-600 border-red-600' : 'bg-gray_r-7 border-white'
-                  }`}
-                />
-                <time class='text-sm leading-none text-gray-400'>{manifest.datetime}</time>
-                <p
-                  class={`leading-6 font-medium text-body-2 mt-2 ${
-                    index == 0 ? 'text-red-600' : 'text-gray_r-11'
-                  }`}
-                >
-                  {manifest.description}
-                </p>
-              </li>
-            ))}
-            {(!airway?.manifests || airway?.manifests?.length == 0) && (
-              <div className='badge-red text-sm'>Belum ada pengiriman</div>
-            )}
-          </ol>
-        </div>
-      </BottomPopup>
+                    <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>
+      )}
     </>
   )
 }