insforge 0.3.1

package/frontend/src/features/auth/services/auth.service.ts

@@ -0,0 +1,112 @@
+import { apiClient } from '@/lib/api/client';
+import { UserSchema } from '@insforge/shared-schemas';
+
+export class AuthService {
+  async loginWithPassword(email: string, password: string) {
+    const data = await apiClient.request('/auth/admin/sessions', {
+      method: 'POST',
+      body: JSON.stringify({ email, password }),
+    });
+
+    // Set token in apiClient
+    if (data.accessToken) {
+      apiClient.setToken(data.accessToken);
+    }
+
+    // Return unified format
+    return {
+      accessToken: data.accessToken,
+      user: data.user,
+    };
+  }
+
+  async loginWithAuthorizationCode(code: string) {
+    const data = await apiClient.request('/auth/admin/sessions/exchange', {
+      method: 'POST',
+      body: JSON.stringify({ code }),
+    });
+
+    // Set token in apiClient
+    if (data.accessToken) {
+      apiClient.setToken(data.accessToken);
+    }
+
+    // Return unified format
+    return {
+      accessToken: data.accessToken,
+      user: data.user,
+    };
+  }
+
+  async getCurrentUser() {
+    const response = await apiClient.request('/auth/sessions/current');
+    return response.user;
+  }
+
+  logout() {
+    apiClient.clearToken();
+  }
+
+  /**
+   * Get users list
+   * @param queryParams - Query parameters for pagination
+   * @param searchQuery - Optional search query
+   * @returns Users list with total count
+   */
+  async getUsers(
+    queryParams: string = '',
+    searchQuery?: string
+  ): Promise<{
+    users: UserSchema[];
+    pagination: { offset: number; limit: number; total: number };
+  }> {
+    let url = '/auth/users';
+    const params = new URLSearchParams(queryParams);
+
+    if (searchQuery && searchQuery.trim()) {
+      params.set('search', searchQuery.trim());
+    }
+
+    if (params.toString()) {
+      url += `?${params.toString()}`;
+    }
+
+    const response: {
+      data: UserSchema[];
+      pagination: { offset: number; limit: number; total: number };
+    } = await apiClient.request(url);
+
+    return {
+      users: response.data,
+      pagination: response.pagination,
+    };
+  }
+
+  async getUser(id: string) {
+    return await apiClient.request(`/auth/users/${id}`);
+  }
+
+  async register(email: string, password: string, name?: string) {
+    const response = await apiClient.request('/auth/users', {
+      method: 'POST',
+      body: JSON.stringify({ email, password, name }),
+    });
+
+    return response;
+  }
+
+  async deleteUsers(userIds: string[]) {
+    return apiClient.request('/auth/users', {
+      method: 'DELETE',
+      body: JSON.stringify({ userIds }),
+    });
+  }
+
+  async generateAnonToken(): Promise<{ accessToken: string; message: string }> {
+    return apiClient.request('/auth/tokens/anon', {
+      method: 'POST',
+    });
+  }
+}
+
+export const authService = new AuthService();

package/frontend/src/features/auth/services/oauth.service.ts

@@ -0,0 +1,49 @@
+import { apiClient } from '@/lib/api/client';
+import {
+  OAuthConfigSchema,
+  CreateOAuthConfigRequest,
+  UpdateOAuthConfigRequest,
+  ListOAuthConfigsResponse,
+} from '@insforge/shared-schemas';
+
+export class OAuthConfigService {
+  // List all OAuth configurations
+  async getAllConfigs(): Promise<ListOAuthConfigsResponse> {
+    return apiClient.request('/auth/oauth/configs');
+  }
+
+  // Get specific OAuth configuration by provider
+  async getConfigByProvider(
+    provider: string
+  ): Promise<OAuthConfigSchema & { clientSecret?: string }> {
+    return apiClient.request(`/auth/oauth/configs/${provider}`);
+  }
+
+  // Create new OAuth configuration
+  async createConfig(config: CreateOAuthConfigRequest): Promise<OAuthConfigSchema> {
+    return apiClient.request('/auth/oauth/configs', {
+      method: 'POST',
+      body: JSON.stringify(config),
+    });
+  }
+
+  // Update OAuth configuration
+  async updateConfig(
+    provider: string,
+    config: UpdateOAuthConfigRequest
+  ): Promise<OAuthConfigSchema> {
+    return apiClient.request(`/auth/oauth/configs/${provider}`, {
+      method: 'PUT',
+      body: JSON.stringify(config),
+    });
+  }
+
+  // Delete OAuth configuration
+  async deleteConfig(provider: string): Promise<{ success: boolean; message: string }> {
+    return apiClient.request(`/auth/oauth/configs/${provider}`, {
+      method: 'DELETE',
+    });
+  }
+}
+
+export const oauthConfigService = new OAuthConfigService();

