add static code analysis

pkgs/ui/.eslintrc.json

@@ -1,3 +1,4 @@
 {
-  "extends": "next/core-web-vitals"
+  "root": true,
+  "extends": ["next/core-web-vitals", "plugin:tailwindcss/recommended"]
 }

pkgs/ui/nix/foverrides.nix

@@ -62,6 +62,9 @@ in
       built.override.preBuild = ''
         export HOME=./home
         ln -s ${pkgs.roboto}/share/fonts ./src/fonts
+
+        echo "----------- RUNNING LINT ------------"
+        next lint --max-warnings 0
       '';
 
       built.tree =

pkgs/ui/nix/pdefs.nix

@@ -4706,6 +4706,35 @@
           version = "5.0.0-canary-7118f5dd7-20230705";
         };
       };
+      eslint-plugin-tailwindcss = {
+        "3.13.0" = {
+          depInfo = {
+            fast-glob = {
+              descriptor = "^3.2.5";
+              pin = "3.3.1";
+              runtime = true;
+            };
+            postcss = {
+              descriptor = "^8.4.4";
+              pin = "8.4.27";
+              runtime = true;
+            };
+          };
+          fetchInfo = {
+            narHash = "sha256-rWd+p9Sa4jcjEo886w2NAIy5AYjccC2pQXuGyPKtGw0=";
+            type = "tarball";
+            url = "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.13.0.tgz";
+          };
+          ident = "eslint-plugin-tailwindcss";
+          ltype = "file";
+          peerInfo = {
+            tailwindcss = {
+              descriptor = "^3.3.2";
+            };
+          };
+          version = "3.13.0";
+        };
+      };
       eslint-scope = {
         "7.2.2" = {
           depInfo = {
@@ -6686,6 +6715,10 @@
               descriptor = "13.4.12";
               pin = "13.4.12";
             };
+            eslint-plugin-tailwindcss = {
+              descriptor = "^3.13.0";
+              pin = "3.13.0";
+            };
             hex-rgb = {
               descriptor = "^5.0.0";
               pin = "5.0.0";
@@ -7428,6 +7461,10 @@
               dev = true;
               key = "semver/6.3.1";
             };
+            "node_modules/eslint-plugin-tailwindcss" = {
+              dev = true;
+              key = "eslint-plugin-tailwindcss/3.13.0";
+            };
             "node_modules/eslint-scope" = {
               dev = true;
               key = "eslint-scope/7.2.2";

pkgs/ui/package-lock.json

@@ -31,6 +31,7 @@
         "@types/w3c-web-usb": "^1.0.6",
         "eslint": "8.46.0",
         "eslint-config-next": "13.4.12",
+        "eslint-plugin-tailwindcss": "^3.13.0",
         "prettier": "^3.0.1",
         "prettier-plugin-tailwindcss": "^0.4.1",
         "typescript": "5.1.6"
@@ -2469,6 +2470,22 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/eslint-plugin-tailwindcss": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.13.0.tgz",
+      "integrity": "sha512-Fcep4KDRLWaK3KmkQbdyKHG0P4GdXFmXdDaweTIPcgOP60OOuWFbh1++dufRT28Q4zpKTKaHwTsXPJ4O/EjU2Q==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.5",
+        "postcss": "^8.4.4"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.3.2"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",

pkgs/ui/package.json

@@ -29,14 +29,15 @@
     "tailwindcss": "3.3.3"
   },
   "devDependencies": {
-    "typescript": "5.1.6",
-    "eslint": "8.46.0",
-    "eslint-config-next": "13.4.12",
     "@types/node": "20.4.7",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "@types/w3c-web-usb": "^1.0.6",
+    "eslint": "8.46.0",
+    "eslint-config-next": "13.4.12",
+    "eslint-plugin-tailwindcss": "^3.13.0",
     "prettier": "^3.0.1",
-    "prettier-plugin-tailwindcss": "^0.4.1"
+    "prettier-plugin-tailwindcss": "^0.4.1",
+    "typescript": "5.1.6"
   }
 }

pkgs/ui/src/app/layout.tsx

@@ -88,7 +88,7 @@ export default function RootLayout({
                   !showSidebar && translate
                 } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
               >
-                <div className="min-h-10 static top-0 mb-2 py-2">
+                <div className="static top-0 mb-2 py-2">
                   <div className="grid grid-cols-3">
                     <div className="col-span-1">
                       <IconButton

pkgs/ui/src/app/nodes/NodeList.tsx

@@ -235,7 +235,7 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
       { name: "Offline", value: offline, color: theme.palette.error.main },
       { name: "Pending", value: pending, color: theme.palette.warning.main },
     ];
-  }, [tableData]);
+  }, [tableData, theme]);
 
   const cardData = React.useMemo(() => {
     return pieData

pkgs/ui/src/app/page.tsx

@@ -12,9 +12,11 @@ interface DashboardCardProps {
   sx?: string;
 }
 const DashboardCard = (props: DashboardCardProps) => {
-  const { children, rowSpan = 1, sx = "" } = props;
+  const { children, rowSpan, sx = "" } = props;
   return (
-    <div className={tw`col-span-full row-span-${rowSpan} xl:col-span-1 ${sx}`}>
+    <div
+      className={tw`col-span-full row-span-${rowSpan || 1} xl:col-span-1 ${sx}`}
+    >
       {children}
     </div>
   );
@@ -30,28 +32,10 @@ const DashboardPanel = (props: DashboardPanelProps) => {
   );
 };
 
-interface SplitDashboardCardProps {
-  children?: React.ReactNode[];
-}
-const SplitDashboardCard = (props: SplitDashboardCardProps) => {
-  const { children } = props;
-  return (
-    <div className="col-span-full row-span-1 lg:col-span-1">
-      <div className="grid h-full grid-cols-1 gap-4">
-        {children?.map((row, idx) => (
-          <div key={idx} className="col-span-full row-span-1  ">
-            {row}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
 export default function Dashboard() {
   return (
     <div className="flex h-screen w-full">
-      <div className="grid w-full auto-cols-min grid-flow-row auto-rows-min grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
+      <div className="grid w-full auto-rows-max grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
         <DashboardCard rowSpan={2}>
           <NetworkOverview />
         </DashboardCard>

pkgs/ui/src/components/dashboard/appOverview/index.tsx

@@ -18,7 +18,7 @@ const AppCard = (props: AppCardProps) => {
        align-middle shadow-md ring-2 ring-inset ring-violet-500 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-300"
     >
       <div className="flex w-full flex-col justify-center">
-        <div className="h-22 w-22 my-1 flex items-center justify-center self-center overflow-visible p-1">
+        <div className="my-1 flex h-[22] w-[22] items-center justify-center self-center overflow-visible p-1">
           <Image
             src={iconPath}
             alt={`${name}-app-icon`}

pkgs/ui/src/components/noDataOverlay/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable tailwindcss/no-custom-classname */
 "use client";
 
 import * as React from "react";

pkgs/ui/src/components/sidebar/index.tsx

@@ -78,7 +78,7 @@ export function Sidebar(props: SidebarProps) {
         show ? showSidebar : hideSidebar
       } z-9999 dark:bg-boxdark static  left-0 top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-zinc-950 transition duration-150 ease-in-out lg:w-64`}
     >
-      <div className="py-5.5 lg:py-6.5 flex items-center justify-between gap-2 overflow-hidden px-0 lg:px-6">
+      <div className="flex items-center justify-between gap-2 overflow-hidden px-0 py-5 lg:p-6">
         <div className="mt-8 hidden w-full text-center font-semibold text-white lg:block">
           <Image
             src="/logo.svg"
@@ -132,15 +132,15 @@ export function Sidebar(props: SidebarProps) {
         </List>
 
         <Divider flexItem className="mx-8 my-10 hidden bg-zinc-600 lg:block" />
-        <div className="max-w-60 shadow-default mx-auto mb-8 hidden w-full rounded-sm px-4 py-6 text-center align-bottom lg:block">
+        <div className="mx-auto mb-8 hidden w-full max-w-xs rounded-sm px-4 py-6 text-center align-bottom shadow-sm lg:block">
-          <h3 className="mb-1 w-full font-semibold text-white">
+          <h3 className="mb-2 w-full font-semibold text-white">
             Clan.lol Admin
           </h3>
           <a
             href=""
             target="_blank"
             rel="nofollow"
-            className="bg-primary w-full rounded-md p-2 text-center text-white hover:bg-opacity-95"
+            className="inline-block w-full rounded-md p-2 text-center text-white hover:text-violet-400/95"
           >
             Donate
           </a>