🐛 fix(ui): Multiple display bugs

This commit is contained in:
web@ppanel 2025-03-08 14:46:20 +07:00
parent 0c907337e1
commit f5d8fd3b65
50 changed files with 84 additions and 28 deletions

View File

@ -32,8 +32,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/componen
import { Separator } from '@workspace/ui/components/separator';
import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
import { Icon } from '@workspace/ui/custom-components/icon';
import { formatDate, isBrowser } from '@workspace/ui/utils';
import { differenceInDays } from 'date-fns';
import { differenceInDays, formatDate, isBrowser } from '@workspace/ui/utils';
import { useTranslations } from 'next-intl';
import Image from 'next/image';
import Link from 'next/link';
@ -206,12 +205,13 @@ export default function Content() {
<span className='text-2xl font-semibold'>
{item.reset_time
? differenceInDays(new Date(item.reset_time), new Date())
: t('unknown')}
: t('noReset')}
</span>
</li>
<li>
<span className='text-muted-foreground'>{t('expirationDays')}</span>
<span className='text-2xl font-semibold'>
{}
{item.expire_time
? differenceInDays(new Date(item.expire_time), new Date()) || t('unknown')
: t('noLimit')}

View File

@ -21,11 +21,11 @@ export default function Page() {
<>
<Card className='mb-4'>
<CardContent className='p-6'>
<h2 className='text-foreground mb-4 text-2xl font-bold'>{t('totalAssets')}</h2>
<h2 className='text-foreground mb-4 text-2xl font-bold'>{t('assetOverview')}</h2>
<div className='mb-4'>
<div className='flex items-center justify-between'>
<div>
<p className='text-sm font-medium'></p>
<p className='text-sm font-medium'>{t('totalAssets')}</p>
<p className='text-3xl font-bold'>
<Display type='currency' value={totalAssets} />
</p>

View File

@ -25,40 +25,40 @@ export function UserNav() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className="flex items-center gap-2 rounded-full border bg-background px-2 py-1.5 hover:bg-accent transition-colors duration-200 cursor-pointer">
<Avatar className="h-6 w-6">
<div className='bg-background hover:bg-accent flex cursor-pointer items-center gap-2 rounded-full border px-2 py-1.5 transition-colors duration-200'>
<Avatar className='h-6 w-6'>
<AvatarImage
alt={user?.avatar ?? ''}
src={user?.auth_methods?.[0]?.auth_identifier ?? ''}
className="object-cover"
className='object-cover'
/>
<AvatarFallback className="bg-gradient-to-br from-primary/90 to-primary text-background font-medium">
<AvatarFallback className='from-primary/90 to-primary text-background bg-gradient-to-br font-medium'>
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
</AvatarFallback>
</Avatar>
<span className="text-sm max-w-[40px] sm:max-w-[100px] truncate">
<span className='max-w-[40px] truncate text-sm sm:max-w-[100px]'>
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
</span>
<Icon icon="lucide:chevron-down" className="size-4 text-muted-foreground" />
<Icon icon='lucide:chevron-down' className='text-muted-foreground size-4' />
</div>
</DropdownMenuTrigger>
<DropdownMenuContent forceMount align="end" className="w-64">
<div className="flex items-center justify-start gap-2 p-2">
<Avatar className="h-10 w-10">
<DropdownMenuContent forceMount align='end' className='w-64'>
<div className='flex items-center justify-start gap-2 p-2'>
<Avatar className='h-10 w-10'>
<AvatarImage
alt={user?.avatar ?? ''}
src={user?.avatar ?? ''}
className="object-cover"
className='object-cover'
/>
<AvatarFallback className="bg-gradient-to-br from-primary/90 to-primary text-background">
<AvatarFallback className='from-primary/90 to-primary text-background bg-gradient-to-br'>
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
</AvatarFallback>
</Avatar>
<div className="flex flex-col space-y-0.5">
<p className="text-sm font-medium leading-none">
<div className='flex flex-col space-y-0.5'>
<p className='text-sm font-medium leading-none'>
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
</p>
<p className="text-xs text-muted-foreground">
<p className='text-muted-foreground text-xs'>
{user?.auth_methods?.[0]?.auth_identifier}
</p>
</div>
@ -72,11 +72,14 @@ export function UserNav() {
onClick={() => {
router.push(`${item.url}`);
}}
className="flex items-center gap-2 py-2 cursor-pointer"
className='flex cursor-pointer items-center gap-2 py-2'
>
<Icon className="size-4 flex-none text-muted-foreground" icon={item.icon!} />
<span className="flex-grow truncate">{t(item.title)}</span>
<Icon icon="lucide:chevron-right" className="size-4 text-muted-foreground opacity-50" />
<Icon className='text-muted-foreground size-4 flex-none' icon={item.icon!} />
<span className='flex-grow truncate'>{t(item.title)}</span>
<Icon
icon='lucide:chevron-right'
className='text-muted-foreground size-4 opacity-50'
/>
</DropdownMenuItem>
))}
</DropdownMenuGroup>
@ -87,10 +90,10 @@ export function UserNav() {
Logout();
setUser();
}}
className="flex items-center gap-2 py-2 text-destructive focus:text-destructive cursor-pointer"
className='text-destructive focus:text-destructive flex cursor-pointer items-center gap-2 py-2'
>
<Icon className="size-4 flex-none" icon="uil:exit" />
<span className="flex-grow">{t('logout')}</span>
<Icon className='size-4 flex-none' icon='uil:exit' />
<span className='flex-grow'>{t('logout')}</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Moje předplatné",
"nextResetDays": "Příští reset/den",
"noLimit": "Bez omezení",
"noReset": "Žádné obnovení",
"prompt": "Výzva",
"purchaseSubscription": "Zakoupit předplatné",
"qrCode": "QR kód",

View File

@ -1,5 +1,6 @@
{
"amount": "Částka",
"assetOverview": "Přehled aktiv",
"balance": "zůstatek",
"commission": "Provize",
"createdAt": "čas",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Meine Abonnements",
"nextResetDays": "Nächster Reset/Tage",
"noLimit": "Kein Limit",
"noReset": "Kein Zurücksetzen",
"prompt": "Aufforderung",
"purchaseSubscription": "Abonnement kaufen",
"qrCode": "QR-Code",

View File

@ -1,5 +1,6 @@
{
"amount": "Betrag",
"assetOverview": "Vermögensübersicht",
"balance": "Kontostand",
"commission": "Provision",
"createdAt": "Zeit",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "My Subscriptions",
"nextResetDays": "Next Reset in Days",
"noLimit": "No Limit",
"noReset": "No Reset",
"prompt": "Prompt",
"purchaseSubscription": "Purchase Subscription",
"qrCode": "QR Code",

View File

@ -1,10 +1,11 @@
{
"amount": "Amount",
"assetOverview": "Asset Overview",
"balance": "Balance",
"commission": "Commission",
"createdAt": "Time",
"giftAmount": "Girt Amount",
"totalAssets": "Asset overview",
"totalAssets": "Total Assets",
"type": {
"0": "Type",
"1": "Recharge",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Mis suscripciones",
"nextResetDays": "Próximo reinicio/días",
"noLimit": "Sin límite",
"noReset": "Sin Reinicio",
"prompt": "sugerencia",
"purchaseSubscription": "Comprar suscripción",
"qrCode": "Código QR",

View File

@ -1,5 +1,6 @@
{
"amount": "Cantidad",
"assetOverview": "Descripción del activo",
"balance": "saldo",
"commission": "Comisión",
"createdAt": "hora",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Mis suscripciones",
"nextResetDays": "Próximo reinicio/días",
"noLimit": "Sin Límite",
"noReset": "Sin Reinicio",
"prompt": "Sugerencia",
"purchaseSubscription": "Comprar suscripción",
"qrCode": "Código QR",

View File

@ -1,5 +1,6 @@
{
"amount": "Monto",
"assetOverview": "Descripción del Activo",
"balance": "saldo",
"commission": "Comisión",
"createdAt": "Hora",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "اشتراک‌های من",
"nextResetDays": "روزهای باقی‌مانده تا بازنشانی بعدی",
"noLimit": "بدون محدودیت",
"noReset": "عدم بازنشانی",
"prompt": "پیشنهاد",
"purchaseSubscription": "خرید اشتراک",
"qrCode": "کد QR",

View File

@ -1,5 +1,6 @@
{
"amount": "مقدار",
"assetOverview": "بررسی دارایی",
"balance": "تعادل",
"commission": "کمیسیون",
"createdAt": "زمان",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Omat tilaukset",
"nextResetDays": "Seuraava nollaus/päivää",
"noLimit": "Ei rajoitusta",
"noReset": "Ei nollata",
"prompt": "kehotus",
"purchaseSubscription": "Osta tilaus",
"qrCode": "QR-koodi",

View File

@ -1,5 +1,6 @@
{
"amount": "Määrä",
"assetOverview": "Omaisuuden yleiskatsaus",
"balance": "Saldo",
"commission": "Komissio",
"createdAt": "Aika",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Mes abonnements",
"nextResetDays": "Prochain réinitialisation/jours",
"noLimit": "Pas de limite",
"noReset": "Pas de réinitialisation",
"prompt": "invite",
"purchaseSubscription": "Acheter un abonnement",
"qrCode": "Code QR",

View File

@ -1,5 +1,6 @@
{
"amount": "Montant",
"assetOverview": "Aperçu des actifs",
"balance": "Solde",
"commission": "Commission",
"createdAt": "temps",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "मेरी सदस्यताएँ",
"nextResetDays": "अगली रीसेट/दिन",
"noLimit": "कोई सीमा नहीं",
"noReset": "कोई रीसेट नहीं",
"prompt": "प्रॉम्प्ट",
"purchaseSubscription": "सदस्यता खरीदें",
"qrCode": "क्यूआर कोड",

View File

@ -1,5 +1,6 @@
{
"amount": "राशि",
"assetOverview": "संपत्ति अवलोकन",
"balance": "शेष",
"commission": "आयोग",
"createdAt": "समय",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Előfizetéseim",
"nextResetDays": "Következő visszaállítás/nap",
"noLimit": "Nincs korlát",
"noReset": "Nincs visszaállítás",
"prompt": "figyelmeztetés",
"purchaseSubscription": "Előfizetés vásárlása",
"qrCode": "QR-kód",

View File

@ -1,5 +1,6 @@
{
"amount": "Összeg",
"assetOverview": "Eszköz áttekintés",
"balance": "Egyenleg",
"commission": "Jutalék",
"createdAt": "idő",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "私の購読",
"nextResetDays": "次のリセット/日",
"noLimit": "無制限",
"noReset": "リセットしない",
"prompt": "プロンプト",
"purchaseSubscription": "サブスクリプションを購入",
"qrCode": "QRコード",

View File

@ -1,5 +1,6 @@
{
"amount": "金額",
"assetOverview": "資産概要",
"balance": "残高",
"commission": "手数料",
"createdAt": "時間",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "내 구독",
"nextResetDays": "다음 초기화/일",
"noLimit": "제한 없음",
"noReset": "리셋 없음",
"prompt": "프롬프트",
"purchaseSubscription": "구독 구매",
"qrCode": "QR코드",

View File

@ -1,5 +1,6 @@
{
"amount": "금액",
"assetOverview": "자산 개요",
"balance": "잔액",
"commission": "위원회",
"createdAt": "시간",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Mine abonnementer",
"nextResetDays": "Neste tilbakestilling/dager",
"noLimit": "Ingen grense",
"noReset": "Ingen tilbakestilling",
"prompt": "Hint",
"purchaseSubscription": "Kjøp abonnement",
"qrCode": "QR-kode",

View File

@ -1,5 +1,6 @@
{
"amount": "Beløp",
"assetOverview": "Eiendomsoversikt",
"balance": "Balanse",
"commission": "Kommisjon",
"createdAt": "Tid",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Moje subskrypcje",
"nextResetDays": "Następny reset/dni",
"noLimit": "Bez limitu",
"noReset": "Brak resetu",
"prompt": "Podpowiedź",
"purchaseSubscription": "Zakup subskrypcji",
"qrCode": "Kod QR",

View File

@ -1,5 +1,6 @@
{
"amount": "kwota",
"assetOverview": "Przegląd aktywów",
"balance": "saldo",
"commission": "Prowizja",
"createdAt": "czas",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Minhas assinaturas",
"nextResetDays": "Próxima redefinição/dias",
"noLimit": "Sem Limite",
"noReset": "Sem Redefinição",
"prompt": "Sugestão",
"purchaseSubscription": "Comprar Assinatura",
"qrCode": "Código QR",

View File

@ -1,5 +1,6 @@
{
"amount": "quantia",
"assetOverview": "Visão Geral do Ativo",
"balance": "saldo",
"commission": "Comissão",
"createdAt": "hora",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Abonamentele mele",
"nextResetDays": "Următoarea resetare/zile",
"noLimit": "Fără limită",
"noReset": "Fără Resetare",
"prompt": "Sfat",
"purchaseSubscription": "Achiziționează abonament",
"qrCode": "cod QR",

View File

@ -1,5 +1,6 @@
{
"amount": "Sumă",
"assetOverview": "Prezentare generală a activelor",
"balance": "Sold",
"commission": "Comision",
"createdAt": "Timp",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Мои подписки",
"nextResetDays": "Следующее сброс/дней",
"noLimit": "Без ограничений",
"noReset": "Нет сброса",
"prompt": "Подсказка",
"purchaseSubscription": "Купить подписку",
"qrCode": "QR-код",

View File

@ -1,5 +1,6 @@
{
"amount": "сумма",
"assetOverview": "Обзор актива",
"balance": "Баланс",
"commission": "Комиссия",
"createdAt": "время",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "การสมัครสมาชิกของฉัน",
"nextResetDays": "รีเซ็ตครั้งถัดไป/วัน",
"noLimit": "ไม่จำกัด",
"noReset": "ไม่มีการรีเซ็ต",
"prompt": "คำแนะนำ",
"purchaseSubscription": "ซื้อการสมัครสมาชิก",
"qrCode": "คิวอาร์โค้ด",

View File

@ -1,5 +1,6 @@
{
"amount": "จำนวนเงิน",
"assetOverview": "ภาพรวมสินทรัพย์",
"balance": "ยอดคงเหลือ",
"commission": "คอมมิชชั่น",
"createdAt": "เวลา",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Aboneliklerim",
"nextResetDays": "Sonraki Sıfırlama/Gün",
"noLimit": "Sınırsız",
"noReset": "Sıfırlama Yok",
"prompt": "istem",
"purchaseSubscription": "Abonelik Satın Al",
"qrCode": "QR kodu",

View File

@ -1,5 +1,6 @@
{
"amount": "Tutar",
"assetOverview": "Varlık Genel Görünümü",
"balance": "Bakiye",
"commission": "Komisyon",
"createdAt": "zaman",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Мої підписки",
"nextResetDays": "Наступне скидання/днів",
"noLimit": "Без обмежень",
"noReset": "Без скидання",
"prompt": "підказка",
"purchaseSubscription": "Придбати підписку",
"qrCode": "QR-код",

View File

@ -1,5 +1,6 @@
{
"amount": "Сума",
"assetOverview": "Огляд активів",
"balance": "Баланс",
"commission": "Комісія",
"createdAt": "Час",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "Đăng ký của tôi",
"nextResetDays": "Lần đặt lại tiếp theo/ngày",
"noLimit": "Không Giới Hạn",
"noReset": "Không đặt lại",
"prompt": "gợi ý",
"purchaseSubscription": "Mua đăng ký",
"qrCode": "Mã QR",

View File

@ -1,5 +1,6 @@
{
"amount": "Số tiền",
"assetOverview": "Tổng Quan Tài Sản",
"balance": "Số dư",
"commission": "Hoa hồng",
"createdAt": "Thời gian",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "我的订阅",
"nextResetDays": "下次重置/天",
"noLimit": "无限制",
"noReset": "不重置",
"prompt": "提示",
"purchaseSubscription": "购买订阅",
"qrCode": "二维码",

View File

@ -1,5 +1,6 @@
{
"amount": "金额",
"assetOverview": "资产概览",
"balance": "余额",
"commission": "佣金",
"createdAt": "时间",

View File

@ -13,6 +13,7 @@
"mySubscriptions": "我的訂閱",
"nextResetDays": "下次重置/天",
"noLimit": "無限制",
"noReset": "無重置",
"prompt": "提示",
"purchaseSubscription": "購買訂閱",
"qrCode": "QR碼",

View File

@ -1,5 +1,6 @@
{
"amount": "金額",
"assetOverview": "資產概覽",
"balance": "餘額",
"commission": "佣金",
"createdAt": "時間",

View File

@ -1,4 +1,4 @@
import { intlFormat } from 'date-fns';
import { differenceInMilliseconds, intlFormat } from 'date-fns';
export function formatBytes(bytes: number) {
if (bytes === 0) return '0 B';
@ -24,3 +24,10 @@ export function formatDate(date?: Date | number, showTime: boolean = true) {
hour12: false,
});
}
export function differenceInDays(dateLeft: Date | number, dateRight: Date | number) {
const diffInMs = differenceInMilliseconds(dateLeft, dateRight);
const diffInDays = diffInMs / (1000 * 60 * 60 * 24);
if (diffInDays % 1 === 0) return diffInDays;
return Number(diffInDays.toFixed(1));
}