Fix#968/users page

package.json

@@ -26,6 +26,7 @@
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@gtm-support/vue-gtm": "^2.0.0",
     "@vuestic/tailwind": "^0.1.3",
+    "@vueuse/core": "^10.6.1",
     "axios": "^1.6.1",
     "chart.js": "^3.8.0",
     "epic-spinners": "^2.0.0",

src/components/sidebar/NavigationRoutes.ts

@@ -229,6 +229,10 @@ export default {
           name: 'pricing-plans',
           displayName: 'menu.pricing-plans',
         },
+        {
+          name: 'users',
+          displayName: 'menu.users',
+        },
         {
           name: 'billing',
           displayName: 'menu.billing',

src/components/va-charts/VaChart.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- @vue-ignore -->
-  <component :is="chartComponent" ref="chart" :chart-data="data" :chart-options="chartOptions" class="va-chart" />
+  <Component :is="chartComponent" ref="chart" :chart-data="data" :chart-options="chartOptions" class="va-chart" />
 </template>
 
 <script lang="ts" setup>

src/data/pages/projects-db.json

@@ -0,0 +1,72 @@
+[
+  {
+    "project_name": "A Vuestic",
+    "project_owner": 13,
+    "team": [13, 5, 28, 14, 17, 28, 23, 11, 16, 19, 12, 28, 11],
+    "status": "WIP",
+    "creation_date": "20 Nov 2023"
+  },
+  {
+    "project_name": "Mood board",
+    "project_owner": 28,
+    "team": [28, 10, 12, 28, 14, 27, 5, 4, 8, 23, 19, 18, 24, 11, 18, 12, 28],
+    "status": "important",
+    "creation_date": "16 Oct 2023"
+  },
+  {
+    "project_name": "J Jenkins",
+    "project_owner": 3,
+    "team": [3, 21, 7, 19, 4, 4, 7, 24],
+    "status": "important",
+    "creation_date": "1 Oct 2023"
+  },
+  {
+    "project_name": "S Springfield media",
+    "project_owner": 17,
+    "team": [17, 25, 21, 9, 18, 12, 15, 0, 7, 2, 7],
+    "status": "important",
+    "creation_date": "19 Sept 2023"
+  },
+  {
+    "project_name": "G Galileo",
+    "project_owner": 7,
+    "team": [7, 1, 28, 19, 3],
+    "status": "completed",
+    "creation_date": "23 Sept 2023"
+  },
+  {
+    "project_name": "O Website Redesign",
+    "project_owner": 24,
+    "team": [24, 19, 1, 8, 9],
+    "status": "completed",
+    "creation_date": "9 Sept 2023"
+  },
+  {
+    "project_name": "U Website Redesign",
+    "project_owner": 15,
+    "team": [15, 16, 8, 6, 11, 21, 3, 20],
+    "status": "archived",
+    "creation_date": "17 Aug 2023"
+  },
+  {
+    "project_name": "L Complete Product Redesign",
+    "project_owner": 25,
+    "team": [25, 18, 24, 13, 5, 3, 4, 16, 25, 12, 18, 9, 22],
+    "status": "completed",
+    "creation_date": "11 Aug 2023"
+  },
+  {
+    "project_name": "Design Team Project",
+    "project_owner": 17,
+    "team": [17, 6, 21, 17, 7, 6, 14, 13, 27, 7, 20],
+    "status": "archived",
+    "creation_date": "9 Aug 2023"
+  },
+  {
+    "project_name": "R Regular logistics",
+    "project_owner": 3,
+    "team": [3, 26, 8, 15, 21, 23, 18, 11, 22, 6, 20, 9],
+    "status": "archived",
+    "creation_date": "2 Aug 2023"
+  }
+]

src/data/pages/users-db.json

@@ -0,0 +1,292 @@
+[
+  {
+    "id": 1,
+    "fullname": "Patrik Radkow",
+    "email": "[email protected]",
+    "username": "magicpan",
+    "role": "user",
+    "avatar": "",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 2,
+    "fullname": "Martin Hoff",
+    "email": "[email protected]",
+    "username": "admin",
+    "role": "admin",
+    "avatar": "😍",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 3,
+    "fullname": "Liz Macintosh",
+    "email": "[email protected]",
+    "username": "ebrown",
+    "role": "user",
+    "avatar": "https://randomuser.me/api/portraits/men/1.jpg",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 4,
+    "fullname": "M2",
+    "email": "[email protected]",
+    "username": "mrm",
+    "role": "owner",
+    "avatar": "",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 5,
+    "fullname": "Kevin Smith",
+    "email": "[email protected]",
+    "username": "kevin13",
+    "role": "user",
+    "avatar": "https://randomuser.me/api/portraits/men/2.jpg",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 6,
+    "fullname": "Martin Hoff",
+    "email": "[email protected]",
+    "username": "martin3",
+    "role": "user",
+    "avatar": "https://randomuser.me/api/portraits/men/3.jpg",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 7,
+    "fullname": "John Doe",
+    "email": "[email protected]",
+    "username": "john",
+    "role": "user",
+    "avatar": "",
+    "active": true,
+    "notes": ""
+  },
+  {
+    "id": 8,
+    "fullname": "Maksim Nedo",
+    "email": "[email protected]",
+    "username": "maksim",
+    "role": "admin",
+    "avatar": "https://avatars.githubusercontent.com/u/23530004?v=4",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 9,
+    "fullname": "Dmitry Kuzmenko",
+    "email": "[email protected]",
+    "username": "dd",
+    "role": "user",
+    "avatar": "",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 10,
+    "fullname": "Rayan Gosling",
+    "email": "[email protected]",
+    "username": "rayan",
+    "role": "user",
+    "avatar": "",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 11,
+    "active": true,
+    "fullname": "Laura Smith",
+    "email": "[email protected]",
+    "username": "bbb",
+    "role": "user",
+    "avatar": "",
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 12,
+    "active": true,
+    "fullname": "Ted Mosby",
+    "email": "[email protected]",
+    "username": "gamer777",
+    "role": "user",
+    "avatar": "😭",
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 13,
+    "active": true,
+    "fullname": "Forrest Schmidt Jr.",
+    "email": "[email protected]",
+    "username": "Clementine72",
+    "role": "user",
+    "avatar": "https://randomuser.me/api/portraits/men/4.jpg",
+    "notes": "sed asperiores sed"
+  },
+  {
+    "id": 14,
+    "active": true,
+    "fullname": "Emilio Bruen",
+    "email": "[email protected]",
+    "username": "Madalyn_Brekke55",
+    "role": "user",
+    "avatar": "https://randomuser.me/api/portraits/men/5.jpg",
+    "notes": "architecto amet deleniti"
+  },
+  {
+    "id": 15,
+    "active": false,
+    "fullname": "Jenny Heathcote",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Vivienne98",
+    "avatar": "https://randomuser.me/api/portraits/men/6.jpg",
+    "notes": "provident ipsam recusandae"
+  },
+  {
+    "id": 16,
+    "active": true,
+    "fullname": "Sonya Cummerata III",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Norwood79",
+    "avatar": "https://randomuser.me/api/portraits/men/7.jpg",
+    "notes": "aut quaerat totam"
+  },
+  {
+    "id": 17,
+    "active": true,
+    "fullname": "Ruben Mitchell",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Dariana_Schulist",
+    "avatar": "https://randomuser.me/api/portraits/men/8.jpg",
+    "notes": "minima harum ut"
+  },
+  {
+    "id": 18,
+    "active": true,
+    "fullname": "Blake Hudson I",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Crystal.Brakus29",
+    "avatar": "https://randomuser.me/api/portraits/men/9.jpg",
+    "notes": "sint culpa voluptatem"
+  },
+  {
+    "id": 19,
+    "active": true,
+    "fullname": "Alison Mueller",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Cordie.Grant",
+    "avatar": "https://randomuser.me/api/portraits/men/10.jpg",
+    "notes": "officia autem aliquam"
+  },
+  {
+    "id": 20,
+    "active": false,
+    "fullname": "Miss Angelina Jenkins",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Peggie.Runolfsdottir",
+    "avatar": "https://randomuser.me/api/portraits/men/11.jpg",
+    "notes": "rerum rerum rerum"
+  },
+  {
+    "id": 21,
+    "active": true,
+    "fullname": "Mack Boyle",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Phoebe67",
+    "avatar": "https://randomuser.me/api/portraits/men/12.jpg",
+    "notes": "voluptatibus et soluta"
+  },
+  {
+    "id": 21,
+    "active": true,
+    "fullname": "Raymond Simonis",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Percy37",
+    "avatar": "https://randomuser.me/api/portraits/men/13.jpg",
+    "notes": "aut id molestiae"
+  },
+  {
+    "id": 22,
+    "active": true,
+    "fullname": "Janice Sporer",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Kali84",
+    "avatar": "https://randomuser.me/api/portraits/men/14.jpg",
+    "notes": "magnam eum aliquam"
+  },
+  {
+    "id": 23,
+    "active": true,
+    "fullname": "Francis Schowalter",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Robyn.Kris",
+    "avatar": "https://randomuser.me/api/portraits/men/0.jpg",
+    "notes": "similique architecto in"
+  },
+  {
+    "id": 24,
+    "active": true,
+    "fullname": "Emilio Hoppe",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Clemmie.Kutch",
+    "avatar": "https://randomuser.me/api/portraits/men/16.jpg",
+    "notes": "rerum quae dolorem"
+  },
+  {
+    "id": 25,
+    "active": true,
+    "fullname": "Janice Harber",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Neal70",
+    "avatar": "https://randomuser.me/api/portraits/men/17.jpg",
+    "notes": "iure dolor provident"
+  },
+  {
+    "id": 26,
+    "fullname": "Evelyn Morar",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Neal_Thompson84",
+    "active": true,
+    "avatar": "https://randomuser.me/api/portraits/men/18.jpg",
+    "notes": "quae eos placeat"
+  },
+  {
+    "id": 27,
+    "fullname": "Antoinette Schneider",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Esta.Hickle",
+    "active": true,
+    "avatar": "https://randomuser.me/api/portraits/men/19.jpg",
+    "notes": "qui cumque unde"
+  },
+  {
+    "id": 28,
+    "fullname": "Ebony Daniel",
+    "email": "[email protected]",
+    "role": "user",
+    "username": "Jade.Kuhlman90",
+    "active": true,
+    "avatar": "https://randomuser.me/api/portraits/men/20.jpg",
+    "notes": "exercitationem velit consectetur"
+  }
+]