admin core func done

app/internal/templates/profile/profile.html

@@ -1,199 +1,372 @@
 {{ define "content" }}
 <div class="min-h-screen bg-gray-50">
-  <!-- Header Bar -->
-  <div class="bg-white border-b border-gray-200 px-6 py-4">
+  <!-- Top Navigation -->
+  <div class="bg-white border-b border-gray-200 px-6 py-3">
     <div class="flex items-center justify-between">
-      <div class="flex items-center space-x-3">
-        <i class="fas fa-user-circle text-blue-600 text-xl"></i>
-        <h1 class="text-xl font-semibold text-gray-900">User Profile</h1>
-      </div>
-      <div class="flex items-center space-x-2 text-sm text-gray-600">
-        <i class="fas fa-shield-check text-blue-500"></i>
-        <span>Secure Profile Management</span>
+      <div class="flex items-center gap-4">
+        <div class="flex items-center gap-2">
+          <i
+            class="{{if .PageIcon}}{{.PageIcon}}{{else}}fas fa-users{{end}} text-blue-600"
+          ></i>
+          <span class="text-sm font-medium">Volunteer Management</span>
+        </div>
       </div>
     </div>
   </div>
-
   <!-- Main Content -->
   <div class="p-6">
-    <!-- Profile Overview Tile -->
-    <div class="bg-white border border-gray-200 mb-6">
-      <div class="bg-blue-50 border-b border-gray-200 px-6 py-4">
-        <h2 class="text-lg font-semibold text-gray-900 flex items-center">
-          <i class="fas fa-id-card text-blue-600 mr-3"></i>
-          Profile Overview
-        </h2>
-      </div>
-      <div class="p-6">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          <!-- User Info -->
-          <div class="lg:col-span-2">
-            <div class="flex items-start space-x-4">
-              <div class="flex-1">
-                <h3 class="text-xl font-semibold text-gray-900">
-                  {{ .User.FirstName }} {{ .User.LastName }}
-                </h3>
-                <p class="text-gray-600">{{ .User.Email }}</p>
-                <div class="flex items-center mt-2 space-x-4">
-                  <span
-                    class="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
-                  >
-                    <i class="fas fa-user-check mr-1"></i>
-                    Active User
-                  </span>
-                  <span class="text-xs text-gray-500"
-                    >ID: {{ .User.UserID }}</span
-                  >
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- Quick Stats -->
-          <div class="bg-gray-50 border border-gray-200 p-4">
-            <h4 class="text-sm font-semibold text-gray-700 mb-3">
-              Account Information
-            </h4>
-            <div class="space-y-2">
-              <div class="flex justify-between text-sm">
-                <span class="text-gray-600">User ID:</span>
-                <span class="font-mono text-gray-900">{{ .User.UserID }}</span>
-              </div>
-              <div class="flex justify-between text-sm">
-                <span class="text-gray-600">Role:</span>
-                <span class="text-gray-900">{{ if eq .User.RoleID 1 }}Admin
-            {{ else if eq .User.RoleID 2 }}Team Leader
-            {{ else }}Volunteer
-            {{ end }}</span>
-              </div>
-              <div class="flex justify-between text-sm">
-                <span class="text-gray-600">Status:</span>
-                <span class="text-green-600 font-medium">Active</span>
-              </div>
-  
-              </div>
-            </div>
+    <!-- Profile Info Section -->
+    <div class="mb-8">
+      <div class="flex items-start space-x-4">
+        <div class="flex-1">
+          <h3 class="text-xl font-semibold text-gray-900">
+            {{ .User.FirstName }} {{ .User.LastName }}
+          </h3>
+          <p class="text-gray-600">{{ .User.Email }}</p>
+          <div class="flex items-center mt-2 space-x-4">
+            <span
+              class="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
+            >
+              <i class="fas fa-user-check mr-1"></i>
+              Active User
+            </span>
+            <span class="text-gray-600">Signup Code:</span>
+            <span class="font-mono text-gray-900">{{ .User.AdminCode }}</span>
+            <span class="text-gray-600">User ID:</span>
+            <span class="font-mono text-gray-900">{{ .User.UserID }}</span>
+            <span class="text-gray-600">Role:</span>
+            <span class="text-gray-900">
+              {{ if eq .User.RoleID 1 }}Admin {{ else if eq .User.RoleID 2
+              }}Team Leader {{ else }}Volunteer {{ end }}
+            </span>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- Edit Profile Form Tile -->
-    <div class="bg-white border border-gray-200 mt-0 m-6">
-      <div class="bg-blue-50 border-b border-gray-200 px-6 py-4">
-        <h2 class="text-lg font-semibold text-gray-900 flex items-center">
-          <i class="fas fa-edit text-blue-600 mr-3"></i>
-          Edit Profile Information
-        </h2>
-      </div>
-      
-      <div class="p-6">
-        <form method="post" action="/profile/update">
-          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <!-- First Name -->
-            <div>
-              <label class="block text-sm font-semibold text-gray-700 mb-2">
-                First Name <span class="text-red-500">*</span>
-              </label>
-              <input
-                type="text"
-                name="first_name"
-                value="{{ .User.FirstName }}"
-                required
-                class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
-                placeholder="Enter first name"
-              />
-            </div>
+    <!-- Edit Profile Section -->
+    <div class="border-t border-gray-200 pt-8">
+      <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
+        <i class="fas fa-edit text-blue-600 mr-3"></i>
+        Edit Profile Information
+      </h3>
 
