clqms-be/app/Views/v2/settings/settings_index.php

<?= $this->extend("v2/layout/main_layout"); ?>

<?= $this->section("content") ?>
<div class="w-full space-y-6">
  
  <!-- Page Header -->
  <div class="card-glass p-6 animate-fadeIn">
    <div class="flex items-center gap-4">
      <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-slate-600 to-slate-900 flex items-center justify-center shadow-lg">
        <i class="fa-solid fa-cog text-2xl text-white"></i>
      </div>
      <div>
        <h2 class="text-2xl font-bold" style="color: rgb(var(--color-text));">Settings</h2>
        <p class="text-sm" style="color: rgb(var(--color-text-muted));">Configure system settings and preferences</p>
      </div>
    </div>
  </div>

  <!-- Settings Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    
    <!-- General Settings -->
    <div class="card">
      <div class="p-6">
        <h3 class="text-lg font-bold mb-4 flex items-center gap-2" style="color: rgb(var(--color-text));">
          <i class="fa-solid fa-sliders" style="color: rgb(var(--color-primary));"></i>
          General Settings
        </h3>
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium mb-2" style="color: rgb(var(--color-text));">System Name</label>
            <input type="text" value="CLQMS" class="input input-bordered w-full" />
          </div>
          <div>
            <label class="block text-sm font-medium mb-2" style="color: rgb(var(--color-text));">Time Zone</label>
            <select class="select select-bordered w-full">
              <option>Asia/Jakarta (GMT+7)</option>
              <option>Asia/Singapore (GMT+8)</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- User Preferences -->
    <div class="card">
      <div class="p-6">
        <h3 class="text-lg font-bold mb-4 flex items-center gap-2" style="color: rgb(var(--color-text));">
          <i class="fa-solid fa-user-cog" style="color: rgb(var(--color-primary));"></i>
          User Preferences
        </h3>
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium mb-2" style="color: rgb(var(--color-text));">Language</label>
            <select class="select select-bordered w-full">
              <option>English</option>
              <option>Bahasa Indonesia</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium mb-2" style="color: rgb(var(--color-text));">Date Format</label>
            <select class="select select-bordered w-full">
              <option>DD/MM/YYYY</option>
              <option>MM/DD/YYYY</option>
              <option>YYYY-MM-DD</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- Notification Settings -->
    <div class="card">
      <div class="p-6">
        <h3 class="text-lg font-bold mb-4 flex items-center gap-2" style="color: rgb(var(--color-text));">
          <i class="fa-solid fa-bell" style="color: rgb(var(--color-primary));"></i>
          Notifications
        </h3>
        <div class="space-y-3">
          <label class="flex items-center gap-3 cursor-pointer">
            <input type="checkbox" class="checkbox checkbox-primary" checked />
            <span class="text-sm" style="color: rgb(var(--color-text));">Email notifications</span>
          </label>
          <label class="flex items-center gap-3 cursor-pointer">
            <input type="checkbox" class="checkbox checkbox-primary" checked />
            <span class="text-sm" style="color: rgb(var(--color-text));">Test result alerts</span>
          </label>
          <label class="flex items-center gap-3 cursor-pointer">
            <input type="checkbox" class="checkbox checkbox-primary" />
            <span class="text-sm" style="color: rgb(var(--color-text));">System updates</span>
          </label>
        </div>
      </div>
    </div>

    <!-- Security Settings -->
    <div class="card">
      <div class="p-6">
        <h3 class="text-lg font-bold mb-4 flex items-center gap-2" style="color: rgb(var(--color-text));">
          <i class="fa-solid fa-shield-halved" style="color: rgb(var(--color-primary));"></i>
          Security
        </h3>
        <div class="space-y-3">
          <button class="btn btn-outline w-full justify-start">
            <i class="fa-solid fa-key mr-2"></i>
            Change Password
          </button>
          <button class="btn btn-outline w-full justify-start">
            <i class="fa-solid fa-mobile-screen mr-2"></i>
            Two-Factor Authentication
          </button>
          <button class="btn btn-outline w-full justify-start">
            <i class="fa-solid fa-clock-rotate-left mr-2"></i>
            Login History
          </button>
        </div>
      </div>
    </div>

  </div>

  <!-- Save Button -->
  <div class="flex justify-end">
    <button class="btn btn-primary">
      <i class="fa-solid fa-save mr-2"></i>
      Save Settings
    </button>
  </div>

</div>
<?= $this->endSection() ?>