feat: subs info

src/components/SubscriptionInfo.tsx

@@ -0,0 +1,43 @@
+import byteSize from 'byte-size'
+import dayjs from 'dayjs'
+import type { SubscriptionInfo } from '~/types'
+
+const getSubscriptionsInfo = (subscriptionInfo: SubscriptionInfo) => {
+  const total = byteSize(subscriptionInfo.Total)
+  const used = byteSize(subscriptionInfo.Download + subscriptionInfo.Upload)
+  const percentage = (
+    ((subscriptionInfo.Download + subscriptionInfo.Upload) /
+      subscriptionInfo.Total) *
+    100
+  ).toFixed(2)
+  const expireStr = () => {
+    if (subscriptionInfo.Expire === 0) {
+      return 'Null'
+    }
+
+    return dayjs(subscriptionInfo.Expire * 1000).format('YYYY-MM-DD')
+  }
+
+  return {
+    total,
+    used,
+    percentage,
+    expireStr,
+  }
+}
+
+export default (props: { subscriptionInfo: SubscriptionInfo }) => {
+  if (!props.subscriptionInfo) {
+    return
+  }
+  const info = getSubscriptionsInfo(props.subscriptionInfo)
+
+  return (
+    <>
+      <div class="text-sm text-slate-500">
+        {`${info.used}`} / {`${info.total}`} ( {info.percentage}% )
+      </div>
+      <div class="text-sm text-slate-500">Expire: {info.expireStr()} </div>
+    </>
+  )
+}

src/pages/Proxies.tsx

@@ -2,6 +2,7 @@ import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
 import { For, Show, createSignal, onMount } from 'solid-js'
 import Collapse from '~/components/Collpase'
 import ProxyNodeCard from '~/components/ProxyNodeCard'
+import SubscriptionInfo from '~/components/SubscriptionInfo'
 import { useProxies } from '~/signals/proxies'
 import type { Proxy } from '~/types'
 import { formatTimeFromNow } from '~/utils/date'
@@ -125,7 +126,9 @@ export default () => {
                 <div class="flex items-center justify-between">
                   <div class="flex flex-col">
                     <span>{proxyProvider.name}</span>
-
+                    <SubscriptionInfo
+                      subscriptionInfo={proxyProvider.subscriptionInfo}
+                    />
                     <div class="text-sm text-slate-500">
                       {proxyProvider.vehicleType} :: Updated{' '}
                       {formatTimeFromNow(proxyProvider.updatedAt)}

src/types.d.ts

@@ -35,8 +35,15 @@ export type ProxyNode = {
     delay: number
   }[]
 }
+export type SubscriptionInfo = {
+  Download: number
+  Upload: number
+  Total: number
+  Expire: number
+}
 
 export type ProxyProvider = {
+  subscriptionInfo: SubscriptionInfo
   name: string
   proxies: ProxyNode[]
   testUrl: string