setup added

src/components/navigation/Sidebar.vue

@@ -35,7 +35,7 @@
                 <div class="absolute right-4">
                     <svg
                         @click="toggleSideBar"
-                        class="stroke-secondary-700 hover:stroke-primary-700 duration-200 cursor-pointer"
+                        class="stroke-current text-secondary-700 hover:text-primary-700 duration-200 cursor-pointer" 
                         width="25px"
                         height="25px"
                         viewBox="0 0 24 24"
@@ -109,7 +109,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, type PropType, ref } from "vue";
+import { computed, onMounted, type PropType, ref } from "vue";
 import { useRouter } from "vue-router";
 import type { SidebarItem } from "@/dtos/common/Sidebar";
 import { useSidebar } from "@/stores/App/App";
@@ -117,7 +117,7 @@ import { storeToRefs } from "pinia";
 import { watch, nextTick } from "vue";
 const router = useRouter();
 
-// const emit = defineEmits(["toggleSideBar"]);
+const emit = defineEmits(["toggleSideBar"]);
 
 const sidebarStore = useSidebar();
 const { isSidebarOpen } = storeToRefs(sidebarStore);

src/router/authChildren.ts

@@ -25,6 +25,22 @@ const authChildren: Array<RouteRecordRaw> = [
         meta: {
             permission: "",
         },
+    },
+    {
+        path: "/setup",
+        name: "setup-main",
+        meta: {
+            permission: "",
+        },
+        children: [
+            {
+                path: "",
+                name: "setup",
+                component: () => import("@/views/Setup/Setup.vue"),
+                meta: {
+                },
+            },
+        ]
     }
 ];
 

src/router/index.ts

@@ -14,21 +14,21 @@ const router = createRouter({
             },
             children: authChildren,
         },
-        // {
+        {
-        //     path: "/login",
+            path: "/login",
-        //     name: "login",
+            name: "login",
-        //     component: () => import("@/views/Auth/Login.vue"),
+            component: () => import("@/views/Auth/Login.vue"),
-        // },
+        },
-        // {
+        {
-        //     path: "/:pathMatch(.*)*",
+            path: "/:pathMatch(.*)*",
-        //     name: "404",
+            name: "404",
-        //     component: () => import("@/views/404.vue"),
+            component: () => import("@/views/404.vue"),
-        // },
+        },
-        // {
+        {
-        //     path: "/403",
+            path: "/403",
-        //     name: "403",
+            name: "403",
-        //     component: () => import("@/views/403.vue"),
+            component: () => import("@/views/403.vue"),
-        // },
+        },
     ],
 });
 

src/utils/setup/SidebarItems.ts

@@ -34,5 +34,20 @@ export function useSidebarItems(): SidebarItem[] {
             isVisible: true,
             to: "/tippani",
         },
+        {
+            label: "Setup",
+            isVisible: true,
+        },
+        {
+            label: "Users",
+            icon: "User",
+            to: "/user",
+        },
+        {
+            label: "Setup",
+            icon: "Settings",
+            isVisible: true,
+            to: "/setup",
+        },
     ];
 }

src/views/403.vue

@@ -0,0 +1,34 @@
+<template>
+    <section
+        class="flex items-center p-16 text-gray-700 h-[85vh]"
+        style="background-image: url(/svg/large-triangles.svg)"
+    >
+        <div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
+            <div class="max-w-md text-center">
+                <h2 class="mb-8 font-extrabold text-9xl">
+                    <span class="sr-only">Error</span>
+                    403
+                </h2>
+                <p class="text-2xl font-semibold md:text-3xl">You do not have the permission to visit this page.</p>
+                <p class="mt-4 mb-8">Click on go back to go to previous page</p>
+                <a
+                    rel="noopener noreferrer"
+                    href="#"
+                    class="px-8 py-3 font-semibold rounded-sm bg-violet-600 text-gray-50"
+                    @click="onGoback()"
+                >
+                    Go Back
+                </a>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const onGoback = () => {
+    router.go(-1);
+};
+</script>

src/views/404.vue

@@ -0,0 +1,34 @@
+<template>
+    <section
+        class="flex items-center p-16 text-gray-700 h-screen"
+        style="background-image: url(/svg/large-triangles.svg)"
+    >
+        <div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
+            <div class="max-w-md text-center">
+                <h2 class="mb-8 font-extrabold text-9xl">
+                    <span class="sr-only">Error</span>
+                    404
+                </h2>
+                <p class="text-2xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
+                <p class="mt-4 mb-8">Click on go back to go to previous page</p>
+                <a
+                    rel="noopener noreferrer"
+                    href="#"
+                    class="px-8 py-3 font-semibold rounded-sm bg-violet-600 text-gray-50"
+                    @click="onGoback()"
+                >
+                    Go Back
+                </a>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const onGoback = () => {
+    router.go(-1);
+};
+</script>

src/views/Setup/Card.vue

@@ -0,0 +1,23 @@
+<template>
+    <div
+        class="flex items-center justify-between border p-4 bg-gray-50 hover:bg-gray-200 hover:border-gray-300 hover:cursor-pointer"
+    >
+        <Icons :name="icon" size="60" color="gray" opacity="0.2" />
+        <p class="text-lg">
+            {{ name }}
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+    icon: {
+        type: String,
+        default: "",
+    },
+    name: {
+        type: String,
+        default: "",
+    },
+});
+</script>

src/views/Setup/Setup.vue

@@ -0,0 +1,75 @@
+<template>
+    <ContentLayout :title="layout.title">
+        <template #action-before>
+            <div class="flex items-center gap-[1px] w-[200px]">
+                <input type="text" v-model="searchQuery" placeholder="Search" class="w-full" />
+            </div>
+        </template>
+        <template #body>
+            <div class="space-y-8">
+                <div v-for="section in filteredData" :key="section.category">
+                    <h1 class="text-xl text-primary-800 font-semibold mb-[15px]">{{ section.category }}</h1>
+                    <div class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 gap-4">
+                        <RouterLink v-for="item in section.items" :key="item.name" :to="item.to">
+                            <Card :icon="item.icon" :name="item.name" />
+                        </RouterLink>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </ContentLayout>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import Card from "./Card.vue";
+
+const layout = ref({
+    title: [
+        {
+            name: "Setup",
+        },
+    ],
+});
+
+const settingsData = [
+    {
+        category: "Administration Setting",
+        items: [
+            {
+                name: "Departments",
+                icon: "HousePlus",
+                to: "/setup/departments",
+            },
+            {
+                name: "Document Type",
+                icon: "File",
+                to: "",
+            },
+        ],
+    },
+];
+
+const searchQuery = ref("");
+
+const filteredData = computed(() => {
+    const query = searchQuery.value.toLowerCase();
+    return settingsData
+        .map((section) => {
+            const filteredItems = section.items.filter((item) => {
+                // const hasAccess = hasPermission(item.permission);
+                // if (!hasAccess) return false;
+                if (!query) return true;
+                return item.name.toLowerCase().includes(query);
+            });
+            if (filteredItems.length > 0) {
+                return {
+                    ...section,
+                    items: filteredItems,
+                };
+            }
+            return null;
+        })
+        .filter((section) => section !== null);
+});
+</script>