-            <!-- Last Name -->
-            <div>
-              <label class="block text-sm font-semibold text-gray-700 mb-2">
-                Last Name <span class="text-red-500">*</span>
-              </label>
-              <input
-                type="text"
-                name="last_name"
-                value="{{ .User.LastName }}"
-                required
-                class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
-                placeholder="Enter last name"
-              />
-            </div>
+      <!-- Edit Profile Form -->
+      <form method="post" action="/profile/update">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <!-- First Name -->
+          <div>
+            <label class="block text-sm font-semibold text-gray-700 mb-2">
+              First Name <span class="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              name="first_name"
+              value="{{ .User.FirstName }}"
+              required
+              class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
+              placeholder="Enter first name"
+            />
+          </div>
 
-            <!-- Email (Read-only) -->
-            <div>
-              <label class="block text-sm font-semibold text-gray-700 mb-2">
-                Email Address
-                <span class="ml-2 text-xs bg-gray-200 text-gray-600 px-2 py-1"
-                  >Read Only</span
-                >
-              </label>
-              <div class="relative">
-                <input
-                  type="email"
-                  name="email"
-                  value="{{ .User.Email }}"
-                  disabled
-                  class="w-full px-4 py-3 border border-gray-300 bg-gray-100 text-gray-600 cursor-not-allowed"
-                />
-                <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
-                  <i class="fas fa-lock text-gray-400"></i>
-                </div>
+          <!-- Last Name -->
+          <div>
+            <label class="block text-sm font-semibold text-gray-700 mb-2">
+              Last Name <span class="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              name="last_name"
+              value="{{ .User.LastName }}"
+              required
+              class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
+              placeholder="Enter last name"
+            />
+          </div>
+
+          <!-- Email (Read-only) -->
+          <div>
+            <label class="block text-sm font-semibold text-gray-700 mb-2">
+              Email Address
+              <span class="ml-2 text-xs bg-gray-200 text-gray-600 px-2 py-1"
+                >Read Only</span
+              >
+            </label>
+            <div class="relative">
+              <input
+                type="email"
+                name="email"
+                value="{{ .User.Email }}"
+                disabled
+                class="w-full px-4 py-3 border border-gray-300 bg-gray-100 text-gray-600 cursor-not-allowed"
+              />
+              <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
+                <i class="fas fa-lock text-gray-400"></i>
               </div>
-              <p class="text-xs text-gray-500 mt-1">
-                Contact system administrator to change email
-              </p>
-            </div>
-
-            <!-- Phone -->
-            <div>
-              <label class="block text-sm font-semibold text-gray-700 mb-2">
-                Phone Number
-              </label>
-              <input
-                type="tel"
-                name="phone"
-                value="{{ .User.Phone }}"
-                class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
-                placeholder="Enter phone number"
-              />
             </div>
+            <p class="text-xs text-gray-500 mt-1">
+              Contact system administrator to change email
+            </p>
           </div>
 
