insforge 0.3.1

package/frontend/src/lib/hooks/useTimeout.ts

@@ -0,0 +1,27 @@
+import { useEffect, useLayoutEffect, useRef } from 'react';
+
+export function useTimeout(callback: () => void, delay: number | null): void {
+  const savedCallback = useRef(callback);
+
+  // Remember the latest callback if it changes.
+  useLayoutEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the timeout.
+  useEffect(() => {
+    // Don't schedule if no delay is specified.
+    // Note: 0 is a valid value for delay.
+    if (!delay && delay !== 0) {
+      return;
+    }
+
+    const id = setTimeout(() => {
+      savedCallback.current();
+    }, delay);
+
+    return () => {
+      clearTimeout(id);
+    };
+  }, [delay]);
+}

package/frontend/src/lib/hooks/useToast.tsx

@@ -0,0 +1,229 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { useTimeout } from './useTimeout';
+import { generateUUID } from '@/lib/utils/utils';
+
+interface Toast {
+  id: string;
+  message: string;
+  type?: 'success' | 'error' | 'info' | 'warn' | 'upload';
+  customIcon?: React.ReactNode;
+  duration: number;
+  progress?: number;
+  onCancel?: () => void;
+}
+
+interface ToastContextType {
+  showToast: (
+    message: string,
+    type?: 'success' | 'error' | 'info' | 'warn' | 'upload',
+    customIcon?: React.ReactNode,
+    duration?: number
+  ) => string;
+  updateToast: (id: string, updates: Partial<Toast>) => void;
+  removeToast: (id: string) => void;
+}
+
+const DEFAULT_TOAST_DURATION = 3000; // 3 seconds
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+interface ToastItemProps {
+  toast: Toast;
+  onRemove: () => void;
+  getDefaultIcon: (type: string) => React.ReactNode;
+}
+
+function ToastItem({ toast, onRemove, getDefaultIcon }: ToastItemProps) {
+  // Auto remove after duration (except for upload toasts)
+  useTimeout(onRemove, toast.type === 'upload' ? null : toast.duration);
+
+  const baseClasses =
+    'relative p-3 rounded-[8px] font-medium animate-in fade-in duration-300 flex items-center overflow-hidden border-1';
+
+  const typeClasses = {
+    success: 'bg-green-300 text-green-700 border-green-400',
+    error: 'bg-red-300 text-red-700 border-red-400',
+    info: 'bg-blue-300 text-blue-700 border-blue-400',
+    warn: 'bg-yellow-300 text-yellow-700 border-yellow-400',
+    upload: 'bg-neutral-100 text-zinc-950 border-neutral-800',
+  };
+
+  const progressBarClasses = {
+    success: 'bg-green-700',
+    error: 'bg-red-700',
+    info: 'bg-blue-700',
+    warn: 'bg-yellow-700',
+    upload: 'bg-neutral-700',
+  };
+
+  const toastType = toast.type || 'info';
+
+  return (
+    <div className={`${baseClasses} ${typeClasses[toastType]}`}>
+      <div className="flex items-center gap-2 flex-1">
+        {toast.customIcon || getDefaultIcon(toastType)}
+        <span className="flex-1 text-sm font-medium">{toast.message}</span>
+        {toast.type === 'upload' && toast.onCancel && (
+          <button
+            onClick={toast.onCancel}
+            className="text-zinc-500 hover:text-zinc-700 text-sm font-medium"
+          >
+            Cancel
+          </button>
+        )}
+      </div>
+
+      {/* Progress bar */}
+      {toast.type === 'upload' ? (
+        <div className="absolute bottom-0 left-0 w-full h-1 bg-neutral-300 overflow-hidden">
+          <div
+            className={`h-full ${progressBarClasses[toastType]} transition-all duration-300 ease-out`}
+            style={{
+              width: `${toast.progress || 0}%`,
+            }}
+          />
+        </div>
+      ) : (
+        <div className="absolute bottom-0 left-0 w-full h-1 bg-transparent overflow-hidden">
+          <div
+            className={`h-full w-full ${progressBarClasses[toastType]} animate-toast-progress origin-left`}
+            style={{
+              animationDuration: `${toast.duration}ms`,
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const showToast = useCallback(
+    (
+      message: string,
+      type: 'success' | 'error' | 'info' | 'warn' | 'upload' = 'info',
+      customIcon?: React.ReactNode,
+      duration: number = DEFAULT_TOAST_DURATION
+    ) => {
+      const id = generateUUID();
+      // Set duration to 2 seconds for success toasts
+      const toastDuration = type === 'success' ? 2000 : duration;
+      const newToast: Toast = { id, message, type, customIcon, duration: toastDuration };
+
+      setToasts((prev) => [...prev, newToast]);
+      return id;
+    },
+    []
+  );
+
+  const updateToast = useCallback((id: string, updates: Partial<Toast>) => {
+    setToasts((prev) => prev.map((toast) => (toast.id === id ? { ...toast, ...updates } : toast)));
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const getDefaultIcon = (type: string) => {
+    switch (type) {
+      case 'success':
+        return (
+          <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+        );
+      case 'error':
+        return (
+          <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        );
+      case 'warn':
+        return (
+          <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.464 0L4.35 16.5c-.77.833.192 2.5 1.732 2.5z"
+            />
+          </svg>
+        );
+      case 'upload':
+        return (
+          <svg
+            className="w-5 h-5 shrink-0 animate-spin"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+            />
+          </svg>
+        );
+      case 'info':
+      default:
+        return (
+          <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+        );
+    }
+  };
+
+  return (
+    <ToastContext.Provider value={{ showToast, updateToast, removeToast }}>
+      {children}
+      {/* Regular toasts - top center */}
+      <div className="fixed top-7.5 dark:top-20 left-1/2 transform -translate-x-1/2 z-[9999] flex flex-col gap-3 w-full max-w-[480px]">
+        {toasts
+          .filter((t) => t.type !== 'upload')
+          .map((toast) => (
+            <ToastItem
+              key={toast.id}
+              toast={toast}
+              onRemove={() => removeToast(toast.id)}
+              getDefaultIcon={getDefaultIcon}
+            />
+          ))}
+      </div>
+      {/* Upload toasts - bottom right */}
+      <div className="fixed bottom-4 right-4 z-[9999] w-[276px] flex flex-col">
+        {toasts
+          .filter((t) => t.type === 'upload')
+          .map((toast) => (
+            <ToastItem
+              key={toast.id}
+              toast={toast}
+              onRemove={() => removeToast(toast.id)}
+              getDefaultIcon={getDefaultIcon}
+            />
+          ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}

package/frontend/src/lib/utils/constants.ts

@@ -0,0 +1,38 @@
+// UI constants
+export const BREAKPOINTS = {
+  xs: 475,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+} as const;
+
+// Colors for stat cards
+export const STAT_COLORS = {
+  blue: {
+    icon: 'text-blue-400',
+    bg: 'bg-blue-500/10',
+  },
+  green: {
+    icon: 'text-green-400',
+    bg: 'bg-green-500/10',
+  },
+  purple: {
+    icon: 'text-purple-400',
+    bg: 'bg-purple-500/10',
+  },
+  emerald: {
+    icon: 'text-emerald-400',
+    bg: 'bg-emerald-500/10',
+  },
+  yellow: {
+    icon: 'text-yellow-400',
+    bg: 'bg-yellow-500/10',
+  },
+} as const;
+
+// Storage keys
+export enum StorageKeys {
+  AUTH_TOKEN = 'auth_token',
+  USER_PREFERENCES = 'user_preferences',
+}

package/frontend/src/lib/utils/utils.ts

@@ -0,0 +1,165 @@
+import { ColumnType } from '@insforge/shared-schemas';
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { format, parse, isValid, parseISO } from 'date-fns';
+import {
+  uuidSchema,
+  integerSchema,
+  floatSchema,
+  booleanSchema,
+  dateSchema,
+  dateTimeSchema,
+  jsonSchema,
+  stringSchema,
+} from './validation-schemas';
+import { v4 as uuidv4 } from 'uuid';
+import type { ConvertedValue, DisplayValue, ValueConversionResult } from '@/components/datagrid';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * Convert and validate a string value based on the specified ColumnType
+ */
+export function convertValueForColumn(
+  type: ColumnType | string,
+  value: string | null | undefined
+): ValueConversionResult {
+  try {
+    let convertedValue;
+
+    switch (type) {
+      case ColumnType.UUID:
+        convertedValue = uuidSchema.parse(value);
+        break;
+      case ColumnType.INTEGER:
+        convertedValue = integerSchema.parse(value);
+        break;
+      case ColumnType.FLOAT:
+        convertedValue = floatSchema.parse(value);
+        break;
+      case ColumnType.BOOLEAN:
+        convertedValue = booleanSchema.parse(value);
+        break;
+      case ColumnType.DATE:
+        convertedValue = dateSchema.parse(value);
+        break;
+      case ColumnType.DATETIME:
+        convertedValue = dateTimeSchema.parse(value);
+        break;
+      case ColumnType.JSON:
+        convertedValue = jsonSchema.parse(value);
+        break;
+      case ColumnType.STRING:
+        convertedValue = stringSchema.parse(value);
+        break;
+      default:
+        return {
+          success: false,
+          error: `Unsupported column type: ${type}`,
+        };
+    }
+
+    return {
+      success: true,
+      value: convertedValue,
+    };
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return {
+        success: false,
+        error: error.errors[0]?.message || 'Validation failed',
+      };
+    }
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Unknown conversion error',
+    };
+  }
+}
+
+/**
+ * Generate a UUID v4 using the uuid library
+ * Works in all browsers and contexts (secure and non-secure)
+ * Uses crypto.getRandomValues when available, falls back to Math.random
+ */
+export function generateUUID(): string {
+  return uuidv4();
+}
+
+/**
+ * Centralized value formatter that handles all data types consistently
+ * Converts database values to formatted display strings for UI components
+ */
+export function formatValueForDisplay(value: ConvertedValue, type?: ColumnType): DisplayValue {
+  // Handle null/undefined values
+  if (isEmptyValue(value)) {
+    return 'null';
+  }
+
+  // Handle different column types
+  switch (type) {
+    case ColumnType.BOOLEAN:
+      return value ? 'True' : 'False';
+
+    case ColumnType.DATE: {
+      const date = parse(String(value), 'yyyy-MM-dd', new Date());
+      if (!isValid(date)) {
+        return String(value);
+      }
+      const displayValue = format(date, 'MMM dd, yyyy');
+      return displayValue;
+    }
+
+    case ColumnType.DATETIME: {
+      const date = parseISO(String(value));
+      if (!isValid(date)) {
+        return String(value);
+      }
+      const displayValue = format(date, 'MMM dd, yyyy, hh:mm a');
+      return displayValue;
+    }
+
+    case ColumnType.JSON: {
+      try {
+        const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+        const formatted =
+          parsed && typeof parsed === 'object' ? JSON.stringify(parsed) : String(parsed);
+
+        return formatted;
+      } catch {
+        return 'Invalid JSON';
+      }
+    }
+
+    case ColumnType.INTEGER:
+    case ColumnType.FLOAT: {
+      return String(value);
+    }
+
+    case ColumnType.UUID:
+    case ColumnType.STRING:
+    default: {
+      // Convert to string and optionally truncate
+      return String(value);
+    }
+  }
+}
+
+/**
+ * Check if a value is considered empty for database purposes
+ */
+export function isEmptyValue(value: unknown): boolean {
+  return value === null || value === undefined || value === '';
+}
+
+export const isInsForgeCloudProject = () => {
+  return window.location.hostname.endsWith('.insforge.app');
+};
+
+export const getBackendUrl = () => {
+  const isHttp = window.location.protocol === 'http:';
+  return isHttp ? 'http://localhost:7130' : window.location.origin;
+};

package/frontend/src/lib/utils/validation-schemas.ts

@@ -0,0 +1,126 @@
+import { z } from 'zod';
+
+export const uuidSchema = z
+  .string()
+  .uuid({ message: 'Please enter a valid UUID' })
+  .or(z.literal('').transform(() => null))
+  .or(z.null());
+
+export const integerSchema = z
+  .union([
+    z
+      .string()
+      .regex(/^-?\d+$/, { message: 'Please enter a valid integer' })
+      .transform((val) => {
+        const num = parseInt(val, 10);
+        if (num < -2147483648 || num > 2147483647) {
+          throw new Error(
+            'Integer value out of range. Please enter a value between -2,147,483,648 and 2,147,483,647'
+          );
+        }
+        return num;
+      }),
+    z.number().int().min(-2147483648).max(2147483647),
+    z.literal('').transform(() => null),
+    z.null(),
+  ])
+  .catch(() => {
+    throw new Error('Please enter a valid integer');
+  });
+
+export const floatSchema = z
+  .union([
+    z
+      .string()
+      .regex(/^-?(\d+\.?\d*|\.\d+)([eE][+-]?\d+)?$/, {
+        message: 'Please enter a valid number',
+      })
+      .transform((val) => {
+        const num = parseFloat(val);
+        if (!isFinite(num)) {
+          throw new Error('Number value out of range');
+        }
+        if (Math.abs(num) > 1.7976931348623157e308) {
+          throw new Error('Number value exceeds double precision range');
+        }
+        return num;
+      }),
+    z.number().finite(),
+    z.literal('').transform(() => null),
+    z.null(),
+  ])
+  .catch(() => {
+    throw new Error('Please enter a valid number');
+  });
+
+export const booleanSchema = z
+  .union([
+    z.boolean(),
+    z.string().transform((val) => {
+      const lower = val.toLowerCase();
+      if (lower === 'true') {
+        return true;
+      }
+      if (lower === 'false') {
+        return false;
+      }
+      if (lower === 'null' || lower === '') {
+        return null;
+      }
+      throw new Error('Please enter a valid boolean value: true, false, or leave empty');
+    }),
+    z.literal('').transform(() => null),
+    z.null(),
+  ])
+  .catch(() => {
+    throw new Error('Please enter a valid boolean value');
+  });
+
+export const dateSchema = z
+  .union([z.string().date(), z.literal('').transform(() => null), z.null()])
+  .catch(() => {
+    throw new Error('Please enter a valid date');
+  });
+
+export const dateTimeSchema = z
+  .union([
+    // ISO 8601 datetime with timezone (Z or ±HH:MM)
+    z.string().datetime({ offset: true }),
+    z.literal('').transform(() => null),
+    z.null(),
+  ])
+  .catch(() => {
+    throw new Error('Please enter a valid datetime');
+  });
+
+export const jsonSchema = z
+  .union([
+    z.string().transform((val) => {
+      if (val === '' || val === 'null') {
+        return null;
+      }
+      try {
+        return JSON.parse(val);
+      } catch {
+        throw new Error('Please enter valid JSON');
+      }
+    }),
+    z.object({}).passthrough(),
+    z.array(z.any()),
+    z.null(),
+  ])
+  .catch(() => {
+    throw new Error('Please enter valid JSON');
+  });
+
+export const stringSchema = z.union([z.string(), z.null()]);
+
+export const emailSchema = z.string().email('Invalid email address');
+export const passwordSchema = z.string().min(8, 'Password must be at least 8 characters');
+
+export const loginFormSchema = z.object({
+  email: emailSchema,
+  password: passwordSchema,
+});
+
+export type LoginFormData = z.infer<typeof loginFormSchema>;

package/frontend/src/main.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.tsx';
+import './index.css';
+
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  ReactDOM.createRoot(rootElement).render(
+    <React.StrictMode>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </React.StrictMode>
+  );
+}