create-nara 0.1.0

package/templates/vue/resources/js/pages/profile.vue

@@ -0,0 +1,370 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import axios from "axios";
+import Header from "../components/Header.vue";
+import { api, Toast } from "../components/helper";
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  phone?: string;
+  avatar?: string;
+  is_admin: boolean;
+  is_verified: boolean;
+}
+
+const props = defineProps<{
+  user: User;
+}>();
+
+const current_password = ref('');
+const new_password = ref('');
+const confirm_password = ref('');
+const isLoading = ref(false);
+const previewUrl = ref(props.user.avatar || null);
+
+function handleAvatarChange(event: Event): void {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (file) {
+    const formData = new FormData();
+    formData.append("file", file);
+    isLoading.value = true;
+    axios
+      .post("/assets/avatar", formData)
+      .then((response) => {
+        setTimeout(() => {
+          isLoading.value = false;
+          previewUrl.value = response.data + "?v=" + Date.now();
+        }, 500);
+        props.user.avatar = response.data + "?v=" + Date.now();
+        Toast("Avatar berhasil diupload", "success");
+      })
+      .catch(() => {
+        isLoading.value = false;
+        Toast("Gagal mengupload avatar", "error");
+      });
+  }
+}
+
+async function changeProfile(): Promise<void> {
+  isLoading.value = true;
+  await api(() => axios.post("/change-profile", props.user));
+  isLoading.value = false;
+}
+
+async function changePassword(): Promise<void> {
+  if (new_password.value != confirm_password.value) {
+    Toast("Password tidak cocok", "error");
+    return;
+  }
+
+  if (!current_password.value || !new_password.value || !confirm_password.value) {
+    Toast("Mohon isi semua field", "error");
+    return;
+  }
+
+  isLoading.value = true;
+  const result = await api(() => axios.post("/change-password", {
+    current_password: current_password.value,
+    new_password: new_password.value,
+  }));
+
+  if (result.success) {
+    current_password.value = "";
+    new_password.value = "";
+    confirm_password.value = "";
+  }
+  isLoading.value = false;
+}
+</script>
+
+<template>
+  <Header group="profile" />
+
+  <div class="min-h-screen bg-surface-light dark:bg-surface-dark text-slate-900 dark:text-slate-100 transition-colors duration-500 overflow-x-hidden selection:bg-primary-400 selection:text-black">
+
+    <!-- Background Effects -->
+    <div class="fixed inset-0 pointer-events-none z-0">
+      <div class="absolute top-0 right-0 w-[600px] h-[600px] bg-info-500/5 rounded-full blur-3xl -mr-64 -mt-64"></div>
+      <div class="absolute bottom-0 left-0 w-[800px] h-[800px] bg-primary-500/5 rounded-full blur-3xl -ml-96 -mb-96"></div>
+    </div>
+
+    <section class="relative px-6 sm:px-12 lg:px-24 pt-24 pb-20">
+      <div class="max-w-[90rem] mx-auto">
+
+        <!-- Hero Section -->
+        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 mb-20">
+
+          <!-- Left: Giant Profile Card -->
+          <div class="lg:col-span-5">
+            <p class="text-xs font-bold uppercase tracking-[0.3em] text-info-600 dark:text-info-400 mb-6">
+              Account
+            </p>
+            <h1 class="text-[8vw] sm:text-[5vw] lg:text-[3.5vw] leading-[0.9] font-bold tracking-tighter mb-8">
+              YOUR
+              <span class="block text-transparent bg-clip-text bg-gradient-to-r from-info-500 to-primary-400">
+                PROFILE
+              </span>
+            </h1>
+
+            <!-- Profile Card -->
+            <div class="relative">
+              <div class="absolute -inset-1 bg-gradient-to-r from-info-500/20 to-primary-500/20 rounded-3xl blur-xl"></div>
+              <div class="relative bg-surface-card-light dark:bg-surface-card-dark border border-slate-200 dark:border-white/5 rounded-3xl p-8 overflow-hidden">
+                <!-- Decorative -->
+                <div class="absolute top-0 right-0 p-32 bg-info-500/5 rounded-full blur-3xl -mr-16 -mt-16"></div>
+
+                <div class="relative z-10">
+                  <!-- Avatar Section -->
+                  <div class="flex items-center gap-6 mb-8">
+                    <div class="relative group">
+                      <div class="w-24 h-24 rounded-2xl bg-gradient-to-br from-info-500 to-primary-500 p-0.5">
+                        <div class="w-full h-full rounded-2xl bg-surface-card-light dark:bg-surface-card-dark overflow-hidden flex items-center justify-center">
+                          <img
+                            v-if="previewUrl"
+                            :src="previewUrl"
+                            alt="Profile"
+                            class="w-full h-full object-cover"
+                          />
+                          <span v-else class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-info-500 to-primary-500">
+                            {{ user.name.charAt(0).toUpperCase() }}
+                          </span>
+                        </div>
+                      </div>
+                      <label
+                        class="absolute -bottom-2 -right-2 w-8 h-8 bg-slate-900 dark:bg-white text-white dark:text-black rounded-full flex items-center justify-center cursor-pointer hover:scale-110 transition-transform"
+                      >
+                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                          <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" stroke-linecap="round" stroke-linejoin="round"/>
+                          <circle cx="12" cy="13" r="4" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                        <input
+                          type="file"
+                          accept="image/*"
+                          @change="handleAvatarChange"
+                          class="hidden"
+                        />
+                      </label>
+                    </div>
+
+                    <div>
+                      <h2 class="text-2xl font-bold tracking-tight mb-1">{{ user.name }}</h2>
+                      <p class="text-sm text-slate-500 dark:text-slate-400">{{ user.email }}</p>
+                    </div>
+                  </div>
+
+                  <!-- Status Badges -->
+                  <div class="flex flex-wrap gap-2 mb-6">
+                    <span class="px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider rounded-full" :class="user.is_admin
+                      ? 'bg-accent-500/10 text-accent-600 dark:text-accent-400 border border-accent-500/20'
+                      : 'bg-slate-200 dark:bg-slate-800 text-slate-600 dark:text-slate-400 border border-slate-300 dark:border-slate-700'">
+                      {{ user.is_admin ? 'Administrator' : 'Standard User' }}
+                    </span>
+                    <span class="px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider rounded-full" :class="user.is_verified
+                      ? 'bg-primary-500/10 text-primary-600 dark:text-primary-400 border border-primary-500/20'
+                      : 'bg-warning-500/10 text-warning-600 dark:text-warning-400 border border-warning-500/20'">
+                      {{ user.is_verified ? 'Verified' : 'Unverified' }}
+                    </span>
+                  </div>
+
+                  <!-- Quick Info -->
+                  <div class="space-y-3">
+                    <div class="flex items-center gap-3 text-sm">
+                      <svg class="w-4 h-4 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                      <span class="font-mono text-slate-600 dark:text-slate-300">{{ user.phone || '—' }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Security Note -->
+            <div class="mt-6 p-4 border border-slate-200 dark:border-white/5 rounded-2xl">
+              <div class="flex items-start gap-3">
+                <div class="w-8 h-8 rounded-full bg-primary-500/10 flex items-center justify-center flex-shrink-0">
+                  <svg class="w-4 h-4 text-primary-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </div>
+                <div>
+                  <p class="text-xs font-bold uppercase tracking-wider text-slate-500 mb-1">Secure Storage</p>
+                  <p class="text-xs text-slate-500 dark:text-slate-400">Your data is encrypted and stored securely on Nara's backend infrastructure.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right: Forms -->
+          <div class="lg:col-span-7 space-y-8">
+
+            <!-- Personal Info Form -->
+            <div class="relative bg-surface-card-light dark:bg-surface-card-dark border border-slate-200 dark:border-white/5 hover:border-info-500/30 rounded-3xl p-8 transition-colors duration-500">
+              <div class="flex items-center justify-between mb-8">
+                <div>
+                  <span class="text-[10px] font-bold uppercase tracking-[0.2em] text-info-600 dark:text-info-400">Settings</span>
+                  <h3 class="text-xl font-bold tracking-tight mt-1">Personal Information</h3>
+                </div>
+                <div class="w-10 h-10 rounded-full bg-info-500/10 flex items-center justify-center">
+                  <svg class="w-5 h-5 text-info-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <circle cx="12" cy="7" r="4" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </div>
+              </div>
+
+              <form @submit.prevent="changeProfile" class="space-y-6">
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                  <div class="space-y-2">
+                    <label for="name" class="block text-[10px] font-bold uppercase tracking-[0.15em] text-slate-500">
+                      Full Name
+                    </label>
+                    <input
+                      v-model="user.name"
+                      type="text"
+                      id="name"
+                      class="w-full px-4 py-3 rounded-xl bg-white dark:bg-black/50 border border-slate-200 dark:border-slate-700 text-sm focus:border-info-500 focus:ring-2 focus:ring-info-500/20 outline-none transition-all"
+                      placeholder="Your full name"
+                    />
+                  </div>
+
+                  <div class="space-y-2">
+                    <label for="phone" class="block text-[10px] font-bold uppercase tracking-[0.15em] text-slate-500">
+                      Phone Number
+                    </label>
+                    <input
+                      v-model="user.phone"
+                      type="text"
+                      id="phone"
+                      class="w-full px-4 py-3 rounded-xl bg-white dark:bg-black/50 border border-slate-200 dark:border-slate-700 text-sm focus:border-info-500 focus:ring-2 focus:ring-info-500/20 outline-none transition-all"
+                      placeholder="+62 xxx xxxx xxxx"
+                    />
+                  </div>
+                </div>
+
+                <div class="space-y-2">
+                  <label for="email" class="block text-[10px] font-bold uppercase tracking-[0.15em] text-slate-500">
+                    Email Address
+                  </label>
+                  <input
+                    v-model="user.email"
+                    type="email"
+                    id="email"
+                    class="w-full px-4 py-3 rounded-xl bg-white dark:bg-black/50 border border-slate-200 dark:border-slate-700 text-sm focus:border-info-500 focus:ring-2 focus:ring-info-500/20 outline-none transition-all"
+                    placeholder="you@example.com"
+                  />
+                </div>
+
+                <div class="flex justify-end pt-4">
+                  <button
+                    type="submit"
+                    :disabled="isLoading"
+                    class="group relative px-6 py-3 bg-slate-900 dark:bg-white text-white dark:text-black text-xs font-bold uppercase tracking-wider rounded-full overflow-hidden hover:scale-105 transition-transform disabled:opacity-50"
+                  >
+                    <span class="relative z-10 flex items-center gap-2">
+                      <template v-if="isLoading">
+                        <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
+                          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                        Saving...
+                      </template>
+                      <template v-else>
+                        Save Changes
+                      </template>
+                    </span>
+                    <div class="absolute inset-0 bg-info-500 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
+                  </button>
+                </div>
+              </form>
+            </div>
+
+            <!-- Password Form -->
+            <div class="relative bg-surface-card-light dark:bg-surface-card-dark border border-slate-200 dark:border-white/5 hover:border-warning-500/30 rounded-3xl p-8 transition-colors duration-500">
+              <div class="flex items-center justify-between mb-8">
+                <div>
+                  <span class="text-[10px] font-bold uppercase tracking-[0.2em] text-warning-600 dark:text-warning-400">Security</span>
+                  <h3 class="text-xl font-bold tracking-tight mt-1">Change Password</h3>
+                </div>
+                <div class="w-10 h-10 rounded-full bg-warning-500/10 flex items-center justify-center">
+                  <svg class="w-5 h-5 text-warning-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M7 11V7a5 5 0 0 1 10 0v4" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </div>
+              </div>
+
+              <form @submit.prevent="changePassword" class="space-y-6">
+                <div class="space-y-2">
+                  <label for="current_password" class="block text-[10px] font-bold uppercase tracking-[0.15em] text-slate-500">
+                    Current Password
+                  </label>
+                  <input
+                    v-model="current_password"
+                    type="password"
+                    id="current_password"
+                    class="w-full px-4 py-3 rounded-xl bg-white dark:bg-black/50 border border-slate-200 dark:border-slate-700 text-sm focus:border-warning-500 focus:ring-2 focus:ring-warning-500/20 outline-none transition-all"
+                    placeholder="••••••••"
+                  />
+                </div>
+
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                  <div class="space-y-2">
+                    <label for="new_password" class="block text-[10px] font-bold uppercase tracking-[0.15em] text-slate-500">
+                      New Password
+                    </label>
+                    <input
+                      v-model="new_password"
+                      type="password"
+                      id="new_password"
+                      class="w-full px-4 py-3 rounded-xl bg-white dark:bg-black/50 border border-slate-200 dark:border-slate-700 text-sm focus:border-warning-500 focus:ring-2 focus:ring-warning-500/20 outline-none transition-all"
+                      placeholder="••••••••"
+                    />
+                  </div>
+
+                  <div class="space-y-2">
+                    <label for="confirm_password" class="block text-[10px] font-bold uppercase tracking-[0.15em] text-slate-500">
+                      Confirm Password
+                    </label>
+                    <input
+                      v-model="confirm_password"
+                      type="password"
+                      id="confirm_password"
+                      class="w-full px-4 py-3 rounded-xl bg-white dark:bg-black/50 border border-slate-200 dark:border-slate-700 text-sm focus:border-warning-500 focus:ring-2 focus:ring-warning-500/20 outline-none transition-all"
+                      placeholder="••••••••"
+                    />
+                  </div>
+                </div>
+
+                <div class="flex justify-end pt-4">
+                  <button
+                    type="submit"
+                    :disabled="isLoading"
+                    class="px-6 py-3 text-xs font-bold uppercase tracking-wider border border-slate-200 dark:border-slate-700 rounded-full hover:border-warning-500 hover:text-warning-500 transition-colors disabled:opacity-50"
+                  >
+                    <span v-if="isLoading" class="flex items-center gap-2">
+                      <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                      </svg>
+                      Updating...
+                    </span>
+                    <span v-else>
+                      Update Password
+                    </span>
+                  </button>
+                </div>
+              </form>
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+  </div>
+</template>

