diff --git a/.idx/dev.nix b/.idx/dev.nix
new file mode 100644
index 0000000..77bd860
--- /dev/null
+++ b/.idx/dev.nix
@@ -0,0 +1,27 @@
+{pkgs}: {
+  channel = "stable-24.05";
+  packages = [
+    pkgs.nodejs_20
+  ];
+  idx.extensions = [
+    "svelte.svelte-vscode"
+    "vue.volar"
+  ];
+  idx.previews = {
+    previews = {
+      web = {
+        command = [
+          "npm"
+          "run"
+          "dev"
+          "--"
+          "--port"
+          "$PORT"
+          "--host"
+          "0.0.0.0"
+        ];
+        manager = "web";
+      };
+    };
+  };
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index c8957a7..9fc29c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
-  "name": "tailadmin-vue-pro-2.0",
-  "version": "0.0.0",
+  "name": "tailadmin-vue-pro-2.0.1",
+  "version": "2.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "tailadmin-vue-pro-2.0",
-      "version": "0.0.0",
+      "name": "tailadmin-vue-pro-2.0.1",
+      "version": "2.0.1",
       "dependencies": {
         "@fullcalendar/core": "^6.1.15",
         "@fullcalendar/daygrid": "^6.1.15",
diff --git a/src/App.vue b/src/App.vue
index a49b2a2..926801d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,11 @@
 <template>
   <ThemeProvider>
-    <SidebarProvider>
-      <RouterView />
-    </SidebarProvider>
+    <RouterView />
   </ThemeProvider>
 </template>
 
 <script setup lang="ts">
 import ThemeProvider from './components/layout/ThemeProvider.vue'
-import SidebarProvider from './components/layout/SidebarProvider.vue'
+import { RouterView } from 'vue-router';
+
 </script>
diff --git a/src/components/cases/RecentCases.vue b/src/components/cases/RecentCases.vue
new file mode 100644
index 0000000..7681ee5
--- /dev/null
+++ b/src/components/cases/RecentCases.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="overflow-x-auto">
+    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+      <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <tr>
+          <th scope="col" class="px-6 py-3">
+            Case ID
+          </th>
+          <th scope="col" class="px-6 py-3">
+            Case Type
+          </th>
+          <th scope="col" class="px-6 py-3">
+            Date Reported
+          </th>
+          <th scope="col" class="px-6 py-3">
+            Status
+          </th>
+          <th scope="col" class="px-6 py-3">
+            Assignee
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="caseItem in recentCases" :key="caseItem.caseId" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+          <td class="px-6 py-4">
+            {{ caseItem.caseId }}
+          </td>
+          <td class="px-6 py-4">
+            {{ caseItem.caseType }}
+          </td>
+          <td class="px-6 py-4">
+            {{ caseItem.dateReported }}
+          </td>
+          <td class="px-6 py-4">
+            {{ caseItem.status }}
+          </td>
+          <td class="px-6 py-4">
+            {{ caseItem.assignee }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const recentCases = ref([
+  {
+    caseId: 'CASE-001',
+    caseType: 'Injury',
+    dateReported: '2023-11-20',
+    status: 'Investigating',
+    assignee: 'John Doe',
+  },
+  {
+    caseId: 'CASE-002',
+    caseType: 'HR Violation',
+    dateReported: '2023-11-18',
+    status: 'Reported',
+    assignee: 'Jane Smith',
+  },
+  {
+    caseId: 'CASE-003',
+    caseType: 'Legal Issue',
+    dateReported: '2023-11-15',
+    status: 'Pending Review',
+    assignee: 'Mike Johnson',
+  },
+  {
+    caseId: 'CASE-004',
+    caseType: 'Property Damage',
+    dateReported: '2023-11-12',
+    status: 'Resolved',
+    assignee: 'Emily Davis',
+  },
+  {
+    caseId: 'CASE-005',
+    caseType: 'Safety Hazard',
+    dateReported: '2023-11-10',
+    status: 'Closed',
+    assignee: 'David Wilson',
+  },
+]);
+</script>
\ No newline at end of file
diff --git a/src/components/layout/AdminLayout.vue b/src/components/layout/AdminLayout.vue
index 2459394..74ff449 100644
--- a/src/components/layout/AdminLayout.vue
+++ b/src/components/layout/AdminLayout.vue
@@ -1,23 +1,19 @@
 <template>
-  <div class="min-h-screen xl:flex">
-    <app-sidebar />
-    <Backdrop />
-    <div
-      class="flex-1 transition-all duration-300 ease-in-out"
-      :class="[isExpanded || isHovered ? 'lg:ml-[290px]' : 'lg:ml-[90px]']"
-    >
-      <app-header />
-      <div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
-        <slot></slot>
-      </div>
+  <div class="relative flex">
+    <div class="flex-none">
+      <AppSidebar class="block"/>
+    </div>
+    <div class="flex-1">
+      <AppHeader />
+      <div class="p-5">
+      <RouterView />
+    </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import AppSidebar from './AppSidebar.vue'
-import AppHeader from './AppHeader.vue'
-import { useSidebar } from '@/composables/useSidebar'
-import Backdrop from './Backdrop.vue'
-const { isExpanded, isHovered } = useSidebar()
+import AppHeader from './AppHeader.vue';
+import AppSidebar from './AppSidebar.vue';
+import { RouterView } from 'vue-router'
 </script>
diff --git a/src/components/layout/AppSidebar.vue b/src/components/layout/AppSidebar.vue
index 64646ff..8278e1a 100644
--- a/src/components/layout/AppSidebar.vue
+++ b/src/components/layout/AppSidebar.vue
@@ -29,20 +29,14 @@
           height="40"
         />
         <img
-          v-if="isExpanded || isHovered || isMobileOpen"
+          v-else
           class="hidden dark:block"
           src="/images/logo/logo-dark.svg"
           alt="Logo"
           width="150"
           height="40"
         />
-        <img
-          v-else
-          src="/images/logo/logo-icon.svg"
-          alt="Logo"
-          width="32"
-          height="32"
-        />
+        <img v-else src="/images/logo/logo-icon.svg" alt="Logo" class="" width="32" height="32" />
       </router-link>
     </div>
     <div
@@ -57,11 +51,10 @@
                 !isExpanded && !isHovered
                   ? 'lg:justify-center'
                   : 'justify-start',
-              ]"
-            >
+              ]">
               <template v-if="isExpanded || isHovered || isMobileOpen">
                 {{ menuGroup.title }}
-              </template>
+              </template> 
               <HorizontalDots v-else />
             </h2>
             <ul class="flex flex-col gap-4">
@@ -78,34 +71,27 @@
                     !isExpanded && !isHovered
                       ? 'lg:justify-center'
                       : 'lg:justify-start',
-                  ]"
+                  ]
                 >