-          <!-- Form Actions -->
-          <div
-            class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
-          >
-            <div class="flex items-center text-sm text-gray-500">
-              <i class="fas fa-info-circle text-blue-500 mr-2"></i>
-              Changes will be applied immediately after saving
-            </div>
-            <div class="flex space-x-3">
-              <button
-                type="button"
-                onclick="window.history.back()"
-                class="px-6 py-2 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
-              >
-                <i class="fas fa-times mr-2"></i>
-                Cancel
-              </button>
-              <button
-                type="submit"
-                class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
-              >
-                <i class="fas fa-save mr-2"></i>
-                Save Changes
-              </button>
-            </div>
+          <!-- Phone -->
+          <div>
+            <label class="block text-sm font-semibold text-gray-700 mb-2">
+              Phone Number
+            </label>
+            <input
+              type="tel"
+              name="phone"
+              value="{{ .User.Phone }}"
+              class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
+              placeholder="Enter phone number"
+            />
           </div>
-        </form>
-      </div>
+        </div>
+
+        <!-- Profile Form Actions -->
+        <div
+          class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
+        >
+          <div class="flex items-center text-sm text-gray-500">
+            <i class="fas fa-info-circle text-blue-500 mr-2"></i>
+            Changes will be applied immediately after saving
+          </div>
+          <div class="flex space-x-3">
+            <button
+              type="button"
+              onclick="window.history.back()"
+              class="px-6 py-2 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
+            >
+              <i class="fas fa-times mr-2"></i>
+              Cancel
+            </button>
+            <button
+              type="submit"
+              class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
+            >
+              <i class="fas fa-save mr-2"></i>
+              Save Changes
+            </button>
+          </div>
+        </div>
+      </form>
     </div>
 
-    
+    <!-- Configuration Settings Section -->
+    <div class="border-t border-gray-200 pt-8 mt-8">
+      <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
+        <i class="fas fa-cog text-blue-600 mr-3"></i>
+        Configuration Settings
+      </h3>
+
+      <form method="post" action="/profile/settings" id="settingsForm">
+        <div class="space-y-6">
+          <!-- Add New Setting -->
+          <div class="bg-white border border-gray-200 p-6">
+            <h4 class="text-md font-semibold text-gray-800 mb-4">
+              Add New Setting
+            </h4>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+              <div>
+                <label class="block text-sm font-semibold text-gray-700 mb-2">
+                  Setting Name
+                </label>
+                <input
+                  type="text"
+                  id="newSettingName"
+                  class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
+                  placeholder="Enter setting name"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-semibold text-gray-700 mb-2">
+                  Setting Value
+                </label>
+                <input
+                  type="text"
+                  id="newSettingValue"
+                  class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
+                  placeholder="Enter setting value"
+                />
+              </div>
+              <div class="flex items-end">
+                <button
+                  type="button"
+                  onclick="addSetting()"
+                  class="w-full px-6 py-3 bg-green-600 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 font-medium"
+                >
+                  <i class="fas fa-plus mr-2"></i>
+                  Add Setting
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Current Settings -->
+          <div class="bg-white border border-gray-200 p-6">
+            <h4 class="text-md font-semibold text-gray-800 mb-4">
+              Current Settings
+            </h4>
+            <div id="settingsList" class="space-y-3">
+              <!-- Settings will be dynamically added here -->
+              <div class="text-gray-500 text-sm" id="noSettingsMessage">
+                No settings configured yet. Add your first setting above.
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Settings Form Actions -->
+        <div
+          class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
+        >
+          <div class="flex items-center text-sm text-gray-500">
+            <i class="fas fa-info-circle text-blue-500 mr-2"></i>
+            Settings are applied immediately when added or removed
+          </div>
+          <div class="flex space-x-3">
+            <button
+              type="button"
+              onclick="clearAllSettings()"
+              class="px-6 py-2 border border-red-300 text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 font-medium"
+            >
+              <i class="fas fa-trash mr-2"></i>
+              Clear All
+            </button>
+            <button
+              type="submit"
+              class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
+            >
+              <i class="fas fa-save mr-2"></i>
+              Save Settings
+            </button>
+          </div>
+        </div>
+      </form>
     </div>
   </div>
 </div>
 
