fix(dashboard): Persian Jalali formatting for resource credit dates

Render the prepaid resource credit "remaining" and "expires" text in
Persian with Jalali calendar when locale is fa: localized digits and
day/hour/minute units for time left, and weekday + Jalali date + time
for the expiry. Parts are assembled explicitly so order is stable
regardless of the runtime's ICU pattern data.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
keyhan
2026-06-20 00:15:43 +03:30
parent 49f1ab07bd
commit bc224a2291
2 changed files with 64 additions and 7 deletions
+5 -4
View File
@@ -3,14 +3,14 @@
import { useQuery } from '@tanstack/react-query';
import type { ReactNode } from 'react';
import { Link } from '@/i18n/Link';
import { useT } from '@/i18n/I18nProvider';
import { useT, useLocale } from '@/i18n/I18nProvider';
import type { Dictionary } from '@/i18n/dictionaries/fa';
import api from '@/lib/api';
import { useAuthStore } from '@/lib/store';
import type { Application } from '@/types';
import { Rocket, Package, Circle, Hexagon, Wallet, Clock, Database, Plus } from 'lucide-react';
import type { ResourceCredit } from '@/types';
import { formatExpiresAtLocal } from '@/lib/format-utils';
import { formatExpiresAtLocal, formatRemainingForLocale } from '@/lib/format-utils';
import { managedServiceTypeLabel } from '@/lib/optional-service-defaults';
import { filterApplications, filterManagedServices } from '@/lib/product-type';
@@ -65,6 +65,7 @@ function serviceSubtitle(app: Application): string {
export default function DashboardPage() {
const t = useT();
const locale = useLocale();
const h = t.dashboard.home;
const user = useAuthStore((s) => s.user);
@@ -116,10 +117,10 @@ export default function DashboardPage() {
</p>
<p className="mt-2 inline-flex items-center gap-1 text-indigo-700 font-medium">
<Clock className="w-3.5 h-3.5" />
{h.remaining.replace('{label}', credit.remainingLabel)}
{h.remaining.replace('{label}', formatRemainingForLocale(credit.expiresAt, locale))}
</p>
<p className="mt-1 text-xs text-gray-500">
{h.expires.replace('{date}', formatExpiresAtLocal(credit.expiresAt))}
{h.expires.replace('{date}', formatExpiresAtLocal(credit.expiresAt, locale))}
</p>
<ul className="mt-3 grid grid-cols-2 gap-x-3 gap-y-1 text-xs text-gray-600">
<li>{h.cpu}: {credit.cpuLimit}</li>