fix: some minor fixes

xBlaz3kx · xBlaz3kx · commit dd40067c0067 · 2025-07-12T19:44:09.000+02:00
diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
@@ -94,13 +94,13 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose }) => {
           {!collapsed && (
             <div className="flex items-center gap-3">
               <div className="flex flex-col items-center">
-                <Wifi className={`h-4 w-4 ${connectionState === 'connected' ? 'text-green-500' : 'text-red-500'}`} />
+              <Wifi className={`h-4 w-4 ${connectionState === 'connected' ? 'text-green-500' : 'text-red-500'}`} />
                 <span className={`text-[10px] font-medium capitalize mt-1 ${
-                  connectionState === 'connected' ? 'text-green-500' : 
-                  connectionState === 'connecting' ? 'text-yellow-500' : 'text-red-500'
-                }`}>
-                  {connectionState}
-                </span>
+                connectionState === 'connected' ? 'text-green-500' : 
+                connectionState === 'connecting' ? 'text-yellow-500' : 'text-red-500'
+              }`}>
+                {connectionState}
+              </span>
               </div>
               <span className="text-xs font-semibold text-accent-orange ml-2">v{version}</span>
             </div>
diff --git a/ui/src/components/WidgetGrid.tsx b/ui/src/components/WidgetGrid.tsx
@@ -35,7 +35,7 @@ const WidgetGrid: React.FC<WidgetGridProps> = ({
   widgets, 
   onLayoutChange, 
   onRemoveWidget, 
-  onAddWidgetClick
+  onAddWidgetClick 
 }) => {
   const [moveMode, setMoveMode] = useState<string | null>(null);
   
@@ -143,7 +143,7 @@ const WidgetGrid: React.FC<WidgetGridProps> = ({
                   : 'border-border bg-card'
               }`}
             >
-              {onRemoveWidget && widget.id !== 'add-widget' && (
+            {onRemoveWidget && widget.id !== 'add-widget' && (
                 <div className="absolute top-2 right-2 z-10">
                   <button
                     ref={buttonRef}
@@ -178,25 +178,25 @@ const WidgetGrid: React.FC<WidgetGridProps> = ({
                           <Move className="h-4 w-4" />
                           {moveMode === widget.id ? 'Exit Move' : 'Move'}
                         </button>
-                        <button
+              <button
                           onClick={() => {
                             onRemoveWidget(widget.id);
                             setShowTooltip(false);
                           }}
                           className="flex items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-colors"
-                        >
-                          <Trash className="h-4 w-4" />
+              >
+                <Trash className="h-4 w-4" />
                           Delete
-                        </button>
+              </button>
                       </div>
                     </div>
                   )}
                 </div>
-              )}
-              <div className="h-full overflow-hidden">
-                {widget.content}
-              </div>
+            )}
+            <div className="h-full overflow-hidden">
+              {widget.content}
             </div>
+          </div>
           );
         })}
       </ResponsiveGridLayout>
