Add invoice payment management.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/app/dashboard/admin/invoices/page.tsx

@@ -0,0 +1,269 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { FileText, Search, User, Wallet, CreditCard, XCircle } from 'lucide-react';
+import { toast } from 'react-toastify';
+import api from '@/lib/api';
+import type { Invoice, InvoiceStatus, PaymentMethod } from '@/types';
+
+const statusLabels: Record<InvoiceStatus, string> = {
+  draft: 'Draft',
+  issued: 'Unpaid',
+  partially_paid: 'Partially paid',
+  paid: 'Paid',
+  void: 'Void',
+  failed: 'Failed',
+};
+
+const statusClasses: Record<InvoiceStatus, string> = {
+  draft: 'badge-gray',
+  issued: 'badge-yellow',
+  partially_paid: 'badge-blue',
+  paid: 'badge-green',
+  void: 'badge-gray',
+  failed: 'badge-red',
+};
+
+export default function AdminInvoicesPage() {
+  const queryClient = useQueryClient();
+  const [status, setStatus] = useState<'all' | InvoiceStatus>('all');
+  const [paymentMethod, setPaymentMethod] = useState<'all' | PaymentMethod>('all');
+  const [search, setSearch] = useState('');
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [statusReason, setStatusReason] = useState('');
+
+  const { data: invoices = [], isLoading } = useQuery<Invoice[]>({
+    queryKey: ['admin-invoices', status, paymentMethod, search],
+    queryFn: () => {
+      const params: Record<string, string> = { limit: '200' };
+      if (status !== 'all') params.status = status;
+      if (paymentMethod !== 'all') params.paymentMethod = paymentMethod;
+      if (search.trim()) params.search = search.trim();
+      return api.get('/billing/admin/invoices', { params }).then((r) => r.data);
+    },
+  });
+
+  const { data: selectedInvoice } = useQuery<Invoice>({
+    queryKey: ['admin-invoice', selectedId],
+    queryFn: () => api.get(`/billing/admin/invoices/${selectedId}`).then((r) => r.data),
+    enabled: !!selectedId,
+  });
+
+  const updateStatusMutation = useMutation({
+    mutationFn: ({ invoiceId, nextStatus, reason }: { invoiceId: string; nextStatus: InvoiceStatus; reason: string }) =>
+      api.patch(`/billing/admin/invoices/${invoiceId}/status`, { status: nextStatus, reason }).then((r) => r.data),
+    onSuccess: () => {
+      toast.success('Invoice status updated');
+      setStatusReason('');
+      queryClient.invalidateQueries({ queryKey: ['admin-invoices'] });
+      queryClient.invalidateQueries({ queryKey: ['admin-invoice', selectedId] });
+    },
+    onError: (err: any) => toast.error(err.response?.data?.message || 'Failed to update invoice status'),
+  });
+
+  const formatPrice = (amount: number) => Number(amount || 0).toLocaleString('en-US');
+  const formatDate = (value?: string) => value ? new Date(value).toLocaleString('en-US') : '-';
+
+  const handleStatusUpdate = (nextStatus: InvoiceStatus) => {
+    if (!selectedInvoice) return;
+    if (!statusReason.trim()) {
+      toast.error('Reason is required for manual status changes');
+      return;
+    }
+    updateStatusMutation.mutate({
+      invoiceId: selectedInvoice.id,
+      nextStatus,
+      reason: statusReason.trim(),
+    });
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto space-y-6 animate-fade-in">
+      <div>
+        <h1 className="page-title flex items-center gap-2">
+          <FileText className="w-6 h-6" /> Invoice Management
+        </h1>
+        <p className="page-subtitle">Track all user invoices, payments, gateway refs, and wallet transactions.</p>
+      </div>
+
+      <div className="card grid grid-cols-1 md:grid-cols-4 gap-3">
+        <div className="relative md:col-span-2">
+          <Search className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search invoice, email, or application"
+            className="input-field pl-9 w-full"
+          />
+        </div>
+        <select value={status} onChange={(e) => setStatus(e.target.value as any)} className="input-field">
+          <option value="all">All statuses</option>
+          {Object.entries(statusLabels).map(([value, label]) => (
+            <option key={value} value={value}>{label}</option>
+          ))}
+        </select>
+        <select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value as any)} className="input-field">
+          <option value="all">All methods</option>
+          <option value="wallet">Wallet</option>
+          <option value="gateway">Gateway</option>
+          <option value="mixed">Mixed</option>
+        </select>
+      </div>
+
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+        <div className="xl:col-span-2 card p-0 overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-100">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Invoice</th>
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">User</th>
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Status</th>
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Method</th>
+                  <th className="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase">Due</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100 bg-white">
+                {isLoading ? (
+                  <tr><td colSpan={5} className="px-4 py-8 text-center text-gray-400">Loading...</td></tr>
+                ) : invoices.length === 0 ? (
+                  <tr><td colSpan={5} className="px-4 py-8 text-center text-gray-400">No invoices found</td></tr>
+                ) : invoices.map((invoice) => (
+                  <tr
+                    key={invoice.id}
+                    onClick={() => setSelectedId(invoice.id)}
+                    className={`cursor-pointer hover:bg-gray-50 ${selectedId === invoice.id ? 'bg-primary-50' : ''}`}
+                  >
+                    <td className="px-4 py-3">
+                      <p className="text-sm font-semibold text-gray-900">{invoice.invoiceNumber}</p>
+                      <p className="text-xs text-gray-500">{invoice.application?.name || invoice.reason} · {formatDate(invoice.createdAt)}</p>
+                    </td>
+                    <td className="px-4 py-3">
+                      <p className="text-sm text-gray-900">{invoice.user?.email || invoice.userId}</p>
+                    </td>
+                    <td className="px-4 py-3">
+                      <span className={statusClasses[invoice.status]}>{statusLabels[invoice.status]}</span>
+                    </td>
+                    <td className="px-4 py-3 text-sm text-gray-600">{invoice.paymentMethod || '-'}</td>
+                    <td className="px-4 py-3 text-right">
+                      <p className="text-sm font-bold text-gray-900">{formatPrice(invoice.dueAmount)} T</p>
+                      <p className="text-xs text-gray-400">Total {formatPrice(invoice.total)} T</p>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div className="card">
+          {!selectedInvoice ? (
+            <div className="text-center py-12 text-gray-400">
+              <FileText className="w-10 h-10 mx-auto mb-3" />
+              Select an invoice
+            </div>
+          ) : (
+            <div className="space-y-5">
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <h2 className="text-lg font-bold text-gray-900">{selectedInvoice.invoiceNumber}</h2>
+                  <p className="text-sm text-gray-500">{selectedInvoice.application?.name || selectedInvoice.reason}</p>
+                </div>
+                <span className={statusClasses[selectedInvoice.status]}>{statusLabels[selectedInvoice.status]}</span>
+              </div>
+
+              <div className="grid grid-cols-2 gap-3">
+                <div className="bg-gray-50 rounded-xl p-3">
+                  <p className="text-xs text-gray-500">Total</p>
+                  <p className="font-bold text-gray-900">{formatPrice(selectedInvoice.total)} T</p>
+                </div>
+                <div className="bg-gray-50 rounded-xl p-3">
+                  <p className="text-xs text-gray-500">Due</p>
+                  <p className="font-bold text-primary-700">{formatPrice(selectedInvoice.dueAmount)} T</p>
+                </div>
+              </div>
+
+              <div className="space-y-2 text-sm">
+                <div className="flex items-center gap-2 text-gray-700">
+                  <User className="w-4 h-4 text-gray-400" />
+                  {selectedInvoice.user?.email || selectedInvoice.userId}
+                </div>
+                <div className="flex items-center gap-2 text-gray-700">
+                  <CreditCard className="w-4 h-4 text-gray-400" />
+                  Tracking: {selectedInvoice.gatewayTrackingCode || '-'}
+                </div>
+                <div className="flex items-center gap-2 text-gray-700">
+                  <Wallet className="w-4 h-4 text-gray-400" />
+                  Method: {selectedInvoice.paymentMethod || '-'}
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-sm font-semibold text-gray-900 mb-2">Line items</h3>
+                <div className="space-y-2">
+                  {(selectedInvoice.lines || []).map((line) => (
+                    <div key={line.id} className="border border-gray-100 rounded-xl p-3 flex justify-between gap-3">
+                      <div>
+                        <p className="text-sm font-medium text-gray-900">{line.label}</p>
+                        {line.description && <p className="text-xs text-gray-500">{line.description}</p>}
+                      </div>
+                      <span className="text-sm font-bold">{formatPrice(line.amount)} T</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-sm font-semibold text-gray-900 mb-2">Transactions</h3>
+                {(selectedInvoice.transactions || []).length === 0 ? (
+                  <p className="text-sm text-gray-400">No linked transactions yet</p>
+                ) : (
+                  <div className="space-y-2">
+                    {(selectedInvoice.transactions || []).map((tx) => (
+                      <div key={tx.id} className="border border-gray-100 rounded-xl p-3">
+                        <div className="flex justify-between gap-3">
+                          <span className="text-sm text-gray-700">{tx.description || tx.type}</span>
+                          <span className="text-sm font-bold">{formatPrice(tx.amount)} T</span>
+                        </div>
+                        <p className="text-xs text-gray-400 mt-1">{tx.type} · {formatDate(tx.createdAt)}</p>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              <div className="border-t border-gray-100 pt-4 space-y-3">
+                <h3 className="text-sm font-semibold text-gray-900">Manual status change</h3>
+                <textarea
+                  value={statusReason}
+                  onChange={(e) => setStatusReason(e.target.value)}
+                  className="input-field w-full min-h-[80px]"
+                  placeholder="Reason is required for audit visibility"
+                />
+                <div className="grid grid-cols-2 gap-2">
+                  <button
+                    type="button"
+                    onClick={() => handleStatusUpdate('failed')}
+                    disabled={updateStatusMutation.isPending}
+                    className="btn-secondary text-red-600 flex items-center justify-center gap-2 disabled:opacity-50"
+                  >
+                    <XCircle className="w-4 h-4" /> Failed
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => handleStatusUpdate('void')}
+                    disabled={updateStatusMutation.isPending}
+                    className="btn-secondary disabled:opacity-50"
+                  >
+                    Void
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/dashboard/apps/[id]/page.tsx

@@ -4,7 +4,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useParams, useRouter } from 'next/navigation';
 import api from '@/lib/api';
 import { toast } from 'react-toastify';
-import type { Application, Deployment, ResourceUsage, ClusterPublic, ClusterPoolPublic, AppSnapshot, K8sRevisionData, K8sRevision, ServiceAccessGrant, ServiceAccessTarget } from '@/types';
+import type { Application, Deployment, ResourceUsage, ClusterPublic, ClusterPoolPublic, AppSnapshot, K8sRevisionData, K8sRevision, ServiceAccessGrant, ServiceAccessTarget, Invoice } from '@/types';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import NextLink from 'next/link';
 import { Hexagon, Rocket, Play, Square, RotateCw, Globe, Package, Server, Scale, CheckCircle, Clock, XCircle, AlertCircle, Link, GitBranch, KeyRound, FolderUp, BarChart3, ChevronDown, FileText, Monitor, Hammer, Settings, RefreshCw, Upload, Circle, Pin, Database, Eye, EyeOff, Copy, Check, History, Download, RotateCcw, Camera, Trash2, Archive, Zap, Wallet, CreditCard, AlertTriangle, ShieldAlert, ExternalLink, ScrollText } from 'lucide-react';
@@ -259,6 +259,20 @@ export default function AppDetailPage() {
     },
   });
 
+  const createRenewalInvoiceMutation = useMutation({
+    mutationFn: (cycle: string) =>
+      api.post<Invoice>(`/billing/applications/${appId}/renew/invoice`, { cycle }).then((r) => r.data),
+    onSuccess: (invoice) => {
+      toast.success('Invoice created. Choose how you want to pay.');
+      queryClient.invalidateQueries({ queryKey: ['invoices'] });
+      setShowRenewalModal(false);
+      router.push(`/dashboard/invoices?invoice=${invoice.id}`);
+    },
+    onError: (err: any) => {
+      toast.error(err.response?.data?.message || 'Failed to create renewal invoice');
+    },
+  });
+
   // Check if app needs renewal (expired or suspended)
   const needsRenewal = app?.lifecycleStatus === 'suspended' || app?.lifecycleStatus === 'pending_deletion';
   const isExpiringSoon = app?.planExpiresAt && new Date(app.planExpiresAt) <= new Date(Date.now() + 24 * 60 * 60 * 1000);
@@ -631,6 +645,19 @@ export default function AppDetailPage() {
     onError: (err: any) => toast.error(err.response?.data?.message || 'Failed to calculate upgrade cost'),
   });
 
+  const createUpgradeInvoiceMutation = useMutation({
+    mutationFn: (data: { cpuRequest?: string; cpuLimit?: string; memoryRequest?: string; memoryLimit?: string; replicas?: number }) =>
+      api.post<Invoice>(`/billing/applications/${appId}/upgrade/invoice`, data).then((r) => r.data),
+    onSuccess: (invoice) => {
+      toast.success('Invoice created. Choose how you want to pay.');
+      queryClient.invalidateQueries({ queryKey: ['invoices'] });
+      setShowUpgradeConfirm(false);
+      setUpgradeCostData(null);
+      router.push(`/dashboard/invoices?invoice=${invoice.id}`);
+    },
+    onError: (err: any) => toast.error(err.response?.data?.message || 'Failed to create upgrade invoice'),
+  });
+
   // Handler: app uses billing upgrade path when subscribed; other workloads patch directly.
   const handleScaleResources = () => {
     if (scaleWorkload !== 'app') {
@@ -1110,11 +1137,10 @@ export default function AppDetailPage() {
                   : renewalCostData.costs.yearly;
                 if (walletData.balance < cost) {
                   return (
-                    <div className="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
-                      <p className="text-sm text-red-700">
+                    <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4">
+                      <p className="text-sm text-amber-700">
                         <AlertTriangle className="w-4 h-4 inline mr-1" />
-                        Insufficient balance. Please charge your wallet first.
-                        <a href="/dashboard/wallet" className="underline ml-1 font-medium">Go to Wallet</a>
+                        Wallet is short by {(cost - walletData.balance).toLocaleString()} Toman. You can pay the delta by gateway on the invoice page.
                       </p>
                     </div>
                   );
@@ -1132,18 +1158,14 @@ export default function AppDetailPage() {
                 Cancel
               </button>
               <button
-                onClick={() => renewMutation.mutate(selectedCycle)}
-                disabled={renewMutation.isPending || !renewalCostData?.costs || (walletData && renewalCostData?.costs && (
-                  (selectedCycle === 'hourly' && walletData.balance < renewalCostData.costs.hourly) ||
-                  (selectedCycle === 'monthly' && walletData.balance < renewalCostData.costs.monthly) ||
-                  (selectedCycle === 'yearly' && walletData.balance < renewalCostData.costs.yearly)
-                ))}
+                onClick={() => createRenewalInvoiceMutation.mutate(selectedCycle)}
+                disabled={createRenewalInvoiceMutation.isPending || !renewalCostData?.costs}
                 className="flex-1 px-4 py-2.5 bg-primary-600 text-white rounded-xl font-medium hover:bg-primary-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
               >
-                {renewMutation.isPending ? (
+                {createRenewalInvoiceMutation.isPending ? (
                   <><Clock className="w-4 h-4 animate-spin" /> Processing...</>
                 ) : (
-                  <><CreditCard className="w-4 h-4" /> Pay & Renew</>
+                  <><CreditCard className="w-4 h-4" /> Create Invoice & Pay</>
                 )}
               </button>
             </div>
@@ -1203,11 +1225,10 @@ export default function AppDetailPage() {
 
             {/* Insufficient Balance Warning */}
             {walletData && upgradeCostData.proratedAmount > walletData.balance && (
-              <div className="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
-                <p className="text-sm text-red-700">
+              <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4">
+                <p className="text-sm text-amber-700">
                   <AlertTriangle className="w-4 h-4 inline mr-1" />
-                  Insufficient balance. Please charge your wallet first.
-                  <a href="/dashboard/wallet" className="underline ml-1 font-medium">Go to Wallet</a>
+                  Wallet is short by {(upgradeCostData.proratedAmount - walletData.balance).toLocaleString()} Toman. You can pay the delta by gateway on the invoice page.
                 </p>
               </div>
             )}
@@ -1224,14 +1245,20 @@ export default function AppDetailPage() {
                 Cancel
               </button>
               <button
-                onClick={() => scaleMutation.mutate(resourceForm)}
-                disabled={scaleMutation.isPending || (walletData && upgradeCostData.proratedAmount > walletData.balance)}
+                onClick={() => {
+                  if (upgradeCostData.proratedAmount > 0) {
+                    createUpgradeInvoiceMutation.mutate(resourceForm);
+                  } else {
+                    scaleMutation.mutate(resourceForm);
+                  }
+                }}
+                disabled={scaleMutation.isPending || createUpgradeInvoiceMutation.isPending}
                 className="flex-1 px-4 py-2.5 bg-primary-600 text-white rounded-xl font-medium hover:bg-primary-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
               >
-                {scaleMutation.isPending ? (
+                {scaleMutation.isPending || createUpgradeInvoiceMutation.isPending ? (
                   <><Clock className="w-4 h-4 animate-spin" /> Applying...</>
                 ) : upgradeCostData.proratedAmount > 0 ? (
-                  <><CreditCard className="w-4 h-4" /> Pay & Upgrade</>
+                  <><CreditCard className="w-4 h-4" /> Create Invoice & Pay</>
                 ) : (
                   <><CheckCircle className="w-4 h-4" /> Apply Changes</>
                 )}

frontend/src/app/dashboard/invoices/page.tsx

@@ -0,0 +1,281 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { CreditCard, FileText, Wallet, XCircle, CheckCircle, Clock, ExternalLink } from 'lucide-react';
+import { toast } from 'react-toastify';
+import api from '@/lib/api';
+import type { Invoice, InvoiceStatus } from '@/types';
+
+const statusLabels: Record<InvoiceStatus, string> = {
+  draft: 'Draft',
+  issued: 'Unpaid',
+  partially_paid: 'Partially paid',
+  paid: 'Paid',
+  void: 'Void',
+  failed: 'Failed',
+};
+
+const statusClasses: Record<InvoiceStatus, string> = {
+  draft: 'badge-gray',
+  issued: 'badge-yellow',
+  partially_paid: 'badge-blue',
+  paid: 'badge-green',
+  void: 'badge-gray',
+  failed: 'badge-red',
+};
+
+export default function InvoicesPage() {
+  const queryClient = useQueryClient();
+  const searchParams = useSearchParams();
+  const [statusFilter, setStatusFilter] = useState<'all' | 'unpaid' | InvoiceStatus>('all');
+  const [selectedId, setSelectedId] = useState<string | null>(searchParams.get('invoice'));
+
+  useEffect(() => {
+    const invoiceId = searchParams.get('invoice');
+    if (invoiceId) setSelectedId(invoiceId);
+  }, [searchParams]);
+
+  const { data: walletData } = useQuery<{ balance: number }>({
+    queryKey: ['wallet-balance'],
+    queryFn: () => api.get('/billing/wallet').then((r) => r.data),
+  });
+
+  const { data: invoices = [], isLoading } = useQuery<Invoice[]>({
+    queryKey: ['invoices', statusFilter],
+    queryFn: () => {
+      const params: Record<string, string> = {};
+      if (statusFilter !== 'all' && statusFilter !== 'unpaid') params.status = statusFilter;
+      return api.get('/billing/invoices', { params }).then((r) => r.data);
+    },
+  });
+
+  const visibleInvoices = invoices.filter((invoice) => {
+    if (statusFilter === 'unpaid') return invoice.status === 'issued' || invoice.status === 'partially_paid';
+    return true;
+  });
+
+  const { data: selectedInvoice } = useQuery<Invoice>({
+    queryKey: ['invoice', selectedId],
+    queryFn: () => api.get(`/billing/invoices/${selectedId}`).then((r) => r.data),
+    enabled: !!selectedId,
+  });
+
+  const refresh = () => {
+    queryClient.invalidateQueries({ queryKey: ['invoices'] });
+    queryClient.invalidateQueries({ queryKey: ['invoice', selectedId] });
+    queryClient.invalidateQueries({ queryKey: ['wallet-balance'] });
+    queryClient.invalidateQueries({ queryKey: ['wallet-transactions'] });
+  };
+
+  const walletPayMutation = useMutation({
+    mutationFn: (invoiceId: string) => api.post(`/billing/invoices/${invoiceId}/pay/wallet`).then((r) => r.data),
+    onSuccess: (data) => {
+      toast.success(data.effect ? 'Invoice paid and service updated' : 'Invoice paid');
+      refresh();
+    },
+    onError: (err: any) => toast.error(err.response?.data?.message || 'Wallet payment failed'),
+  });
+
+  const gatewayPayMutation = useMutation({
+    mutationFn: async ({ invoiceId, mixed }: { invoiceId: string; mixed: boolean }) => {
+      const callbackUrl = `${window.location.origin}/dashboard/invoices`;
+      const { data } = await api.post(
+        `/billing/invoices/${invoiceId}/pay/${mixed ? 'mixed' : 'gateway'}`,
+        { callbackUrl },
+      );
+      if (data.gatewayAmount === 0) return data;
+      const amount = data.gatewayAmount ?? data.amount;
+      const trackingCode = data.trackingCode;
+      if (!trackingCode || !amount) return data;
+      const verified = await api.post(`/billing/invoices/${invoiceId}/gateway/verify`, {
+        trackingCode,
+        amount,
+      });
+      return verified.data;
+    },
+    onSuccess: (data) => {
+      toast.success(data.effect ? 'Payment complete and service updated' : 'Payment complete');
+      refresh();
+    },
+    onError: (err: any) => toast.error(err.response?.data?.message || 'Gateway payment failed'),
+  });
+
+  const formatPrice = (amount: number) => Number(amount || 0).toLocaleString('en-US');
+  const formatDate = (value?: string) => value ? new Date(value).toLocaleString('en-US') : '-';
+  const dueAmount = Number(selectedInvoice?.dueAmount || 0);
+  const walletBalance = Number(walletData?.balance || 0);
+  const isPayable = selectedInvoice?.status === 'issued' || selectedInvoice?.status === 'partially_paid';
+
+  return (
+    <div className="max-w-6xl mx-auto space-y-6 animate-fade-in">
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <div>
+          <h1 className="page-title flex items-center gap-2">
+            <FileText className="w-6 h-6" /> Invoices
+          </h1>
+          <p className="page-subtitle">Review what each payment was for and pay open invoices.</p>
+        </div>
+        <div className="card py-3 px-4 flex items-center gap-3">
+          <Wallet className="w-5 h-5 text-primary-600" />
+          <div>
+            <p className="text-xs text-gray-500">Wallet balance</p>
+            <p className="font-bold text-gray-900">{formatPrice(walletBalance)} Toman</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {(['all', 'unpaid', 'paid', 'failed', 'void'] as const).map((status) => (
+          <button
+            key={status}
+            type="button"
+            onClick={() => setStatusFilter(status)}
+            className={`px-3 py-1.5 rounded-lg text-sm font-medium border ${
+              statusFilter === status
+                ? 'bg-primary-600 text-white border-primary-600'
+                : 'bg-white text-gray-700 border-gray-200 hover:bg-gray-50'
+            }`}
+          >
+            {status === 'all' ? 'All' : status === 'unpaid' ? 'Unpaid' : statusLabels[status]}
+          </button>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+        <div className="lg:col-span-3 card p-0 overflow-hidden">
+          {isLoading ? (
+            <div className="p-8 text-center text-gray-400">Loading invoices...</div>
+          ) : visibleInvoices.length === 0 ? (
+            <div className="p-8 text-center text-gray-400">No invoices found</div>
+          ) : (
+            <div className="divide-y divide-gray-100">
+              {visibleInvoices.map((invoice) => (
+                <button
+                  key={invoice.id}
+                  type="button"
+                  onClick={() => setSelectedId(invoice.id)}
+                  className={`w-full text-left p-4 hover:bg-gray-50 transition-colors ${
+                    selectedId === invoice.id ? 'bg-primary-50' : 'bg-white'
+                  }`}
+                >
+                  <div className="flex items-start justify-between gap-3">
+                    <div>
+                      <p className="font-semibold text-gray-900">{invoice.invoiceNumber}</p>
+                      <p className="text-sm text-gray-500">
+                        {invoice.application?.name || invoice.reason} · {formatDate(invoice.createdAt)}
+                      </p>
+                    </div>
+                    <span className={statusClasses[invoice.status]}>{statusLabels[invoice.status]}</span>
+                  </div>
+                  <div className="mt-3 flex items-center justify-between text-sm">
+                    <span className="text-gray-500">Total {formatPrice(invoice.total)} Toman</span>
+                    <span className="font-semibold text-gray-900">Due {formatPrice(invoice.dueAmount)} Toman</span>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="lg:col-span-2 card">
+          {!selectedInvoice ? (
+            <div className="text-center py-12 text-gray-400">
+              <FileText className="w-10 h-10 mx-auto mb-3" />
+              Select an invoice to view details
+            </div>
+          ) : (
+            <div className="space-y-5">
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <h2 className="text-lg font-bold text-gray-900">{selectedInvoice.invoiceNumber}</h2>
+                  <p className="text-sm text-gray-500">{selectedInvoice.application?.name || selectedInvoice.reason}</p>
+                </div>
+                <span className={statusClasses[selectedInvoice.status]}>{statusLabels[selectedInvoice.status]}</span>
+              </div>
+
+              <div className="bg-gray-50 rounded-xl p-4 space-y-2 text-sm">
+                <div className="flex justify-between"><span className="text-gray-500">Total</span><span className="font-semibold">{formatPrice(selectedInvoice.total)} Toman</span></div>
+                <div className="flex justify-between"><span className="text-gray-500">Paid</span><span className="font-semibold text-green-600">{formatPrice(selectedInvoice.paidAmount)} Toman</span></div>
+                <div className="flex justify-between"><span className="text-gray-500">Due</span><span className="font-semibold text-primary-700">{formatPrice(selectedInvoice.dueAmount)} Toman</span></div>
+                <div className="flex justify-between"><span className="text-gray-500">Method</span><span>{selectedInvoice.paymentMethod || '-'}</span></div>
+              </div>
+
+              <div>
+                <h3 className="text-sm font-semibold text-gray-900 mb-2">Line items</h3>
+                <div className="space-y-2">
+                  {(selectedInvoice.lines || []).map((line) => (
+                    <div key={line.id} className="border border-gray-100 rounded-xl p-3">
+                      <div className="flex justify-between gap-3">
+                        <div>
+                          <p className="text-sm font-medium text-gray-900">{line.label}</p>
+                          {line.description && <p className="text-xs text-gray-500">{line.description}</p>}
+                        </div>
+                        <span className="text-sm font-bold text-gray-900">{formatPrice(line.amount)} T</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {isPayable && (
+                <div className="space-y-3 border-t border-gray-100 pt-4">
+                  <h3 className="text-sm font-semibold text-gray-900">Payment options</h3>
+                  <button
+                    type="button"
+                    onClick={() => walletPayMutation.mutate(selectedInvoice.id)}
+                    disabled={walletPayMutation.isPending || walletBalance < dueAmount}
+                    className="w-full btn-primary flex items-center justify-center gap-2 disabled:opacity-50"
+                  >
+                    <Wallet className="w-4 h-4" />
+                    Pay from wallet
+                  </button>
+                  {walletBalance < dueAmount && (
+                    <p className="text-xs text-amber-700 bg-amber-50 border border-amber-100 rounded-lg p-2">
+                      Wallet is short by {formatPrice(dueAmount - walletBalance)} Toman. Use mixed payment to cover the delta by gateway.
+                    </p>
+                  )}
+                  <button
+                    type="button"
+                    onClick={() => gatewayPayMutation.mutate({ invoiceId: selectedInvoice.id, mixed: false })}
+                    disabled={gatewayPayMutation.isPending}
+                    className="w-full btn-secondary flex items-center justify-center gap-2 disabled:opacity-50"
+                  >
+                    <CreditCard className="w-4 h-4" />
+                    Pay directly by gateway
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => gatewayPayMutation.mutate({ invoiceId: selectedInvoice.id, mixed: true })}
+                    disabled={gatewayPayMutation.isPending}
+                    className="w-full btn-secondary flex items-center justify-center gap-2 disabled:opacity-50"
+                  >
+                    <ExternalLink className="w-4 h-4" />
+                    Use wallet + gateway delta
+                  </button>
+                </div>
+              )}
+
+              {selectedInvoice.status === 'paid' && (
+                <div className="flex items-center gap-2 text-sm text-green-700 bg-green-50 border border-green-100 rounded-xl p-3">
+                  <CheckCircle className="w-4 h-4" /> Paid on {formatDate(selectedInvoice.paidAt)}
+                </div>
+              )}
+              {selectedInvoice.status === 'failed' && (
+                <div className="flex items-center gap-2 text-sm text-red-700 bg-red-50 border border-red-100 rounded-xl p-3">
+                  <XCircle className="w-4 h-4" /> {selectedInvoice.statusReason || 'Payment failed'}
+                </div>
+              )}
+              {selectedInvoice.status === 'partially_paid' && (
+                <div className="flex items-center gap-2 text-sm text-blue-700 bg-blue-50 border border-blue-100 rounded-xl p-3">
+                  <Clock className="w-4 h-4" /> Waiting for the remaining payment.
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/dashboard/layout.tsx

@@ -25,6 +25,7 @@ import {
   Wallet,
   CreditCard,
   ScrollText,
+  FileText,
 } from 'lucide-react';
 
 type NavItem = { href: string; label: string; icon: ReactNode };
@@ -35,6 +36,7 @@ const userNavItems: NavItem[] = [
   { href: '/dashboard/logs', label: 'Logs', icon: <ScrollText className="w-4 h-4" /> },
   { href: '/dashboard/deploy', label: 'New Deploy', icon: <Rocket className="w-4 h-4" /> },
   { href: '/dashboard/wallet', label: 'Wallet', icon: <Wallet className="w-4 h-4" /> },
+  { href: '/dashboard/invoices', label: 'Invoices', icon: <FileText className="w-4 h-4" /> },
   { href: '/dashboard/tickets', label: 'Tickets', icon: <Ticket className="w-4 h-4" /> },
 ];
 
@@ -42,6 +44,7 @@ const adminNavItems: NavItem[] = [
   { href: '/dashboard/admin/users', label: 'Users', icon: <Users className="w-4 h-4" /> },
   { href: '/dashboard/admin/apps', label: 'All Applications', icon: <Boxes className="w-4 h-4" /> },
   { href: '/dashboard/admin/billing', label: 'Billing Plans', icon: <CreditCard className="w-4 h-4" /> },
+  { href: '/dashboard/admin/invoices', label: 'Invoices', icon: <FileText className="w-4 h-4" /> },
   { href: '/dashboard/admin/clusters', label: 'Clusters', icon: <Server className="w-4 h-4" /> },
   { href: '/dashboard/admin/pools', label: 'Cluster Pools', icon: <Scale className="w-4 h-4" /> },
   { href: '/dashboard/admin/tickets', label: 'All Tickets', icon: <ClipboardList className="w-4 h-4" /> },

frontend/src/app/dashboard/wallet/page.tsx

@@ -5,24 +5,28 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '@/lib/api';
 import { toast } from 'react-toastify';
 import type { WalletTransaction, TransactionType } from '@/types';
-import { Wallet, Plus, ArrowDownCircle, ArrowUpCircle, RotateCcw, Clock, CreditCard } from 'lucide-react';
+import Link from 'next/link';
+import { Wallet, Plus, ArrowDownCircle, ArrowUpCircle, RotateCcw, Clock, CreditCard, FileText } from 'lucide-react';
 
 const txTypeLabels: Record<TransactionType, string> = {
   charge: 'Deposit',
   deduction: 'Payment',
   refund: 'Refund',
+  gateway_payment: 'Gateway payment',
 };
 
 const txTypeColors: Record<TransactionType, string> = {
   charge: 'text-green-600',
   deduction: 'text-red-600',
   refund: 'text-blue-600',
+  gateway_payment: 'text-purple-600',
 };
 
 const txTypeIcons: Record<TransactionType, React.ReactNode> = {
   charge: <ArrowDownCircle className="w-4 h-4 text-green-500" />,
   deduction: <ArrowUpCircle className="w-4 h-4 text-red-500" />,
   refund: <RotateCcw className="w-4 h-4 text-blue-500" />,
+  gateway_payment: <CreditCard className="w-4 h-4 text-purple-500" />,
 };
 
 export default function WalletPage() {
@@ -194,11 +198,20 @@ export default function WalletPage() {
                       {tx.description && <span className="text-gray-500 font-normal"> — {tx.description}</span>}
                     </p>
                     <p className="text-xs text-gray-400">{formatDate(tx.createdAt)}</p>
+                    {tx.invoiceId && (
+                      <Link
+                        href={`/dashboard/invoices?invoice=${tx.invoiceId}`}
+                        className="mt-1 inline-flex items-center gap-1 text-xs font-medium text-primary-600 hover:text-primary-700"
+                      >
+                        <FileText className="w-3 h-3" />
+                        Invoice {tx.invoice?.invoiceNumber || ''}
+                      </Link>
+                    )}
                   </div>
                 </div>
                 <div className="text-right">
                   <p className={`text-sm font-bold ${txTypeColors[tx.type]}`}>
-                    {tx.type === 'deduction' ? '−' : '+'}{formatPrice(tx.amount)} T
+                    {tx.type === 'deduction' ? '−' : tx.type === 'gateway_payment' ? '' : '+'}{formatPrice(tx.amount)} T
                   </p>
                   <p className="text-xs text-gray-400">Balance: {formatPrice(tx.balanceAfter)} T</p>
                 </div>

frontend/src/types/index.ts

@@ -387,7 +387,10 @@ export interface TicketStats {
 
 export type BillingCycle = 'hourly' | 'monthly' | 'yearly';
 export type PricingResourceType = 'base_fee' | 'cpu_per_core' | 'memory_per_gb' | 'storage_per_gb' | 'database_addon' | 'redis_addon' | 'rabbitmq_addon' | 'elasticsearch_addon' | 'custom_domain_addon';
-export type TransactionType = 'charge' | 'deduction' | 'refund';
+export type TransactionType = 'charge' | 'deduction' | 'refund' | 'gateway_payment';
+export type InvoiceStatus = 'draft' | 'issued' | 'partially_paid' | 'paid' | 'void' | 'failed';
+export type PaymentMethod = 'wallet' | 'gateway' | 'mixed';
+export type InvoiceReason = 'deploy' | 'renewal' | 'upgrade' | 'wallet_topup' | 'manual';
 
 export interface PricingRateRow {
   resourceType: PricingResourceType;
@@ -456,10 +459,52 @@ export interface WalletTransaction {
   balanceAfter: number;
   description?: string;
   applicationId?: string;
+  invoiceId?: string;
+  invoice?: Invoice;
+  gatewayTrackingCode?: string;
   walletId: string;
   createdAt: string;
 }
 
+export interface InvoiceLine {
+  id: string;
+  invoiceId: string;
+  label: string;
+  description?: string;
+  quantity: number;
+  unitAmount: number;
+  amount: number;
+  metadata?: Record<string, any>;
+  createdAt: string;
+}
+
+export interface Invoice {
+  id: string;
+  invoiceNumber: string;
+  userId: string;
+  user?: User;
+  applicationId?: string;
+  application?: Application;
+  reason: InvoiceReason;
+  status: InvoiceStatus;
+  paymentMethod?: PaymentMethod;
+  subtotal: number;
+  total: number;
+  paidAmount: number;
+  dueAmount: number;
+  dueDate?: string;
+  paidAt?: string;
+  gatewayTrackingCode?: string;
+  gatewayReference?: string;
+  adminNote?: string;
+  statusReason?: string;
+  metadata?: Record<string, any>;
+  lines?: InvoiceLine[];
+  transactions?: WalletTransaction[];
+  createdAt: string;
+  updatedAt: string;
+}
+
 export interface OptionalServiceCyclePrices {
   hourly: number;
   monthly: number;