refactor subscriptionsTable.jsx

src/components/admin/SubscriptionsTable.jsx

@@ -33,6 +33,17 @@ const HeaderCell = ({ align, children }) => (
   </th>
 );
 
+const TableCell = ({ align = 'text-left', className = '', style, children, ...props }) => (
+  <td
+    className={`p-4 ${align} ${className}`.trim()}
+    style={style}
+    {...props}
+  >
+    {children}
+  </td>
+);
+
+
 const SubscriptionRow = ({
   sub,
   isExpanded,
@@ -47,41 +58,53 @@ const SubscriptionRow = ({
 }) => (
   <>
     <tr className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-400)] transition-colors">
-      <td className="p-4">
+      <TableCell>
         <div className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           {sub.user.first_name} {sub.user.last_name}
         </div>
         <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           {sub.user.email}
         </div>
-      </td>
-      <td className="p-4">
+      </TableCell>
+      <TableCell>
         <div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           {sub.plan.name}
         </div>
         <div className="text-xs text-brand-purple ">
           {sub.plan.billing_cycle}
         </div>
-      </td>
-      <td className="p-4">
+      </TableCell>
+      <TableCell>
         <StatusBadge status={sub.status} />
-      </td>
-      <td className="p-4">
+      </TableCell>
+      <TableCell>
         <div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           <div>{formatDate(sub.start_date)}</div>
           <div className="text-xs text-brand-purple ">to {formatDate(sub.end_date)}</div>
         </div>
-      </td>
-      <td className="p-4 text-right text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+      </TableCell>
+      <TableCell
+        align="text-right"
+        className="text-[var(--purple-ink)]"
+        style={{ fontFamily: "'Inter', sans-serif" }}
+      >
         {formatPrice(sub.base_subscription_cents || 0)}
-      </td>
-      <td className="p-4 text-right text-[var(--orange-light)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+      </TableCell>
+      <TableCell
+        align="text-right"
+        className="text-[var(--orange-light)]"
+        style={{ fontFamily: "'Inter', sans-serif" }}
+      >
         {formatPrice(sub.donation_cents || 0)}
-      </td>
-      <td className="p-4 text-right font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+      </TableCell>
+      <TableCell
+        align="text-right"
+        className="font-semibold text-[var(--purple-ink)]"
+        style={{ fontFamily: "'Inter', sans-serif" }}
+      >
         {formatPrice(sub.amount_paid_cents || 0)}
-      </td>
-      <td className="p-4">
+      </TableCell>
+      <TableCell>
         <Button
           size="sm"
           variant="ghost"
@@ -90,8 +113,8 @@ const SubscriptionRow = ({
         >
           {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
         </Button>
-      </td>
-      <td className="p-4">
+      </TableCell>
+      <TableCell>
         <div className="flex items-center justify-center gap-2">
           {hasPermission('subscriptions.edit') && (
             <Button
@@ -113,12 +136,12 @@ const SubscriptionRow = ({
             </Button>
           )}
         </div>
-      </td>
+      </TableCell>
     </tr>
 
     {isExpanded && (
       <tr className="bg-[var(--lavender-400)]/30">
-        <td colSpan={9} className="p-6">
+        <TableCell colSpan={9} className="p-6">
           <div className="space-y-4">
             <h4 className="font-semibold text-[var(--purple-ink)] text-lg mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Transaction Details
@@ -260,7 +283,7 @@ const SubscriptionRow = ({
               </div>
             </div>
           </div>
-        </td>
+        </TableCell>
       </tr>
     )}
   </>
@@ -307,9 +330,14 @@ const SubscriptionsTable = ({
         ))
       ) : (
         <tr>
-          <td colSpan={9} className="p-12 text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <TableCell
+            align="text-center"
+            className="p-12 text-brand-purple "
+            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            colSpan={9}
+          >
             No subscriptions found
-          </td>
+          </TableCell>
         </tr>
       )}
     </tbody>