Square Payments

frontend/src/pages/MembershipTiers.tsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { membershipService, MembershipTier, MembershipTierCreateData, MembershipTierUpdateData } from '../services/membershipService';
 
 const MembershipTiers: React.FC = () => {
+  const navigate = useNavigate();
   const [tiers, setTiers] = useState<MembershipTier[]>([]);
   const [loading, setLoading] = useState(true);
   const [showCreateForm, setShowCreateForm] = useState(false);
@@ -82,31 +84,65 @@ const MembershipTiers: React.FC = () => {
   }
 
   return (
-    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '20px' }}>
+    <div style={{
+      minHeight: '100vh',
+      backgroundColor: '#f8f9fa',
+      padding: '20px'
+    }}>
       <div style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: '30px'
+        maxWidth: '1200px',
+        margin: '0 auto',
+        backgroundColor: 'white',
+        borderRadius: '8px',
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+        overflow: 'hidden'
       }}>
-        <h1 style={{ margin: 0, color: '#333' }}>Membership Tiers Management</h1>
-        <button
-          onClick={() => setShowCreateForm(true)}
-          style={{
-            padding: '10px 20px',
-            backgroundColor: '#28a745',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '14px'
-          }}
-        >
-          Create New Tier
-        </button>
-      </div>
+        <div style={{
+          backgroundColor: '#007bff',
+          color: 'white',
+          padding: '20px',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}>
+          <div>
+            <h1 style={{ margin: 0, fontSize: '24px' }}>Membership Tiers Management</h1>
+            <p style={{ margin: '5px 0 0 0', opacity: 0.9 }}>
+              Manage membership tiers and pricing
+            </p>
+          </div>
+          <div style={{ display: 'flex', gap: '10px' }}>
+            <button
+              onClick={() => navigate('/dashboard')}
+              style={{
+                padding: '8px 16px',
+                backgroundColor: 'rgba(255,255,255,0.2)',
+                color: 'white',
+                border: '1px solid rgba(255,255,255,0.3)',
+                borderRadius: '4px',
+                cursor: 'pointer'
+              }}
+            >
+              Back to Dashboard
+            </button>
+            <button
+              onClick={() => setShowCreateForm(true)}
+              style={{
+                padding: '8px 16px',
+                backgroundColor: 'rgba(255,255,255,0.2)',
+                color: 'white',
+                border: '1px solid rgba(255,255,255,0.3)',
+                borderRadius: '4px',
+                cursor: 'pointer'
+              }}
+            >
+              Create New Tier
+            </button>
+          </div>
+        </div>
 
-      <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))' }}>
+        <div style={{ padding: '20px' }}>
+          <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))' }}>
         {tiers.map((tier) => (
           <div
             key={tier.id}
@@ -196,6 +232,8 @@ const MembershipTiers: React.FC = () => {
           onCancel={handleCancelEdit}
         />
       )}
+        </div>
+      </div>
     </div>
   );
 };