beautify: added all needed sections for profile page --> dummy data

src/app/profile/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import useAuthStore from '../store/authStore'
 import Header from '../components/nav/Header'
@@ -49,10 +49,31 @@ export default function ProfilePage() {
     profileComplete: 95
   }
 
+  // Dummy data for new sections
+  const documents = [
+    { id: 1, name: 'Passport.pdf', type: 'PDF', uploaded: '2024-05-01' },
+    { id: 2, name: 'Invoice_2024.xlsx', type: 'Excel', uploaded: '2024-06-10' },
+    { id: 3, name: 'ProfilePhoto.jpg', type: 'Image', uploaded: '2024-04-15' },
+  ]
+
+  const [bankInfo, setBankInfo] = React.useState({
+    accountHolder: 'Admin User',
+    iban: 'DE89 3704 0044 0532 0130 00',
+    bic: 'COBADEFFXXX',
+    bankName: 'Commerzbank',
+  })
+  const [editingBank, setEditingBank] = React.useState(false)
+  const [bankDraft, setBankDraft] = React.useState(bankInfo)
+
+  const matrices = [
+    { id: 1, name: 'Starter Matrix', level: '1', status: 'Active', joined: '2024-03-01' },
+    { id: 2, name: 'Gold Matrix', level: '2', status: 'Pending', joined: '2024-05-15' },
+    { id: 3, name: 'Platinum Matrix', level: '3', status: 'Active', joined: '2024-06-01' },
+  ]
+
   return (
     <div className="min-h-screen flex flex-col bg-gray-50">
       <Header />
-      
       <main className="flex-1 py-8 px-4 sm:px-6 lg:px-8">
         <div className="max-w-4xl mx-auto">
           {/* Page Header */}
@@ -63,7 +84,7 @@ export default function ProfilePage() {
             </p>
           </div>
 
-          {/* Profile Completion */}
+          {/* 1. Profile Completion */}
           <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
             <div className="flex items-center justify-between mb-4">
               <h2 className="text-lg font-semibold text-gray-900">Profile Completion</h2>
@@ -80,10 +101,10 @@ export default function ProfilePage() {
             </p>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* 2. Basic Info + Sidebar */}
-            {/* Profile Information */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
+            {/* Basic Information */}
             <div className="lg:col-span-2 space-y-6">
-              {/* Basic Information */}
               <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                 <div className="flex items-center justify-between mb-6">
                   <h2 className="text-lg font-semibold text-gray-900">Basic Information</h2>
@@ -147,48 +168,8 @@ export default function ProfilePage() {
                   </div>
                 </div>
               </div>
-
-              {/* Account Settings */}
-              <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-                <h2 className="text-lg font-semibold text-gray-900 mb-6">Account Settings</h2>
-                
-                <div className="space-y-4">
-                  <div className="flex items-center justify-between py-3 border-b border-gray-100">
-                    <div>
-                      <p className="font-medium text-gray-900">Email Notifications</p>
-                      <p className="text-sm text-gray-600">Receive updates about orders and promotions</p>
-                    </div>
-                    <label className="relative inline-flex items-center cursor-pointer">
-                      <input type="checkbox" className="sr-only peer" defaultChecked />
-                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#8D6B1D]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#8D6B1D]"></div>
-                    </label>
-                  </div>
-                  
-                  <div className="flex items-center justify-between py-3 border-b border-gray-100">
-                    <div>
-                      <p className="font-medium text-gray-900">SMS Notifications</p>
-                      <p className="text-sm text-gray-600">Get text messages for important updates</p>
-                    </div>
-                    <label className="relative inline-flex items-center cursor-pointer">
-                      <input type="checkbox" className="sr-only peer" />
-                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#8D6B1D]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#8D6B1D]"></div>
-                    </label>
-                  </div>
-                  
-                  <div className="flex items-center justify-between py-3">
-                    <div>
-                      <p className="font-medium text-gray-900">Two-Factor Authentication</p>
-                      <p className="text-sm text-gray-600">Add extra security to your account</p>
-                    </div>
-                    <button className="px-4 py-2 text-sm font-medium text-[#8D6B1D] border border-[#8D6B1D] rounded-lg hover:bg-[#8D6B1D]/10 transition-colors">
-                      Enable
-                    </button>
-                  </div>
-                </div>
-              </div>
             </div>
-
+            {/* Sidebar: Account Status + Quick Actions */}
-            {/* Sidebar */}
             <div className="space-y-6">
               {/* Account Status */}
               <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
@@ -213,7 +194,6 @@ export default function ProfilePage() {
                   </div>
                 </div>
               </div>
-
               {/* Quick Actions */}
               <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                 <h3 className="font-semibold text-gray-900 mb-4">Quick Actions</h3>
@@ -235,9 +215,203 @@ export default function ProfilePage() {
               </div>
             </div>
           </div>
+
+          {/* 3. Media, Bank Info, Matrix Overview */}
+          <div className="space-y-8 mb-8">
+            {/* --- Media Section --- */}
+            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+              <h2 className="text-lg font-semibold text-gray-900 mb-4">Media & Documents</h2>
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-gray-200">
+                  <thead>
+                    <tr>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Uploaded</th>
+                      <th className="px-4 py-2"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {documents.map(doc => (
+                      <tr key={doc.id} className="bg-white hover:bg-gray-50">
+                        <td className="px-4 py-2 text-gray-900">{doc.name}</td>
+                        <td className="px-4 py-2 text-gray-600">{doc.type}</td>
+                        <td className="px-4 py-2 text-gray-600">{doc.uploaded}</td>
+                        <td className="px-4 py-2 flex gap-2">
+                          <button className="px-3 py-1 text-xs bg-[#8D6B1D] text-white rounded hover:bg-[#7A5E1A] transition">Download</button>
+                          <button className="px-3 py-1 text-xs bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition">Preview</button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            {/* --- Edit Bank Information Section --- */}
+            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-lg font-semibold text-gray-900">Bank Information</h2>
+                {!editingBank && (
+                  <button
+                    className="flex items-center text-[#8D6B1D] hover:text-[#7A5E1A] transition-colors"
+                    onClick={() => { setEditingBank(true); setBankDraft(bankInfo); }}
+                  >
+                    <PencilIcon className="h-4 w-4 mr-1" />
+                    Edit
+                  </button>
+                )}
+              </div>
+              <form
+                className="space-y-4"
+                onSubmit={e => {
+                  e.preventDefault()
+                  setBankInfo(bankDraft)
+                  setEditingBank(false)
+                }}
+              >
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Account Holder</label>
+                  <input
+                    type="text"
+                    className="w-full p-2 border border-gray-200 rounded-lg bg-gray-50"
+                    value={editingBank ? bankDraft.accountHolder : bankInfo.accountHolder}
+                    onChange={e => setBankDraft({ ...bankDraft, accountHolder: e.target.value })}
+                    disabled={!editingBank}
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">IBAN</label>
+                  <input
+                    type="text"
+                    className="w-full p-2 border border-gray-200 rounded-lg bg-gray-50"
+                    value={editingBank ? bankDraft.iban : bankInfo.iban}
+                    onChange={e => setBankDraft({ ...bankDraft, iban: e.target.value })}
+                    disabled={!editingBank}
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">BIC</label>
+                  <input
+                    type="text"
+                    className="w-full p-2 border border-gray-200 rounded-lg bg-gray-50"
+                    value={editingBank ? bankDraft.bic : bankInfo.bic}
+                    onChange={e => setBankDraft({ ...bankDraft, bic: e.target.value })}
+                    disabled={!editingBank}
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Bank Name</label>
+                  <input
+                    type="text"
+                    className="w-full p-2 border border-gray-200 rounded-lg bg-gray-50"
+                    value={editingBank ? bankDraft.bankName : bankInfo.bankName}
+                    onChange={e => setBankDraft({ ...bankDraft, bankName: e.target.value })}
+                    disabled={!editingBank}
+                  />
+                </div>
+                {editingBank && (
+                  <div className="flex gap-2 mt-2">
+                    <button
+                      type="submit"
+                      className="px-4 py-2 text-sm font-medium text-white bg-[#8D6B1D] rounded-lg hover:bg-[#7A5E1A] transition"
+                    >
+                      Save
+                    </button>
+                    <button
+                      type="button"
+                      className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 transition"
+                      onClick={() => setEditingBank(false)}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                )}
+              </form>
+            </div>
+            {/* --- Matrix Overview Section --- */}
+            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+              <h2 className="text-lg font-semibold text-gray-900 mb-4">Matrix Overview</h2>
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-gray-200">
+                  <thead>
+                    <tr>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Matrix Name</th>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Level</th>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Joined</th>
+                      <th className="px-4 py-2"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {matrices.map(matrix => (
+                      <tr key={matrix.id} className="bg-white hover:bg-gray-50">
+                        <td className="px-4 py-2 text-gray-900">{matrix.name}</td>
+                        <td className="px-4 py-2 text-gray-600">{matrix.level}</td>
+                        <td className="px-4 py-2">
+                          <span className={`px-2 py-1 rounded text-xs font-medium ${
+                            matrix.status === 'Active'
+                              ? 'bg-green-100 text-green-700'
+                              : 'bg-yellow-100 text-yellow-700'
+                          }`}>
+                            {matrix.status}
+                          </span>
+                        </td>
+                        <td className="px-4 py-2 text-gray-600">{matrix.joined}</td>
+                        <td className="px-4 py-2">
+                          <button
+                            className="px-3 py-1 text-xs bg-[#8D6B1D] text-white rounded hover:bg-[#7A5E1A] transition"
+                            onClick={() => router.push(`/matrix/${matrix.id}`)}
+                          >
+                            Details
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          {/* 4. Account Settings */}
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <h2 className="text-lg font-semibold text-gray-900 mb-6">Account Settings</h2>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between py-3 border-b border-gray-100">
+                <div>
+                  <p className="font-medium text-gray-900">Email Notifications</p>
+                  <p className="text-sm text-gray-600">Receive updates about orders and promotions</p>
+                </div>
+                <label className="relative inline-flex items-center cursor-pointer">
+                  <input type="checkbox" className="sr-only peer" defaultChecked />
+                  <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#8D6B1D]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#8D6B1D]"></div>
+                </label>
+              </div>
+              
+              <div className="flex items-center justify-between py-3 border-b border-gray-100">
+                <div>
+                  <p className="font-medium text-gray-900">SMS Notifications</p>
+                  <p className="text-sm text-gray-600">Get text messages for important updates</p>
+                </div>
+                <label className="relative inline-flex items-center cursor-pointer">
+                  <input type="checkbox" className="sr-only peer" />
+                  <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#8D6B1D]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#8D6B1D]"></div>
+                </label>
+              </div>
+              
+              <div className="flex items-center justify-between py-3">
+                <div>
+                  <p className="font-medium text-gray-900">Two-Factor Authentication</p>
+                  <p className="text-sm text-gray-600">Add extra security to your account</p>
+                </div>
+                <button className="px-4 py-2 text-sm font-medium text-[#8D6B1D] border border-[#8D6B1D] rounded-lg hover:bg-[#8D6B1D]/10 transition-colors">
+                  Enable
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
       </main>
-      
       <Footer />
     </div>
   )