diff --git a/pages/notification/preferences/index.vue b/pages/notification/preferences/index.vue
index 677f24b..670d90e 100644
--- a/pages/notification/preferences/index.vue
+++ b/pages/notification/preferences/index.vue
@@ -1,7 +1,642 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+definePageMeta({
+  title: "Admin: User Preferences & System Settings",
+  middleware: ["auth"],
+  requiresAuth: true,
+});
+
+const currentTab = ref('categories'); // categories, channels, frequencies, globalQuietHours, userAudit, bulkOps
+
+// --- Admin: Notification Categories ---
+const adminNotificationCategories = ref([
+  { id: 'cat_promo', name: 'Promotions & Offers', description: 'Updates on new promotions, discounts, etc.', defaultSubscribed: true, isActive: true },
+  { id: 'cat_alerts', name: 'Critical Alerts', description: 'Important security or account issue alerts.', defaultSubscribed: true, isActive: true },
+  { id: 'cat_updates', name: 'Product Updates', description: 'New features, improvements, system maintenance.', defaultSubscribed: true, isActive: true },
+  { id: 'cat_newsletter', name: 'Newsletter', description: 'Regular news and tips.', defaultSubscribed: false, isActive: true },
+  { id: 'cat_surveys', name: 'Feedback Surveys', description: 'Occasional surveys to improve our service.', defaultSubscribed: false, isActive: false },
+]);
+const showCategoryModal = ref(false);
+const editingCategory = ref(null);
+const categoryForm = ref({ id: null, name: '', description: '', defaultSubscribed: false, isActive: true });
+
+function openAddCategoryModal() {
+  editingCategory.value = null;
+  categoryForm.value = { id: `cat_${Date.now().toString().slice(-4)}`, name: '', description: '', defaultSubscribed: false, isActive: true };
+  showCategoryModal.value = true;
+}
+function openEditCategoryModal(category) {
+  editingCategory.value = { ...category };
+  categoryForm.value = { ...category };
+  showCategoryModal.value = true;
+}
+function saveCategory() {
+  if (editingCategory.value && editingCategory.value.id) {
+    const index = adminNotificationCategories.value.findIndex(c => c.id === editingCategory.value.id);
+    if (index !== -1) {
+      adminNotificationCategories.value[index] = { ...categoryForm.value };
+    }
+  } else {
+    adminNotificationCategories.value.push({ ...categoryForm.value, id: categoryForm.value.id || `cat_${Date.now().toString().slice(-4)}` });
+  }
+  showCategoryModal.value = false;
+}
+function toggleCategoryStatus(category) {
+  category.isActive = !category.isActive;
+}
+
+// --- Admin: Channels ---
+const adminChannels = ref([
+  { id: 'email', name: 'Email', isEnabled: true, defaultFrequencyCap: 'No Limit', supportedMessageTypes: ['cat_promo', 'cat_alerts', 'cat_updates', 'cat_newsletter'] },
+  { id: 'sms', name: 'SMS', isEnabled: true, defaultFrequencyCap: '5 per day', supportedMessageTypes: ['cat_alerts'] },
+  { id: 'push', name: 'Push Notifications', isEnabled: false, defaultFrequencyCap: '10 per day', supportedMessageTypes: ['cat_alerts', 'cat_updates'] },
+]);
+
+// --- Admin: Frequencies ---
+const adminFrequencies = ref([
+  { id: 'freq_immediate', label: 'Immediate', value: 'immediate', isUserSelectable: true, isDefault: true },
+  { id: 'freq_hourly', label: 'Hourly Digest', value: 'hourly', isUserSelectable: true, isDefault: false },
+  { id: 'freq_daily', label: 'Daily Digest', value: 'daily', isUserSelectable: true, isDefault: false },
+  { id: 'freq_weekly', label: 'Weekly Digest', value: 'weekly', isUserSelectable: true, isDefault: false }, // Made user selectable for demo
+  { id: 'freq_monthly', label: 'Monthly Summary', value: 'monthly', isUserSelectable: false, isDefault: false },
+]);
+const showFrequencyModal = ref(false);
+const editingFrequency = ref(null);
+const frequencyForm = ref({ id: null, label: '', value: '', isUserSelectable: true, isDefault: false });
+
+function openAddFrequencyModal() {
+  editingFrequency.value = null;
+  frequencyForm.value = { id: `freq_${Date.now().toString().slice(-4)}`, label: '', value: '', isUserSelectable: true, isDefault: false };
+  showFrequencyModal.value = true;
+}
+function openEditFrequencyModal(freq) {
+  editingFrequency.value = { ...freq };
+  frequencyForm.value = { ...freq };
+  showFrequencyModal.value = true;
+}
+function saveFrequency() {
+  if (editingFrequency.value && editingFrequency.value.id) {
+    const index = adminFrequencies.value.findIndex(f => f.id === editingFrequency.value.id);
+    if (index !== -1) {
+      adminFrequencies.value[index] = { ...frequencyForm.value };
+    }
+  } else {
+    adminFrequencies.value.push({ ...frequencyForm.value, id: frequencyForm.value.id || `freq_${Date.now().toString().slice(-4)}` });
+  }
+  showFrequencyModal.value = false;
+}
+function deleteFrequency(freqId) {
+  if (confirm(`Are you sure you want to delete frequency option with ID: ${freqId}?`)) {
+    adminFrequencies.value = adminFrequencies.value.filter(f => f.id !== freqId);
+  }
+}
+
+// --- Admin: Global Quiet Hours ---
+const adminGlobalQuietHours = ref({
+  enabled: false,
+  startTime: '22:00',
+  endTime: '07:00',
+  allowUserOverride: true,
+});
+
+// --- Admin: User Preference Audit ---
+const userAuditSearchQuery = ref('');
+const searchedUser = ref(null); // Will hold structure like: { id: 'user123', name: 'John Doe', preferences: { defaultChannel: 'email', subscriptions: { 'cat_promo': { subscribed: true, channel: 'email', frequency: 'weekly' } }, quietHours: { enabled: false, startTime: '22:00', endTime: '07:00'} } }
+const isSearchingUser = ref(false);
+const userPreferencesForm = ref(null); // For editing the searched user's prefs
+
+// Mock user data - in a real app, this would come from an API
+const mockUsers = [
+  {
+    id: 'user001',
+    name: 'Alice Wonderland',
+    email: 'alice@example.com',
+    preferences: {
+      defaultPreferredChannel: 'email',
+      subscriptions: {
+        'cat_promo': { subscribed: true, channel: 'email', frequency: 'freq_weekly' },
+        'cat_alerts': { subscribed: true, channel: 'sms', frequency: 'freq_immediate' },
+        'cat_updates': { subscribed: false, channel: 'email', frequency: 'freq_daily' },
+        'cat_newsletter': { subscribed: true, channel: 'email', frequency: 'freq_monthly' }
+      },
+      quietHours: { enabled: false, startTime: '22:00', endTime: '08:00' }
+    }
+  },
+  {
+    id: 'user002',
+    name: 'Bob The Builder',
+    email: 'bob@example.com',
+    preferences: {
+      defaultPreferredChannel: 'sms',
+      subscriptions: {
+        'cat_promo': { subscribed: false, channel: 'email', frequency: 'freq_weekly' },
+        'cat_alerts': { subscribed: true, channel: 'sms', frequency: 'freq_immediate' },
+        'cat_updates': { subscribed: true, channel: 'push', frequency: 'freq_daily' }, // Assuming push is a configured channel id
+        'cat_newsletter': { subscribed: false, channel: 'email', frequency: 'freq_monthly' }
+      },
+      quietHours: { enabled: true, startTime: '23:00', endTime: '07:30' }
+    }
+  }
+];
+
+function handleUserSearch() {
+  if (!userAuditSearchQuery.value.trim()) {
+    searchedUser.value = null;
+    userPreferencesForm.value = null;
+    return;
+  }
+  isSearchingUser.value = true;
+  setTimeout(() => { // Simulate API call
+    const found = mockUsers.find(u => u.id.includes(userAuditSearchQuery.value.trim()) || u.name.toLowerCase().includes(userAuditSearchQuery.value.trim().toLowerCase()) || u.email.toLowerCase().includes(userAuditSearchQuery.value.trim().toLowerCase()));
+    if (found) {
+      searchedUser.value = JSON.parse(JSON.stringify(found)); // Deep copy
+      // Initialize form data by ensuring all admin-defined categories are present
+      const prefsCopy = JSON.parse(JSON.stringify(found.preferences));
+      adminNotificationCategories.value.forEach(adminCat => {
+        if (!prefsCopy.subscriptions[adminCat.id]) {
+          prefsCopy.subscriptions[adminCat.id] = { subscribed: false, channel: found.preferences.defaultPreferredChannel, frequency: adminFrequencies.value.find(f=>f.isDefault)?.id || adminFrequencies.value[0]?.id };
+        }
+      });
+      userPreferencesForm.value = prefsCopy;
+    } else {
+      searchedUser.value = null;
+      userPreferencesForm.value = null;
+      alert('User not found.');
+    }
+    isSearchingUser.value = false;
+  }, 1000);
+}
+
+function saveUserPreferences() {
+  if (!searchedUser.value || !userPreferencesForm.value) return;
+  // In a real app, send userPreferencesForm.value to the backend to save.
+  // For this mock, update the mockUsers array or searchedUser directly.
+  const userIndex = mockUsers.findIndex(u => u.id === searchedUser.value.id);
+  if (userIndex !== -1) {
+    mockUsers[userIndex].preferences = JSON.parse(JSON.stringify(userPreferencesForm.value));
+  }
+  searchedUser.value.preferences = JSON.parse(JSON.stringify(userPreferencesForm.value)); // Update current view
+  alert(`Preferences for ${searchedUser.value.name} saved (mock).`);
+}
+
+function cancelUserEdit() {
+  if (searchedUser.value) {
+    // Re-initialize form from original searchedUser data if needed, or just clear
+     const prefsCopy = JSON.parse(JSON.stringify(searchedUser.value.preferences));
+      adminNotificationCategories.value.forEach(adminCat => {
+        if (!prefsCopy.subscriptions[adminCat.id]) {
+          prefsCopy.subscriptions[adminCat.id] = { subscribed: false, channel: searchedUser.value.preferences.defaultPreferredChannel, frequency: adminFrequencies.value.find(f=>f.isDefault)?.id || adminFrequencies.value[0]?.id };
+        }
+      });
+    userPreferencesForm.value = prefsCopy;
+  } else {
+    userPreferencesForm.value = null;
+  }
+}
+
+
+// --- Admin: Bulk Operations ---
+const handleAdminImport = () => {
+  alert('Admin bulk import initiated (not implemented).');
+};
+const handleAdminExport = () => {
+  alert('Admin bulk export initiated (not implemented).');
+};
+
+const tabs = [
+  { key: 'categories', label: 'Notification Categories' },
+  { key: 'channels', label: 'Channels & Governance' },
+  { key: 'frequencies', label: 'Frequency Options' },
+  { key: 'globalQuietHours', label: 'Global Quiet Hours' },
+  { key: 'userAudit', label: 'User Preference Audit' },
+  { key: 'bulkOps', label: 'Bulk Operations' },
+];
+
+const getChannelName = (channelId) => {
+    const channel = adminChannels.value.find(c => c.id === channelId);
+    return channel ? channel.name : channelId;
+};
+
+const getFrequencyLabel = (frequencyId) => {
+    const freq = adminFrequencies.value.find(f => f.id === frequencyId);
+    return freq ? freq.label : frequencyId;
+};
+
+</script>
+
 <template>
