Fix widget rendering error

santiagolizardo · santiagolizardo · commit 36f86b70832d · 2026-01-02T14:50:21.000Z
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,15 +3,15 @@
   "type": "module",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^7.1.0",
-    "@tanstack/react-query": "^5.90.15",
+    "@tanstack/react-query": "^5.90.16",
     "@uiw/react-md-editor": "^4.0.11",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "bulma": "^1.0.4",
     "countries-and-timezones": "^3.8.0",
     "cronstrue": "^3.9.0",
     "friendly-mimes": "^3.0.1",
-    "globals": "^16.5.0",
+    "globals": "^17.0.0",
     "http-status-codes": "^2.3.0",
     "i18next": "^25.7.3",
     "i18next-browser-languagedetector": "^8.2.0",
@@ -21,7 +21,7 @@
     "react-dom": "^19.2.3",
     "react-dropzone": "^14.3.8",
     "react-hot-toast": "^2.6.0",
-    "react-i18next": "^16.5.0",
+    "react-i18next": "^16.5.1",
     "react-markdown": "^10.1.0",
     "react-router": "^7.11.0",
     "react-router-dom": "^7.11.0",
@@ -57,7 +57,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "husky": "^9.1.7",
     "jsdom": "^27.4.0",
-    "knip": "^5.78.0",
+    "knip": "^5.79.0",
     "lint-staged": "^16.2.7",
     "npm-check-updates": "^19.2.0",
     "prettier": "^3.7.4",
