Update order views UI and date filter logic

OrderDetailView now displays remaining data with a clearer label and adjusts font sizes for unlimited plans. OrderHistoryView sets the default 'from date' to 30 days ago and changes date inputs to always use 'date' type for improved usability.

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

@@ -160,14 +160,21 @@ const OrderDetailView = () => {
           {/* Central Text */}
           <div className="absolute inset-0 flex flex-col items-center justify-center">
             {dataUsage.totalData === 0 ? (
-              <span className="text-3xl md:text-4xl font-black text-[#EE0434]">
+              <span className="text-lg md:text-xl font-black text-[#EE0434]">
                 Unlimited
               </span>
             ) : (
-              <span className="text-3xl md:text-4xl font-black text-[#EE0434]">
-                {formatNumber(dataUsage.usageData)}
-                <span className="text-[16px]">{dataUsage.dataUnit}</span>
-              </span>
+              <>
+                <div>
+                  <span className="text-sm md:text-sm font-black text-[#000]">
+                    Còn lại
+                  </span>
+                </div>
+                <span className="text-3xl md:text-4xl font-black text-[#EE0434]">
+                  {formatNumber(dataUsage.remainData)}
+                  <span className="text-[16px]">{dataUsage.dataUnit}</span>
+                </span>
+              </>
             )}
           </div>
 

EsimLao/esim-vite/src/pages/order-history/OrderHistoryView.tsx

@@ -15,10 +15,13 @@ import { useTranslation } from "react-i18next";
 
 const OrderHistoryView = () => {
   const [searchOrder, setSearchOrder] = useState("");
+  const lastDay = new Date(new Date().setDate(new Date().getDate() - 30))
+    .toISOString()
+    .split("T")[0];
   const today = new Date().toISOString().split("T")[0];
   // status is one of: -1, 1, 2
   const [status, setStatus] = useState("-1");
-  const [fromDate, setFromDate] = useState(today);
+  const [fromDate, setFromDate] = useState(lastDay);
   const [toDate, setToDate] = useState(today);
   const [orders, setOrders] = useState<OrderHistory[]>([]);
   const { t } = useTranslation();
@@ -130,10 +133,10 @@ const OrderHistoryView = () => {
 
           <div className="md:col-span-3">
             <input
-              type="text"
+              type="date"
               placeholder="From date"
               onFocus={(e) => (e.target.type = "date")}
-              onBlur={(e) => (e.target.type = "text")}
+              onBlur={(e) => (e.target.type = "date")}
               className={inputClass}
               value={fromDate}
               onChange={(e) => {
@@ -145,10 +148,10 @@ const OrderHistoryView = () => {
 
           <div className="md:col-span-3">
             <input
-              type="text"
+              type="date"
               placeholder="To date"
               onFocus={(e) => (e.target.type = "date")}
-              onBlur={(e) => (e.target.type = "text")}
+              onBlur={(e) => (e.target.type = "date")}
               className={inputClass}
               value={toDate}
               onChange={(e) => {