Auto commit: 2026-02-08T20:35:16.167Z

backend/src/db/api/tasks.js

@@ -1,4 +1,3 @@
-
 const db = require('../models');
 const FileDBApi = require('./file');
 const crypto = require('crypto');
@@ -566,6 +565,36 @@ module.exports = class TasksDBApi {
         }));
     }
 
+    static async getStats(options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const total = await db.tasks.count({
+            transaction,
+        });
+
+        const pending = await db.tasks.count({
+            where: { status: 'pending' },
+            transaction,
+        });
+
+        const in_progress = await db.tasks.count({
+            where: { status: 'in_progress' },
+            transaction,
+        });
+
+        const completed = await db.tasks.count({
+            where: { status: 'completed' },
+            transaction,
+        });
+
+        return {
+            total,
+            pending,
+            in_progress,
+            completed,
+        };
+    }
+
     
 };
-

backend/src/routes/tasks.js

@@ -1,4 +1,3 @@
-
 const express = require('express');
 
 const TasksService = require('../services/tasks');
@@ -350,6 +349,11 @@ router.get('/count', wrapAsync(async (req, res) => {
     res.status(200).send(payload);
 }));
 
+router.get('/stats', wrapAsync(async (req, res) => {
+  const payload = await TasksService.getStats(req.currentUser);
+  res.status(200).send(payload);
+}));
+
 /**
  *  @swagger
  *  /api/tasks/autocomplete:

backend/src/services/tasks.js

@@ -132,7 +132,9 @@ module.exports = class TasksService {
     }
   }
 
+  static async getStats(currentUser) {
+    return await TasksDBApi.getStats({ currentUser });
+  }
+
   
 };
-
-

frontend/src/components/NavBarItem.tsx

@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'

frontend/src/layouts/Authenticated.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'

frontend/src/pages/dashboard.tsx

@@ -37,6 +37,8 @@ const Dashboard = () => {
     const [task_exports, setTask_exports] = React.useState(loadingMessage);
     const [audit_events, setAudit_events] = React.useState(loadingMessage);
 
+    const [taskStats, setTaskStats] = React.useState({ total: 0, pending: 0, in_progress: 0, completed: 0 });
+
     
     const [widgetsRole, setWidgetsRole] = React.useState({
         role: { value: '', label: '' },
@@ -73,12 +75,24 @@ const Dashboard = () => {
         });
     }
 
+    async function loadTaskStats() {
+        if (hasPermission(currentUser, 'READ_TASKS')) {
+            try {
+                const response = await axios.get('/tasks/stats');
+                setTaskStats(response.data);
+            } catch (error) {
+                console.error('Error fetching task stats:', error);
+            }
+        }
+    }
+  
     async function getWidgets(roleId) {
         await dispatch(fetchWidgets(roleId));
     }
     React.useEffect(() => {
         if (!currentUser) return;
         loadData().then();
+        loadTaskStats().then();
         setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
     }, [currentUser]);
 
@@ -143,6 +157,46 @@ const Dashboard = () => {
 
         {!!rolesWidgets.length && <hr className='my-6 text-midnightBlueTheme-mainBG  ' />}
 
+        <div className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
+            {hasPermission(currentUser, 'READ_TASKS') && (
+                <>
+                    <Link href={'/tasks/tasks-list'}>
+                        <div className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} border-l-4 border-blue-500 dark:border-dark-700 p-6`}>
+                            <div className="flex justify-between align-center">
+                                <div>
+                                    <div className="text-lg leading-tight text-gray-500 dark:text-gray-400">Total Tasks</div>
+                                    <div className="text-3xl leading-tight font-semibold">{taskStats.total}</div>
+                                </div>
+                                <BaseIcon className="text-blue-500" w="w-16" h="h-16" size={48} path={icon.mdiClipboardTextOutline} />
+                            </div>
+                        </div>
+                    </Link>
+                    <Link href={'/tasks/tasks-list'}>
+                        <div className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} border-l-4 border-orange-500 dark:border-dark-700 p-6`}>
+                            <div className="flex justify-between align-center">
+                                <div>
+                                    <div className="text-lg leading-tight text-gray-500 dark:text-gray-400">Pending</div>
+                                    <div className="text-3xl leading-tight font-semibold">{taskStats.pending}</div>
+                                </div>
+                                <BaseIcon className="text-orange-500" w="w-16" h="h-16" size={48} path={icon.mdiClockOutline} />
+                            </div>
+                        </div>
+                    </Link>
+                    <Link href={'/tasks/tasks-list'}>
+                        <div className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} border-l-4 border-green-500 dark:border-dark-700 p-6`}>
+                            <div className="flex justify-between align-center">
+                                <div>
+                                    <div className="text-lg leading-tight text-gray-500 dark:text-gray-400">Completed</div>
+                                    <div className="text-3xl leading-tight font-semibold">{taskStats.completed}</div>
+                                </div>
+                                <BaseIcon className="text-green-500" w="w-16" h="h-16" size={48} path={icon.mdiCheckCircleOutline} />
+                            </div>
+                        </div>
+                    </Link>
+                </>
+            )}
+        </div>
+        
         <div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>