Put in more env variables and fallback to localhost if BACKEND_URL and BACKEND_PORT is not found

Fixed imports for react imports for useMemo, useEffect etc from hosts and HostDetail files

frontend/src/components/FirstTimeAdminSetup.jsx

@@ -1,5 +1,5 @@
 import { AlertCircle, CheckCircle, Shield, UserPlus } from "lucide-react";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { useAuth } from "../contexts/AuthContext";
 
 const FirstTimeAdminSetup = () => {

frontend/src/pages/HostDetail.jsx

@@ -25,7 +25,7 @@ import {
 	Wifi,
 	X,
 } from "lucide-react";
-import { useId, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import InlineEdit from "../components/InlineEdit";
 import {
@@ -70,7 +70,7 @@ const HostDetail = () => {
 	};
 
 	// Auto-show credentials modal for new/pending hosts
-	React.useEffect(() => {
+	useEffect(() => {
 		if (host && host.status === "pending") {
 			setShowCredentialsModal(true);
 		}

frontend/src/pages/Hosts.jsx

@@ -23,7 +23,7 @@ import {
 	Users,
 	X,
 } from "lucide-react";
-import { useEffect, useId, useState } from "react";
+import { useEffect, useId, useMemo, useState } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import InlineEdit from "../components/InlineEdit";
 import InlineGroupEdit from "../components/InlineGroupEdit";
@@ -510,7 +510,7 @@ const Hosts = () => {
 	};
 
 	// Table filtering and sorting logic
-	const filteredAndSortedHosts = React.useMemo(() => {
+	const filteredAndSortedHosts = useMemo(() => {
 		if (!hosts) return [];
 
 		const filtered = hosts.filter((host) => {
@@ -629,7 +629,7 @@ const Hosts = () => {
 	]);
 
 	// Group hosts by selected field
-	const groupedHosts = React.useMemo(() => {
+	const groupedHosts = useMemo(() => {
 		if (groupBy === "none") {
 			return { "All Hosts": filteredAndSortedHosts };
 		}

frontend/src/pages/Login.jsx

@@ -9,7 +9,7 @@ import {
 	User,
 } from "lucide-react";
 
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";

frontend/src/pages/Profile.jsx

@@ -19,7 +19,7 @@ import {
 	User,
 } from "lucide-react";
 
-import { useState } from "react";
+import { useId, useState } from "react";
 
 import { useAuth } from "../contexts/AuthContext";
 import { useTheme } from "../contexts/ThemeContext";

frontend/src/pages/RepositoryDetail.jsx

@@ -13,7 +13,7 @@ import {
 	Users,
 } from "lucide-react";
 
-import { useState } from "react";
+import { useId, useState } from "react";
 
 import { Link, useParams } from "react-router-dom";
 import { repositoryAPI } from "../utils/api";

frontend/src/pages/Settings.jsx

@@ -15,7 +15,7 @@ import {
 	X,
 } from "lucide-react";
 
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import UpgradeNotificationIcon from "../components/UpgradeNotificationIcon";
 import { useUpdateNotification } from "../contexts/UpdateNotificationContext";
 import {

frontend/vite.config.js

@@ -11,7 +11,7 @@ export default defineConfig({
 		allowedHosts: true, // Allow all hosts in development
 		proxy: {
 			"/api": {
-				target: `http://${process.env.BACKEND_HOST}:${process.env.BACKEND_PORT}`,
+				target: `http://${process.env.BACKEND_HOST || 'localhost'}:${process.env.BACKEND_PORT || '3001'}`,
 				changeOrigin: true,
 				secure: false,
 				configure: