Update UI text, images, and data usage calculation

Standardized guide item labels in Header to sentence case, updated login logo and container styles, and fixed data usage calculation in OrderDetailView to use remainData instead of usageData. Also made minor adjustments to error message formatting and updated drawio documentation diagrams.

EsimLao/docs/.$skyhub.drawio.bkp

@@ -1,6 +1,6 @@
-<mxfile host="Electron" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/29.3.0 Chrome/140.0.7339.249 Electron/38.7.2 Safari/537.36" version="29.3.0">
+<mxfile host="Electron" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/29.3.0 Chrome/140.0.7339.249 Electron/38.7.2 Safari/537.36" version="29.3.0">
   <diagram id="kgpKYQtTHZ0yAKxKKP6v" name="Page-1">
-    <mxGraphModel dx="3202" dy="2428" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+    <mxGraphModel dx="2511" dy="2073" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
@@ -130,11 +130,11 @@
         <mxCell id="uRcrelpJeVWRNYr8ECgl-48" parent="1" style="outlineConnect=0;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;shape=mxgraph.aws3.worker;fillColor=#D9A741;gradientColor=none;" value="PORTAL" vertex="1">
           <mxGeometry height="63" width="60" x="595" y="430" as="geometry" />
         </mxCell>
-        <mxCell id="uRcrelpJeVWRNYr8ECgl-49" parent="1" style="outlineConnect=0;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;shape=mxgraph.aws3.worker;fillColor=#D9A741;gradientColor=none;" value="ORDER" vertex="1">
-          <mxGeometry height="63" width="60" x="690" y="327" as="geometry" />
+        <mxCell id="uRcrelpJeVWRNYr8ECgl-49" parent="1" style="outlineConnect=0;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;shape=mxgraph.aws3.worker;fillColor=#D9A741;gradientColor=none;" value="CUSTOMER" vertex="1">
+          <mxGeometry height="63" width="60" x="720" y="327" as="geometry" />
         </mxCell>
-        <mxCell id="uRcrelpJeVWRNYr8ECgl-50" parent="1" style="outlineConnect=0;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;shape=mxgraph.aws3.worker;fillColor=#D9A741;gradientColor=none;" value="VOUCHER" vertex="1">
-          <mxGeometry height="63" width="60" x="690" y="430" as="geometry" />
+        <mxCell id="uRcrelpJeVWRNYr8ECgl-50" parent="1" style="outlineConnect=0;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;shape=mxgraph.aws3.worker;fillColor=#D9A741;gradientColor=none;" value="CO&lt;span style=&quot;background-color: transparent; color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));&quot;&gt;MISSION&lt;/span&gt;" vertex="1">
+          <mxGeometry height="63" width="60" x="720" y="430" as="geometry" />
         </mxCell>
         <mxCell id="uRcrelpJeVWRNYr8ECgl-52" parent="1" style="text;html=1;whiteSpace=wrap;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;rounded=0;" value="&lt;font style=&quot;font-size: 18px;&quot;&gt;CORE&lt;/font&gt;" vertex="1">
           <mxGeometry height="30" width="60" x="760" y="640" as="geometry" />
@@ -285,6 +285,27 @@
         <mxCell id="uRcrelpJeVWRNYr8ECgl-109" parent="1" style="outlineConnect=0;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;shape=mxgraph.aws3.worker;fillColor=#D9A741;gradientColor=none;" value="COMMISSION" vertex="1">
           <mxGeometry height="63" width="60" x="790" y="430" as="geometry" />
         </mxCell>
+        <mxCell id="8LnyclVRHVrttfvcOQKk-8" parent="1" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;dropTarget=0;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;elbow&quot;:&quot;vertical&quot;,&quot;curved&quot;:0,&quot;rounded&quot;:0};" value="Customer" vertex="1">
+          <mxGeometry height="510" width="100" x="2130" y="-560" as="geometry" />
+        </mxCell>
+        <mxCell id="8LnyclVRHVrttfvcOQKk-9" parent="8LnyclVRHVrttfvcOQKk-8" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};fillColor=#808080;" value="" vertex="1">
+          <mxGeometry height="120" width="10" x="45" y="90" as="geometry" />
+        </mxCell>
+        <mxCell id="8LnyclVRHVrttfvcOQKk-10" parent="1" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;dropTarget=0;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;elbow&quot;:&quot;vertical&quot;,&quot;curved&quot;:0,&quot;rounded&quot;:0};" value="ESIM" vertex="1">
+          <mxGeometry height="520" width="100" x="1910" y="-560" as="geometry" />
+        </mxCell>
+        <mxCell id="8LnyclVRHVrttfvcOQKk-11" parent="8LnyclVRHVrttfvcOQKk-10" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};" value="" vertex="1">
+          <mxGeometry height="120" width="10" x="45" y="130" as="geometry" />
+        </mxCell>
+        <mxCell id="8LnyclVRHVrttfvcOQKk-19" parent="1" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;dropTarget=0;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;newEdgeStyle={&quot;edgeStyle&quot;:&quot;elbowEdgeStyle&quot;,&quot;elbow&quot;:&quot;vertical&quot;,&quot;curved&quot;:0,&quot;rounded&quot;:0};" value="Mini APP" vertex="1">
+          <mxGeometry height="520" width="100" x="1700" y="-560" as="geometry" />
+        </mxCell>
+        <mxCell id="8LnyclVRHVrttfvcOQKk-20" parent="8LnyclVRHVrttfvcOQKk-19" style="html=1;points=[[0,0,0,0,5],[0,1,0,0,-5],[1,0,0,0,5],[1,1,0,0,-5]];perimeter=orthogonalPerimeter;outlineConnect=0;targetShapes=umlLifeline;portConstraint=eastwest;newEdgeStyle={&quot;curved&quot;:0,&quot;rounded&quot;:0};" value="" vertex="1">
+          <mxGeometry height="120" width="10" x="45" y="130" as="geometry" />
+        </mxCell>
+        <mxCell id="8LnyclVRHVrttfvcOQKk-23" parent="1" style="verticalAlign=top;align=left;overflow=fill;html=1;whiteSpace=wrap;" value="&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;text-decoration:underline;&quot;&gt;&lt;b&gt;Login&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot; style=&quot;border-style:solid;&quot;&gt;&lt;p style=&quot;margin:0px;margin-left:8px;&quot;&gt;abx:&amp;nbsp;&lt;/p&gt;" vertex="1">
+          <mxGeometry height="90" width="160" x="1760" y="-410" as="geometry" />
+        </mxCell>
       </root>
     </mxGraphModel>
   </diagram>