-                  <span
-                    :class="[
+                  <span :class="[
                       isSubmenuOpen(groupIndex, index)
                         ? 'menu-item-icon-active'
                         : 'menu-item-icon-inactive',
-                    ]"
-                  >
+                    ]">
                     <component :is="item.icon" />
                   </span>
-                  <span
-                    v-if="isExpanded || isHovered || isMobileOpen"
-                    class="menu-item-text"
-                    >{{ item.name }}</span
-                  >
+                  <span v-if="isExpanded || isHovered || isMobileOpen" class="menu-item-text">{{ item.name }}</span>
                   <ChevronDownIcon
-                    v-if="isExpanded || isHovered || isMobileOpen"
-                    :class="[
-                      'ml-auto w-5 h-5 transition-transform duration-200',
-                      {
-                        'rotate-180 text-brand-500': isSubmenuOpen(
-                          groupIndex,
-                          index
-                        ),
-                      },
-                    ]"
-                  />
+                  v-if="isExpanded || isHovered || isMobileOpen"
+                  :class="[
+                    'ml-auto w-5 h-5 transition-transform duration-200',
+                    {
+                      'rotate-180 text-brand-500': isSubmenuOpen(
+                        groupIndex,
+                        index
+                      ),
+                    },
+                  ]" />
                 </button>
                 <router-link
                   v-else-if="item.path"
@@ -116,22 +102,16 @@
                       'menu-item-active': isActive(item.path),
                       'menu-item-inactive': !isActive(item.path),
                     },
-                  ]"
+                  ]
                 >
-                  <span
-                    :class="[
+                  <span :class="[
                       isActive(item.path)
                         ? 'menu-item-icon-active'
                         : 'menu-item-icon-inactive',
