Update

Author: MarkHershey

App.tsx

@@ -6,11 +6,12 @@ import PositionsTable from "./components/PositionsTable";
 import PortfolioChart from "./components/PortfolioChart";
 import CategoricalAnalysis from "./components/CategoricalAnalysis";
 import FileDropZone from "./components/FileDropZone";
-import { LayoutDashboard, Trash2, Maximize2, Minimize2 } from "lucide-react";
+import { Trash2, Maximize2, Minimize2 } from "lucide-react";
 
 const APP_NAME = "Alloc";
 const STORAGE_KEY = `${APP_NAME}_json_data`;
 const FULL_WIDTH_STORAGE_KEY = `${APP_NAME}_full_width_preference`;
+const FAVICON_PATH = `${import.meta.env.BASE_URL}android-chrome-512x512.png`;
 
 const App: React.FC = () => {
     const [account, setAccount] = useState<AccountData | null>(null);
@@ -40,7 +41,7 @@ const App: React.FC = () => {
 
                 // Load full-width preference
                 const fullWidthPreference = localStorage.getItem(
-                    FULL_WIDTH_STORAGE_KEY
+                    FULL_WIDTH_STORAGE_KEY,
                 );
                 if (fullWidthPreference !== null) {
                     setIsFullWidth(fullWidthPreference === "true");
@@ -65,13 +66,13 @@ const App: React.FC = () => {
 
             if (!account) {
                 throw new Error(
-                    "Failed to parse account data. Please check the file format."
+                    "Failed to parse account data. Please check the file format.",
                 );
             }
 
             if (!positions || positions.length === 0) {
                 throw new Error(
-                    "Failed to parse positions data or file is empty. Please check the file format."
+                    "Failed to parse positions data or file is empty. Please check the file format.",
                 );
             }
 
@@ -133,11 +134,11 @@ const App: React.FC = () => {
     // Calculate some aggregate totals that might be missing or useful
     const totalDailyPL = positions.reduce(
         (acc, curr) => acc + curr.today_pl_val,
-        0
+        0,
     );
     const totalUnrealizedPL = positions.reduce(
         (acc, curr) => acc + curr.unrealized_pl,
-        0
+        0,
     );
 
     return (
@@ -151,7 +152,11 @@ const App: React.FC = () => {
                 >
                     <div className="flex justify-between h-16 items-center">
                         <div className="flex items-center gap-2">
-                            <LayoutDashboard className="h-6 w-6 text-blue-500" />
+                            <img
+                                src={FAVICON_PATH}
+                                alt="Alloc logo"
+                                className="h-7 w-7 rounded-sm"
+                            />
                             <span className="font-bold text-xl text-white tracking-tight">
                                 <span className="text-blue-500">Alloc</span>{" "}
                                 Dashboard

components/FileDropZone.tsx

@@ -4,7 +4,6 @@ import {
     FileText,
     AlertCircle,
     CheckCircle2,
-    LayoutDashboard,
     Sparkles,
 } from "lucide-react";
 import { generateDemoData } from "../utils/demoDataGenerator";
@@ -15,6 +14,8 @@ interface FileDropZoneProps {
     parseError?: string | null;
 }
 
+const FAVICON_PATH = `${import.meta.env.BASE_URL}android-chrome-512x512.png`;
+
 const FileDropZone: React.FC<FileDropZoneProps> = ({
     onFileLoaded,
     onError,
@@ -83,7 +84,7 @@ const FileDropZone: React.FC<FileDropZoneProps> = ({
                     JSON.parse(jsonContent);
                 } catch (e) {
                     throw new Error(
-                        "Invalid JSON format. Please check the file."
+                        "Invalid JSON format. Please check the file.",
                     );
                 }
 
@@ -97,7 +98,7 @@ const FileDropZone: React.FC<FileDropZoneProps> = ({
                 setDataFile(null);
             }
         },
-        [onFileLoaded, onError]
+        [onFileLoaded, onError],
     );
 
     const handleDragOver = useCallback((e: React.DragEvent) => {
@@ -119,14 +120,14 @@ const FileDropZone: React.FC<FileDropZoneProps> = ({
             setIsDragging(false);
             handleFiles(e.dataTransfer.files);
         },
-        [handleFiles]
+        [handleFiles],
     );
 
     const handleFileInput = useCallback(
         (e: React.ChangeEvent<HTMLInputElement>) => {
             handleFiles(e.target.files);
         },
-        [handleFiles]
+        [handleFiles],
     );
 
     const handleDemoMode = useCallback(() => {
@@ -149,8 +150,12 @@ const FileDropZone: React.FC<FileDropZoneProps> = ({
             <div className="w-full max-w-2xl">
                 <div className="text-center mb-8">
                     <div className="flex justify-center mb-4">
-                        <div className="p-4 bg-slate-800 rounded-full border border-slate-700">
-                            <LayoutDashboard className="h-12 w-12 text-blue-500" />
+                        <div className="p-4">
+                            <img
+                                src={FAVICON_PATH}
+                                alt="Alloc logo"
+                                className="h-16 w-16 rounded-md"
+                            />
                         </div>
                     </div>
                     <h1 className="text-3xl font-bold text-white mb-2">

index.html

@@ -1,9 +1,41 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Alloc</title>
+        <meta name="theme-color" content="#0f172a" />
+        <link rel="icon" href="./favicon.ico" sizes="any" />
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="./favicon-16x16.png"
+        />
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="./favicon-32x32.png"
+        />
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="192x192"
+            href="./android-chrome-192x192.png"
+        />
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="512x512"
+            href="./android-chrome-512x512.png"
+        />
+        <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="./apple-touch-icon.png"
+        />
+        <link rel="manifest" href="./site.webmanifest" />
+        <title>MX Alloc Dashboard</title>
     </head>
     <body>
         <div id="root"></div>

public/android-chrome-192x192.png

@@ -0,0 +1,21 @@
+{
+    "name": "Alloc Dashboard",
+    "short_name": "Alloc",
+    "icons": [
+        {
+            "src": "./android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "./android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#0f172a",
+    "background_color": "#0f172a",
+    "display": "standalone",
+    "start_url": ".",
+    "scope": "."
+}