+<script>
+  let settings = [];
+
+  function addSetting() {
+    const nameInput = document.getElementById("newSettingName");
+    const valueInput = document.getElementById("newSettingValue");
+
+    const name = nameInput.value.trim();
+    const value = valueInput.value.trim();
+
+    if (!name || !value) {
+      alert("Please enter both setting name and value");
+      return;
+    }
+
+    // Check if setting already exists
+    const existingIndex = settings.findIndex(
+      (s) => s.name.toLowerCase() === name.toLowerCase()
+    );
+    if (existingIndex !== -1) {
+      // Update existing setting
+      settings[existingIndex].value = value;
+    } else {
+      // Add new setting
+      settings.push({ name, value });
+    }
+
+    // Clear inputs
+    nameInput.value = "";
+    valueInput.value = "";
+
+    // Update display
+    displaySettings();
+  }
+
+  function removeSetting(index) {
+    settings.splice(index, 1);
+    displaySettings();
+  }
+
+  function displaySettings() {
+    const settingsList = document.getElementById("settingsList");
+    const noSettingsMessage = document.getElementById("noSettingsMessage");
+
+    if (settings.length === 0) {
+      noSettingsMessage.style.display = "block";
+      settingsList.innerHTML =
+        '<div class="text-gray-500 text-sm" id="noSettingsMessage">No settings configured yet. Add your first setting above.</div>';
+      return;
+    }
+
+    noSettingsMessage.style.display = "none";
+
+    settingsList.innerHTML = settings
+      .map(
+        (setting, index) => `
+    <div class="flex items-center justify-between p-4 border border-gray-200 bg-gray-50">
+      <div class="flex-1">
+        <div class="flex items-center space-x-4">
+          <span class="font-semibold text-gray-900">${setting.name}:</span>
+          <span class="text-gray-700">${setting.value}</span>
+        </div>
+      </div>
+      <button
+        type="button"
+        onclick="removeSetting(${index})"
+        class="px-3 py-1 text-red-600 hover:text-red-800 focus:outline-none"
+        title="Remove setting"
+      >
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+  `
+      )
+      .join("");
+  }
+
+  function clearAllSettings() {
+    if (settings.length === 0) return;
+
+    if (confirm("Are you sure you want to clear all settings?")) {
+      settings = [];
+      displaySettings();
+    }
+  }
+
+  // Allow Enter key to add setting
+  document
+    .getElementById("newSettingName")
+    .addEventListener("keypress", function (e) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        document.getElementById("newSettingValue").focus();
+      }
+    });
+
+  document
+    .getElementById("newSettingValue")
+    .addEventListener("keypress", function (e) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        addSetting();
+      }
+    });
+
+  // Form submission handler
+  document
+    .getElementById("settingsForm")
+    .addEventListener("submit", function (e) {
+      e.preventDefault();
+
+      // Here you would typically send the settings to your server
+      console.log("Saving settings:", settings);
+
+      // Show success message
+      alert("Settings saved successfully!");
+    });
+</script>
+
 <style>
   /* Professional square corner design */
   * {
@@ -216,23 +389,21 @@
     box-shadow: 0 0 0 2px #3b82f6;
   }
 
-  /* Hover effects for tiles */
-  .hover\:bg-blue-50:hover {
-    background-color: #eff6ff;
+  /* Hover effects */
+  .hover\:bg-gray-50:hover {
+    background-color: #f9fafb;
   }
 
-  .hover\:border-blue-500:hover {
-    border-color: #3b82f6;
+  .hover\:bg-blue-700:hover {
+    background-color: #1d4ed8;
   }
 
-  /* Professional table-like layout */
-  .grid {
-    display: grid;
+  .hover\:bg-green-700:hover {
+    background-color: #15803d;
   }
 
-  /* Ensure full width usage */
-  .min-h-screen {
-    width: 100%;
+  .hover\:bg-red-50:hover {
+    background-color: #fef2f2;
   }
 
   /* Professional button styling */
@@ -260,6 +431,10 @@
     background-color: #2563eb;
   }
 
+  .bg-green-600 {
+    background-color: #16a34a;
+  }
+
   /* Responsive design */
   @media (max-width: 1024px) {
     .lg\:grid-cols-2 {