-                    ]"
-                  >
+                    ]">
                     <component :is="item.icon" />
                   </span>
-                  <span
-                    v-if="isExpanded || isHovered || isMobileOpen"
-                    class="menu-item-text"
-                    >{{ item.name }}</span
-                  >
+                  <span v-if="isExpanded || isHovered || isMobileOpen" class="menu-item-text">{{ item.name }}</span>
                 </router-link>
                 <transition
                   @enter="startTransition"
@@ -156,46 +136,26 @@
                                 subItem.path
                               ),
                               'menu-dropdown-item-inactive': !isActive(
-                                subItem.path
+                                subItem.path,
                               ),
                             },
                           ]"
                         >
-                          {{ subItem.name }}
+                          {{subItem.name}}
                           <span class="flex items-center gap-1 ml-auto">
-                            <span
-                              v-if="subItem.new"
-                              :class="[
-                                'menu-dropdown-badge',
-                                {
-                                  'menu-dropdown-badge-active': isActive(
-                                    subItem.path
-                                  ),
-                                  'menu-dropdown-badge-inactive': !isActive(
-                                    subItem.path
-                                  ),
-                                },
-                              ]"
-                            >
-                              new
+                            <span v-if="subItem.new" class="menu-dropdown-badge">
+                            new
                             </span>
-                            <span
-                              v-if="subItem.pro"
-                              :class="[
-                                'menu-dropdown-badge',
-                                {
-                                  'menu-dropdown-badge-active': isActive(
-                                    subItem.path
-                                  ),
-                                  'menu-dropdown-badge-inactive': !isActive(
-                                    subItem.path
-                                  ),
-                                },
-                              ]"
-                            >
+                            <span v-if="subItem.pro"
+                            :class="[
+                              'menu-dropdown-badge',
+                              {
+                                'menu-dropdown-badge-active': isActive(subItem.path),
+                                'menu-dropdown-badge-inactive': !isActive(subItem.path),
+                              },
+                            ]">
                               pro
-                            </span>
-                          </span>
+                            </span> 
                         </router-link>
                       </li>
                     </ul>
@@ -214,30 +174,22 @@
 <script setup>
 import { ref, computed } from "vue";
 import { useRoute } from "vue-router";
-
 import {
   GridIcon,
-  CalenderIcon,
-  UserCircleIcon,
-  ChatIcon,
-  MailIcon,
-  DocsIcon,
+  PlusIcon,
+  FolderIcon,
+  BarChartIcon,
+  SettingsIcon,
   PieChartIcon,
   ChevronDownIcon,
   HorizontalDots,
-  PageIcon,
-  TableIcon,
-  ListIcon,
   PlugInIcon,
 } from "../../icons";
 import SidebarWidget from "./SidebarWidget.vue";
 import BoxCubeIcon from "@/icons/BoxCubeIcon.vue";
 import { useSidebar } from "@/composables/useSidebar";
-
 const route = useRoute();
-
 const { isExpanded, isMobileOpen, isHovered, openSubmenu } = useSidebar();
