fix(web): billing — distinguish empty vs filtered, localize date, tabular nums

Show "no payments match this filter" with a clear-filters button when
filters hide everything (was the misleading "no payments yet"). Follow
the active locale for the payment date instead of hard-coding tr-TR, and
use tabular figures for date and amount columns.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/src/messages/en.json

@@ -366,6 +366,8 @@
     "title": "Payment History",
     "payments": "Payments",
     "noPayments": "No payment records yet.",
+    "noResults": "No payments match this filter.",
+    "clearFilters": "Clear filters",
     "date": "Date",
     "plan": "Plan",
     "amount": "Amount",

apps/web/src/messages/tr.json

@@ -366,6 +366,8 @@
     "title": "Ödeme Geçmişi",
     "payments": "Ödemeler",
     "noPayments": "Henüz ödeme kaydı yok.",
+    "noResults": "Bu filtreyle eşleşen ödeme yok.",
+    "clearFilters": "Filtreleri temizle",
     "date": "Tarih",
     "plan": "Plan",
     "amount": "Tutar",

apps/web/src/routes/dashboard/billing.tsx

@@ -26,10 +26,16 @@ interface Payment {
 }
 
 function BillingPage() {
-  const { t } = useTranslation();
+  const { t, locale } = useTranslation();
   const [statusFilter, setStatusFilter] = useState<string>("all");
   const [methodFilter, setMethodFilter] = useState<string>("all");
 
+  const hasActiveFilter = statusFilter !== "all" || methodFilter !== "all";
+  function clearFilters() {
+    setStatusFilter("all");
+    setMethodFilter("all");
+  }
+
   const { data: payments, isLoading } = useQuery({
     queryKey: ["payments", "me"],
     queryFn: () => api.get<Payment[]>("/payments/me"),
@@ -99,8 +105,13 @@ function BillingPage() {
         </div>
       ) : !filteredPayments || filteredPayments.length === 0 ? (
         <Card>
-          <CardContent className="py-12 text-center text-muted-foreground">
-            {t("billing.noPayments")}
+          <CardContent className="flex flex-col items-center gap-3 py-12 text-center text-muted-foreground">
+            <p>{hasActiveFilter ? t("billing.noResults") : t("billing.noPayments")}</p>
+            {hasActiveFilter && (
+              <Button variant="outline" size="sm" onClick={clearFilters}>
+                {t("billing.clearFilters")}
+              </Button>
+            )}
           </CardContent>
         </Card>
       ) : (
@@ -125,12 +136,11 @@ function BillingPage() {
                 <div key={payment.id} className="grid items-center gap-4 py-4 sm:grid-cols-6">
                   {/* Date */}
                   <div>
-                    <p className="text-sm font-medium sm:font-normal">
-                      {new Date(payment.createdAt).toLocaleDateString("tr-TR", {
-                        day: "2-digit",
-                        month: "2-digit",
-                        year: "numeric",
-                      })}
+                    <p className="text-sm font-medium tabular-nums sm:font-normal">
+                      {new Date(payment.createdAt).toLocaleDateString(
+                        locale === "tr" ? "tr-TR" : "en-US",
+                        { day: "2-digit", month: "2-digit", year: "numeric" },
+                      )}
                     </p>
                     <p className="text-xs text-muted-foreground sm:hidden">
                       {payment.planName || "-"}
@@ -144,7 +154,7 @@ function BillingPage() {
 
                   {/* Amount */}
                   <div className="text-right">
-                    <span className="font-medium">{formatTRY(payment.amount)}</span>
+                    <span className="font-medium tabular-nums">{formatTRY(payment.amount)}</span>
                   </div>
 
                   {/* Method */}