cloud_portal/frontend/src/pages/Settings.vue

<template>
  <div class="flex flex-col h-full">
    <LayoutHeader title="Settings" />

    <div class="flex-1 overflow-auto p-5">
      <div class="max-w-3xl">
        <div class="mb-6 flex gap-2 border-b">
          <button
            v-for="tab in tabs"
            :key="tab.name"
            class="px-4 py-2 text-sm font-medium transition-colors"
            :class="
              activeTab === tab.name
                ? 'border-b-2 border-ink-gray-9 text-ink-gray-9'
                : 'text-ink-gray-5 hover:text-ink-gray-7'
            "
            @click="activeTab = tab.name"
          >
            {{ tab.label }}
          </button>
        </div>

        <div v-if="activeTab === 'profile'" class="space-y-6">
          <div class="rounded-lg border p-5">
            <h2 class="text-lg font-semibold text-ink-gray-9 mb-4">Profile</h2>
            <div class="space-y-4">
              <div class="flex items-center gap-4">
                <div
                  class="flex h-16 w-16 items-center justify-center rounded-full bg-surface-gray-2 text-2xl font-semibold text-ink-gray-5"
                >
                  JD
                </div>
                <Button variant="subtle">Change Avatar</Button>
              </div>
              <FormControl label="Full Name" v-model="profile.name" />
              <FormControl label="Email" v-model="profile.email" type="email" />
              <FormControl label="Phone" v-model="profile.phone" type="tel" />
            </div>
            <div class="mt-6 flex justify-end">
              <Button variant="solid">Save Changes</Button>
            </div>
          </div>
        </div>

        <div v-if="activeTab === 'security'" class="space-y-6">
          <div class="rounded-lg border p-5">
            <h2 class="text-lg font-semibold text-ink-gray-9 mb-4">
              Change Password
            </h2>
            <div class="space-y-4">
              <FormControl
                label="Current Password"
                type="password"
                v-model="security.currentPassword"
              />
              <FormControl
                label="New Password"
                type="password"
                v-model="security.newPassword"
              />
              <FormControl
                label="Confirm New Password"
                type="password"
                v-model="security.confirmPassword"
              />
            </div>
            <div class="mt-6 flex justify-end">
              <Button variant="solid">Update Password</Button>
            </div>
          </div>

          <div class="rounded-lg border p-5">
            <h2 class="text-lg font-semibold text-ink-gray-9 mb-4">
              Two-Factor Authentication
            </h2>
            <p class="text-sm text-ink-gray-5 mb-4">
              Add an extra layer of security to your account by enabling two-factor
              authentication.
            </p>
            <Button variant="subtle">Enable 2FA</Button>
          </div>
        </div>

        <div v-if="activeTab === 'notifications'" class="space-y-6">
          <div class="rounded-lg border p-5">
            <h2 class="text-lg font-semibold text-ink-gray-9 mb-4">
              Email Notifications
            </h2>
            <div class="space-y-4">
              <label
                v-for="option in notificationOptions"
                :key="option.key"
                class="flex items-center justify-between"
              >
                <div>
                  <p class="font-medium text-ink-gray-9">{{ option.label }}</p>
                  <p class="text-sm text-ink-gray-5">{{ option.description }}</p>
                </div>
                <input
                  type="checkbox"
                  v-model="notifications[option.key]"
                  class="h-4 w-4 rounded border-gray-300"
                />
              </label>
            </div>
            <div class="mt-6 flex justify-end">
              <Button variant="solid">Save Preferences</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Button, FormControl } from 'frappe-ui'
import LayoutHeader from '@/components/Common/LayoutHeader.vue'

const activeTab = ref('profile')

const tabs = [
  { name: 'profile', label: 'Profile' },
  { name: 'security', label: 'Security' },
  { name: 'notifications', label: 'Notifications' },
]

const profile = reactive({
  name: 'John Doe',
  email: 'john@example.com',
  phone: '+91 98765 43210',
})

const security = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: '',
})

const notificationOptions = [
  {
    key: 'siteStatus',
    label: 'Site Status Alerts',
    description: 'Get notified when your site status changes',
  },
  {
    key: 'billing',
    label: 'Billing Updates',
    description: 'Receive invoices and payment reminders',
  },
  {
    key: 'security',
    label: 'Security Alerts',
    description: 'Get notified about security-related events',
  },
  {
    key: 'newsletter',
    label: 'Product Updates',
    description: 'Receive news about new features and updates',
  },
]

const notifications = reactive({
  siteStatus: true,
  billing: true,
  security: true,
  newsletter: false,
})
</script>