-  <div></div>
+  <div>
+    <LayoutsBreadcrumb />
+    <rs-card>
+      <template #header>
+        <div class="text-xl font-semibold text-gray-900">
+          Admin: User Preferences & System Settings
+        </div>
+      </template>
+      <template #body>
+        <div class="p-4 md:p-6">
+          <!-- Tab Navigation -->
+          <div class="mb-6 border-b border-gray-200">
+            <nav class="-mb-px flex space-x-4 overflow-x-auto" aria-label="Tabs">
+              <button
+                v-for="tab in tabs"
+                :key="tab.key"
+                @click="currentTab = tab.key; searchedUser = null; userPreferencesForm = null; userAuditSearchQuery = ''"
+                :class="[
+                  currentTab === tab.key
+                    ? 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+                  'whitespace-nowrap py-4 px-3 border-b-2 font-medium text-sm transition-colors duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50'
+                ]"
+                :aria-current="currentTab === tab.key ? 'page' : undefined"
+              >
+                {{ tab.label }}
+              </button>
+            </nav>
+          </div>
+
+          <!-- Tab Content -->
+          <div :key="currentTab">
+            <!-- == Section: Notification Categories (Admin CRUD) == -->
+            <section v-if="currentTab === 'categories'" aria-labelledby="categories-heading">
+              <div class="flex justify-between items-center mb-4">
+                <div>
+                  <h2 id="categories-heading" class="text-lg font-semibold text-gray-800">Manage Notification Categories</h2>
+                  <p class="text-sm text-gray-600">Define categories users can subscribe to. Inactive categories are hidden from users.</p>
+                </div>
+                <button @click="openAddCategoryModal" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                  Add New Category
+                </button>
+              </div>
+              <div class="overflow-x-auto shadow border-b border-gray-200 sm:rounded-lg">
+                <table class="min-w-full divide-y divide-gray-200">
+                  <thead class="bg-gray-50">
+                    <tr>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default Subscribed</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody class="bg-white divide-y divide-gray-200">
+                    <tr v-for="category in adminNotificationCategories" :key="category.id">
+                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ category.name }}</td>
+                      <td class="px-6 py-4 whitespace-normal text-sm text-gray-500 max-w-xs truncate" :title="category.description">{{ category.description }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ category.defaultSubscribed ? 'Yes' : 'No' }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span :class="['px-2 inline-flex text-xs leading-5 font-semibold rounded-full', category.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800']">
+                          {{ category.isActive ? 'Active' : 'Inactive' }}
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
+                        <button @click="openEditCategoryModal(category)" class="text-indigo-600 hover:text-indigo-900">Edit</button>
+                        <button @click="toggleCategoryStatus(category)" :class="[category.isActive ? 'text-red-600 hover:text-red-900' : 'text-green-600 hover:text-green-900']">
+                          {{ category.isActive ? 'Deactivate' : 'Activate' }}
+                        </button>
+                      </td>
+                    </tr>
+                    <tr v-if="adminNotificationCategories.length === 0">
+                        <td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">No categories defined yet.</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </section>
+
+            <!-- == Section: Channels & Governance (Admin) == -->
+            <section v-if="currentTab === 'channels'" aria-labelledby="channels-heading">
+              <h2 id="channels-heading" class="text-lg font-semibold text-gray-800 mb-3">Manage Channels & Governance</h2>
+              <p class="text-sm text-gray-600 mb-4">Enable/disable communication channels and set global rules.</p>
+              <div class="space-y-6">
+                <div v-for="channel in adminChannels" :key="channel.id" class="p-4 border rounded-lg shadow-sm">
+                  <div class="flex items-center justify-between">
+                    <h3 class="text-md font-medium text-gray-900">{{ channel.name }}</h3>
+                    <label :for="`channel-enabled-${channel.id}`" class="flex items-center cursor-pointer">
+                      <span class="mr-2 text-sm text-gray-700">{{ channel.isEnabled ? 'Enabled' : 'Disabled' }}</span>
+                      <div class="relative">
+                        <input type="checkbox" :id="`channel-enabled-${channel.id}`" class="sr-only peer" v-model="channel.isEnabled">
+                        <div class="w-10 h-4 bg-gray-300 rounded-full shadow-inner peer-checked:bg-blue-500 transition-colors"></div>
+                        <div class="absolute left-0 top-[-4px] w-6 h-6 bg-white border-2 border-gray-300 rounded-full shadow transform peer-checked:translate-x-full peer-checked:border-blue-500 transition-transform"></div>
+                      </div>
+                    </label>
+                  </div>
+                  <div v-if="channel.isEnabled" class="mt-4 pt-4 border-t">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                            <label :for="`channel-cap-${channel.id}`" class="block text-sm font-medium text-gray-700">Default Frequency Cap</label>
+                            <input type="text" :id="`channel-cap-${channel.id}`" v-model="channel.defaultFrequencyCap" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="e.g., 5 per day">
+                        </div>
+                        <div>
+                            <label :for="`channel-types-${channel.id}`" class="block text-sm font-medium text-gray-700">Supported Message Types (Category IDs)</label>
+                            <input type="text" :id="`channel-types-${channel.id}`" :value="channel.supportedMessageTypes.join(', ')" @change="channel.supportedMessageTypes = $event.target.value.split(',').map(s => s.trim()).filter(Boolean)" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="e.g., cat_alerts, cat_updates">
+                            <p class="text-xs text-gray-500 mt-1">Comma-separated category IDs that can use this channel.</p>
+                        </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <!-- == Section: Frequency Options (Admin) == -->
+            <section v-if="currentTab === 'frequencies'" aria-labelledby="frequencies-heading">
+                 <div class="flex justify-between items-center mb-4">
+                    <div>
+                        <h2 id="frequencies-heading" class="text-lg font-semibold text-gray-800">Manage Frequency Options</h2>
+                        <p class="text-sm text-gray-600">Define frequency choices available to users or for system defaults.</p>
+                    </div>
+                    <button @click="openAddFrequencyModal" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                        Add New Frequency
+                    </button>
+                </div>
+                <div class="overflow-x-auto shadow border-b border-gray-200 sm:rounded-lg">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Label</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value (System ID)</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User Selectable</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default for New Users</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            <tr v-for="freq in adminFrequencies" :key="freq.id">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ freq.label }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ freq.value }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ freq.isUserSelectable ? 'Yes' : 'No' }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ freq.isDefault ? 'Yes' : 'No' }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
+                                    <button @click="openEditFrequencyModal(freq)" class="text-indigo-600 hover:text-indigo-900">Edit</button>
+                                    <button @click="deleteFrequency(freq.id)" class="text-red-600 hover:text-red-900">Delete</button>
+                                </td>
+                            </tr>
+                            <tr v-if="adminFrequencies.length === 0">
+                                <td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">No frequency options defined yet.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+
+            <!-- == Section: Global Quiet Hours (Admin) == -->
+            <section v-if="currentTab === 'globalQuietHours'" aria-labelledby="globalqh-heading">
+              <h2 id="globalqh-heading" class="text-lg font-semibold text-gray-800 mb-3">Configure Global Quiet Hours</h2>
+              <p class="text-sm text-gray-600 mb-4">Set system-wide default "Do Not Disturb" periods. These can potentially be overridden by users if allowed.</p>
+              <div class="space-y-4 max-w-lg p-4 border rounded-lg shadow-sm">
+                <div class="flex items-center">
+                  <input id="admin-qh-enabled" type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500" v-model="adminGlobalQuietHours.enabled">
+                  <label for="admin-qh-enabled" class="ml-3 block text-sm font-medium text-gray-700 cursor-pointer">Enable Global Quiet Hours</label>
+                </div>
+                <div v-if="adminGlobalQuietHours.enabled" class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-3 mt-3">
+                  <div>
+                    <label for="admin-qh-start" class="block text-sm font-medium text-gray-700 mb-1">Start Time:</label>
+                    <input type="time" id="admin-qh-start" class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" v-model="adminGlobalQuietHours.startTime">
+                  </div>
+                  <div>
+                    <label for="admin-qh-end" class="block text-sm font-medium text-gray-700 mb-1">End Time:</label>
+                    <input type="time" id="admin-qh-end" class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" v-model="adminGlobalQuietHours.endTime">
+                  </div>
+                  <div class="sm:col-span-2 flex items-center">
+                    <input id="admin-qh-override" type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500" v-model="adminGlobalQuietHours.allowUserOverride">
+                    <label for="admin-qh-override" class="ml-3 block text-sm font-medium text-gray-700 cursor-pointer">Allow users to override global quiet hours</label>
+                  </div>
+                </div>
+                 <button @click="alert('Save Global Quiet Hours clicked (mock)')" class="mt-4 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Save Global Quiet Hours</button>
+              </div>
+            </section>
+
+            <!-- == Section: User Preference Audit (Admin) == -->
+            <section v-if="currentTab === 'userAudit'" aria-labelledby="useraudit-heading">
+                <h2 id="useraudit-heading" class="text-lg font-semibold text-gray-800 mb-3">User Preference Audit & Management</h2>
+                <p class="text-sm text-gray-600 mb-4">Search for a user by ID, name, or email to view or modify their notification preferences.</p>
+                
+                <div class="flex space-x-3 mb-6 max-w-xl">
+                    <input type="text" v-model="userAuditSearchQuery" placeholder="Enter User ID, Name, or Email" class="form-input flex-grow block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+                    <button @click="handleUserSearch" :disabled="isSearchingUser || !userAuditSearchQuery.trim()" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50">
+                        {{ isSearchingUser ? 'Searching...' : 'Search User' }}
+                    </button>
+                </div>
+
+                <div v-if="isSearchingUser" class="text-center py-6">
+                    <p class="text-gray-500">Loading user data...</p> <!-- Add a spinner later -->
+                </div>
+                
+                <div v-if="!isSearchingUser && searchedUser && userPreferencesForm" class="mt-6 p-6 border rounded-lg shadow-lg">
+                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Editing Preferences for: <span class="font-normal">{{ searchedUser.name }} ({{ searchedUser.id }})</span></h3>
+                    <p class="text-sm text-gray-500 mb-6">Email: {{ searchedUser.email }}</p>
+
+                    <form @submit.prevent="saveUserPreferences">
+                        <div class="space-y-8">
+                             <!-- Default Preferred Channel for User -->
+                            <div>
+                                <label for="userDefaultChannel" class="block text-sm font-medium text-gray-700 mb-1">User's Default Notification Channel</label>
+                                <select id="userDefaultChannel" v-model="userPreferencesForm.defaultPreferredChannel" class="form-select mt-1 block w-full md:w-1/2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+                                    <option v-for="channel in adminChannels.filter(c => c.isEnabled)" :key="channel.id" :value="channel.id">{{ channel.name }}</option>
+                                    <option value="none">None (Mute All)</option>
+                                </select>
+                            </div>
+
+                            <!-- User Subscriptions to Categories -->
+                            <div>
+                                <h4 class="text-md font-semibold text-gray-700 mb-3">Category Subscriptions & Overrides</h4>
+                                <div class="space-y-6">
+                                    <div v-for="adminCat in adminNotificationCategories.filter(ac => ac.isActive)" :key="adminCat.id" class="p-4 border rounded-md bg-gray-50">
+                                        <div class="flex items-start justify-between mb-3">
+                                            <div>
+                                                <h5 class="font-medium text-gray-800">{{ adminCat.name }}</h5>
+                                                <p class="text-xs text-gray-500">{{ adminCat.description }}</p>
+                                            </div>
+                                            <input :id="`user-cat-sub-${adminCat.id}`" type="checkbox" v-model="userPreferencesForm.subscriptions[adminCat.id].subscribed" class="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500 cursor-pointer">
+                                        </div>
+                                        
+                                        <div v-if="userPreferencesForm.subscriptions[adminCat.id].subscribed" class="mt-3 pt-3 border-t grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
+                                            <div>
+                                                <label :for="`user-cat-channel-${adminCat.id}`" class="block text-xs font-medium text-gray-600 mb-0.5">Channel Override:</label>
+                                                <select :id="`user-cat-channel-${adminCat.id}`" v-model="userPreferencesForm.subscriptions[adminCat.id].channel" class="form-select mt-0.5 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-xs">
+                                                    <option v-for="channel in adminChannels.filter(c => c.isEnabled && c.supportedMessageTypes.includes(adminCat.id))" :key="channel.id" :value="channel.id">{{ channel.name }}</option>
+                                                    <option :value="userPreferencesForm.defaultPreferredChannel">(User Default: {{ getChannelName(userPreferencesForm.defaultPreferredChannel) }})</option>
+                                                    <option value="none">None (Mute This Category)</option>
+                                                </select>
+                                            </div>
+                                            <div>
+                                                <label :for="`user-cat-freq-${adminCat.id}`" class="block text-xs font-medium text-gray-600 mb-0.5">Frequency Override:</label>
+                                                <select :id="`user-cat-freq-${adminCat.id}`" v-model="userPreferencesForm.subscriptions[adminCat.id].frequency" class="form-select mt-0.5 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-xs">
+                                                    <option v-for="freq in adminFrequencies.filter(f => f.isUserSelectable)" :key="freq.id" :value="freq.id">{{ freq.label }}</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- User Quiet Hours -->
+                            <div>
+                                <h4 class="text-md font-semibold text-gray-700 mb-3">User Quiet Hours Override</h4>
+                                <div class="space-y-3 p-4 border rounded-md bg-gray-50 max-w-md">
+                                    <div class="flex items-center">
+                                        <input id="user-qh-enabled" type="checkbox" v-model="userPreferencesForm.quietHours.enabled" class="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
+                                        <label for="user-qh-enabled" class="ml-3 block text-sm font-medium text-gray-700 cursor-pointer">Enable Quiet Hours for this User</label>
+                                    </div>
+                                    <div v-if="userPreferencesForm.quietHours.enabled" class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 mt-2">
+                                        <div>
+                                            <label for="user-qh-start" class="block text-xs font-medium text-gray-600 mb-0.5">Start Time:</label>
+                                            <input type="time" id="user-qh-start" v-model="userPreferencesForm.quietHours.startTime" class="form-input mt-0.5 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+                                        </div>
+                                        <div>
+                                            <label for="user-qh-end" class="block text-xs font-medium text-gray-600 mb-0.5">End Time:</label>
+                                            <input type="time" id="user-qh-end" v-model="userPreferencesForm.quietHours.endTime" class="form-input mt-0.5 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Save/Cancel User Prefs -->
+                            <div class="mt-8 pt-5 border-t">
+                                <div class="flex justify-end space-x-3">
+                                    <button type="button" @click="cancelUserEdit" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                                        Reset / Cancel Edit
+                                    </button>
+                                    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
+                                        Save Changes for {{ searchedUser.name }}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+
+                <div v-if="!isSearchingUser && !searchedUser && userAuditSearchQuery" class="text-center py-6">
+                     <p class="text-gray-500">No user found matching "{{ userAuditSearchQuery }}". Try a different search term.</p>
+                </div>
+                 <div v-if="!isSearchingUser && !searchedUser && !userAuditSearchQuery" class="text-center py-6">
+                     <p class="text-gray-500">Enter a user ID, name, or email to search.</p>
+                </div>
+            </section>
+
+            
+            <section v-if="currentTab === 'bulkOps'" aria-labelledby="bulkops-heading">
+              <h2 id="bulkops-heading" class="text-lg font-semibold text-gray-800 mb-3">Bulk User Preference Operations</h2>
+              <p class="text-sm text-gray-600 mb-4">Import or export user preference data for backup, migration, or system-wide updates.</p>
+              <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3 mt-4">
+                <button @click="handleAdminImport" class="w-full sm:w-auto px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition ease-in-out duration-150">
+                  Import User Preferences (Bulk)
+                </button>
+                <button @click="handleAdminExport" class="w-full sm:w-auto px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition ease-in-out duration-150">
+                  Export User Preferences (Bulk)
+                </button>
+              </div>
+            </section>
+            
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <!-- Modal for Add/Edit Notification Category -->
+    <div v-if="showCategoryModal" class="fixed inset-0 z-50 overflow-y-auto bg-gray-600 bg-opacity-75 flex items-center justify-center p-4">
+      <div class="relative bg-white rounded-lg shadow-xl w-full max-w-lg mx-auto my-8 max-h-[90vh] overflow-y-auto">
+        <form @submit.prevent="saveCategory" class="p-6">
+          <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
+            {{ editingCategory ? 'Edit' : 'Add New' }} Notification Category
+          </h3>
+          <div class="space-y-4">
+            <div>
+              <label for="catName" class="block text-sm font-medium text-gray-700">Category Name</label>
+              <input type="text" v-model="categoryForm.name" id="catName" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+            </div>
+            <div>
+              <label for="catDesc" class="block text-sm font-medium text-gray-700">Description</label>
+              <textarea v-model="categoryForm.description" id="catDesc" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></textarea>
+            </div>
+            <div class="flex items-start">
+              <div class="flex items-center h-5">
+                <input id="catDefaultSubscribed" v-model="categoryForm.defaultSubscribed" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
+              </div>
+              <div class="ml-3 text-sm">
+                <label for="catDefaultSubscribed" class="font-medium text-gray-700">Default Subscribed</label>
+                <p class="text-gray-500">Users will be subscribed to this category by default.</p>
+              </div>
+            </div>
+            <div class="flex items-start">
+              <div class="flex items-center h-5">
+                <input id="catIsActive" v-model="categoryForm.isActive" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
+              </div>
+              <div class="ml-3 text-sm">
+                <label for="catIsActive" class="font-medium text-gray-700">Active</label>
+                <p class="text-gray-500">Inactive categories are not visible or configurable by users.</p>
+              </div>
+            </div>
+          </div>
+          <div class="mt-6 flex justify-end space-x-3 sticky bottom-0 bg-white py-4 px-6 -mx-6 -mb-6 border-t border-gray-200 rounded-b-lg">
+            <button type="button" @click="showCategoryModal = false" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+              Cancel
+            </button>
+            <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+              {{ editingCategory ? 'Save Changes' : 'Create Category' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Modal for Add/Edit Frequency Option -->
+    <div v-if="showFrequencyModal" class="fixed inset-0 z-50 overflow-y-auto bg-gray-600 bg-opacity-75 flex items-center justify-center p-4">
+      <div class="relative bg-white rounded-lg shadow-xl w-full max-w-lg mx-auto my-8 max-h-[90vh] overflow-y-auto">
+        <form @submit.prevent="saveFrequency" class="p-6">
+          <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
+            {{ editingFrequency ? 'Edit' : 'Add New' }} Frequency Option
+          </h3>
+          <div class="space-y-4">
+            <div>
+              <label for="freqLabel" class="block text-sm font-medium text-gray-700">Label (User-facing)</label>
+              <input type="text" v-model="frequencyForm.label" id="freqLabel" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+            </div>
+            <div>
+              <label for="freqValue" class="block text-sm font-medium text-gray-700">Value (System ID)</label>
+              <input type="text" v-model="frequencyForm.value" id="freqValue" required :disabled="editingFrequency !== null" placeholder="e.g., immediate, daily_digest" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm disabled:bg-gray-100">
+              <p v-if="editingFrequency" class="text-xs text-gray-500 mt-1">System value cannot be changed after creation.</p>
+            </div>
+            <div class="flex items-start">
+              <div class="flex items-center h-5">
+                <input id="freqUserSelectable" v-model="frequencyForm.isUserSelectable" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
+              </div>
+              <div class="ml-3 text-sm">
+                <label for="freqUserSelectable" class="font-medium text-gray-700">User Selectable</label>
+                <p class="text-gray-500">Can users choose this frequency option for their preferences?</p>
+              </div>
+            </div>
+             <div class="flex items-start">
+              <div class="flex items-center h-5">
+                <input id="freqIsDefault" v-model="frequencyForm.isDefault" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
+              </div>
+              <div class="ml-3 text-sm">
+                <label for="freqIsDefault" class="font-medium text-gray-700">Default for New Users</label>
+                <p class="text-gray-500">Is this a default frequency for new users or new subscriptions?</p>
+              </div>
+            </div>
+          </div>
+          <div class="mt-6 flex justify-end space-x-3 sticky bottom-0 bg-white py-4 px-6 -mx-6 -mb-6 border-t border-gray-200 rounded-b-lg">
+            <button type="button" @click="showFrequencyModal = false" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+              Cancel
+            </button>
+            <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+              {{ editingFrequency ? 'Save Changes' : 'Create Frequency' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+  </div>
 </template>
 
-<script setup></script>
-
-<style lang="scss" scoped></style>
+<style scoped>
+/* Using Tailwind utility classes. */
+/* Ensure @tailwindcss/forms plugin is installed for nice form styling. */
+.form-checkbox:focus, .form-input:focus, .form-select:focus, .form-textarea:focus {
+    /* You might want to ensure focus rings are consistent if not using the plugin */
+    /* Example: ring-2 ring-offset-2 ring-indigo-500 */
+}
+</style> 
\ No newline at end of file
diff --git a/pages/notification/triggers-rule/index.vue b/pages/notification/triggers-rule/index.vue
index 677f24b..e38713c 100644
--- a/pages/notification/triggers-rule/index.vue
+++ b/pages/notification/triggers-rule/index.vue
@@ -1,7 +1,314 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+definePageMeta({
+  title: "Notification Triggers & Rules",
+  middleware: ["auth"],
+  requiresAuth: true,
+});
+
+const activeTab = ref('triggers'); // 'triggers', 'segments'
+
+// Mock data
+const mockEvents = ref([
+  { id: 'user_registered', name: 'User Registered' },
+  { id: 'payment_completed', name: 'Payment Completed' },
+  { id: 'password_reset_request', name: 'Password Reset Request' },
+]);
+
+const mockTemplates = ref([
+  { id: 'welcome_email', name: 'Welcome Email' },
+  { id: 'payment_receipt', name: 'Payment Receipt' },
+  { id: 'reset_password_instructions', name: 'Reset Password Instructions' },
+]);
+
+const triggers = ref([
+  { 
+    id: 'trg_001', 
+    name: 'Welcome New Users', 
+    description: 'Sends a welcome email upon user registration.',
+    type: 'event', 
+    eventType: 'user_registered', 
+    actionTemplateId: 'welcome_email',
+    priority: 'medium', 
+    status: 'active',
+    conditions: [],
+    targetSegments: [],
+    dependencies: null,
+  },
+  { 
+    id: 'trg_002', 
+    name: 'Daily Sales Summary', 
+    description: 'Sends a summary of sales daily at 8 AM.',
+    type: 'time', 
+    schedule: '0 8 * * *', // Cron for 8 AM daily
+    actionTemplateId: 'payment_receipt', // Placeholder, should be a summary template
+    priority: 'low', 
+    status: 'inactive',
+    conditions: [],
+    targetSegments: [],
+    dependencies: null,
+  }
+]);
+
+const showAddEditModal = ref(false);
+const isEditing = ref(false);
+const currentTrigger = ref(null);
+
+const newTriggerData = ref({
+  id: null,
+  name: '',
+  description: '',
+  type: 'event',
+  eventType: mockEvents.value.length > 0 ? mockEvents.value[0].id : null,
+  schedule: '',
+  webhookUrl: 'https://api.example.com/webhook/generated_id', // Placeholder
+  actionTemplateId: mockTemplates.value.length > 0 ? mockTemplates.value[0].id : null,
+  priority: 'medium',
+  status: 'active',
+  conditions: [],
+  targetSegments: [],
+  dependencies: null,
+});
+
+const priorities = ['low', 'medium', 'high'];
+const triggerTypes = [
+  { id: 'event', name: 'Event-Based' },
+  { id: 'time', name: 'Time-Based' },
+  { id: 'api', name: 'External API/Webhook' }
+];
+
+
+const openAddModal = () => {
+  isEditing.value = false;
+  currentTrigger.value = null;
+  newTriggerData.value = {
+    id: `trg_${Date.now().toString().slice(-3)}`, // Simple unique ID for mock
+    name: '',
+    description: '',
+    type: 'event',
+    eventType: mockEvents.value.length > 0 ? mockEvents.value[0].id : null,
+    schedule: '',
+    webhookUrl: `https://api.example.com/webhook/trg_${Date.now().toString().slice(-3)}`,
+    actionTemplateId: mockTemplates.value.length > 0 ? mockTemplates.value[0].id : null,
+    priority: 'medium',
+    status: 'active',
+    conditions: [],
+    targetSegments: [],
+    dependencies: null,
+  };
+  showAddEditModal.value = true;
+};
+
+const openEditModal = (trigger) => {
+  isEditing.value = true;
+  currentTrigger.value = trigger;
+  newTriggerData.value = { ...trigger };
+  showAddEditModal.value = true;
+};
+
+const closeModal = () => {
+  showAddEditModal.value = false;
+  currentTrigger.value = null;
+};
+
+const saveTrigger = () => {
+  if (isEditing.value && currentTrigger.value) {
+    const index = triggers.value.findIndex(t => t.id === currentTrigger.value.id);
+    if (index !== -1) {
+      triggers.value[index] = { ...newTriggerData.value };
+    }
+  } else {
+    triggers.value.push({ ...newTriggerData.value, id: newTriggerData.value.id || `trg_${Date.now().toString().slice(-3)}` });
+  }
+  closeModal();
+};
+
+const deleteTrigger = (triggerId) => {
+  if (confirm('Are you sure you want to delete this trigger?')) {
+    triggers.value = triggers.value.filter(t => t.id !== triggerId);
+  }
+};
+
+const testTrigger = (trigger) => {
+  alert(`Simulating test for trigger: ${trigger.name} (Not implemented yet)`);
+};
+
+const getEventName = (eventId) => mockEvents.value.find(e => e.id === eventId)?.name || eventId;
+const getTemplateName = (templateId) => mockTemplates.value.find(t => t.id === templateId)?.name || templateId;
+
+</script>
+
 <template>
-  <div></div>
+  <div>
+    <LayoutsBreadcrumb />
+    <rs-card>
+      <template #header>
+        <div class="flex justify-between items-center">
+          <h1 class="text-xl font-semibold">Notification Triggers & Rules</h1>
+          <button @click="openAddModal" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm">
+            Add New Trigger
+          </button>
+        </div>
+      </template>
+      <template #body>
+        <!-- Tabs (Simplified for now, can be expanded later if needed) -->
+        <!-- <div class="mb-4 border-b border-gray-200">
+          <nav class="-mb-px flex space-x-8" aria-label="Tabs">
+            <button @click="activeTab = 'triggers'"
+                    :class="['whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm', activeTab === 'triggers' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300']">
+              Triggers & Rules
+            </button>
+            <button @click="activeTab = 'segments'"
+                    :class="['whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm', activeTab === 'segments' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300']">
+              User Segments (Coming Soon)
+            </button>
+          </nav>
+        </div> -->
+
+        <div v-if="activeTab === 'triggers'">
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Priority</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                <tr v-if="triggers.length === 0">
+                  <td colspan="6" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">No triggers defined yet.</td>
+                </tr>
+                <tr v-for="trigger in triggers" :key="trigger.id">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm font-medium text-gray-900">{{ trigger.name }}</div>
+                    <div class="text-xs text-gray-500">{{ trigger.description }}</div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">{{ trigger.type }}</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <div v-if="trigger.type === 'event'">Event: {{ getEventName(trigger.eventType) }}</div>
+                    <div v-if="trigger.type === 'time'">Schedule: {{ trigger.schedule }}</div>
+                    <div v-if="trigger.type === 'api'" class="truncate max-w-xs" :title="trigger.webhookUrl">Webhook: {{ trigger.webhookUrl }}</div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">{{ trigger.priority }}</td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <span :class="['px-2 inline-flex text-xs leading-5 font-semibold rounded-full', trigger.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800']">
+                      {{ trigger.status }}
+                    </span>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
+                    <button @click="openEditModal(trigger)" class="text-indigo-600 hover:text-indigo-900">Edit</button>
+                    <button @click="testTrigger(trigger)" class="text-yellow-600 hover:text-yellow-900">Test</button>
+                    <button @click="deleteTrigger(trigger.id)" class="text-red-600 hover:text-red-900">Delete</button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        
+        <!-- <div v-if="activeTab === 'segments'">
+          <p class="text-gray-600 p-4">User Segments management will be available here soon.</p>
+        </div> -->
+
+        <!-- Add/Edit Modal -->
+        <div v-if="showAddEditModal" class="fixed inset-0 z-50 overflow-y-auto bg-gray-600 bg-opacity-50 flex items-center justify-center p-4">
+          <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-medium leading-6 text-gray-900">{{ isEditing ? 'Edit' : 'Add New' }} Trigger/Rule</h3>
+                <button @click="closeModal" class="text-gray-400 hover:text-gray-600">
+                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+                </button>
+            </div>
+            
+            <form @submit.prevent="saveTrigger" class="space-y-4">
+              <div>
+                <label for="triggerName" class="block text-sm font-medium text-gray-700">Name</label>
+                <input type="text" v-model="newTriggerData.name" id="triggerName" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+              </div>
+              <div>
+                <label for="triggerDescription" class="block text-sm font-medium text-gray-700">Description</label>
+                <textarea v-model="newTriggerData.description" id="triggerDescription" rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></textarea>
+              </div>
+              
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label for="triggerStatus" class="block text-sm font-medium text-gray-700">Status</label>
+                  <select v-model="newTriggerData.status" id="triggerStatus" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+                    <option value="active">Active</option>
+                    <option value="inactive">Inactive</option>
+                  </select>
+                </div>
+                <div>
+                  <label for="triggerPriority" class="block text-sm font-medium text-gray-700">Priority</label>
+                  <select v-model="newTriggerData.priority" id="triggerPriority" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+                    <option v-for="p in priorities" :key="p" :value="p" class="capitalize">{{ p }}</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label for="triggerType" class="block text-sm font-medium text-gray-700">Trigger Type</label>
+                <select v-model="newTriggerData.type" id="triggerType" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+                  <option v-for="tt in triggerTypes" :key="tt.id" :value="tt.id">{{ tt.name }}</option>
+                </select>
+              </div>
+
+              <!-- Conditional Fields -->
+              <div v-if="newTriggerData.type === 'event'">
+                <label for="eventType" class="block text-sm font-medium text-gray-700">Event</label>
+                <select v-model="newTriggerData.eventType" id="eventType" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+                  <option v-for="event in mockEvents" :key="event.id" :value="event.id">{{ event.name }}</option>
+                </select>
+              </div>
+              <div v-if="newTriggerData.type === 'time'">
+                <label for="triggerSchedule" class="block text-sm font-medium text-gray-700">Schedule (Cron Expression or Description)</label>
+                <input type="text" v-model="newTriggerData.schedule" id="triggerSchedule" placeholder="e.g., 0 9 * * * OR Daily at 9 AM" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+              </div>
+              <div v-if="newTriggerData.type === 'api'">
+                <label class="block text-sm font-medium text-gray-700">Webhook URL</label>
+                <input type="text" :value="newTriggerData.webhookUrl" readonly class="mt-1 block w-full rounded-md border-gray-300 shadow-sm bg-gray-100 sm:text-sm cursor-not-allowed">
+                <p class="text-xs text-gray-500 mt-1">This URL is automatically generated. Send a POST request here to trigger.</p>
+              </div>
+              
+              <div>
+                <label for="actionTemplate" class="block text-sm font-medium text-gray-700">Action: Send Notification Template</label>
+                <select v-model="newTriggerData.actionTemplateId" id="actionTemplate" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+                  <option v-for="template in mockTemplates" :key="template.id" :value="template.id">{{ template.name }}</option>
+                </select>
+              </div>
+
+              <div class="mt-6 p-3 bg-gray-50 rounded-md">
+                <h4 class="text-sm font-medium text-gray-600 mb-2">Advanced Configuration (Coming Soon)</h4>
+                <p class="text-xs text-gray-500">- Conditional Logic (IF/THEN Rules)</p>
+                <p class="text-xs text-gray-500">- User Segmentation Targeting</p>
+                <p class="text-xs text-gray-500">- Rule Dependencies</p>
+                <p class="text-xs text-gray-500">- Rule Testing & Simulation</p>
+              </div>
+
+              <div class="pt-5">
+                <div class="flex justify-end space-x-3">
+                  <button type="button" @click="closeModal" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Cancel</button>
+                  <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
+                    {{ isEditing ? 'Save Changes' : 'Add Trigger' }}
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </template>
+    </rs-card>
+  </div>
 </template>
 
-<script setup></script>
-
-<style lang="scss" scoped></style>
+<style scoped>
+/* Scoped styles if needed */
+.max-h-\[90vh\] {
+  max-height: 90vh;
+}
+</style> 
\ No newline at end of file