Merge pull request #167 from AnthonyGress/dev

Add 24 hour time support, allow custom theme color, allow network shares in disk monitor, add quality check

Author: AnthonyGress

.github/workflows/quality-check.yml

@@ -0,0 +1,37 @@
+name: quality-check
+
+on:
+  pull_request:
+
+jobs:
+  quality-check:
+    permissions:
+      contents: read
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout git repo
+        uses: actions/checkout@v4
+
+      - name: Install Node and NPM
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: |
+          npm install
+
+      - name: Build - Backend
+        run: |
+          cd backend
+          npm run build
+
+      - name: Build - Frontend
+        run: |
+          cd frontend
+          npm run build
+
+      - name: Build - Docker
+        run: |
+          npm run docker:build
+

.gitignore

@@ -23,7 +23,7 @@ dist-ssr
 *.sln
 *.sw?
 build
-backend/src/config/config.json
+backend/src/config/config*.json
 backend/src/config/users.json
 backend/src/config/backups
 backend/src/public/uploads

README.md

@@ -46,9 +46,6 @@ services:
         - /docker/lab-dash/uploads:/app/public/uploads
         - /var/run/docker.sock:/var/run/docker.sock
       restart: unless-stopped
-      labels:
-        - "com.centurylinklabs.watchtower.enable=true"
-
 ```
 
 # Usage
@@ -103,5 +100,12 @@ npm run dev
 - `docker compose pull`
 - `docker compose up -d`
 
+# Contributing
+Contributions to Lab Dash are welcome! Please follow these guidelines:
+
+- **One feature per PR** - Keep pull requests focused on a single feature or fix
+- **Review AI-generated code** - If using AI tools, all code must be thoroughly reviewed and tested before submitting
+- **Maintain consistency** - New code must align with the app's existing style, theme, and overall user experience
+
 # Disclaimer
 This code is provided for informational and educational purposes only. I am not associated with any of the services/applications mentioned in this project.

backend/src/types/index.ts

@@ -38,6 +38,7 @@ export type Config = {
     isSetupComplete?: boolean;
     lastSeenVersion?: string;
     notes?: Note[];
+    themeColor?: string;
 }
 
 export type Note = {

docker-compose.yml

@@ -1,20 +1,18 @@
 ---
 services:
   lab-dash:
-      container_name: lab-dash
-      image: ghcr.io/anthonygress/lab-dash:latest
-      privileged: true
-      #network_mode: host # for monitoring network usage stats. run `sudo ufw allow 2022/tcp` on ubuntu to allow access through firewall
-      ports:
-        - 2022:2022
-      environment:
-        - SECRET=YOUR_SECRET_KEY # any random string for used for encryption.
-        # You can run `openssl rand -base64 32` to generate a key
-      volumes:
-        - /sys:/sys:ro
-        - /docker/lab-dash/config:/config
-        - /docker/lab-dash/uploads:/app/public/uploads
-        - /var/run/docker.sock:/var/run/docker.sock
-      restart: unless-stopped
-      labels:
-        - "com.centurylinklabs.watchtower.enable=true"
+    container_name: lab-dash
+    image: ghcr.io/anthonygress/lab-dash:latest
+    privileged: true
+    #network_mode: host # for monitoring network usage stats. run `sudo ufw allow 2022/tcp` on ubuntu to allow access through firewall
+    ports:
+      - 2022:2022
+    environment:
+      - SECRET=YOUR_SECRET_KEY # any random string for used for encryption.
+      # You can run `openssl rand -base64 32` to generate a key
+    volumes:
+      - /sys:/sys:ro
+      - /docker/lab-dash/config:/config
+      - /docker/lab-dash/uploads:/app/public/uploads
+      - /var/run/docker.sock:/var/run/docker.sock
+    restart: unless-stopped

frontend/src/components/dashboard/DashboardGrid.tsx

@@ -616,7 +616,8 @@ export const DashboardGrid: React.FC = () => {
     const createDateTimeConfig = (config: any) => {
         return {
             location: config?.location || null,
-            timezone: config?.timezone || undefined
+            timezone: config?.timezone || undefined,
+            use24Hour: config?.use24Hour || false
         };
     };
 

frontend/src/components/dashboard/base-items/widgets/DateTimeWidget.tsx

@@ -12,6 +12,7 @@ type DateTimeWidgetConfig = {
         longitude: number;
     } | null;
     timezone?: string;
+    use24Hour?: boolean;
 };
 
 type DateTimeWidgetProps = {
@@ -135,27 +136,63 @@ export const DateTimeWidget = ({ config }: DateTimeWidgetProps) => {
 
     // Create formatter functions with the timezone
     const getFormattedTime = () => {
+        const use24Hour = config?.use24Hour === true;
+
         try {
-            if (config?.timezone) {
-                const options: Intl.DateTimeFormatOptions = {
-                    hour: 'numeric',
-                    minute: '2-digit',
-                    timeZone: config.timezone
-                };
-                return new Intl.DateTimeFormat([], options).format(dateTime);
+            if (use24Hour) {
+                // For 24-hour format, manually format to avoid locale issues
+                let hours: number;
+                let minutes: number;
+
+                if (config?.timezone) {
+                    // Get hours and minutes in the specified timezone
+                    const formatter = new Intl.DateTimeFormat('en-US', {
+                        hour: 'numeric',
+                        minute: 'numeric',
+                        hour12: false,
+                        timeZone: config.timezone
+                    });
+                    const parts = formatter.formatToParts(dateTime);
+                    hours = parseInt(parts.find(p => p.type === 'hour')?.value || '0');
+                    minutes = parseInt(parts.find(p => p.type === 'minute')?.value || '0');
+                } else {
+                    hours = dateTime.getHours();
+                    minutes = dateTime.getMinutes();
+                }
+
+                // Format as HH:MM
+                return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+            } else {
+                // For 12-hour format, use standard formatting
+                if (config?.timezone) {
+                    const options: Intl.DateTimeFormatOptions = {
+                        hour: 'numeric',
+                        minute: '2-digit',
+                        timeZone: config.timezone,
+                        hour12: true
+                    };
+                    return new Intl.DateTimeFormat('en-US', options).format(dateTime);
+                } else {
+                    return dateTime.toLocaleTimeString('en-US', {
+                        hour: 'numeric',
+                        minute: '2-digit',
+                        hour12: true
+                    });
+                }
             }
-
-            // Fallback to local time if no timezone provided
-            return dateTime.toLocaleTimeString([], {
-                hour: 'numeric',
-                minute: '2-digit'
-            });
         } catch (error) {
             console.error('Error formatting time with timezone:', error);
-            return dateTime.toLocaleTimeString([], {
-                hour: 'numeric',
-                minute: '2-digit'
-            });
+            if (use24Hour) {
+                const hours = dateTime.getHours();
+                const minutes = dateTime.getMinutes();
+                return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+            } else {
+                return dateTime.toLocaleTimeString('en-US', {
+                    hour: 'numeric',
+                    minute: '2-digit',
+                    hour12: true
+                });
+            }
         }
     };
 

frontend/src/components/dashboard/base-items/widgets/DiskMonitorWidget.tsx

@@ -281,7 +281,7 @@ export const DiskMonitorWidget = ({ config, editMode }: DiskMonitorWidgetProps)
                                 left: 0,
                                 width: `${displayUsagePercent}%`,
                                 height: '100%',
-                                backgroundColor: theme.palette.primary.main,
+                                backgroundColor: 'primary.main',
                                 cursor: 'pointer'
                             }}
                         />

frontend/src/components/dashboard/base-items/widgets/DownloadClientWidget.tsx

@@ -426,7 +426,7 @@ const DownloadItem: React.FC<DownloadItemProps> = ({ torrent, clientName, isAdmi
                     '& .MuiLinearProgress-bar': {
                         backgroundColor:
                             torrent.state === 'downloading' ? 'primary.main' :
-                                torrent.state.includes('seed') || torrent.state.includes('upload') ? theme.palette.primary.main :
+                                torrent.state.includes('seed') || torrent.state.includes('upload') ? 'primary.main' :
                                     torrent.progress === 1 ? 'success.main' : 'warning.main'
                     }
                 }}

frontend/src/components/dashboard/base-items/widgets/NotesWidget/MarkdownPreview.tsx

@@ -67,7 +67,7 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({ content, fontS
                 fontStyle: 'italic'
             },
             '& a': {
-                color: theme.palette.primary.main,
+                color: 'primary.main',
                 textDecoration: 'underline'
             },
             '& strong': {