insforge 0.3.1

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

@@ -0,0 +1,148 @@
+import { apiClient } from '@/lib/api/client';
+import {
+  ListModelsResponse,
+  AIConfigurationSchema,
+  AIConfigurationWithUsageSchema,
+  CreateAIConfigurationRequest,
+  UpdateAIConfigurationRequest,
+  AIUsageSummarySchema,
+  AIUsageRecordSchema,
+  ListAIUsageResponse,
+} from '@insforge/shared-schemas';
+
+export class AiService {
+  getModels(): Promise<ListModelsResponse> {
+    return apiClient.request('/ai/models', {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  // AI Configuration endpoints
+  async createConfiguration(
+    data: CreateAIConfigurationRequest
+  ): Promise<{ id: string; message: string }> {
+    return apiClient.request('/ai/configurations', {
+      method: 'POST',
+      headers: apiClient.withAccessToken(),
+      body: JSON.stringify(data),
+    });
+  }
+
+  async listConfigurations(): Promise<AIConfigurationWithUsageSchema[]> {
+    return apiClient.request('/ai/configurations', {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async getConfiguration(id: string): Promise<AIConfigurationSchema> {
+    return apiClient.request(`/ai/configurations/${id}`, {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async updateConfiguration(
+    id: string,
+    data: UpdateAIConfigurationRequest
+  ): Promise<{ message: string }> {
+    return apiClient.request(`/ai/configurations/${id}`, {
+      method: 'PATCH',
+      headers: apiClient.withAccessToken(),
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteConfiguration(id: string): Promise<{ message: string }> {
+    return apiClient.request(`/ai/configurations/${id}`, {
+      method: 'DELETE',
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  // AI Usage endpoints
+  async getUsageSummary(params?: {
+    configId?: string;
+    startDate?: string;
+    endDate?: string;
+  }): Promise<AIUsageSummarySchema> {
+    const queryParams = new URLSearchParams();
+    if (params?.configId) {
+      queryParams.append('configId', params.configId);
+    }
+    if (params?.startDate) {
+      queryParams.append('startDate', params.startDate);
+    }
+    if (params?.endDate) {
+      queryParams.append('endDate', params.endDate);
+    }
+
+    const queryString = queryParams.toString();
+    const url = `/ai/usage/summary${queryString ? `?${queryString}` : ''}`;
+
+    return apiClient.request(url, {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async getUsageRecords(params?: {
+    startDate?: string;
+    endDate?: string;
+    limit?: string;
+    offset?: string;
+  }): Promise<ListAIUsageResponse> {
+    const queryParams = new URLSearchParams();
+    if (params?.startDate) {
+      queryParams.append('startDate', params.startDate);
+    }
+    if (params?.endDate) {
+      queryParams.append('endDate', params.endDate);
+    }
+    if (params?.limit) {
+      queryParams.append('limit', params.limit);
+    }
+    if (params?.offset) {
+      queryParams.append('offset', params.offset);
+    }
+
+    const queryString = queryParams.toString();
+    const url = `/ai/usage${queryString ? `?${queryString}` : ''}`;
+
+    return apiClient.request(url, {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async getConfigUsageRecords(
+    configId: string,
+    params?: {
+      startDate?: string;
+      endDate?: string;
+    }
+  ): Promise<AIUsageRecordSchema[]> {
+    const queryParams = new URLSearchParams();
+    if (params?.startDate) {
+      queryParams.append('startDate', params.startDate);
+    }
+    if (params?.endDate) {
+      queryParams.append('endDate', params.endDate);
+    }
+
+    const queryString = queryParams.toString();
+    const url = `/ai/usage/config/${configId}${queryString ? `?${queryString}` : ''}`;
+
+    return apiClient.request(url, {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async getRemainingCredits(): Promise<{
+    usage: number;
+    limit: number | null;
+    remaining: number | null;
+  }> {
+    return apiClient.request('/ai/credits', {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+}
+
+export const aiService = new AiService();

package/frontend/src/features/auth/components/AddOAuthDialog.tsx

@@ -0,0 +1,106 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/radix/Button';
+import { Checkbox } from '@/components/Checkbox';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/radix/Dialog';
+import { OAuthProviderInfo } from './AuthMethodTab';
+
+interface AddOAuthDialogProps {
+  providers: OAuthProviderInfo[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (selectedId: 'google' | 'github') => void;
+  enabledProviders: Record<'google' | 'github', boolean>;
+}
+
+export function AddOAuthDialog({
+  providers,
+  open,
+  onOpenChange,
+  onConfirm,
+  enabledProviders,
+}: AddOAuthDialogProps) {
+  const [selectedId, setSelectedId] = useState<'google' | 'github' | null>(null);
+
+  // Reset selection when dialog opens
+  useEffect(() => {
+    if (open) {
+      setSelectedId(null);
+    }
+  }, [open]);
+
+  const hasSelection = selectedId !== null;
+
+  // Filter out already enabled providers
+  const availableProviders = providers.filter((provider) => !enabledProviders[provider.id]);
+
+  const selectProvider = (id: 'google' | 'github') => {
+    setSelectedId(id);
+  };
+
+  const handleConfirm = () => {
+    if (selectedId) {
+      onConfirm(selectedId);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[600px] p-0 gap-0 dark:bg-neutral-800">
+        <DialogHeader className="pl-6 pr-4 py-3 border-b border-zinc-200 dark:border-neutral-700">
+          <DialogTitle className="text-lg font-semibold text-zinc-950 dark:text-white">
+            Add Authentication
+          </DialogTitle>
+        </DialogHeader>
+        <div className="p-6">
+          {availableProviders.length > 0 ? (
+            <div className="grid grid-cols-2 gap-3">
+              {availableProviders.map((p) => (
+                <button
+                  key={p.id}
+                  onClick={() => selectProvider(p.id)}
+                  className="flex items-center justify-start gap-6 rounded-[8px] p-3 bg-white hover:bg-zinc-100 dark:bg-[#333333] dark:hover:bg-neutral-700 border border-neutral-200 dark:border-neutral-700 transition-colors"
+                >
+                  <div className="w-4 h-4" onClick={(e) => e.stopPropagation()}>
+                    <Checkbox checked={selectedId === p.id} onChange={() => selectProvider(p.id)} />
+                  </div>
+                  <div className="flex items-center gap-3">
+                    {p.icon}
+                    <p className="text-sm font-medium text-zinc-950 dark:text-white">{p.name}</p>
+                  </div>
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-8">
+              <p className="text-sm text-zinc-500 dark:text-neutral-400">
+                All authentication methods have been added.
+              </p>
+            </div>
+          )}
+        </div>
+        <DialogFooter className="px-6 py-4 border-t border-zinc-200 dark:border-neutral-700">
+          <Button
+            variant="outline"
+            className="w-fit h-9 px-3 py-2 rounded-sm dark:bg-neutral-600 dark:text-white dark:border-transparent dark:hover:bg-neutral-700"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            className="h-9 px-3 py-2 rounded-sm dark:bg-emerald-300 dark:text-black dark:hover:bg-emerald-400"
+            onClick={handleConfirm}
+            disabled={!hasSelection}
+          >
+            Add OAuth
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/src/features/auth/components/AuthMethodTab.tsx

@@ -0,0 +1,238 @@
+import { useState, useCallback, useMemo, ReactElement } from 'react';
+import { Button } from '@/components/radix/Button';
+import { MoreHorizontal, Plus, Trash2, Pencil } from 'lucide-react';
+import Github from '@/assets/logos/github.svg?react';
+import Google from '@/assets/logos/google.svg?react';
+import { OAuthEmptyState } from './OAuthEmptyState';
+import { OAuthConfigDialog } from './OAuthConfigDialog';
+import { AddOAuthDialog } from './AddOAuthDialog';
+import { useOAuthConfig } from '@/features/auth/hooks/useOAuthConfig';
+import { useConfirm } from '@/lib/hooks/useConfirm';
+import { ConfirmDialog } from '@/components/ConfirmDialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/radix/DropdownMenu';
+
+const providers: OAuthProviderInfo[] = [
+  {
+    id: 'google',
+    name: 'Google OAuth',
+    icon: <Google className="w-6 h-6" />,
+    description: 'Configure Google authentication for your users',
+    setupUrl: 'https://console.cloud.google.com/apis/credentials',
+  },
+  {
+    id: 'github',
+    name: 'GitHub OAuth',
+    icon: <Github className="w-6 h-6 dark:text-white" />,
+    description: 'Configure GitHub authentication for your users',
+    setupUrl: 'https://github.com/settings/developers',
+  },
+];
+
+export interface OAuthProviderInfo {
+  id: 'google' | 'github';
+  name: string;
+  icon: ReactElement;
+  description: string;
+  setupUrl: string;
+}
+
+export function AuthMethodTab() {
+  const [selectedProvider, setSelectedProvider] = useState<OAuthProviderInfo>();
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isSelectDialogOpen, setIsSelectDialogOpen] = useState(false);
+  const { confirm, confirmDialogProps } = useConfirm();
+  const {
+    configs,
+    isLoadingConfigs,
+    deleteConfig,
+    refetchConfigs,
+    getProviderConfig,
+    isProviderConfigured,
+  } = useOAuthConfig();
+
+  const handleConfigureProvider = (provider: OAuthProviderInfo) => {
+    setSelectedProvider(provider);
+    setIsDialogOpen(true);
+  };
+
+  const deleteOAuthConfig = async (providerId: 'google' | 'github', providerName: string) => {
+    const shouldDelete = await confirm({
+      title: `Delete ${providerName} OAuth`,
+      description: `Are you sure you want to delete the ${providerName} configuration? This action cannot be undone.`,
+      confirmText: 'Delete',
+      cancelText: 'Cancel',
+      destructive: true,
+    });
+
+    if (shouldDelete) {
+      try {
+        deleteConfig(providerId);
+      } catch (error) {
+        console.error(`Failed to delete ${providerId} OAuth:`, error);
+      }
+    }
+  };
+
+  const handleCloseDialog = () => {
+    setIsDialogOpen(false);
+    setSelectedProvider(undefined);
+  };
+
+  const hasAuthMethods = useMemo(() => {
+    return configs.length > 0;
+  }, [configs]);
+
+  const openSelectDialog = () => {
+    setIsSelectDialogOpen(true);
+  };
+
+  const enabledProviders = useMemo(() => {
+    return {
+      google: isProviderConfigured('google'),
+      github: isProviderConfigured('github'),
+    };
+  }, [isProviderConfigured]);
+
+  // Check if all providers are enabled
+  const allProvidersEnabled = useMemo(() => {
+    return providers.every((provider) => enabledProviders[provider.id]);
+  }, [enabledProviders]);
+
+  const handleConfirmSelected = (selectedId: 'google' | 'github') => {
+    // Find the selected provider
+    const selectedProvider = providers.find((p) => p.id === selectedId);
+    if (!selectedProvider) {
+      return;
+    }
+
+    // Close the select dialog and open the method dialog
+    setIsSelectDialogOpen(false);
+    setSelectedProvider(selectedProvider);
+    setIsDialogOpen(true);
+  };
+
+  const handleSuccess = useCallback(() => {
+    // Refresh configuration after successful update
+    void refetchConfigs();
+  }, [refetchConfigs]);
+
+  if (isLoadingConfigs) {
+    return (
+      <div className="flex items-center justify-center py-16">
+        <div className="text-center">
+          <div className="text-sm text-gray-500 dark:text-zinc-400">
+            Loading OAuth configuration...
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="flex flex-col gap-6 h-full overflow-hidden p-6 w-full max-w-[1080px] mx-auto">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">Auth Method</h2>
+          {!allProvidersEnabled && (
+            <Button
+              className="h-9 pr-3 pl-2 py-2 gap-2 dark:bg-neutral-700 dark:text-white dark:hover:bg-neutral-600 text-sm font-medium rounded-sm"
+              onClick={openSelectDialog}
+            >
+              <Plus className="w-5 h-5" />
+              Add Auth
+            </Button>
+          )}
+        </div>
+
+        <div className="flex-1">
+          {hasAuthMethods ? (
+            <div className="grid grid-cols-2 gap-x-3 gap-y-6">
+              {providers.map((provider) => {
+                const providerConfig = getProviderConfig(provider.id);
+                if (!providerConfig) {
+                  return null;
+                }
+
+                return (
+                  <div
+                    key={provider.id}
+                    className="flex items-center justify-between h-15 p-4 bg-white rounded-[8px] border border-gray-200 dark:border-transparent dark:bg-[#333333]"
+                  >
+                    <div className="flex-1 flex items-center gap-3">
+                      {provider.icon}
+
+                      <div className="text-sm font-medium text-black dark:text-white">
+                        {provider.name}
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-3">
+                      {providerConfig.useSharedKey && (
+                        <span className="px-2 py-0.5 text-xs font-medium text-neutral-500 dark:text-neutral-400 border border-neutral-500 dark:border-neutral-400 rounded">
+                          Shared Keys
+                        </span>
+                      )}
+
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            className="h-7 w-7 p-1 text-gray-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700"
+                            variant="ghost"
+                            size="sm"
+                          >
+                            <MoreHorizontal className="w-5 h-5" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" className="w-40 py-1 px-2">
+                          <DropdownMenuItem
+                            onClick={() => handleConfigureProvider(provider)}
+                            className="py-2 px-3 flex items-center gap-3 cursor-pointer"
+                          >
+                            <Pencil className="w-5 h-5" />
+                            Edit
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={() => void deleteOAuthConfig(provider.id, provider.name)}
+                            className="py-2 px-3 flex items-center gap-3 cursor-pointer text-red-600 dark:text-red-400"
+                          >
+                            <Trash2 className="w-5 h-5" />
+                            Delete
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <OAuthEmptyState />
+          )}
+        </div>
+      </div>
+
+      <OAuthConfigDialog
+        provider={selectedProvider}
+        isOpen={isDialogOpen}
+        onClose={handleCloseDialog}
+        onSuccess={handleSuccess}
+      />
+
+      <AddOAuthDialog
+        providers={providers}
+        open={isSelectDialogOpen}
+        onOpenChange={setIsSelectDialogOpen}
+        onConfirm={handleConfirmSelected}
+        enabledProviders={enabledProviders}
+      />
+
+      {/* Confirm Dialog */}
+      <ConfirmDialog {...confirmDialogProps} />
+    </>
+  );
+}