STripe Paymen and PK payemtns and many othe rbacekd and froentened issues

frontend/src/utils/currency.ts

@@ -0,0 +1,68 @@
+/**
+ * Currency utilities for formatting amounts with proper symbols
+ */
+
+// Currency symbols map
+const CURRENCY_SYMBOLS: Record<string, string> = {
+  USD: '$',
+  EUR: '€',
+  GBP: '£',
+  INR: '₹',
+  JPY: '¥',
+  CNY: '¥',
+  AUD: 'A$',
+  CAD: 'C$',
+  CHF: 'Fr',
+  SEK: 'kr',
+  NOK: 'kr',
+  DKK: 'kr',
+  PLN: 'zł',
+  BRL: 'R$',
+  ZAR: 'R',
+  AED: 'د.إ',
+  SAR: 'ر.س',
+  PKR: '₨',
+};
+
+/**
+ * Get currency symbol for a currency code
+ */
+export const getCurrencySymbol = (currencyCode?: string): string => {
+  if (!currencyCode) return '$';
+  const code = currencyCode.toUpperCase();
+  return CURRENCY_SYMBOLS[code] || `${code} `;
+};
+
+/**
+ * Format an amount with the proper currency symbol
+ * @param amount - The amount to format (string or number)
+ * @param currency - The currency code (e.g., 'USD', 'PKR')
+ * @param showDecimals - Whether to show decimal places (default: true for most currencies)
+ */
+export const formatCurrency = (
+  amount: string | number,
+  currency?: string,
+  showDecimals: boolean = true
+): string => {
+  const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
+  if (isNaN(numAmount)) return '-';
+  
+  const symbol = getCurrencySymbol(currency);
+  
+  // For zero-decimal currencies like JPY, don't show decimals
+  const zeroDecimalCurrencies = ['JPY', 'KRW', 'VND'];
+  const shouldShowDecimals = showDecimals && !zeroDecimalCurrencies.includes(currency?.toUpperCase() || '');
+  
+  const formatted = shouldShowDecimals 
+    ? numAmount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+    : numAmount.toLocaleString('en-US', { maximumFractionDigits: 0 });
+  
+  return `${symbol}${formatted}`;
+};
+
+/**
+ * Format price for display (typically USD)
+ */
+export const formatPrice = (price: string | number): string => {
+  return formatCurrency(price, 'USD');
+};

frontend/src/utils/date.ts

@@ -50,3 +50,46 @@ export function formatRelativeDate(dateString: string | Date): string {
   }
 }
 
+/**
+ * Format date to a standard display format
+ * @param dateString - ISO date string or Date object
+ * @param options - Intl.DateTimeFormat options
+ * @returns Formatted date string (e.g., "Jan 7, 2026")
+ */
+export function formatDate(
+  dateString: string | Date | null | undefined,
+  options: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' }
+): string {
+  if (!dateString) return '-';
+  
+  const date = typeof dateString === 'string' ? new Date(dateString) : dateString;
+  
+  if (isNaN(date.getTime())) return '-';
+  
+  return date.toLocaleDateString('en-US', options);
+}
+
+/**
+ * Format date and time to a standard display format
+ * @param dateString - ISO date string or Date object
+ * @returns Formatted date and time string (e.g., "Jan 7, 2026, 3:30 PM")
+ */
+export function formatDateTime(
+  dateString: string | Date | null | undefined
+): string {
+  if (!dateString) return '-';
+  
+  const date = typeof dateString === 'string' ? new Date(dateString) : dateString;
+  
+  if (isNaN(date.getTime())) return '-';
+  
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true
+  });
+}
+

frontend/src/utils/index.ts

@@ -27,5 +27,12 @@ export {
   formatDateTime,
 } from './date';
 
+// Currency utilities
+export {
+  getCurrencySymbol,
+  formatCurrency,
+  formatPrice,
+} from './currency';
+
 // Add other global utilities here as needed