-
 const menuGroups = [
   {
     title: "Menu",
@@ -245,43 +197,27 @@ const menuGroups = [
       {
         icon: GridIcon,
         name: "Dashboard",
-        subItems: [{ name: "Ecommerce", path: "/", pro: false }],
-      },
-      {
-        icon: CalenderIcon,
-        name: "Calendar",
-        path: "/calendar",
+        path: "/",
       },
       {
-        icon: UserCircleIcon,
-        name: "User Profile",
-        path: "/profile",
+        icon: PlusIcon,
+        name: "New Case",
+        path: "/new-case",
       },
-
       {
-        name: "Forms",
-        icon: ListIcon,
-        subItems: [
-          { name: "Form Elements", path: "/form-elements", pro: false },
-        ],
+        icon: FolderIcon,
+        name: "Cases",
+        path: "/cases",
       },
       {
-        name: "Tables",
-        icon: TableIcon,
-        subItems: [{ name: "Basic Tables", path: "/basic-tables", pro: false }],
-      },
-      {
-        name: "Pages",
-        icon: PageIcon,
-        subItems: [
-          { name: "Black Page", path: "/blank", pro: false },
-          { name: "404 Page", path: "/error-404", pro: false },
-        ],
+        icon: BarChartIcon,
+        name: "Reports",
+        path: "/reports",
       },
     ],
   },
   {
-    title: "Others",
+    title: "Other",
     items: [
       {
         icon: PieChartIcon,
diff --git a/src/components/layout/SidebarWidget.vue b/src/components/layout/SidebarWidget.vue
index 28c3523..6beff51 100644
--- a/src/components/layout/SidebarWidget.vue
+++ b/src/components/layout/SidebarWidget.vue
@@ -1,18 +1,2 @@
 <template>
-  <div
-    class="mx-auto mb-10 w-full max-w-60 rounded-2xl bg-gray-50 px-4 py-5 text-center dark:bg-white/[0.03]"
-  >
-    <h3 class="mb-2 font-semibold text-gray-900 dark:text-white">#1 Tailwind CSS Dashboard</h3>
-    <p class="mb-4 text-gray-500 text-theme-sm dark:text-gray-400">
-      Leading Tailwind CSS Admin Template with 400+ UI Component and Pages.
-    </p>
-    <a
-      href="https://tailadmin.com/pricing"
-      target="_blank"
-      rel="nofollow"
-      class="flex items-center justify-center p-3 font-medium text-white rounded-lg bg-brand-500 text-theme-sm hover:bg-brand-600"
-    >
-      Purchase Plan
-    </a>
-  </div>
 </template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 809ec9a..f81c914 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,13 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import NewCase from '../views/NewCase.vue'
+import Dashboard from '../views/Dashboard.vue'
+import AdminLayout from '../components/layout/AdminLayout.vue'
+import Cases from '../views/Cases.vue'
+import Reports from '../views/Reports.vue'
+import Admin from '../views/Admin.vue'
 
 const router = createRouter({
+
   history: createWebHistory(import.meta.env.BASE_URL),
   scrollBehavior(to, from, savedPosition) {
     return savedPosition || { left: 0, top: 0 }
@@ -8,144 +15,138 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: 'Ecommerce',
-      component: () => import('../views/Ecommerce.vue'),
-      meta: {
-        title: 'eCommerce Dashboard',
-      },
-    },
-    {
-      path: '/calendar',
-      name: 'Calendar',
-      component: () => import('../views/Others/Calendar.vue'),
-      meta: {
-        title: 'Calendar',
-      },
-    },
-    {
-      path: '/profile',
-      name: 'Profile',
-      component: () => import('../views/Others/UserProfile.vue'),
-      meta: {
-        title: 'Profile',
-      },
-    },
-    {
-      path: '/form-elements',
-      name: 'Form Elements',
-      component: () => import('../views/Forms/FormElements.vue'),
-      meta: {
-        title: 'Form Elements',
-      },
-    },
-    {
-      path: '/basic-tables',
-      name: 'Basic Tables',
-      component: () => import('../views/Tables/BasicTables.vue'),
-      meta: {
-        title: 'Basic Tables',
-      },
-    },
-    {
-      path: '/line-chart',
-      name: 'Line Chart',
-      component: () => import('../views/Chart/LineChart/LineChart.vue'),
-    },
-    {
-      path: '/bar-chart',
-      name: 'Bar Chart',
-      component: () => import('../views/Chart/BarChart/BarChart.vue'),
-    },
-    {
-      path: '/alerts',
-      name: 'Alerts',
-      component: () => import('../views/UiElements/Alerts.vue'),
-      meta: {
-        title: 'Alerts',
-      },
-    },
-    {
-      path: '/avatars',
-      name: 'Avatars',
-      component: () => import('../views/UiElements/Avatars.vue'),
-      meta: {
-        title: 'Avatars',
-      },
-    },
-    {
-      path: '/badge',
-      name: 'Badge',
-      component: () => import('../views/UiElements/Badges.vue'),
-      meta: {
-        title: 'Badge',
-      },
-    },
+      name: 'AdminLayout',
+      component: AdminLayout,
+      children: [{
+          path: '/',
+          component: Dashboard,
+          meta: {
+            title: 'Dashboard',
+          },
+        },
+        {
+          path: '/new-case',
+          name: 'New Case',
+          component: NewCase,
+          meta: {
+            title: 'New Case',
+          },
+        },
+        {
+          path: '/cases',
+          name: 'Cases',
+          component: Cases,
+          meta: {
+            title: 'Cases',
+          },
+        },
+        {
 
-    {
-      path: '/buttons',
-      name: 'Buttons',
-      component: () => import('../views/UiElements/Buttons.vue'),
-      meta: {
-        title: 'Buttons',
-      },
-    },
+          path: '/line-chart',
+          name: 'Line Chart',
+          component: () => import('../views/Chart/LineChart/LineChart.vue'),
+        },
+        {
+          path: '/bar-chart',
+          name: 'Bar Chart',
+          component: () => import('../views/Chart/BarChart/BarChart.vue'),
+        },
+        {
+          path: '/alerts',
+          name: 'Alerts',
+          component: () => import('../views/UiElements/Alerts.vue'),
+          meta: {
+            title: 'Alerts',
+          },
+        },
+        {
+          path: '/avatars',
+          name: 'Avatars',
+          component: () => import('../views/UiElements/Avatars.vue'),
+          meta: {
+            title: 'Avatars',
+          },
+        },
+        {
+          path: '/badge',
+          name: 'Badge',
+          component: () => import('../views/UiElements/Badges.vue'),
+          meta: {
+            title: 'Badge',
+          },
+        },
 
-    {
-      path: '/images',
-      name: 'Images',
-      component: () => import('../views/UiElements/Images.vue'),
-      meta: {
-        title: 'Images',
-      },
-    },
-    {
-      path: '/videos',
-      name: 'Videos',
-      component: () => import('../views/UiElements/Videos.vue'),
-      meta: {
-        title: 'Videos',
-      },
-    },
-    {
-      path: '/blank',
-      name: 'Blank',
-      component: () => import('../views/Pages/BlankPage.vue'),
-      meta: {
-        title: 'Blank',
-      },
-    },
+        {
+          path: '/buttons',
+          name: 'Buttons',
+          component: () => import('../views/UiElements/Buttons.vue'),
+          meta: {
+            title: 'Buttons',
+          },
+        },
 
-    {
-      path: '/error-404',
-      name: '404 Error',
-      component: () => import('../views/Errors/FourZeroFour.vue'),
-      meta: {
-        title: '404 Error',
-      },
-    },
+        {
+          path: '/images',
+          name: 'Images',
+          component: () => import('../views/UiElements/Images.vue'),
+          meta: {
+            title: 'Images',
+          },
+        },
+        {
+          path: '/videos',
+          name: 'Videos',
+          component: () => import('../views/UiElements/Videos.vue'),
+          meta: {
+            title: 'Videos',
+          },
+        },
 
-    {
-      path: '/signin',
-      name: 'Signin',
-      component: () => import('../views/Auth/Signin.vue'),
-      meta: {
-        title: 'Signin',
-      },
-    },
-    {
-      path: '/signup',
-      name: 'Signup',
-      component: () => import('../views/Auth/Signup.vue'),
-      meta: {
-        title: 'Signup',
+        {
+          path: '/reports',
+          name: 'Reports',
+          component: Reports,
+          meta: {
+            title: 'Reports',
+          },
+        },
+        {
+          path: '/admin',
+          name: 'Admin',
+          component: Admin,
+          meta: {
+            title: 'Admin',
+          },
+        },
+      ],
+    }, {
+        path: '/error-404',
+        component: () => import('../views/Errors/FourZeroFour.vue'),
+        meta: {
+          title: '404 Error',
+        },
+      }, {
+        path: '/signin',
+        name: 'Signin',
+        component: () => import('../views/Auth/Signin.vue'),
+        meta: {
+          title: 'Signin',
+        },
+      }, {
+        path: '/signup',
+        name: 'Signup',
+        component: () => import('../views/Auth/Signup.vue'),
+        meta: {
+          title: 'Signup',
+        },
       },
-    },
-  ],
-})
+    ],
+});
 
