feat: initialize new React application structure with TypeScript, ESLint, and Prettier configurations, while removing legacy files and adding new components and pages for enhanced functionality

src/utils/connection.ts

@@ -0,0 +1,34 @@
+import { DEFAULT_API_PORT, MANAGEMENT_API_PREFIX } from './constants';
+
+export const normalizeApiBase = (input: string): string => {
+  let base = (input || '').trim();
+  if (!base) return '';
+  base = base.replace(/\/?v0\/management\/?$/i, '');
+  base = base.replace(/\/+$/i, '');
+  if (!/^https?:\/\//i.test(base)) {
+    base = `http://${base}`;
+  }
+  return base;
+};
+
+export const computeApiUrl = (base: string): string => {
+  const normalized = normalizeApiBase(base);
+  if (!normalized) return '';
+  return `${normalized}${MANAGEMENT_API_PREFIX}`;
+};
+
+export const detectApiBaseFromLocation = (): string => {
+  try {
+    const { protocol, hostname, port } = window.location;
+    const normalizedPort = port ? `:${port}` : '';
+    return normalizeApiBase(`${protocol}//${hostname}${normalizedPort}`);
+  } catch (error) {
+    console.warn('Failed to detect api base from location, fallback to default', error);
+    return normalizeApiBase(`http://localhost:${DEFAULT_API_PORT}`);
+  }
+};
+
+export const isLocalhost = (hostname: string): boolean => {
+  const value = (hostname || '').toLowerCase();
+  return value === 'localhost' || value === '127.0.0.1' || value === '[::1]';
+};