diff --git a/ui/src/components/add-sidebar-button.tsx b/ui/src/components/add-sidebar-button.tsx
@@ -123,14 +123,14 @@ const AddSidebarButton = <T extends { id: string | number }>({
                   </SelectContent>
                 </Select>
               ) : (
-                <input
-                  type={col.type || 'text'}
-                  className={`w-full px-3 py-2 border rounded bg-background ${errors[col.key as string] ? 'border-red-500' : 'border'} focus:outline-none`}
-                  value={form[col.key] as string || ''}
-                  onChange={e => handleChange(col.key, e.target.value)}
-                  placeholder={`Enter ${col.label}`}
-                  required={col.required}
-                />
+              <input
+                type={col.type || 'text'}
+                className={`w-full px-3 py-2 border rounded bg-background ${errors[col.key as string] ? 'border-red-500' : 'border'} focus:outline-none`}
+                value={form[col.key] as string || ''}
+                onChange={e => handleChange(col.key, e.target.value)}
+                placeholder={`Enter ${col.label}`}
+                required={col.required}
+              />
               )}
               {errors[col.key as string] && (
                 <p className="text-xs text-red-600 mt-1">{errors[col.key as string]}</p>
diff --git a/ui/src/components/generic-card-view.tsx b/ui/src/components/generic-card-view.tsx
@@ -40,10 +40,10 @@ function GenericCardView<T extends { id: string | number }>({
 
   return (
     <>
-      <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 ${className || ''}`}>
-        {data.map((item) => (
-          <div
-            key={item.id}
+    <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 ${className || ''}`}>
+      {data.map((item) => (
+        <div
+          key={item.id}
             className="bg-card border border-border rounded-lg p-4 hover:shadow-md transition-shadow flex items-start gap-4 relative"
           >
             {/* Top right action buttons */}
@@ -69,24 +69,24 @@ function GenericCardView<T extends { id: string | number }>({
                 )}
               </div>
             )}
-            <div className="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-lg bg-accent-orange/10 mt-1">
-              <User className="h-7 w-7 text-accent-orange" />
-            </div>
-            <div className="flex-1 space-y-3">
-              {columns.map((col) => (
+          <div className="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-lg bg-accent-orange/10 mt-1">
+            <User className="h-7 w-7 text-accent-orange" />
+          </div>
+          <div className="flex-1 space-y-3">
+            {columns.map((col) => (
                 <div key={String(col.key)} className="flex flex-col items-start">
-                  <span className="text-sm font-medium text-accent-orange capitalize min-w-[90px] text-left">
-                    {col.label}:
-                  </span>
+                <span className="text-sm font-medium text-accent-orange capitalize min-w-[90px] text-left">
+                  {col.label}:
+                </span>
                   <span className="text-sm ml-0 flex-1 text-white text-left">
-                    {renderValue(item, col)}
-                  </span>
-                </div>
-              ))}
-            </div>
+                  {renderValue(item, col)}
+                </span>
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
+        </div>
+      ))}
+    </div>
       {/* Single Delete confirmation modal rendered outside the card map */}
       {onDelete && deleteModalItem && (
         <Dialog open={!!deleteModalItem} onOpenChange={open => !open && setDeleteModalItem(null)}>
diff --git a/ui/src/pages/Display.tsx b/ui/src/pages/Display.tsx
@@ -30,41 +30,41 @@ const Display: React.FC = () => {
   const [editForm, setEditForm] = useState<Partial<Display>>({});
   const [editErrors, setEditErrors] = useState<Record<string, string>>({});
 
-  const columns: TableColumn<Display>[] = [
-    {
-      key: 'id',
-      label: 'ID',
-      filterable: true,
-      editable: false,
-      required: false,
-      type: 'text',
-      render: (id: string) => (
+const columns: TableColumn<Display>[] = [
+  {
+    key: 'id',
+    label: 'ID',
+    filterable: true,
+    editable: false,
+    required: false,
+    type: 'text',
+    render: (id: string) => (
         <span className="flex items-center gap-2 relative">
-          <span>{id}</span>
-          <button
+        <span>{id}</span>
+        <button
             className="p-1 rounded hover:bg-muted relative"
-            onClick={e => {
-              e.stopPropagation();
-              navigator.clipboard.writeText(id);
+          onClick={e => {
+            e.stopPropagation();
+            navigator.clipboard.writeText(id);
               setCopiedId(id);
               setTimeout(() => setCopiedId(current => (current === id ? null : current)), 2000);
-            }}
-            title="Copy ID"
-          >
-            <Copy className="h-4 w-4" />
+          }}
+          title="Copy ID"
+        >
+          <Copy className="h-4 w-4" />
             {copiedId === id && (
               <span className="absolute left-1/2 -translate-x-1/2 top-8 bg-black text-white text-xs rounded px-2 py-1 shadow z-10 animate-fade-in">
                 Copied!
               </span>
             )}
-          </button>
-        </span>
-      ),
-    },
-    { key: 'name', label: 'Name', filterable: true, required: true, type: 'text' },
-    { key: 'status', label: 'Status', filterable: true, required: true, type: 'text' },
-    { key: 'location', label: 'Location', filterable: true, required: true, type: 'text' },
-  ];
+        </button>
+      </span>
+    ),
+  },
+  { key: 'name', label: 'Name', filterable: true, required: true, type: 'text' },
+  { key: 'status', label: 'Status', filterable: true, required: true, type: 'text' },
+  { key: 'location', label: 'Location', filterable: true, required: true, type: 'text' },
+];
 
   const validateField = (col: any, value: any) => {
     if (col.required && (!value || value === '')) {
diff --git a/ui/src/pages/RfidTags.tsx b/ui/src/pages/RfidTags.tsx
@@ -161,29 +161,29 @@ const RfidTags: React.FC = () => {
       </header>
       <main className="flex-1 p-6 min-w-0">
         <div className="flex justify-end items-center gap-4 mb-4">
-          <ViewToggle view={view} onViewChange={setView} />
-          <AddSidebarButton<Tag>
-            buttonTitle="Add RFID Tag"
-            sidebarTitle="Add New RFID Tag"
-            columns={columns}
-            onAdd={tag => setTags([...tags, tag])}
-          />
-        </div>
-        {view === 'list' ? (
-          <GenericTable<Tag>
-            columns={columns}
-            data={tags}
-            filterInputClassName="w-1/4"
-            className="min-w-full text-sm"
-            columnVisibilityEnabled={true}
-            columnSearchEnabled={true}
+              <ViewToggle view={view} onViewChange={setView} />
+              <AddSidebarButton<Tag>
+                buttonTitle="Add RFID Tag"
+                sidebarTitle="Add New RFID Tag"
+                columns={columns}
+                onAdd={tag => setTags([...tags, tag])}
+              />
+          </div>
+          {view === 'list' ? (
+            <GenericTable<Tag>
+              columns={columns}
+              data={tags}
+              filterInputClassName="w-1/4"
+              className="min-w-full text-sm"
+              columnVisibilityEnabled={true}
+              columnSearchEnabled={true}
             onRowClick={handleRowClick}
-          />
-        ) : (
-          <GenericCardView<Tag>
-            data={tags}
-            columns={columns}
-            className="min-w-full"
+            />
+          ) : (
+            <GenericCardView<Tag>
+              data={tags}
+              columns={columns}
+              className="min-w-full"
             onEdit={handleRowClick}
             onDelete={tag => setTags(tags => tags.filter(t => t.id !== tag.id))}
           />
@@ -233,8 +233,8 @@ const RfidTags: React.FC = () => {
                 )}
                 {editErrors[col.key as string] && (
                   <p className="text-xs text-red-600 mt-1">{editErrors[col.key as string]}</p>
-                )}
-              </div>
+          )}
+        </div>
             ))}
           </form>
         </SettingsSidebar>
diff --git a/ui/src/pages/Settings.tsx b/ui/src/pages/Settings.tsx
@@ -375,9 +375,9 @@ function Settings() {
               <div className="space-y-2">
                 <Label htmlFor="firmwareVersion">Firmware Version</Label>
                 <div className="relative group">
-                  <Input
-                    id="firmwareVersion"
-                    value={infoSettings.firmwareVersion}
+                <Input
+                  id="firmwareVersion"
+                  value={infoSettings.firmwareVersion}
                     readOnly
                     className="bg-muted cursor-not-allowed opacity-80 pr-10"
                     tabIndex={-1}
@@ -526,26 +526,26 @@ function Settings() {
                     {connectivityLoading ? 'Saving...' : 'Save'}
                   </Button>
                 </div>
-                {testConnectionResult && (
-                  <div className={`mt-3 p-3 rounded-lg border ${
-                    testConnectionResult === 'success' 
-                      ? 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200' 
-                      : 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200'
-                  }`}>
-                    <div className="flex items-center gap-2">
-                      {testConnectionResult === 'success' ? (
-                        <div className="w-2 h-2 bg-green-500 rounded-full" />
-                      ) : (
-                        <AlertTriangle className="h-4 w-4" />
-                      )}
-                      <span className="text-sm font-medium">
-                        {testConnectionResult === 'success' 
-                          ? 'Connection test successful!' 
-                          : 'Connection test failed. Please check your settings.'}
-                      </span>
-                    </div>
-                  </div>
-                )}
+                  {testConnectionResult && (
+                    <div className={`mt-3 p-3 rounded-lg border ${
+                      testConnectionResult === 'success' 
+                        ? 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200' 
+                        : 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200'
+                    }`}>
+                      <div className="flex items-center gap-2">
+                        {testConnectionResult === 'success' ? (
+                          <div className="w-2 h-2 bg-green-500 rounded-full" />
+                        ) : (
+                          <AlertTriangle className="h-4 w-4" />
+                        )}
+                        <span className="text-sm font-medium">
+                          {testConnectionResult === 'success' 
+                            ? 'Connection test successful!' 
+                            : 'Connection test failed. Please check your settings.'}
+                        </span>
+                      </div>
+                                         </div>
+                   )}
                 
                </CardContent>
              </Card>
@@ -802,16 +802,16 @@ function Settings() {
       );
     } else if (w.id === 'add-widget') {
       content = (
-        <button
-          className="w-full h-full flex flex-col items-center justify-center border-2 border-dashed border-accent-orange rounded-lg bg-card hover:bg-accent-orange/10 transition-colors focus:outline-none focus:ring-2 focus:ring-accent-orange opacity-60 pointer-events-auto"
-          onClick={() => setAddDialogOpen(true)}
-          type="button"
-          tabIndex={0}
-          aria-label="Add widget"
-        >
-          <Plus className="h-8 w-8 text-accent-orange mb-1" />
-          <span className="text-accent-orange font-medium">Add Widget</span>
-        </button>
+      <button
+        className="w-full h-full flex flex-col items-center justify-center border-2 border-dashed border-accent-orange rounded-lg bg-card hover:bg-accent-orange/10 transition-colors focus:outline-none focus:ring-2 focus:ring-accent-orange opacity-60 pointer-events-auto"
+        onClick={() => setAddDialogOpen(true)}
+        type="button"
+        tabIndex={0}
+        aria-label="Add widget"
+      >
+        <Plus className="h-8 w-8 text-accent-orange mb-1" />
+        <span className="text-accent-orange font-medium">Add Widget</span>
+      </button>
       );
     }
     return { ...w, content };
diff --git a/ui/src/pages/Users.tsx b/ui/src/pages/Users.tsx