diff --git a/src/api/auditlog.ts b/src/api/auditlog.ts
@@ -10,7 +10,7 @@ const useAuditLogQuery = (params: any) => {
 
 const useAuditLogStatsQuery = () => {
     return useQuery({
-        queryKey: ["audit-log"],
+        queryKey: ["audit-log", "stats"],
         queryFn: () => requestAuditLogStats().then((res) => res.json()),
     });
 };
diff --git a/src/api/requests/auditlog.ts b/src/api/requests/auditlog.ts
@@ -1,4 +1,3 @@
-import secureApiFetch from "services/api.js";
 import { requestEntities } from "utilities/requests.js";
 
 const API_BASE_URL = "/auditlog";
@@ -8,7 +7,7 @@ const requestAuditLog = async (params: any) => {
 };
 
 const requestAuditLogStats = () => {
-    return secureApiFetch(`${API_BASE_URL}/stats`, { method: "GET" });
+    return requestEntities(`${API_BASE_URL}/stats`);
 };
 
 export { requestAuditLog, requestAuditLogStats };
diff --git a/src/components/clients/Details.jsx b/src/components/clients/Details.jsx
@@ -234,7 +234,7 @@ const ClientDetails = () => {
                                             <table className="table">
                                                 <thead>
                                                     <tr>
-                                                        <th>Kind</th>
+                                                        <th>Type</th>
                                                         <th>Name</th>
                                                         <th>Role</th>
                                                         <th>Email</th>
diff --git a/src/components/commands/CommandDetailsPage.jsx b/src/components/commands/CommandDetailsPage.jsx
@@ -131,8 +131,7 @@ const CommandDetailsPage = () => {
                         )}
                         {1 === tabIndex && (
                             <div>
-                                <h3>Usages</h3>
-                                <Link to={`/commands/${command.id}/usages`}>Add usage</Link>{" "}
+                                <Link className="button is-success" to={`/commands/${command.id}/usages`}>Add usage</Link>{" "}
                                 {commandUsages !== null && (
                                     <>
                                         <table className="table is-fullwidth">
diff --git a/src/components/commands/ScheduledRuns.jsx b/src/components/commands/ScheduledRuns.jsx
@@ -32,7 +32,7 @@ const ScheduledRuns = ({ command, task = null }) => {
 
     return (
         <>
-            <NativeTable caption="Scheduled commands" rows={scheduledCommands} rowId={(scheduledCommand) => scheduledCommand.id} columns={columns} emptyRowsMessage="No scheduled commands available.">
+            <NativeTable rows={scheduledCommands} rowId={(scheduledCommand) => scheduledCommand.id} columns={columns} emptyRowsMessage="No scheduled commands available.">
             </NativeTable>
         </>
     );
diff --git a/src/components/layout/dashboard/widgets/RecentActivityWidget.jsx b/src/components/layout/dashboard/widgets/RecentActivityWidget.jsx
@@ -4,7 +4,7 @@ import UserLink from "components/users/Link";
 import DashboardWidget from "./Widget";
 
 const RecentActivityWidget = () => {
-    const { data: auditLog } = useAuditLogQuery({ limit: 5 });
+    const { data: auditLog } = useAuditLogQuery({ limit: 10 });
 
     return (
         <DashboardWidget title="Recent activity">
@@ -26,7 +26,7 @@ const RecentActivityWidget = () => {
                                 </td>
                                 <td>{log.object}</td>
                                 <td>
-                                    {log.user_name ? <UserLink userId={log.user_id}>{log.user_name}</UserLink> : "-"}
+                                    {log.createdBy?.fullName ? <UserLink userId={log.createdByUid}>{log.createdBy?.fullName}</UserLink> : "-"}
                                 </td>
                                 <td>{log.createdAt}</td>
                             </tr>
diff --git a/src/components/layout/dashboard/widgets/UserActivityStatsWidget.jsx b/src/components/layout/dashboard/widgets/UserActivityStatsWidget.jsx
@@ -9,9 +9,9 @@ const UserActivityStatsWidget = () => {
         <DashboardWidget title="User activity over time">
             {auditLogStats && auditLogStats.length > 0 ? (
                 <LineChart width={320} height={320} data={auditLogStats}>
-                    <Line type="monotone" dataKey="total" stroke="var(--color-accent-1)" />
                     <CartesianGrid />
-                    <XAxis dataKey="log_date" />
+                    <Line type="monotone" dataKey="total" />
+                    <XAxis dataKey="logDate" />
                     <YAxis dataKey="total" />
                 </LineChart>
             ) : (
diff --git a/src/components/projects/ProjectsListPage.jsx b/src/components/projects/ProjectsListPage.jsx
@@ -20,7 +20,7 @@ const ProjectsListPage = () => {
     const apiPageNumber = pageNumber - 1;
 
     const [statusFilter, setStatusFilter] = useState("active");
-    const { data: projects, isLoading } = useProjectsQuery({ limit: 10, status: statusFilter, page: apiPageNumber });
+    const { data: projects, isLoading } = useProjectsQuery({ isTemplate: false, limit: 10, status: statusFilter, page: apiPageNumber });
 
     const handleCreateProject = () => {
         navigate("/projects/create");
diff --git a/src/components/projects/Targets.jsx b/src/components/projects/Targets.jsx
@@ -6,12 +6,12 @@ import TargetBadge from "components/target/TargetBadge";
 import Tags from "components/ui/Tags";
 import CreateButton from "components/ui/buttons/Create";
 import DeleteIconButton from "components/ui/buttons/DeleteIconButton";
+import NativeTable from "components/ui/tables/NativeTable.jsx";
 import useBoolean from "hooks/useBoolean";
 import useQuery from "hooks/useQuery";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import Loading from "../ui/Loading";
-import NoResultsTableRow from "../ui/tables/NoResultsTableRow";
 
 const ProjectTargets = ({ project }) => {
     const query = useQuery();
@@ -42,6 +42,62 @@ const ProjectTargets = ({ project }) => {
         setPageNumber(pageNumber + 1);
     };
 
+    const columns = [
+        {
+            header: "Name",
+            cell: (target) => <>
+                {!target.parent_id && (
+                    <Link to={`/targets/${target.id}`}>
+                        <TargetBadge name={target.name} />
+                    </Link>
+                )}
+                {target.parent_id !== null && <>{target.parent?.name}</>}
+            </>
+        },
+        {
+            header: "Sub-target",
+            cell: (target) => (
+                <>
+                    {target.parent_id ? (
+                        <>
+                            <Link to={`/targets/${target.id}`}>
+                                <TargetBadge name={target.name} />
+                            </Link>
+                        </>
+                    ) : (
+                        "-"
+                    )}
+                </>
+            )
+        },
+        {
+            header: "Kind",
+            cell: (target) => (
+                <>
+                    {target.kind} <Tags values={target.tags} />
+                </>
+            )
+        },
+        {
+            header: "Vulnerable?",
+            cell: (target) => (
+                <>
+                    {target.num_vulnerabilities > 0
+                        ? `Yes (${target.num_vulnerabilities} vulnerabilities found)`
+                        : "No"}
+                </>
+            )
+        },
+        {
+            header: "",
+            cell: (target) => (
+                <RestrictedComponent roles={["administrator", "superuser", "user"]}>
+                    <DeleteIconButton onClick={(ev) => onDeleteButtonClick(ev, target.id)} />
+                </RestrictedComponent>
+            )
+        }
+    ]
+
     return (
         <section>
             <h4 className="title is-4">Assets</h4>
@@ -65,56 +121,8 @@ const ProjectTargets = ({ project }) => {
                             <PaginationV2 page={pageNumber - 1} total={targets.pageCount} onPageChange={onPageChange} />
                         </center>
                     )}
-                    <table className="table is-fullwidth">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Sub-target</th>
-                                <th>Kind</th>
-                                <th>Vulnerable?</th>
-                                <th>&nbsp;</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {targets.data.length === 0 && <NoResultsTableRow numColumns={4} />}
-                            {targets.data.map((target, index) => (
-                                <tr key={index}>
-                                    <td>
-                                        {!target.parent_id && (
-                                            <Link to={`/targets/${target.id}`}>
-                                                <TargetBadge name={target.name} />
-                                            </Link>
-                                        )}
-                                        {target.parent_id !== null && <>{target.parent?.name}</>}
-                                    </td>
-                                    <td>
-                                        {target.parent_id ? (
-                                            <>
-                                                <Link to={`/targets/${target.id}`}>
-                                                    <TargetBadge name={target.name} />
-                                                </Link>
-                                            </>
-                                        ) : (
-                                            "-"
-                                        )}
-                                    </td>
-                                    <td>
-                                        {target.kind} <Tags values={target.tags} />
-                                    </td>
-                                    <td>
-                                        {target.num_vulnerabilities > 0
-                                            ? `Yes (${target.num_vulnerabilities} vulnerabilities found)`
-                                            : "No"}
-                                    </td>
-                                    <td>
-                                        <RestrictedComponent roles={["administrator", "superuser", "user"]}>
-                                            <DeleteIconButton onClick={(ev) => onDeleteButtonClick(ev, target.id)} />
-                                        </RestrictedComponent>
-                                    </td>
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
+                    <NativeTable rows={targets.data} rowId={(target) => target.id} columns={columns}>
+                    </NativeTable>
                 </>
             )}
         </section>
diff --git a/src/components/projects/templates/List.jsx b/src/components/projects/templates/List.jsx
@@ -14,7 +14,7 @@ import { requestEntityPost } from "utilities/requests.js";
 
 const TemplatesList = () => {
     const navigate = useNavigate();
-    const { data: templates, isLoading } = useProjectsQuery({ isTemplate: 1 });
+    const { data: templates, isLoading } = useProjectsQuery({ isTemplate: true });
     const deleteProjectMutation = useDeleteProjectMutation();
 
     const cloneProject = (ev, templateId) => {
diff --git a/src/components/search/ProjectTemplatesSearchResults.jsx b/src/components/search/ProjectTemplatesSearchResults.jsx
@@ -10,9 +10,10 @@ const ProjectTemplatesSearchResults = ({ keywords, emptyResultsSetter: setEmptyR
         const reloadData = () => {
             requestEntities(`/projects?isTemplate=1&keywords=${keywords}`)
                 .then(resp => resp.json())
-                .then(projectTemplates => {
-                    setProjectTemplates(projectTemplates);
-                    setEmptyResults(emptyResults => 0 === projectTemplates.length ? emptyResults.concat('project_templates') : emptyResults.filter(value => value !== 'project_templates'));
+                .then(results => {
+                    const templates = results.data;
+                    setProjectTemplates(templates);
+                    setEmptyResults(emptyResults => 0 === templates.length ? emptyResults.concat('project_templates') : emptyResults.filter(value => value !== 'project_templates'));
                 })
         }
 
diff --git a/src/components/search/ProjectsSearchResults.jsx b/src/components/search/ProjectsSearchResults.jsx
@@ -10,7 +10,8 @@ const ProjectsSearchResults = ({ keywords, emptyResultsSetter: setEmptyResults }
         const reloadData = () => {
             requestEntities(`/projects?isTemplate=0&keywords=${keywords}`)
                 .then(resp => resp.json())
-                .then(projects => {
+                .then(results => {
+                    const projects = results.data;
                     setProjects(projects);
                     setEmptyResults(emptyResults => 0 === projects.length ? emptyResults.concat('projects') : emptyResults.filter(value => value !== 'projects'));
                 })
