Inspector UI modification

app/client/src/components/DropdownMenu/DropdownMenu.tsx

@@ -15,19 +15,19 @@ const VARIANTS = {
   "danger": "text-red-500",
 }
 
-function DropdownMenu({position, items, show }:DropdownMenuProps) {
+function DropdownMenu({ position, items, show }: DropdownMenuProps) {
   return (
-    <div className={`transition-all absolute ${ POSITIONS[position] } bg-white shadow-md shadow-gray-400 rounded-xl px-3 py-2`} style={{ transform:`scale(${show?"1":"0"})`, zIndex:10000 }}>
+    <div className={`transition-all space-y-2 absolute ${POSITIONS[position]} bg-white shadow-md shadow-gray-400 rounded-xl px-3 py-2`} style={{ transform: `scale(${show ? "1" : "0"})`, zIndex: 10000 }}>
       {
         items.map((item, index) => {
           return (
-            <p key={'dditemmenu'+index} onClick={()=>item.action()} className={`cursor-pointer font-normal ${item.variant?VARIANTS[item.variant]:"text-gray-500"}`}>{ item.label }</p>
+            <p key={'dditemmenu' + index} onClick={() => item.action()} className={`cursor-pointer font-normal ${item.variant ? VARIANTS[item.variant] : "text-gray-500"}`}>{item.label}</p>
           )
         })
       }
-      
+
     </div>
   )
 }
 
-export {DropdownMenu}
+export { DropdownMenu }

app/client/src/components/table/TableHeader.tsx

@@ -1,34 +1,33 @@
 import React from 'react'
 import type { TableHeaderProps } from '@/types/interfaces'
 
-
 const ALIGN_TEXT = {
-  "center":'text-center',
-  "left":"text-left",
-  "right":"text-right"
+  "center": 'text-center',
+  "left": "text-left",
+  "right": "text-right"
 }
 
-function TableHeader({ items }:TableHeaderProps) {
+export function TableHeader({ items }: TableHeaderProps) {
   return (
-    <div className="hidden 2xl:flex justify-start items-center w-full gap-1 mt-5 pt-5 text-gray-400 font-semibold text-base">
-      {
-        items.map((item, index)=>{
-          return(
-            <div 
-              key={"item"+item.label+"TableHeader"+index} 
-              className={`
-                ${ !item.fixedWidth && `flex-1` }
-                ${ ALIGN_TEXT[item.alignText || "left"] } 
-                `}
-                style={{ width:item.fixedWidth??"auto" }}
-            >
-              { item.label }
-            </div>
-          )
-        })
-      }
-    </div>
+    <thead className="bg-gray-50">
+      <tr>
+        {items.map((item, index) => (
+          <th
+            key={`header-${index}`}
+            scope="col"
+            className={`
+              py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider
+              ${!item.fixedWidth ? 'w-auto' : ''}
+              ${ALIGN_TEXT[item.alignText || "left"]}
+              ${item.className || ''}
+            `}
+            style={{ width: item.fixedWidth ?? 'auto' }}
+          >
+            {item.label}
+          </th>
+        ))}
+      </tr>
+    </thead>
   )
 }
 
-export {TableHeader}

app/client/src/components/table/TableRow.tsx

@@ -1,39 +1,37 @@
 import React from 'react'
-
 import type { TableRowProps } from '@/types/interfaces'
 
 const ALIGN_TEXT = {
-  "center":'text-center',
-  "left":"text-left",
-  "right":"text-right"
+  "center": 'text-center',
+  "left": "text-left",
+  "right": "text-right"
 }
 
-function TableRow({ items, headers }:TableRowProps) {
+export function TableRow({ items, headers, showMobileHeaders = false }: TableRowProps) {
   return (
-    <div className="flex flex-col 2xl:flex-row justify-start 2xl:items-center w-full gap-1 border-dashed border-t-2 border-t-gray-300 mt-5 pt-5 font-semibold">
-      {
-        items.map((item, index)=>{
-          return(
-            <div 
-              key={"item"+item.value+"TableHeader"+index} 
-              className={`
-                ${ !item.fixedWidth && `flex-1` }
-                ${ ALIGN_TEXT[item.alignText || "left"] } 
-                flex items-center 2xl:block gap-2
-                `}
-                style={{ width:item.fixedWidth??"auto" }}
-            >
-              <p className='2xl:hidden'>{headers[index]}: </p>
-              <p>
-                { item.value && item.value }
-              </p>
-              { item.customjsx && item.customjsx() }
-            </div>
-          )
-        })
-      }
-    </div>
+    <tr className="bg-white hover:bg-gray-50">
+      {items.map((item, index) => (
+        <td
+          key={`item-${index}`}
+          className={`
+            py-4 px-4 whitespace-nowrap text-sm
+            ${!item.fixedWidth ? 'w-auto' : ''}
+            ${ALIGN_TEXT[item.alignText || "left"]}
+            ${index === 0 ? 'font-medium text-gray-900' : 'text-gray-500'}
+            ${item.className || ''}
+          `}
+          style={{ width: item.fixedWidth ?? 'auto' }}
+        >
+          {showMobileHeaders && (
+            <div className="sm:hidden font-medium text-gray-900 mb-1">{headers[index]}</div>
+          )}
+          <div className="flex items-center gap-2">
+            {item.value && <span>{item.value}</span>}
+            {item.customjsx && item.customjsx()}
+          </div>
+        </td>
+      ))}
+    </tr>
   )
 }
 
-export {TableRow}

app/client/src/types/interfaces.ts

@@ -124,6 +124,7 @@ export interface DropdownMenuProps {
   }
 
 export interface HeaderItem {
+    className: string;
     label:string,
     alignText?:'left'|'center'|'right',
     fixedWidth?: number
@@ -135,6 +136,7 @@ export interface TableHeaderProps {
 
 
   export interface RowItem {
+    className: string;
     value?:string|number,
     alignText?:'left'|'center'|'right',
     fixedWidth?: number, 
@@ -144,6 +146,7 @@ export interface TableHeaderProps {
   export interface TableRowProps {
     items:RowItem[], 
     headers: string[],
+    showMobileHeaders?: boolean
   }
 
 export interface TagProps {