From b2033ed5a2f18a35e1e43bc7a6c0ab81d338cd75 Mon Sep 17 00:00:00 2001
From: Darel <fedrickdarel@gmail.com>
Date: Thu, 29 Mar 2018 16:32:20 +0800
Subject: [PATCH] update meter trackers

---
 .vs/IZYIM-mobile-client/v15/.suo | Bin 64000 -> 57856 bytes
 .vs/VSWorkspaceState.json        |   2 +-
 .vs/slnx.sqlite                  | Bin 94208 -> 94208 bytes
 css/global.style.css             |   3 +-
 example-element.html             |   4 +-
 meter-order-details.html         | 294 +++++++++++++++++++++++++++++++
 meter-progress-trackers.html     |  17 +-
 7 files changed, 309 insertions(+), 11 deletions(-)
 create mode 100644 meter-order-details.html

diff --git a/.vs/IZYIM-mobile-client/v15/.suo b/.vs/IZYIM-mobile-client/v15/.suo
index 3d89bded1f4fe5e5bb0232eda8610795d1667eba..aa94c17c6f1163e5c4b80da5b067df0f31707cc4 100644
GIT binary patch
delta 2589
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
LRmC%JcCo(ze2I^x

delta 3410
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

diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
index 0a038dd..f199a58 100644
--- a/.vs/VSWorkspaceState.json
+++ b/.vs/VSWorkspaceState.json
@@ -2,6 +2,6 @@
   "ExpandedNodes": [
     ""
   ],
-  "SelectedNode": "\\arrangements-delivery_arrangements1.html",
+  "SelectedNode": "\\meter-order-details.html",
   "PreviewInSolutionExplorer": false
 }
\ No newline at end of file
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
index cd9caa5ee4d61bf4bc01ef8b3c327fa5e1dfa19b..971d1b09f64ce3540aacf8e7fbdbbe92a1146b27 100644
GIT binary patch
delta 4061
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
QC7Q7l8yKF}0YA|F2f;tr>;M1&

