refactor: remove pocketbase (#1138)

ui/src/views/DashboardView.vue

@@ -12,21 +12,22 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { ExternalLink } from 'lucide-vue-next'
 
 import { useQuery } from '@tanstack/vue-query'
-import { onMounted } from 'vue'
-import { useRouter } from 'vue-router'
 
-import { pb } from '@/lib/pocketbase'
+import { useAPI } from '@/api'
+import { useAuthStore } from '@/store/auth'
 
-const router = useRouter()
+const api = useAPI()
+const authStore = useAuthStore()
 
-const {
-  isPending,
-  isError,
-  data: dashboardCounts,
-  error
-} = useQuery({
+const { data: dashboardCounts } = useQuery({
   queryKey: ['dashboard_counts'],
-  queryFn: (): Promise<Array<any>> => pb.collection('dashboard_counts').getFullList()
+  queryFn: (): Promise<Array<any>> => {
+    if (authStore.hasPermission('ticket:read')) {
+      return api.getDashboardCounts()
+    }
+
+    return Promise.resolve([])
+  }
 })
 
 const count = (id: string) => {
@@ -37,19 +38,47 @@ const count = (id: string) => {
 
   return s[0].count
 }
-
-onMounted(() => {
-  if (!pb.authStore.model) {
-    router.push({ name: 'login' })
-  }
-})
 </script>
 
 <template>
   <TwoColumn>
-    <ColumnHeader title="Dashboard" />
+    <ColumnHeader title="Dashboard" show-sidebar-trigger />
     <ColumnBody>
+      <ColumnBodyContainer v-if="!authStore.hasPermission('ticket:read')" class="grid grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle> Catalyst</CardTitle>
+          </CardHeader>
+          <CardContent class="flex flex-1 flex-col gap-1">
+            <a
+              href="https://catalyst.security-brewery.com/docs/category/catalyst-handbook"
+              target="_blank"
+              class="flex items-center rounded border p-2 text-blue-500 hover:bg-accent"
+            >
+              Open Catalyst Handbook
+              <ExternalLink class="ml-2 h-4 w-4" />
+            </a>
+            <a
+              href="/_/"
+              target="_blank"
+              class="flex items-center rounded border p-2 text-blue-500 hover:bg-accent"
+            >
+              Open Admin Interface
+              <ExternalLink class="ml-2 h-4 w-4" />
+            </a>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Info</CardTitle>
+          </CardHeader>
+          <CardContent class="flex flex-1 flex-col gap-1">
+            No permission to read tickets, please contact your administrator.
+          </CardContent>
+        </Card>
+      </ColumnBodyContainer>
       <ColumnBodyContainer
+        v-else
         class="grid grid-cols-1 grid-rows-[100px_100px_100px_100px] md:grid-cols-2 md:grid-rows-[100px_100px] xl:grid-cols-4 xl:grid-rows-[100px]"
       >
         <Card>
@@ -115,7 +144,7 @@ onMounted(() => {
             <TicketOverTime />
           </CardContent>
         </Card>
-        <Card class="xl:col-span-2">
+        <Card class="md:col-span-2 xl:col-span-4">
           <CardHeader>
             <CardTitle>Your Open Tickets</CardTitle>
           </CardHeader>
@@ -123,7 +152,7 @@ onMounted(() => {
             <OpenTickets />
           </CardContent>
         </Card>
-        <Card class="xl:col-span-2">
+        <Card class="md:col-span-2 xl:col-span-4">
           <CardHeader>
             <CardTitle>Your Open Tasks</CardTitle>
           </CardHeader>