chore: fix build warnings, add deployment config, and cleanup lint errors

- Fix React Hook dependencies and Image optimization warnings
- Add DATA_DIR and INITIAL_PASSWORD env var support
- Fix Tailwind v4 legacy syntax and suppress CSS directives warnings
- Add PropTypes and remove unused variables

src/app/(dashboard)/dashboard/providers/[id]/page.js

@@ -30,9 +30,9 @@ export default function ProviderDetailPage() {
   useEffect(() => {
     fetchConnections();
     fetchAliases();
-  }, [providerId]);
+  }, [fetchConnections, fetchAliases]);
 
-  const fetchAliases = async () => {
+  const fetchAliases = useCallback(async () => {
     try {
       const res = await fetch("/api/models/alias");
       const data = await res.json();
@@ -42,7 +42,7 @@ export default function ProviderDetailPage() {
     } catch (error) {
       console.log("Error fetching aliases:", error);
     }
-  };
+  }, []);
 
   const handleSetAlias = async (modelId, alias) => {
     const fullModel = `${providerAlias}/${modelId}`;
@@ -76,7 +76,7 @@ export default function ProviderDetailPage() {
     }
   };
 
-  const fetchConnections = async () => {
+  const fetchConnections = useCallback(async () => {
     try {
       const res = await fetch("/api/providers");
       const data = await res.json();
@@ -89,7 +89,7 @@ export default function ProviderDetailPage() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [providerId]);
 
   const handleDelete = async (id) => {
     if (!confirm("Delete this connection?")) return;
@@ -228,11 +228,13 @@ export default function ProviderDetailPage() {
             className="rounded-lg flex items-center justify-center"
             style={{ backgroundColor: `${providerInfo.color}15` }}
           >
-            <img
+            <Image
               src={`/providers/${providerInfo.id}.png`}
               alt={providerInfo.name}
-              className="size-12 object-contain rounded-lg"
-              onError={(e) => { e.target.style.display = "none"; }}
+              width={48}
+              height={48}
+              className="object-contain rounded-lg"
+              onError={(e) => { e.currentTarget.style.display = "none"; }}
             />
           </div>
           <div>

src/app/(dashboard)/dashboard/providers/page.js

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import Image from "next/image";
 import { Card, CardSkeleton, Badge } from "@/shared/components";
 import { OAUTH_PROVIDERS, APIKEY_PROVIDERS } from "@/shared/constants/config";
 import Link from "next/link";
@@ -11,21 +12,20 @@ export default function ProvidersPage() {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const res = await fetch("/api/providers");
+        const data = await res.json();
+        if (res.ok) setConnections(data.connections || []);
+      } catch (error) {
+        console.log("Error fetching data:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
     fetchData();
   }, []);
 
-  const fetchData = async () => {
-    try {
-      const res = await fetch("/api/providers");
-      const data = await res.json();
-      if (res.ok) setConnections(data.connections || []);
-    } catch (error) {
-      console.log("Error fetching data:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
   const getProviderStats = (providerId, authType) => {
     const providerConnections = connections.filter(
       c => c.provider === providerId && c.authType === authType
@@ -141,10 +141,12 @@ function ProviderCard({ providerId, provider, stats }) {
               style={{ backgroundColor: `${provider.color}15` }}
             >
               {!imgError ? (
-                <img
+                <Image
                   src={`/providers/${provider.id}.png`}
                   alt={provider.name}
-                  className="size-10 object-contain rounded-lg"
+                  width={40}
+                  height={40}
+                  className="object-contain rounded-lg"
                   onError={() => setImgError(true)}
                 />
               ) : (