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:
@@ -431,4 +435,4 @@ router.get('/:id', wrapAsync(async (req, res) => {
 
 router.use('/', require('../helpers').commonErrorHandler);
 
-module.exports = router;
+module.exports = router;

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'
@@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
   }
 
   return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
-}
+}

frontend/src/layouts/Authenticated.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
-import { useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -126,4 +125,4 @@ export default function LayoutAuthenticated({
       </div>
     </div>
   )
-}
+}

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: '' },
@@ -72,6 +74,17 @@ 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));
@@ -79,6 +92,7 @@ const Dashboard = () => {
     React.useEffect(() => {
         if (!currentUser) return;
         loadData().then();
+        loadTaskStats().then();
         setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
     }, [currentUser]);
 
@@ -142,6 +156,46 @@ const Dashboard = () => {
         </div>
 
         {!!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'>
         
@@ -465,4 +519,4 @@ Dashboard.getLayout = function getLayout(page: ReactElement) {
   return <LayoutAuthenticated>{page}</LayoutAuthenticated>
 }
 
-export default Dashboard
+export default Dashboard