package/frontend/src/features/dashboard/page/DashboardPage.tsx

@@ -0,0 +1,194 @@
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useMetadata } from '@/features/metadata/hooks/useMetadata';
+import { Skeleton } from '@/components/radix/Skeleton';
+import { Card, CardContent } from '@/components/radix/Card';
+import { Users, Database, HardDrive, ArrowLeftRight, Link2 } from 'lucide-react';
+import { useUsers } from '@/features/auth';
+
+export default function DashboardPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { metadata, auth, tables, storage, isLoading } = useMetadata();
+  const { totalUsers } = useUsers();
+
+  const handleNavigateTo = (to: string, state?: { initialTab?: string }) => {
+    const basePath = location.pathname.includes('/cloud')
+      ? location.pathname.replace('/dashboard', '')
+      : location.pathname;
+    void navigate(`${basePath}/${to}`, { state });
+  };
+
+  const handleConnectInsForge = () => {
+    if (window.parent !== window) {
+      // Send message to parent window to open onboarding overlay
+      window.parent.postMessage(
+        {
+          type: 'SHOW_CONNECT_OVERLAY',
+        },
+        '*'
+      );
+    } else {
+      void handleNavigateTo('onboard');
+    }
+  };
+
+  return (
+    <main className="h-full bg-white dark:bg-neutral-800">
+      <div className="flex justify-center py-6 px-0">
+        <div className="flex flex-col gap-6 w-full max-w-[1080px] px-6">
+          {/* Dashboard Header */}
+          <div className="flex items-center justify-between w-full">
+            <h1 className="text-xl font-semibold text-gray-900 dark:text-white tracking-[-0.1px]">
+              Dashboard
+            </h1>
+          </div>
+
+          {/* Connect InsForge Card */}
+          <Card className="w-full bg-white dark:bg-[#333333] rounded-lg border border-gray-200 dark:border-neutral-700 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)]">
+            <CardContent className="px-8 py-6">
+              <div className="flex items-center justify-between">
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center gap-2">
+                    <Link2 className="w-5 h-5 text-black dark:text-white" />
+                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                      Connect InsForge
+                    </h3>
+                  </div>
+                  <p className="text-sm text-gray-600 dark:text-neutral-400">
+                    With InsForge connected, your agent takes care of the backend for you
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  className="flex items-center gap-2 px-4 py-2 bg-emerald-300 hover:bg-emerald-400 text-black rounded font-medium text-sm transition-colors cursor-pointer"
+                  onClick={handleConnectInsForge}
+                >
+                  <ArrowLeftRight className="w-5 h-5" />
+                  Connect
+                </button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Stats Cards */}
+          <div className="flex gap-6 w-full">
+            {/* AUTH Card */}
+            <Card className="flex-1 bg-white dark:bg-[#333333] rounded-lg border border-gray-200 dark:border-neutral-700 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] h-[280px]">
+              <CardContent className="p-8 h-full flex flex-col justify-between">
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center gap-2 h-7">
+                    <Users className="w-5 h-5 text-gray-700 dark:text-white" />
+                    <span className="text-base font-normal text-gray-900 dark:text-white">
+                      AUTH
+                    </span>
+                  </div>
+                </div>
+                <div className="flex flex-col gap-4">
+                  <div className="flex items-baseline gap-2">
+                    {isLoading ? (
+                      <Skeleton className="h-8 w-16 bg-gray-200 dark:bg-neutral-700" />
+                    ) : (
+                      <>
+                        <span className="text-2xl font-normal text-gray-900 dark:text-white tracking-[-0.144px]">
+                          {(totalUsers || 0).toLocaleString()}
+                        </span>
+                        <span className="text-sm font-normal text-gray-500 dark:text-neutral-400">
+                          {totalUsers === 1 ? 'user' : 'users'}
+                        </span>
+                      </>
+                    )}
+                  </div>
+                  {isLoading ? (
+                    <Skeleton className="h-5 w-36 bg-gray-200 dark:bg-neutral-700" />
+                  ) : (
+                    <p className="text-base text-gray-500 dark:text-neutral-400">
+                      {(() => {
+                        const authCount = auth?.oauths.length || 0;
+                        return `${authCount} OAuth ${authCount === 1 ? 'provider' : 'providers'} enabled`;
+                      })()}
+                    </p>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Database Card */}
+            <Card className="flex-1 bg-white dark:bg-[#333333] rounded-lg border border-gray-200 dark:border-neutral-700 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] h-[280px]">
+              <CardContent className="p-8 h-full flex flex-col justify-between">
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center gap-2 h-7">
+                    <Database className="w-5 h-5 text-gray-700 dark:text-white" />
+                    <span className="text-base font-normal text-gray-900 dark:text-white">
+                      Database
+                    </span>
+                  </div>
+                </div>
+                <div className="flex flex-col gap-4">
+                  <div className="flex items-baseline gap-2">
+                    {isLoading ? (
+                      <Skeleton className="h-8 w-14 bg-gray-200 dark:bg-neutral-700" />
+                    ) : (
+                      <>
+                        <span className="text-2xl font-normal text-gray-900 dark:text-white tracking-[-0.144px]">
+                          {(metadata?.database?.totalSize || 0).toFixed(2)}
+                        </span>
+                        <span className="text-sm font-normal text-gray-500 dark:text-neutral-400">
+                          GB
+                        </span>
+                      </>
+                    )}
+                  </div>
+                  {isLoading ? (
+                    <Skeleton className="h-5 w-16 bg-gray-200 dark:bg-neutral-700" />
+                  ) : (
+                    <p className="text-base text-gray-500 dark:text-neutral-400">
+                      {tables.length || 0} {tables.length === 1 ? 'Table' : 'Tables'}
+                    </p>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Storage Card */}
+            <Card className="flex-1 bg-white dark:bg-[#333333] rounded-lg border border-gray-200 dark:border-neutral-700 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] h-[280px]">
+              <CardContent className="p-8 h-full flex flex-col justify-between">
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center gap-2 h-7">
+                    <HardDrive className="w-5 h-5 text-gray-700 dark:text-white" />
+                    <span className="text-base font-normal text-gray-900 dark:text-white">
+                      Storage
+                    </span>
+                  </div>
+                </div>
+                <div className="flex flex-col gap-4">
+                  <div className="flex items-baseline gap-2">
+                    {isLoading ? (
+                      <Skeleton className="h-8 w-14 bg-gray-200 dark:bg-neutral-700" />
+                    ) : (
+                      <>
+                        <span className="text-2xl font-normal text-gray-900 dark:text-white tracking-[-0.144px]">
+                          {(storage?.totalSize || 0).toFixed(2)}
+                        </span>
+                        <span className="text-sm font-normal text-gray-500 dark:text-neutral-400">
+                          GB
+                        </span>
+                      </>
+                    )}
+                  </div>
+                  {isLoading ? (
+                    <Skeleton className="h-5 w-20 bg-gray-200 dark:bg-neutral-700" />
+                  ) : (
+                    <p className="text-base text-gray-500 dark:text-neutral-400">
+                      {storage?.buckets?.length || 0}{' '}
+                      {storage?.buckets?.length === 1 ? 'Bucket' : 'Buckets'}
+                    </p>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

package/frontend/src/features/database/components/ColumnTypeSelect.tsx

@@ -0,0 +1,64 @@
+import { memo } from 'react';
+import { Controller, Control } from 'react-hook-form';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/radix/Select';
+import { columnTypeIcons } from '../constants';
+import { TableFormSchema } from '../schema';
+import { columnTypeSchema } from '@insforge/shared-schemas';
+
+const COLUMN_TYPES_ARRAY = columnTypeSchema.options;
+
+// Pre-render select options to avoid re-creating them on every render
+const SELECT_OPTIONS = COLUMN_TYPES_ARRAY.map((type) => {
+  const TypeIcon = columnTypeIcons[type];
+  return (
+    <SelectItem key={type} value={type}>
+      <div className="flex items-center gap-2">
+        <TypeIcon className="h-4 w-4" />
+        <span>{type}</span>
+      </div>
+    </SelectItem>
+  );
+});
+
+interface ColumnTypeSelectProps {
+  control: Control<TableFormSchema>;
+  name: `columns.${number}.type`;
+  disabled?: boolean;
+  className: string;
+}
+
+export const ColumnTypeSelect = memo(function TableFormSelect({
+  control,
+  name,
+  disabled,
+  className,
+}: ColumnTypeSelectProps) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field }) => {
+        const Icon = columnTypeIcons[field.value as keyof typeof columnTypeIcons];
+        return (
+          <Select
+            disabled={disabled}
+            value={field.value}
+            onValueChange={(value) => {
+              if (value) {
+                field.onChange(value);
+              }
+            }}
+          >
+            <SelectTrigger className={className}>
+              <div className="flex items-center gap-2">
+                {Icon && <Icon className="h-4 w-4 text-zinc-500 dark:text-neutral-400" />}
+                <span className="text-black dark:text-white">{field.value}</span>
+              </div>
+            </SelectTrigger>
+            <SelectContent>{SELECT_OPTIONS}</SelectContent>
+          </Select>
+        );
+      }}
+    />
+  );
+});