website refactor

apps/website/app/sponsor/billing/page.tsx

@@ -11,8 +11,6 @@ import InfoBanner from '@/components/ui/InfoBanner';
 import PageHeader from '@/components/ui/PageHeader';
 import { siteConfig } from '@/lib/siteConfig';
 import { useSponsorBilling } from "@/lib/hooks/sponsor/useSponsorBilling";
-import { useInject } from '@/lib/di/hooks/useInject';
-import { SPONSOR_SERVICE_TOKEN } from '@/lib/di/tokens';
 import {
   CreditCard,
   DollarSign,
@@ -107,13 +105,13 @@ function PaymentMethodCard({
   };
 
   return (
-    <motion.div 
+    <motion.div
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
       className={`p-4 rounded-xl border transition-all ${
-        method.isDefault 
-          ? 'border-primary-blue/50 bg-gradient-to-r from-primary-blue/10 to-transparent shadow-[0_0_20px_rgba(25,140,255,0.1)]' 
+        method.isDefault
+          ? 'border-primary-blue/50 bg-gradient-to-r from-primary-blue/10 to-transparent shadow-[0_0_20px_rgba(25,140,255,0.1)]'
           : 'border-charcoal-outline bg-iron-gray/30 hover:border-charcoal-outline/80'
       }`}
     >
@@ -162,31 +160,31 @@ function InvoiceRow({ invoice, index }: { invoice: any; index: number }) {
   const shouldReduceMotion = useReducedMotion();
   
   const statusConfig = {
-    paid: { 
-      icon: Check, 
+    paid: {
+      icon: Check,
       label: 'Paid',
-      color: 'text-performance-green', 
+      color: 'text-performance-green',
       bg: 'bg-performance-green/10',
       border: 'border-performance-green/30'
     },
-    pending: { 
-      icon: Clock, 
+    pending: {
+      icon: Clock,
       label: 'Pending',
-      color: 'text-warning-amber', 
+      color: 'text-warning-amber',
       bg: 'bg-warning-amber/10',
       border: 'border-warning-amber/30'
     },
-    overdue: { 
-      icon: AlertTriangle, 
+    overdue: {
+      icon: AlertTriangle,
       label: 'Overdue',
-      color: 'text-racing-red', 
+      color: 'text-racing-red',
       bg: 'bg-racing-red/10',
       border: 'border-racing-red/30'
     },
-    failed: { 
-      icon: AlertTriangle, 
+    failed: {
+      icon: AlertTriangle,
       label: 'Failed',
-      color: 'text-racing-red', 
+      color: 'text-racing-red',
       bg: 'bg-racing-red/10',
       border: 'border-racing-red/30'
     },
@@ -204,7 +202,7 @@ function InvoiceRow({ invoice, index }: { invoice: any; index: number }) {
   const StatusIcon = status.icon;
 
   return (
-    <motion.div 
+    <motion.div
       initial={{ opacity: 0, x: -10 }}
       animate={{ opacity: 1, x: 0 }}
       transition={{ duration: shouldReduceMotion ? 0 : 0.2, delay: shouldReduceMotion ? 0 : index * 0.05 }}
@@ -261,7 +259,6 @@ function InvoiceRow({ invoice, index }: { invoice: any; index: number }) {
 
 export default function SponsorBillingPage() {
   const shouldReduceMotion = useReducedMotion();
-  const sponsorService = useInject(SPONSOR_SERVICE_TOKEN);
   const [showAllInvoices, setShowAllInvoices] = useState(false);
 
   const { data: billingData, isLoading, error, retry } = useSponsorBilling('demo-sponsor-1');
@@ -322,7 +319,7 @@ export default function SponsorBillingPage() {
   };
 
   return (
-    <motion.div 
+    <motion.div
       className="max-w-5xl mx-auto py-8 px-4"
       variants={containerVariants}
       initial="hidden"
@@ -353,7 +350,7 @@ export default function SponsorBillingPage() {
           icon={AlertTriangle}
           label="Pending Payments"
           value={data.stats.formattedPendingAmount}
-          subValue={`${data.invoices.filter(i => i.status === 'pending' || i.status === 'overdue').length} invoices`}
+          subValue={`${data.invoices.filter((i: { status: string }) => i.status === 'pending' || i.status === 'overdue').length} invoices`}
           color="text-warning-amber"
           bgColor="bg-warning-amber/10"
         />
@@ -378,8 +375,8 @@ export default function SponsorBillingPage() {
       {/* Payment Methods */}
       <motion.div variants={itemVariants}>
         <Card className="mb-8 overflow-hidden">
-          <SectionHeader 
-            icon={CreditCard} 
+          <SectionHeader
+            icon={CreditCard}
             title="Payment Methods"
             action={
               <Button variant="secondary" className="text-sm">
@@ -389,7 +386,7 @@ export default function SponsorBillingPage() {
             }
           />
           <div className="p-5 space-y-3">
-            {data.paymentMethods.map((method) => (
+            {data.paymentMethods.map((method: { id: string; type: string; last4: string; brand: string; default: boolean }) => (
               <PaymentMethodCard
                 key={method.id}
                 method={method}
@@ -410,8 +407,8 @@ export default function SponsorBillingPage() {
       {/* Billing History */}
       <motion.div variants={itemVariants}>
         <Card className="mb-8 overflow-hidden">
-          <SectionHeader 
-            icon={FileText} 
+          <SectionHeader
+            icon={FileText}
             title="Billing History"
             color="text-warning-amber"
             action={
@@ -422,7 +419,7 @@ export default function SponsorBillingPage() {
             }
           />
           <div>
-            {data.invoices.slice(0, showAllInvoices ? data.invoices.length : 4).map((invoice, index) => (
+            {data.invoices.slice(0, showAllInvoices ? data.invoices.length : 4).map((invoice: { id: string; date: string; amount: number; status: string }, index: number) => (
               <InvoiceRow key={invoice.id} invoice={invoice} index={index} />
             ))}
           </div>