Add subcription feature 6

frontend/src/pages/app/settings/subscription/SubscriptionPage.tsx

@@ -558,10 +558,15 @@ const SubscriptionPageRedesign: React.FC = () => {
     try {
       setInvoicesLoading(true);
       const fetchedInvoices = await subscriptionService.getInvoices(tenantId);
-      setInvoices(fetchedInvoices);
+
+      // Ensure fetchedInvoices is an array before setting state
+      const validatedInvoices = Array.isArray(fetchedInvoices) ? fetchedInvoices : [];
+      setInvoices(validatedInvoices);
       setInvoicesLoaded(true);
     } catch (error) {
       console.error('Error loading invoices:', error);
+      // Set invoices to empty array in case of error to prevent slice error
+      setInvoices([]);
       if (invoicesLoaded) {
         showToast.error('Error al cargar las facturas');
       }
@@ -920,7 +925,7 @@ const SubscriptionPageRedesign: React.FC = () => {
                   <p className="text-[var(--text-secondary)]">Cargando facturas...</p>
                 </div>
               </div>
-            ) : invoices.length === 0 ? (
+            ) : (!Array.isArray(invoices) || invoices.length === 0) ? (
               <div className="text-center py-8">
                 <div className="flex flex-col items-center gap-3">
                   <div className="p-4 bg-[var(--bg-secondary)] rounded-full">
@@ -943,7 +948,7 @@ const SubscriptionPageRedesign: React.FC = () => {
                     </tr>
                   </thead>
                   <tbody>
-                    {invoices.slice(0, 5).map((invoice) => (
+                    {Array.isArray(invoices) && invoices.slice(0, 5).map((invoice) => (
                       <tr key={invoice.id} className="border-b border-[var(--border-color)] hover:bg-[var(--bg-secondary)] transition-colors">
                         <td className="py-3 px-4 text-[var(--text-primary)] font-medium">
                           {new Date(invoice.date).toLocaleDateString('es-ES', {
@@ -979,7 +984,7 @@ const SubscriptionPageRedesign: React.FC = () => {
                     ))}
                   </tbody>
                 </table>
-                {invoices.length > 5 && (
+                {Array.isArray(invoices) && invoices.length > 5 && (
                   <div className="mt-4 text-center">
                     <Button variant="ghost" onClick={() => setShowBilling(true)}>
                       Ver todas las facturas ({invoices.length})