-export default router
+export default router;
 
 router.beforeEach((to, from, next) => {
-  document.title = `Vue.js ${to.meta.title} | TailAdmin - Vue.js Tailwind CSS Dashboard Template`
-  next()
-})
+  document.title = `Vue.js ${to.meta.title} | TailAdmin - Vue.js Tailwind CSS Dashboard Template`;
+  next();
+});
+
diff --git a/src/views/Admin.vue b/src/views/Admin.vue
new file mode 100644
index 0000000..43d1f29
--- /dev/null
+++ b/src/views/Admin.vue
@@ -0,0 +1,5 @@
+<template>
+  <div></div>
+</template>
+
+<script setup></script>
\ No newline at end of file
diff --git a/src/views/Cases.vue b/src/views/Cases.vue
new file mode 100644
index 0000000..6e26bda
--- /dev/null
+++ b/src/views/Cases.vue
@@ -0,0 +1,9 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
new file mode 100644
index 0000000..418cefa
--- /dev/null
+++ b/src/views/Dashboard.vue
@@ -0,0 +1,39 @@
+<template>
+  <CommonGridShape>
+    <ComponentCard title="Total Cases">
+      <div class="text-2xl font-bold">150</div>
+    </ComponentCard>
+    <ComponentCard title="Open Cases">
+      <div class="text-2xl font-bold">35</div>
+    </ComponentCard>
+    <ComponentCard title="Average Resolution Time">
+      <div class="text-2xl font-bold">7 Days</div>
+    </ComponentCard>
+    <ComponentCard title="Cases By Type">
+      <div>TODO</div>
+    </ComponentCard>
+  </CommonGridShape>
+  <ComponentCard title="Cases over time">
+    <LineChartOne />
+  </ComponentCard>
+  <ComponentCard>
+    <RecentCases />
+  </ComponentCard>
+  <ComponentCard title="Cases by status">
+    <BarChartOne />
+  </ComponentCard>
+</template>
+
+<script setup>
+import ComponentCard from '@/components/common/ComponentCard.vue';
+import CommonGridShape from '@/components/common/CommonGridShape.vue';
+import LineChartOne from '@/components/charts/LineChart/LineChartOne.vue';
+import RecentCases from '@/components/cases/RecentCases.vue';
+import BarChartOne from '@/components/charts/BarChart/BarChartOne.vue';
+</script>
+
+<style scoped>
+.text-2xl {
+    font-size: 1.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Ecommerce.vue b/src/views/Ecommerce.vue
deleted file mode 100644
index c0616c9..0000000
--- a/src/views/Ecommerce.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <admin-layout>
-    <div class="grid grid-cols-12 gap-4 md:gap-6">
-      <div class="col-span-12 space-y-6 xl:col-span-7">
-        <ecommerce-metrics />
-        <monthly-target />
-      </div>
-      <div class="col-span-12 xl:col-span-5">
-        <monthly-sale />
-      </div>
-
-      <div class="col-span-12">
-        <statistics-chart />
-      </div>
-
-      <div class="col-span-12 xl:col-span-5">
-        <customer-demographic />
-      </div>
-
-      <div class="col-span-12 xl:col-span-7">
-        <recent-orders />
-      </div>
-    </div>
-  </admin-layout>
-</template>
-
-<script>
-import AdminLayout from '../components/layout/AdminLayout.vue'
-import EcommerceMetrics from '../components/ecommerce/EcommerceMetrics.vue'
-import MonthlyTarget from '../components/ecommerce/MonthlySale.vue'
-import MonthlySale from '../components/ecommerce/MonthlyTarget.vue'
-import CustomerDemographic from '../components/ecommerce/CustomerDemographic.vue'
-import StatisticsChart from '../components/ecommerce/StatisticsChart.vue'
-import RecentOrders from '../components/ecommerce/RecentOrders.vue'
-export default {
-  components: {
-    AdminLayout,
-    EcommerceMetrics,
-    MonthlyTarget,
-    MonthlySale,
-    CustomerDemographic,
-    StatisticsChart,
-    RecentOrders,
-  },
-  name: 'Ecommerce',
-}
-</script>
diff --git a/src/views/NewCase.vue b/src/views/NewCase.vue
new file mode 100644
index 0000000..306852e
--- /dev/null
+++ b/src/views/NewCase.vue
@@ -0,0 +1,6 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/src/views/Reports.vue b/src/views/Reports.vue
new file mode 100644
index 0000000..43d1f29
--- /dev/null
+++ b/src/views/Reports.vue
@@ -0,0 +1,5 @@
+<template>
+  <div></div>
+</template>
+
+<script setup></script>
\ No newline at end of file