delta 3693
zcmZWr3vg7`89rz4-E;4`kG-1>u)EnLn+Fh*z><YLu>lhDfV?0)oQaCb8kS`9THI`6
zP(nakP-8;EK^LJAVJj-FbYN{lE6-{1Q9A-UOsySLbSgfGj<hq{jum_E-t30p+?oCV
z`~Cm_{pbJBIse`r*Y!KD>xbfW{PyAaV)}csp~!-BcJg{XSg~^>d1jd{bjdP<Q}P!s
z%5vr>IrEleWiN3$L!aA2iq1Ac4lS%Q=g-hF3t*Y2&Ao1Gr{CRP+Tr*3w{AF<1&w{o
z1yI45bSPH;cd13nG?<mQlp&?k@Qyq#zbL!)7scDsW%P6LL;Q+(h<{mp0{O)I#bR_#
z1j1j1*M#Q<pHLwr;{W0g@HxB_*I_5-`EmXnzlmSUo4Ieex40npG}pmZav2;#6X*;I
zpw;LeG*=weAD*l4kp8D%%>IWx%l5K`EM(r4g3K<aiZLmI?rP)-B^xt!`ehps@RBPv
z4l*=?Wd7Q|x~up8V}Aa61Y8uIL(U)O1&a3T7v6k2e;wJgB7^j;;E@K9ffd;%P1O$r
z&ING(8a43a;&iFm-`*ApB(Nkm5>i;QB%=0Csb@=ac#Wu_lAJHeG%j}BNl;Lsf~27|
zn)$KPgjg*=Oa<~{fRWGL>GqSur3n%Gi={I}%_Ucdz(z7$GpE8ijWz}%5DR$Z=<bXx
zHMR(WnGhpKXP0+*1T-zDevn7q&YWctjI1t8$kgbK@d(6FnwBU_j7cMI?2JO>aG8CL
z=5H=UAc5xabZm0>I9fXG5zd)*1Z<S3v(e|-;*W+}eujXZ`nNpX<@Rl*0r8OlB9|vd
z%5|38N;UrE0tB4Ye_f-`?e6Go_WG0N6{I`1bTq|90^{-#NTn`~Uf(8fw`-b>44217
zNROA>BkJYyl!*FWd2&QeT$yapvd&(FKpv$e@W3oSl83aeEG*RQ;*2;1th72$yQ|3^
zEiN$&flL}!=I!toJ>u^4w!0l(|7J^+;h!sKN0J#<rB0rbxeJJERh;C%)3JV4O2nF}
zTJLdt{ZX1&3j$`Ed^1fG&23578mnyt-7Hfy>-Z{LB<qi>?2{#C%tfG-9yQ`U7(Z3w
znu=&+dMcug8L5~VA^1Z@^h|zKk?NY<q$C8?W83L=`5K!SG}3js8vWCbr(6K+KW!LA
zv7H94H7C;5t4e86Np-2CeN%Mt{>qdBEsMp5Kr;2wD!lVbnXOuMv)b@G4P>-3dZs>{
zQg2tLO?J1CC4)5!$?}2lya-Q*TxRluDT}6Y$>eg?+{v)an7vgAvD5AMtU{oPj*B#_
z!|9lAGTaO1hkJc-AYPq7<zF8>d1I+emX%}~r{Cf{iCnKvCs(SY!(qI7aisUp)D#F>
zD*ymp<Z?~6G|8pDKSF2Re7vBstJ7bI5tuZGOZv%R45M`PfpCyD9OP}ER&Fk*wt<e#
zyUNT(lel5}%1^C<NoHjUa7bOyP$)mI{8>3|IAb_&xUL){mMtqKsmt)L`bb?;S136N
zOD1C;0uV#Ao}oRdyE<oS0olDR(Xy`}?K`%{n5`LWRpZ`WMP&!c*=>o4JbPl5?=AB2
zwjSCQt`+o<`ra}t4XHkHDJGeQK#1lsYRvFNMteUw*Gt*@QQ@V{WcBt9Xz=aQ@~wm9
z`1YPYie7H|$|z}RWE!&fw0UA}7479pbyX5YXtqb&_eT&>LozD6BZxqef#zl3y;y0a
z%~Yc>MFunOJJ<20QPdEXhvxcv^--gsAu7*4b3eKvoxC%QI{op@736eZ#oAs_frcO!
zF)P%duhDt_iX121FnH0B^1gCRX;X3)o!rl_<^IK|7>c+mF2N8hk8@9OXZedlwqV7#
z@hA9ge1?A<|3>!6<^1o-eLK>{Q}S7yEj=k_^9RV#j#->|H2j2OjK9;9p*^`|WN;xl
zzw1H9!MMoqt~64;I~Q@M0do1s_<)0WOAxBze*k({`1Q9Xh}_!!3OVv*qbS}7IQrLv
zm{=U*pIWPP7=pktIs5IZ9-T|+>RVHr_aRrCqtm~&&F!GWD)eOkgOI#CxPV?oj+xJF
zB)4{@3fe7Vl9_U{^N=O<(15J^<iUE<uqTV9o1iLb%wndMz>y5~7Lz@D9u9}Ykw`eF
zveDN*?Yts^576#9_54fxh=9>Ba`7Hnkgge;kW+b2`IX{P78!n!w{y3+J=_IDKDvc2
z8nFC6m&(=gb@(fM1&8pn_)*--r{FsIemS3CBfT!J7CsUFBpefV3r#{TUn(8J>0-Vp
z38msZX_)_pKjXj(|07>0dHHKntyC<f<K?1FGK#mv55zb5Q{r*)8L?&Rp`SGC^`v1W
zk6p;RfLZ|ke!(HvbK{Vd@2?X9;4y7D$HoE@-2Xtx@O%l>0YGXGyl$6I0tsq=O>qX+
z4q$XJS|!#7LiU4J9qBz3Pr46nWDUOrDdfUHB9p_m6ZqU5GE^-S{%}2;&9(w^bugP8
z8Jtbdjc{szSxmdG0=VAi?)HRTBCW3<Il?YrH-^{BO*Z?~3v3eOM$Qm-;T;_<sh-J4
z4Aj-yCNyzV6JKiL3r&2kiO)1~Lld78&l^><b?S@N2329S0adItKc#`JCYaFQ-pG84
z@i6}maBJWhYnOh5K1Z*xH`&YVE9?O4VXN6R{ULo`z*!8ffpxXeJSNq`T4*r^u>hc=
zKpyHKJ9{=>0@K;KK|b(tF-$WDxx0<?SW6HEP8P#i`m~Jrpgs_@7RJS;C7Xim-L7d?
zOOVlAQ=Rcao#vV<nS$_c*HoGks3~XbQ)b2=?bBRSB-7FDce|#rNk@AF50}71eUc^q
z=(ez{n53AFK1N*=MnPct252oZg4>z;XTc1B&E{}zn|-c!_hw(}SgQbVa&j0e^LF|C
z&FlQ`EmIn<1s6@$v6jFK8{jMiPR~jn^8~WiL;7d^8pWF@@n6qM9cv0~Sr6%Fz)KY0
z9L6)iVe0Ru8SHi~gU8qD4=0Eyl>dM!b(AH_iDdnDQ^F{tF4(4jY<|M1PE&i*6GmZJ
zmAmHCv&XA+*0Hw9)R$%@oU991Id*LWoG;9j84%=pvGT1lp?t!h=RL|_`0oRj23RPD
zq+{I6+yM8UYz#Csz>UxrIM)EX<GKC#7yKeVkr%jcaX0qh2k>g{BfON-Sm}{H#f-Y)
zJCFh3abi4?G$+eMm+?5j2?^n<yd9nHHg}_cQYO6GLMyhBuU@s2y(gCU<p=BOR^;SR
zUxi85b#2+?^1Ii&d;B(5V9dJkPS`$IP3zqByJ?f!AKPbBrW*#vt}BZ)%=RgE0*SHd
zyd8~gp2k)iobvoq^<3ZV@o5}iU}mPSdF)mbtb$NCw$uaL7-?#2Z8u5F>B=-(3IK9=
V6>;AKFvT`;XBK8`UOW6i_kZZ?RK)-Q

diff --git a/css/global.style.css b/css/global.style.css
index eb40cc3..25b284d 100644
--- a/css/global.style.css
+++ b/css/global.style.css
@@ -1039,7 +1039,7 @@ select.form-element{
 	position: relative;
 	-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
 	-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
-	box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
+	box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.46);
 	border-radius: 3px;
 	cursor: pointer;
 }
@@ -1654,6 +1654,7 @@ select.form-element{
     display: block;
     width: 100%;
     clear: both;
+    height: 2px;
     margin: 10px 0;
 }
 .form-divider-3 {
diff --git a/example-element.html b/example-element.html
index fda14ad..ce4c1be 100644
--- a/example-element.html
+++ b/example-element.html
@@ -178,10 +178,10 @@
 
                         <div class="form-divider"></div>
 
-                        <div class="expandable-item accordion active" data-group="accordion2">
+                        <div class="expandable-item accordion active">
                             <div class="expandable-header">
                                 <i class="list-icon fa fa-adjust"></i>
-                                <h3 class="list-title">Header</h3>
+                                <h3 class="list-title">Item Code 1</h3>
                                 <i class="list-arrow fa fa-angle-down"></i>
                             </div>
                             <div class="expandable-content" style="max-height: 164px;">
diff --git a/meter-order-details.html b/meter-order-details.html
new file mode 100644
index 0000000..7c9edab
--- /dev/null
+++ b/meter-order-details.html
@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>AzureUI - METER ORDER DETAILS</title>
+    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,900" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
+    <link rel="stylesheet" type="text/css" href="css/global.style.css">
+</head>
+
+<body>
+
+    <div class="nav-menu">
+
+        <nav class="menu">
+            <!-- profile logo start -->
+            <div class="nav-header">
+                <a href="home.html"><img src="images/CIEF.png" width="160"></a>
+            </div>
+            <!-- profile logo end -->
+            <!-- Menu navigation start -->
+            <div class="nav-container">
+                <ul class="main-menu">
+                    <li>
+                        <a href="home.html"><i class="fa fa-home"></i> Home</a>
+                    </li>
+                    <li>
+                        <a href="#"><i class="fa fa-bell"></i> Notice</a>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);"><i class="fa fa-briefcase"></i> Arrangement <span class="fa fa-angle-down"></span></a>
+                        <ul>
+                            <li><a href="arrangements-warehouse_receive_note1.html" data-loader="show"><i class="fa fa-industry"></i> Warehouse Receive Note</a></li>
+                            <li><a href="arrangements-shipment_arrangements1.html" data-loader="show"><i class="fa fa-ship"></i> Shipment Arrangement</a></li>
+                            <li><a href="arrangements-delivery_arrangements1.html" data-loader="show"><i class="fa fa-truck"></i> Delivery Arrangement</a></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);"><i class="fa fa-shopping-cart"></i> Orders <span class="fa fa-angle-down"></span></a>
+                        <ul>
+                            <li><a href="shipping-order.html" data-loader="show"><i class="fa fa-truck"></i> Shipping Order</a></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <a href="#"><i class="fa fa-comments"></i> Messenger</a>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);"><i class="fa fa-shopping-cart"></i> Track Order</a>
+                    </li>
+                    <li>
+                        <a href="example-element.html"><i class="fa fa-code"></i>Example Element</a>
+                    </li>
+                </ul>
+            </div>
+            <!-- Menu navigation end -->
+        </nav>
+    </div>
+
+    <div class="wrapper">
+        <div class="wrapper-inline">
+            <!-- Header area start -->
+            <header style="background-color: #FFF">
+                <a class="go-back-link" href="javascript:history.back();"><i class="fa fa-arrow-left"></i></a>
+                <h1 id="HT" class="page-title" style="color: #000">Order Details</h1>
+                <div class="navi-menu-button">
+                    <em></em>
+                    <em></em>
+                    <em></em>
+                </div>
+            </header>
+            <!-- Header area end -->
+            <!-- Main Content Start Here -->
+            <main class="fix-top-menu">
+                <section class="container">
+                    <div class="form-divider-2"></div>
+                    <div class="form-label-divider">
+                        <span class="label-span">Order Details</span>
+                    </div>
+                    <!-- Order Detail Data Start Here -->
+                    <div class="form-row">
+                        <a class="a-meter-sub-title">Order No</a>
+                        <br />
+                        <a class="a-meter-text-data">00011</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Marking</a>
+                        <br />
+                        <a class="a-meter-text-data">HQ123</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Supplier Name</a>
+                        <br />
+                        <a class="a-meter-text-data">FedEx</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Supplier Contact Person</a>
+                        <br />
+                        <a class="a-meter-text-data">George</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Supplier Contact Person No</a>
+                        <br />
+                        <a class="a-meter-text-data">011-3751109</a>
+                    </div>
+                    <!-- Order Detail Data End Here -->
+                    <div class="form-divider-2"></div>
+                    <div class="form-label-divider">
+                        <span class="label-span">Warehouse Details</span>
+                    </div>
+                    <!-- Warehouse Detail Data Start Here -->
+                    <div class="form-row">
+                        <a class="a-meter-sub-title">Name</a>
+                        <br />
+                        <a class="a-meter-text-data">Alliances</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Address</a>
+                        <br />
+                        <a class="a-meter-text-data">Street No Where Found</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">City</a>
+                        <br />
+                        <a class="a-meter-text-data">Unkown</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Postcode</a>
+                        <br />
+                        <a class="a-meter-text-data">007</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">State</a>
+                        <br />
+                        <a class="a-meter-text-data">NYC</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Country</a>
+                        <br />
+                        <a class="a-meter-text-data">United States</a>
+                    </div>
+                    <!-- Warehouse Detail Data End Here -->
+                    <div class="form-divider-2"></div>
+                    <div class="form-label-divider">
+                        <span class="label-span">Delivery Details</span>
+                    </div>
+                    <!-- Delivery Detail Data Start Here -->
+                    <div class="form-row">
+                        <a class="a-meter-sub-title">Name</a>
+                        <br />
+                        <a class="a-meter-text-data">asd</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Address</a>
+                        <br />
+                        <a class="a-meter-text-data">asd</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">City</a>
+                        <br />
+                        <a class="a-meter-text-data">asd</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Postcode</a>
+                        <br />
+                        <a class="a-meter-text-data">asd</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">State</a>
+                        <br />
+                        <a class="a-meter-text-data">asd</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Country</a>
+                        <br />
+                        <a class="a-meter-text-data">asd</a>
+                    </div>
+                    <!-- Delivery Detail Data End Here -->
+                    <div class="form-divider-2"></div>
+                    <div class="form-label-divider">
+                        <span class="label-span">Packaging List</span>
+                    </div>
+                    <div class="form-divider-2"></div>
+                    <!-- Packing Item List Start Here -->
+                    <div class="expandable-item accordion" data-group="accordion2">
+                        <div class="expandable-header">
+                            <i class="list-icon fa fa-adjust"></i>
+                            <h3 class="list-title">Item Code 1</h3>
+                            <i class="list-arrow fa fa-angle-down"></i>
+                        </div>
+                        <div class="expandable-content" style="max-height: 164px;">
+                            <div class="padding-content">
+                                <!-- Delivery Detail Data Start Here -->
+                                <div class="form-row">
+                                    <a class="a-meter-sub-title">Description</a>
+                                    <br />
+                                    <a class="a-meter-text-data">42 inch</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Model</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Bravia</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Qty</a>
+                                    <br />
+                                    <a class="a-meter-text-data">22</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">UOM</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Selangor</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">CBM</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Height: 22.00</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Width: 22.00</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Depth: 22.00</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Weight</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Gross: 22.00</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Nett: 22.00</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Photo</a>
+                                    <div class="txt-center">
+                                        <div class="form-divider-2"></div>
+                                        <div class="profile-image">
+                                            <div class="profile-image-item">
+                                                <img id="CompanyProfile" src="avatar.png" width="210" height="110" />
+                                            </div>
+                                        </div>
+                                    </div>                            
+                                </div>
+                                <!-- Delivery Detail Data End Here -->
+                            </div>
+                        </div>
+                    </div>
+                    <div class="expandable-item accordion" data-group="accordion2">
+                        <div class="expandable-header">
+                            <i class="list-icon fa fa-adjust"></i>
+                            <h3 class="list-title">Item Code 2</h3>
+                            <i class="list-arrow fa fa-angle-down"></i>
+                        </div>
+                        <div class="expandable-content" style="max-height: 164px;">
+                            <div class="padding-content">
+                                <!-- Delivery Detail Data Start Here -->
+                                <div class="form-row">
+                                    <a class="a-meter-sub-title">Description</a>
+                                    <br />
+                                    <a class="a-meter-text-data">42 inch</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Model</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Bravia</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Qty</a>
+                                    <br />
+                                    <a class="a-meter-text-data">22</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">UOM</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Selangor</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">CBM</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Height: 22.00</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Width: 22.00</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Depth: 22.00</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Weight</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Gross: 22.00</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Nett: 22.00</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Photo</a>
+                                    <div class="txt-center">
+                                        <div class="form-divider-2"></div>
+                                        <div class="profile-image">
+                                            <div class="profile-image-item">
+                                                <img id="CompanyProfile" src="avatar.png" width="210" height="110" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- Delivery Detail Data End Here -->
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Packing Item List End Here -->
+                    <div class="form-divider-2"></div>
+                </section>
+            </main>
+            <!-- Main Content End Here -->
+        </div>
+    </div>
+
+    <!-- Required For All Pages, Otherwise Ugly Others Function Won't Work -->
+    <script src="js/jquery-3.2.1.min.js"></script>
+    <script src="js/global.script.js"></script>
+    <!-- Required For All Pages, Otherwise Ugly Others Function Won't Work -->
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/meter-progress-trackers.html b/meter-progress-trackers.html
index 721a8a6..2a5f4ff 100644
--- a/meter-progress-trackers.html
+++ b/meter-progress-trackers.html
@@ -23,7 +23,7 @@
             <div class="nav-container">
                 <ul class="main-menu">
                     <li>
-                        <a href="#"><i class="fa fa-home"></i> Home</a>
+                        <a href="home.html"><i class="fa fa-home"></i> Home</a>
                     </li>
                     <li>
                         <a href="#"><i class="fa fa-bell"></i> Notice</a>
@@ -31,9 +31,9 @@
                     <li>
                         <a href="javascript:void(0);"><i class="fa fa-briefcase"></i> Arrangement <span class="fa fa-angle-down"></span></a>
                         <ul>
-                            <li><a href="#" data-loader="show"><i class="fa fa-industry"></i> Warehouse Receive Note</a></li>
-                            <li><a href="#" data-loader="show"><i class="fa fa-ship"></i> Shipment Arrangement</a></li>
-                            <li><a href="#" data-loader="show"><i class="fa fa-truck"></i> Delivery Arrangement</a></li>
+                            <li><a href="arrangements-warehouse_receive_note1.html" data-loader="show"><i class="fa fa-industry"></i> Warehouse Receive Note</a></li>
+                            <li><a href="arrangements-shipment_arrangements1.html" data-loader="show"><i class="fa fa-ship"></i> Shipment Arrangement</a></li>
+                            <li><a href="arrangements-delivery_arrangements1.html" data-loader="show"><i class="fa fa-truck"></i> Delivery Arrangement</a></li>
                         </ul>
                     </li>
                     <li>
@@ -153,8 +153,9 @@
                         <a class="a-meter-text-data">10.00</a>
                         <!-- Detail Data End Here -->
                         <hr>
+                        <div class="form-divider-2"></div>
                         <div class="txt-center">
-                            <button class="button blue" data-dismiss="true">Details</button>
+                            <a href="meter-order-details.html" class="button blue" data-dismiss="true">Details</a>
                         </div>
                     </div>
                 </div>
@@ -184,8 +185,9 @@
                         <a class="a-meter-text-data">-</a>
                         <!-- Detail Data End Here -->
                         <hr>
+                        <div class="form-divider-2"></div>
                         <div class="txt-center">
-                            <button class="button blue" data-dismiss="true">Details</button>
+                            <a class="button blue" data-dismiss="true">Details</a>
                         </div>
                     </div>
                 </div>
@@ -240,8 +242,9 @@
                         <a class="a-meter-text-data">Malaysia</a>
                         <!-- Detail Data End Here -->
                         <hr>
+                        <div class="form-divider-2"></div>
                         <div class="txt-center">
-                            <button class="button blue" data-dismiss="true">Details</button>
+                            <a class="button blue" data-dismiss="true">Details</a>
                         </div>
                     </div>
                 </div>