Island rhythms/task visualizer

backend/actions/Task/getTasks.js

@@ -0,0 +1,38 @@
+'use strict';
+
+const Archetype = require('archetype');
+
+const GetTasksParams = new Archetype({
+    start: {
+        $type: Date
+    },
+    end: {
+        $type: Date
+    },
+    status: {
+        $type: 'string'
+    }
+}).compile('GetTasksParams');
+
+module.exports = ({ db }) => async function getTasks(params) {
+  params = new GetTasksParams(params);
+  const { start, end, status } = params;
+  const { Task } = db.models;
+
+  const filter = {};
+
+  if (start && end) {
+    filter.scheduledAt = { $gte: start, $lte: end };
+  } else if (start) {
+    filter.scheduledAt = { $gte: start }
+  }
+  if (status) {
+    filter.status = status;
+  }
+
+  const tasks = await Task.find(filter);
+
+  return {
+    tasks
+  };
+};

backend/actions/Task/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+exports.getTasks = require('./getTasks')

backend/actions/index.js

@@ -6,3 +6,4 @@
 exports.Model = require('./Model');
 exports.Script = require('./Script');
 exports.status = require('./status');
+exports.Task = require('./Task')

frontend/src/api.js

@@ -127,6 +127,11 @@
       return client.post('', { action: 'Model.updateDocuments', ...params }).then(res => res.data);
     }
   };
+  exports.Task = {
+    getTasks: function getTasks(params) {
+      return client.post('', { action: 'Task.getTasks', ...params}).then(res => res.data)
+    }
+  }
 } else {
   exports.status = function status() {
     return client.get('/status').then(res => res.data);
@@ -229,4 +234,9 @@
       return client.post('/Model/updateDocuments', params).then(res => res.data);
     }
   };
+  exports.Task = {
+    getTasks: function getTasks(params) {
+      return client.post('/Task/getTasks', params).then(res => res.data);
+    }
+  }
 }

frontend/src/index.js

@@ -126,7 +126,7 @@ app.component('app-component', {
   }
 });
 
