antrean-operasi/pages/setting/user/index.vue

<script setup lang="ts">
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
import usersData from '~/data/mock/users.json';
import type { User } from '~/types/setting';

const page = ref({ title: 'User' });
const breadcrumbs = ref([
    {
        text: 'Setting',
        disabled: false,
        href: '#'
    },
    {
        text: 'User',
        disabled: true,
        href: '#'
    }
]);

const router = useRouter();
const search = ref('');
const usersList = ref<User[]>(usersData);

// Snackbar state
const snackbar = ref(false);
const snackbarMessage = ref('');
const snackbarColor = ref('success');

const showSnackbar = (message: string, color: string = 'success') => {
    snackbarMessage.value = message;
    snackbarColor.value = color;
    snackbar.value = true;
};

const headers = [
    { title: 'No', key: 'no', width: '100px', align: 'center' as const },
    { title: 'Nama User', key: 'namaUser', sortable: true },
    { title: 'Username', key: 'username', sortable: true },
    { title: 'Email', key: 'email', sortable: true },
    { title: 'Hak Akses', key: 'hakAkses', sortable: true },
    { title: 'Status', key: 'status', sortable: true, align: 'center' as const },
    { title: 'Actions', key: 'actions', sortable: false, align: 'center' as const }
];

const actions = [
    { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
    { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
    { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
];

const handleView = (item: unknown) => {
    const data = item as User;
    router.push({
        path: '/setting/user/form',
        query: {
            mode: 'view',
            id: data.id
        }
    });
};

const handleEdit = (item: unknown) => {
    const data = item as User;
    router.push({
        path: '/setting/user/form',
        query: {
            mode: 'edit',
            id: data.id
        }
    });
};

const handleDelete = (item: unknown) => {
    const data = item as User;
    if (confirm(`Apakah Anda yakin ingin menghapus user "${data.namaUser}"?`)) {
        // Remove from list
        const index = usersList.value.findIndex(u => u.id === data.id);
        if (index > -1) {
            usersList.value.splice(index, 1);
        }
        showSnackbar('User berhasil dihapus.', 'success');
    }
};

definePageMeta({
  middleware: 'auth'
});
</script>
<template>
    <v-row>
        <v-col cols="12">
            <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
        </v-col>
        <v-col cols="12">
            <v-card elevation="10">
                <v-card-text>
                    <div class="d-flex justify-space-between align-center mb-4">
                        <v-text-field
                            v-model="search"
                            placeholder="Search..."
                            variant="outlined"
                            density="comfortable"
                            hide-details
                            prepend-inner-icon="mdi-magnify"
                            style="max-width: 400px;"
                        ></v-text-field>
                        
                        <v-btn
                            color="primary"
                            prepend-icon="mdi-plus"
                            to="/setting/user/form"
                        >
                            Tambah User
                        </v-btn>
                    </div>

                    <TableAntrian
                        :headers="headers"
                        :items="usersList"
                        :search="search"
                        :actions="actions"
                        min-width="1200px"
                        @view="handleView"
                        @edit="handleEdit"
                        @delete="handleDelete"
                    >
                        <template #item.no="{ index }">
                            {{ index + 1 }}
                        </template>
                        <template #item.status="{ item }">
                            <v-chip
                                :color="item.status === 'aktif' ? 'success' : 'error'"
                                size="small"
                            >
                                {{ item.status }}
                            </v-chip>
                        </template>
                    </TableAntrian>
                </v-card-text>
            </v-card>
        </v-col>
    </v-row>

    <!-- Snackbar for notifications -->
    <v-snackbar
        v-model="snackbar"
        :color="snackbarColor"
        :timeout="3000"
        location="top"
    >
        {{ snackbarMessage }}
        <template #actions>
            <v-btn
                variant="text"
                @click="snackbar = false"
            >
                Close
            </v-btn>
        </template>
    </v-snackbar>
</template>