package/templates/vue/resources/js/pages/users.vue

@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { usePage, router } from '@inertiajs/vue3';
+import Header from '../components/Header.vue';
+import UserModal from '../components/UserModal.vue';
+import Pagination from '../components/Pagination.vue';
+import axios from 'axios';
+import { api, Toast } from '../components/helper';
+import type { User, UserForm, PaginationMeta } from '../types';
+import { createEmptyUserForm, userToForm } from '../types';
+
+const props = defineProps<{
+  users: User[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+  hasNext: boolean;
+  hasPrev: boolean;
+  search: string;
+  filter: string;
+}>();
+
+const pageData = usePage();
+const currentUser = computed(() => pageData.props.user as User | undefined);
+
+const paginationMeta = computed(() => ({
+  total: props.total,
+  page: props.page,
+  limit: props.limit,
+  totalPages: props.totalPages,
+  hasNext: props.hasNext,
+  hasPrev: props.hasPrev
+}) as PaginationMeta);
+
+const showUserModal = ref(false);
+const isSubmitting = ref(false);
+const mode = ref<'create' | 'edit'>('create');
+const form = ref<UserForm>(createEmptyUserForm());
+
+function openCreateUser(): void {
+  mode.value = 'create';
+  form.value = createEmptyUserForm();
+  showUserModal.value = true;
+}
+
+function openEditUser(userItem: User): void {
+  mode.value = 'edit';
+  form.value = userToForm(userItem);
+  showUserModal.value = true;
+}
+
+function closeUserModal(): void {
+  showUserModal.value = false;
+  form.value = createEmptyUserForm();
+}
+
+async function handleSubmit(formData: UserForm): Promise<void> {
+  if (!formData.name || !formData.email) {
+    Toast('Nama dan email wajib diisi', 'error');
+    return;
+  }
+
+  isSubmitting.value = true;
+
+  const payload = {
+    name: formData.name,
+    email: formData.email,
+    phone: formData.phone || null,
+    is_admin: formData.is_admin,
+    is_verified: formData.is_verified,
+    password: formData.password || undefined
+  };
+
+  const result = mode.value === 'create'
+    ? await api(() => axios.post('/users', payload))
+    : await api(() => axios.put(`/users/${formData.id}`, payload));
+
+  if (result.success) {
+    closeUserModal();
+    router.visit('/users', { preserveScroll: true, preserveState: true });
+  }
+
+  isSubmitting.value = false;
+}
+
+async function deleteUser(id: string): Promise<void> {
+  if (!confirm('Yakin ingin menghapus user ini?')) {
+    return;
+  }
+
+  isSubmitting.value = true;
+
+  const result = await api(() => axios.delete('/users', { data: { ids: [id] } }));
+
+  if (result.success) {
+    router.visit('/users', { preserveScroll: true, preserveState: true });
+  }
+
+  isSubmitting.value = false;
+}
+</script>
+
+<template>
+  <Header group="users" />
+
+  <div class="min-h-screen bg-surface-light dark:bg-surface-dark text-slate-900 dark:text-slate-100 transition-colors duration-500 overflow-x-hidden selection:bg-primary-400 selection:text-black">
+
+    <!-- Background Effects -->
+    <div class="fixed inset-0 pointer-events-none z-0">
+      <div class="absolute top-0 left-1/2 w-[1000px] h-[1000px] bg-accent-500/5 rounded-full blur-3xl -translate-x-1/2 -mt-[500px]"></div>
+    </div>
+
+    <section class="relative px-6 sm:px-12 lg:px-24 pt-24 pb-20">
+      <div class="max-w-[90rem] mx-auto">
+
+        <!-- Header Section -->
+        <div class="flex flex-col lg:flex-row lg:items-end justify-between gap-8 mb-16">
+          <div>
+            <p class="text-xs font-bold uppercase tracking-[0.3em] text-accent-600 dark:text-accent-400 mb-6">
+              Management
+            </p>
+            <h1 class="text-[8vw] sm:text-[6vw] lg:text-[4vw] leading-[0.9] font-bold tracking-tighter mb-4">
+              USERS
+            </h1>
+            <p class="text-lg text-slate-500 dark:text-slate-400 max-w-xl font-serif italic">
+              "Control who enters. Manage who stays."
+            </p>
+          </div>
+
+          <div class="flex items-center gap-6">
+            <!-- Stats -->
+            <div class="text-right">
+              <p class="text-[10px] uppercase tracking-[0.2em] text-slate-400 mb-1">Total</p>
+              <p class="text-3xl font-bold tracking-tight">{{ total }}</p>
+            </div>
+
+            <div class="h-12 w-px bg-slate-200 dark:bg-slate-700"></div>
+
+            <button
+              v-if="currentUser?.is_admin"
+              class="group relative px-6 py-3 bg-slate-900 dark:bg-white text-white dark:text-black text-xs font-bold uppercase tracking-wider rounded-full overflow-hidden hover:scale-105 transition-transform disabled:opacity-50"
+              @click="openCreateUser"
+              :disabled="isSubmitting"
+            >
+              <span class="relative z-10 flex items-center gap-2">
+                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M12 5v14M5 12h14" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                Add User
+              </span>
+              <div class="absolute inset-0 bg-primary-500 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
+            </button>
+          </div>
+        </div>
+
+        <!-- Users Grid - Card Based -->
+        <div class="mb-12">
+          <div v-if="users && users.length" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div
+              v-for="(userItem, i) in users"
+              :key="userItem.id"
+              class="group relative bg-surface-card-light dark:bg-surface-card-dark border border-slate-200 dark:border-white/5 hover:border-accent-500/50 dark:hover:border-accent-500/30 p-6 rounded-2xl transition-all duration-500 overflow-hidden"
+            >
+              <!-- Hover Glow -->
+              <div class="absolute top-0 right-0 p-20 bg-accent-500/5 rounded-full blur-3xl -mr-10 -mt-10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+
+              <div class="relative z-10">
+                <!-- User Header -->
+                <div class="flex items-start justify-between mb-4">
+                  <div class="flex items-center gap-3">
+                    <!-- Avatar -->
+                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-accent-500 to-accent-400 flex items-center justify-center text-white font-bold text-lg">
+                      {{ userItem.name.charAt(0).toUpperCase() }}
+                    </div>
+                    <div>
+                      <h3 class="font-bold text-lg tracking-tight">{{ userItem.name }}</h3>
+                      <p class="text-xs text-slate-500 dark:text-slate-400">{{ userItem.email }}</p>
+                    </div>
+                  </div>
+
+                  <!-- Status Badge -->
+                  <span class="px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider rounded-full" :class="userItem.is_verified
+                    ? 'bg-primary-500/10 text-primary-600 dark:text-primary-400 border border-primary-500/20'
+                    : 'bg-warning-500/10 text-warning-600 dark:text-warning-400 border border-warning-500/20'">
+                    {{ userItem.is_verified ? 'Verified' : 'Pending' }}
+                  </span>
+                </div>
+
+                <!-- User Details -->
+                <div class="space-y-2 mb-4">
+                  <div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
+                    <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                    <span class="font-mono">{{ userItem.phone || '—' }}</span>
+                  </div>
+                  <div class="flex items-center gap-2 text-xs">
+                    <span class="inline-flex h-1.5 w-1.5 rounded-full" :class="userItem.is_admin ? 'bg-accent-500' : 'bg-slate-400'"></span>
+                    <span class="text-slate-500 dark:text-slate-400">{{ userItem.is_admin ? 'Administrator' : 'Standard User' }}</span>
+                  </div>
+                </div>
+
+                <!-- Actions -->
+                <div v-if="currentUser?.is_admin" class="flex items-center gap-2 pt-4 border-t border-slate-200 dark:border-white/5">
+                  <button
+                    class="flex-1 px-4 py-2 text-xs font-bold uppercase tracking-wider border border-slate-200 dark:border-slate-700 rounded-full hover:border-accent-500/50 hover:text-accent-500 transition-colors disabled:opacity-50"
+                    @click="openEditUser(userItem)"
+                    :disabled="isSubmitting"
+                  >
+                    Edit
+                  </button>
+                  <button
+                    class="px-4 py-2 text-xs font-bold uppercase tracking-wider border border-danger-500/20 text-danger-500 rounded-full hover:bg-danger-500 hover:text-white transition-colors disabled:opacity-50"
+                    @click="deleteUser(userItem.id)"
+                    :disabled="isSubmitting"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Empty State -->
+          <div v-else class="text-center py-20 border border-dashed border-slate-200 dark:border-slate-700 rounded-2xl">
+            <div class="w-16 h-16 mx-auto mb-6 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center">
+              <svg class="w-8 h-8 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke-linecap="round" stroke-linejoin="round"/>
+                <circle cx="9" cy="7" r="4" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M16 3.13a4 4 0 0 1 0 7.75" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+            <h3 class="text-xl font-bold mb-2">No Users Yet</h3>
+            <p class="text-sm text-slate-500 dark:text-slate-400 mb-6">Start by adding your first user to the system.</p>
+            <button
+              v-if="currentUser?.is_admin"
+              class="px-6 py-3 bg-slate-900 dark:bg-white text-white dark:text-black text-xs font-bold uppercase tracking-wider rounded-full hover:scale-105 transition-transform"
+              @click="openCreateUser"
+            >
+              Add First User
+            </button>
+          </div>
+        </div>
+
+        <!-- Pagination -->
+        <div>
+          <Pagination :meta="paginationMeta" />
+        </div>
+
+      </div>
+    </section>
+
+    <UserModal
+      :show="showUserModal"
+      :mode="mode"
+      :form="form"
+      :isSubmitting="isSubmitting"
+      @close="closeUserModal"
+      @submit="handleSubmit"
+    />
+  </div>
+</template>

package/templates/vue/resources/views/inertia.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NARA App</title>
+    @vite
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+    @inertia
+</body>
+</html>

package/templates/vue/routes/web.ts

@@ -0,0 +1,17 @@
+import type { NaraApp } from '@nara-web/core';
+
+export function registerRoutes(app: NaraApp) {
+  app.get('/', (req, res) => {
+    return res.inertia('landing', {
+        title: 'Welcome to NARA'
+    });
+  });
+
+  app.get('/dashboard', (req, res) => {
+    return res.inertia('dashboard');
+  });
+
+  app.get('/login', (req, res) => {
+    return res.inertia('auth/login');
+  });
+}