# All files / js/pages/registered-users Index.vue

0% Statements 0/16
0% Branches 0/13
0% Functions 0/4
0% Lines 0/16

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90

     <script setup lang="ts">
    import AppLayout from '@/layouts/AppLayout.vue';
    import { Head, Link } from '@inertiajs/vue3';
    import { Building2, ClipboardList, UserPlus } from 'lucide-vue-next';

    defineProps<{
        showRegisteredUsers: boolean;
        showUpdateRequests: boolean;
        counts: {
            registered: number;
            pending: number;
            deactivated: number;
            update_requests: number;
            pending_update_requests: number;
        };
    }>();
    </script>

    <template>
        <Head title="Client zone — registered users" />
        <AppLayout :breadcrumbs="[{ title: 'Registered Users', href: '/registered-users' }]">
            <div class="space-y-6 p-4">
                <div>
                    <h1 class="text-2xl font-semibold text-gray-900">Client zone administration</h1>
                    <p class="mt-1 text-sm text-gray-600">
                        Review approved client logins, pending registrations, and customer information update requests (based on your group permissions).
                    </p>
                </div>

                <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                    <Link
                        v-if="showRegisteredUsers"
                        href="/registered-users/registered"
                        class="group flex flex-col rounded-lg border border-gray-200 bg-white p-5 shadow-sm transition hover:border-blue-300 hover:shadow"
                    >
                        <div class="flex items-center gap-3">
                            <span class="rounded-lg bg-blue-50 p-2 text-blue-700">
                                <Building2 class="h-5 w-5" />
                            </span>
                            <div>
                                <h2 class="font-medium text-gray-900 group-hover:text-blue-700">Registered users</h2>
                                <p class="text-sm text-gray-500">Active and deactivated client accounts</p>
                            </div>
                        </div>
                        <p class="mt-4 text-3xl font-semibold tabular-nums text-gray-900">{{ counts.registered }}</p>
                        <p v-if="counts.deactivated > 0" class="mt-1 text-sm text-gray-600">
                            {{ counts.deactivated }} deactivated
                        </p>
                    </Link>

                    <Link
                        v-if="showRegisteredUsers"
                        href="/registered-users/pending"
                        class="group flex flex-col rounded-lg border border-gray-200 bg-white p-5 shadow-sm transition hover:border-amber-300 hover:shadow"
                    >
                        <div class="flex items-center gap-3">
                            <span class="rounded-lg bg-amber-50 p-2 text-amber-700">
                                <UserPlus class="h-5 w-5" />
                            </span>
                            <div>
                                <h2 class="font-medium text-gray-900 group-hover:text-amber-800">Awaiting approval</h2>
                                <p class="text-sm text-gray-500">New registrations to review</p>
                            </div>
                        </div>
                        <p class="mt-4 text-3xl font-semibold tabular-nums text-gray-900">{{ counts.pending }}</p>
                    </Link>

                    <Link
                        v-if="showUpdateRequests"
                        href="/registered-users/update-requests"
                        class="group flex flex-col rounded-lg border border-gray-200 bg-white p-5 shadow-sm transition hover:border-violet-300 hover:shadow"
                    >
                        <div class="flex items-center gap-3">
                            <span class="rounded-lg bg-violet-50 p-2 text-violet-700">
                                <ClipboardList class="h-5 w-5" />
                            </span>
                            <div>
                                <h2 class="font-medium text-gray-900 group-hover:text-violet-800">Update requests</h2>
                                <p class="text-sm text-gray-500">
                                    {{ counts.pending_update_requests }} pending of {{ counts.update_requests }} total
                                </p>
                            </div>
                        </div>
                        <p class="mt-4 text-3xl font-semibold tabular-nums text-gray-900">{{ counts.update_requests }}</p>
                    </Link>
                </div>
            </div>
        </AppLayout>
    </template>