EsimLao/esim-vite/src/components/Header.tsx

@@ -53,13 +53,13 @@ const Header: React.FC = () => {
   const account = localStorage.getItem("accountInfo");
 
   const guideItems = [
-    { label: "GIỚI THIỆU CƠ BẢN VỀ ESIM", path: "/support" },
-    { label: "HƯỚNG DẪN CÀI ĐẶT eSIM TRÊN CÁC THIẾT BỊ", path: "/support" },
-    { label: "HƯỚNG DẪN BẬT CHUYỂN VÙNG DỮ LIỆU (Roaming)", path: "/support" },
-    { label: "CÁCH KIỂM TRA DUNG LƯỢNG ĐÃ DÙNG", path: "/support" },
-    { label: "CÁCH KIỂM TRA ESIM ĐANG SỬ DỤNG DỮ LIỆU", path: "/support" },
-    { label: "CÁCH ƯỚC TÍNH DUNG LƯỢNG", path: "/support" },
-    { label: "CÁC SỰ CỐ ESIM PHỔ BIẾN", path: "/support" },
+    { label: "Giới thiệu cơ bản về eSim", path: "/support" },
+    { label: "Hướng dẫn cài đặt eSim trên các thiết bị", path: "/support" },
+    { label: "Hướng dẫn bật chuyển vùng dữ liệu (Roaming)", path: "/support" },
+    { label: "Cách kiểm tra dung lượng đã dùng", path: "/support" },
+    { label: "Cách kiểm tra eSim đang sử dụng dữ liệu", path: "/support" },
+    { label: "Cách ước tính dung lượng", path: "/support" },
+    { label: "Các sự cố eSim phổ biến", path: "/support" },
   ];
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [areasList, setAreasList] = useState<Area[]>([]);

EsimLao/esim-vite/src/pages/login/LoginView.tsx

@@ -11,7 +11,7 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useEffect, useRef } from "react";
 import { accountLogin } from "../../features/account/accuntSlice";
-import logoApp from "../../assets/img/logo_white.png";
+import logoApp from "../../assets/img/logo-skysim.png";
 import { useTranslation } from "react-i18next";
 
 const LoginView: React.FC = () => {
@@ -90,7 +90,7 @@ const LoginView: React.FC = () => {
       } else {
         console.error("Get otp failed, no token received");
         setErrorMessage(
-          data?.message || "Failed to request OTP. Please try again."
+          data?.message || "Failed to request OTP. Please try again.",
         );
       }
     },
@@ -118,7 +118,7 @@ const LoginView: React.FC = () => {
       } else {
         console.error("Resend otp failed, no token received");
         setErrorMessage(
-          data?.message || "Failed to request OTP. Please try again."
+          data?.message || "Failed to request OTP. Please try again.",
         );
       }
     },
@@ -145,7 +145,7 @@ const LoginView: React.FC = () => {
       } else {
         console.error("Verify otp failed, no token received");
         setErrorMessage(
-          data?.message || "Failed to verify OTP. Please try again."
+          data?.message || "Failed to verify OTP. Please try again.",
         );
       }
     },
@@ -202,7 +202,7 @@ const LoginView: React.FC = () => {
         <div className="w-full max-w-[420px] space-y-10">
           <div className="space-y-4 text-center lg:text-left">
             <div className="lg:hidden flex justify-center mb-8">
-              <div className="w-20 h-20 rounded-[24px] bg-gradient-to-br from-[#EE0434] to-[#80001a] flex items-center justify-center shadow-lg">
+              <div className="w-50 h-50 flex items-center justify-center">
                 {/* <svg
                   className="w-10 h-10 text-white"
                   fill="none"
@@ -360,8 +360,8 @@ const LoginView: React.FC = () => {
                               otp.length === idx && timer > 0
                                 ? "border-[#EE0434] bg-white shadow-lg ring-4 ring-red-50"
                                 : otp.length > idx
-                                ? "border-[#EE0434] bg-red-50 text-[#EE0434]"
-                                : "border-slate-100 bg-slate-50 text-slate-300"
+                                  ? "border-[#EE0434] bg-red-50 text-[#EE0434]"
+                                  : "border-slate-100 bg-slate-50 text-slate-300"
                             }`}
                           >
                             {otp[idx] || ""}

EsimLao/esim-vite/src/pages/order-detail/OrderDetailView.tsx

@@ -105,7 +105,7 @@ const OrderDetailView = () => {
     const arcLength = (arcAngle / 360) * circumference;
 
     const percentage = Math.min(
-      Math.max(dataUsage.usageData / dataUsage.totalData, 0),
+      Math.max(dataUsage.remainData / dataUsage.totalData, 0),
       1,
     );
     const strokeDashoffset = arcLength - percentage * arcLength;