-const { routes } = require('./routes');
+const { routes, hasAccess } = require('./routes');
 const router = VueRouter.createRouter({
   history: VueRouter.createWebHashHistory(),
   routes: routes.map(route => ({
@@ -136,6 +136,37 @@ const router = VueRouter.createRouter({
   }))
 });
 
+// Add global navigation guard
+router.beforeEach((to, from, next) => {
+  // Skip auth check for authorized (public) routes
+  if (to.meta.authorized) {
+    next();
+    return;
+  }
+
+  // Get roles from the app state
+  const roles = window.state?.roles;
+
+  // Check if user has access to the route
+  if (!hasAccess(roles, to.name)) {
+    // Find all routes the user has access to
+    const allowedRoutes = routes.filter(route => hasAccess(roles, route.name));
+
+    // If user has no allowed routes, redirect to splash/login
+    if (allowedRoutes.length === 0) {
+      next({ name: 'root' });
+      return;
+    }
+
+    // Redirect to first allowed route
+    const firstAllowedRoute = allowedRoutes[0].name;
+    next({ name: firstAllowedRoute });
+    return;
+  }
+
+  next();
+});
+
 app.use(router);
 
 app.mount('#content');

frontend/src/navbar/navbar.html

@@ -21,6 +21,10 @@
         href="#/chat"
         class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
         :class="chatView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Chat</a>
+      <a
+      :href="hasTasks"
+      class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
+      :class="dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Tasks</a>
 
       <div class="h-full flex items-center" v-if="!user && hasAPIKey">
         <button

frontend/src/navbar/navbar.js

@@ -66,6 +66,15 @@
     },
     defaultRoute() {
       return this.allowedRoutes[0]?.name || 'dashboards';
+    },
+    hasTasks() {
+      // fix this when done
+      try {
+        require.resolve('@mongoosejs/task');
+        return `#/tasks`
+      } catch (e) {
+        return `https://www.npmjs.com/package/@mongoosejs/task`
+      }
     }
   },
   methods: {

frontend/src/routes.js

@@ -11,9 +11,16 @@ const roleAccess = {
 
 // Helper function to check if a role has access to a route
 function hasAccess(roles, routeName) {
-  // change to true for local development
-  if (!roles) return false;
-  return roles.some(role => roleAccess[role]?.includes(routeName));
+  // If no roles are provided, deny access
+  if (!roles || !Array.isArray(roles)) return false;
+
+  // Check if any of the user's roles grant access to this route
+  return roles.some(role => {
+    // If the role doesn't exist in roleAccess, deny access
+    if (!roleAccess[role]) return false;
+    // Check if the role has access to this route
+    return roleAccess[role].includes(routeName);
+  });
 }
 
 module.exports = {
@@ -31,37 +38,45 @@ module.exports = {
       name: 'model',
       component: 'models',
       meta: {
-        authorized: true
+        authorized: false
       }
     },
     {
       path: '/model/:model/document/:documentId',
       name: 'document',
       component: 'document',
       meta: {
-        authorized: true
+        authorized: false
       }
     },
     {
       path: '/dashboards',
       name: 'dashboards',
       component: 'dashboards',
       meta: {
-        authorized: true
+        authorized: false
       }
     },
     {
       path: '/dashboard/:dashboardId',
       name: 'dashboard',
       component: 'dashboard',
       meta: {
-        authorized: true
+        authorized: false
       }
     },
     {
       path: '/team',
       name: 'team',
       component: 'team',
+      meta: {
+        authorized: false
+      }
+    },
+    {
+      path: '/tasks',
+      name: 'tasks',
+      component: 'tasks',
       meta: {
         authorized: true
       }

frontend/src/tasks/tasks.html

@@ -0,0 +1,63 @@
+<div class="p-4 space-y-6">
+    <h1 class="text-2xl font-bold text-gray-700">Task Overview</h1>
+    <!-- Task List -->
+    <div class="bg-white p-4 rounded-lg shadow">
+        <div class="mb-4">
+            <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Date:</label>
+            <select v-model="selectedRange" @change="updateDateRange" class="border-gray-300 rounded-md shadow-sm w-full p-2">
+                <option v-for="option in dateFilters" :key="option.value" :value="option.value">
+                {{ option.label }}
+                </option>
+            </select>
+        </div>
+        <div class="mb-4">
+            <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Status:</label>
+            <select v-model="selectedStatus" @change="getTasks" class="border-gray-300 rounded-md shadow-sm w-full p-2">
+                <option v-for="option in statusFilters" :key="option.value" :value="option.value">
+                {{ option.label }}
+                </option>
+            </select>
+        </div>
+        <div class="mb-6">
+            <button
+              @click="resetFilters"
+              class="w-full bg-gray-200 text-gray-700 hover:bg-gray-300 font-medium py-2 px-4 rounded-md transition"
+            >
+              Reset Filters
+            </button>
+        </div>
+          <!-- Summary Section -->
+        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+            <div class="bg-yellow-100 text-yellow-800 p-4 rounded-lg shadow">
+                <div class="text-sm">Scheduled</div>
+                <div class="text-2xl font-bold">{{pendingCount}}</div>
+            </div>
+            <div class="bg-green-100 text-green-800 p-4 rounded-lg shadow">
+                <div class="text-sm">Completed</div>
+                <div class="text-2xl font-bold">{{succeededCount}}</div>
+            </div>
+            <div class="bg-red-100 text-red-800 p-4 rounded-lg shadow">
+                <div class="text-sm">Failed</div>
+                <div class="text-2xl font-bold">{{failedCount}}</div>
+            </div>
+            <div class="bg-blue-100 text-blue-800 p-4 rounded-lg shadow">
+                <div class="text-sm">Cancelled</div>
+                <div class="text-2xl font-bold">{{cancelledCount}}</div>
+            </div>
+        </div>
+        <ul class="divide-y divide-gray-200">
+            <li v-for="task in tasks" :key="task.id" class="py-3 flex items-center justify-between">
+                <div>
+                    <div class="font-medium">{{ task.name }}</div>
+                    <div class="text-sm text-gray-500">{{ new Date(task.scheduledAt).toLocaleString() }}</div>
+                </div>
+                <span
+                    class="text-xs px-2 py-1 rounded-full font-medium"
+                    :class="getStatusColor(task.status)"
+                >
+                    {{ task.status }}
+                </span>
+            </li>
+        </ul>
+    </div>
+</div>