@odvi/create-dtt-framework 0.1.3 → 0.1.6

package/template/src/features/health-check/components/health-dashboard.tsx

@@ -0,0 +1,374 @@
+'use client'
+
+import { SERVICES } from '@/features/health-check/config'
+import { LoadingSpinner } from '@/components/shared/loading-spinner'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { CheckCircle, XCircle, AlertCircle, Clock, Shield, Play, RefreshCw, ChevronDown } from 'lucide-react'
+import { useState } from 'react'
+import type { HealthStatus } from '@/features/health-check/types'
+import { useHealthStore } from '../stores/health-store'
+import { useQueryClient } from '@tanstack/react-query'
+import { useAuth } from '@clerk/nextjs'
+
+const statusIcons: Record<HealthStatus, React.ReactNode> = {
+  healthy: <CheckCircle className="h-5 w-5 text-green-500" />,
+  unhealthy: <XCircle className="h-5 w-5 text-red-500" />,
+  error: <XCircle className="h-5 w-5 text-red-500" />,
+  pending: <Clock className="h-5 w-5 text-yellow-500" />,
+  unconfigured: <Shield className="h-5 w-5 text-gray-400" />,
+}
+
+const statusColors: Record<HealthStatus, string> = {
+  healthy: 'bg-green-100 text-green-800 border-green-200',
+  unhealthy: 'bg-red-100 text-red-800 border-red-200',
+  error: 'bg-red-100 text-red-800 border-red-200',
+  pending: 'bg-yellow-100 text-yellow-800 border-yellow-200',
+  unconfigured: 'bg-gray-100 text-gray-800 border-gray-200',
+}
+
+interface IndividualCheckResult {
+  name: string
+  status: HealthStatus
+  responseTimeMs?: number
+  error?: string
+  httpStatus?: number
+  timestamp?: string
+  data?: any
+}
+
+export function HealthDashboard() {
+  const [individualChecks, setIndividualChecks] = useState<Record<string, IndividualCheckResult>>({})
+  const [loadingChecks, setLoadingChecks] = useState<Set<string>>(new Set())
+  const healthStore = useHealthStore()
+  const queryClient = useQueryClient()
+  const { getToken } = useAuth()
+
+  const totalHealthChecks = SERVICES.reduce((total, service) => total + service.checks.length, 0)
+
+  const runIndividualCheck = async (serviceName: string, checkName: string, endpoint: string) => {
+    const checkKey = `${serviceName}-${checkName}`
+    setLoadingChecks((prev) => new Set(prev).add(checkKey))
+
+    try {
+      let result: { status?: string; responseTimeMs?: number; error?: string; data?: any }
+      const start = performance.now()
+
+      if (endpoint.startsWith('client:')) {
+        // Handle client-side checks
+        await new Promise((resolve) => setTimeout(resolve, 500)) // Simulate async work
+
+        if (endpoint === 'client:zustand') {
+          healthStore.increment()
+          const currentCount = useHealthStore.getState().counter
+          result = {
+            status: 'healthy',
+            responseTimeMs: Math.round(performance.now() - start),
+            data: { 
+              message: 'Zustand store updated successfully',
+              counter: currentCount 
+            }
+          }
+        } else if (endpoint === 'client:query') {
+           // Simulate a query check
+           const queryState = queryClient.getQueryCache().getAll()
+           result = {
+             status: 'healthy',
+             responseTimeMs: Math.round(performance.now() - start),
+             data: {
+               message: 'Query Client is active',
+               queryCount: queryState.length,
+               isFetching: queryClient.isFetching()
+             }
+           }
+        } else {
+          throw new Error(`Unknown client endpoint: ${endpoint}`)
+        }
+      } else {
+        // Get auth token if available
+        const token = await getToken()
+        
+        // Handle server-side checks
+        const response = await fetch(`/api/health${endpoint}`, {
+          method: ['/database/write', '/database/delete', '/storage/upload', '/storage/delete'].includes(endpoint) ? 'POST' : 'GET',
+          headers: {
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+          },
+          ...(endpoint === '/database/delete' || endpoint === '/storage/delete' ? { method: 'DELETE' } : {})
+        })
+        // Check content type to ensure JSON
+        const contentType = response.headers.get('content-type')
+        if (!contentType || !contentType.includes('application/json')) {
+           const text = await response.text()
+           throw new Error(`Invalid response from server: ${text.substring(0, 100)}...`)
+        }
+        result = await response.json()
+      }
+
+      setIndividualChecks((prev) => ({
+        ...prev,
+        [checkKey]: {
+          name: checkName,
+          status: (result.status ?? ('healthy')) as HealthStatus,
+          responseTimeMs: result.responseTimeMs,
+          error: result.error,
+          httpStatus: endpoint.startsWith('client:') ? 200 : undefined,
+          timestamp: new Date().toISOString(),
+          data: result.data,
+        },
+      }))
+    } catch (err) {
+      setIndividualChecks((prev) => ({
+        ...prev,
+        [checkKey]: {
+          name: checkName,
+          status: 'error',
+          error: err instanceof Error ? err.message : 'Check failed',
+          timestamp: new Date().toISOString(),
+          // Include responseTimeMs even on error for better UX
+           responseTimeMs: 0,
+        },
+      }))
+    } finally {
+      setLoadingChecks((prev) => {
+        const next = new Set(prev)
+        next.delete(checkKey)
+        return next
+      })
+    }
+  }
+
+  const runServiceChecks = async (serviceName: string) => {
+    const service = SERVICES.find((s) => s.name === serviceName)
+    if (!service) return
+
+    for (const check of service.checks) {
+      await runIndividualCheck(serviceName, check.name, check.endpoint)
+    }
+  }
+
+  const runAllChecks = async () => {
+    // Run all checks in parallel
+    const promises = SERVICES.flatMap((service) =>
+      service.checks.map((check) => runIndividualCheck(service.name, check.name, check.endpoint))
+    )
+    await Promise.all(promises)
+  }
+
+  // Calculate derived status from individual checks
+  const getServiceStatus = (serviceName: string): HealthStatus => {
+    const service = SERVICES.find((s) => s.name === serviceName)
+    if (!service) return 'pending'
+
+    const checks = service.checks
+      .map((check) => {
+        const checkKey = `${serviceName}-${check.name}`
+        return individualChecks[checkKey]
+      })
+      .filter((c): c is IndividualCheckResult => !!c)
+
+    if (checks.length === 0) return 'pending'
+
+    if (checks.some((c) => c.status === 'error' || (c.httpStatus && c.httpStatus >= 400))) return 'error'
+    if (checks.some((c) => c.status === 'unconfigured')) return 'unconfigured'
+    if (checks.length < service.checks.length) return 'pending'
+    
+    return 'healthy'
+  }
+
+  const overallStatus = (() => {
+    const statuses = SERVICES.map((s) => getServiceStatus(s.name))
+    if (statuses.some((s) => s === 'error')) return 'error'
+    if (statuses.some((s) => s === 'pending')) return 'pending'
+    if (statuses.some((s) => s === 'unconfigured')) return 'unconfigured'
+    return 'healthy'
+  })()
+
+  const lastUpdated = Object.values(individualChecks)
+    .map((c) => c.timestamp)
+    .filter(Boolean)
+    .sort()
+    .pop()
+
+  return (
+    <div className="space-y-6">
+      {/* Overall Status */}
+      <Card className="p-6">
+        <Collapsible defaultOpen>
+          <CollapsibleTrigger className="w-full group">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <div className="text-3xl">{statusIcons[overallStatus]}</div>
+                <div className="text-left">
+                  <h2 className="text-xl font-semibold">Overall System Status</h2>
+                </div>
+              </div>
+              <div className="flex items-center gap-4">
+                <Badge className={statusColors[overallStatus]} variant="outline">
+                  {overallStatus.toUpperCase()}
+                </Badge>
+                <ChevronDown className="h-4 w-4 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180" />
+              </div>
+            </div>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="mt-4 flex gap-2">
+              <Button onClick={runAllChecks} size="sm" className="gap-2">
+                <RefreshCw className="h-4 w-4" />
+                Run All Checks ({totalHealthChecks})
+              </Button>
+              {lastUpdated && (
+                <p className="text-xs text-muted-foreground self-center ml-auto">
+                  Last updated: {new Date(lastUpdated).toLocaleString()}
+                </p>
+              )}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </Card>
+
+      {/* Service Cards */}
+      <div className="space-y-4">
+        {SERVICES.map((service) => {
+          const serviceStatus = getServiceStatus(service.name)
+          const isServiceLoading = Array.from(loadingChecks).some((key) => key.startsWith(`${service.name}-`))
+
+          return (
+            <Card key={service.name} className="p-4">
+              <Collapsible defaultOpen>
+                <CollapsibleTrigger className="w-full group">
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center gap-3">
+                      <div className="text-xl">{statusIcons[serviceStatus]}</div>
+                      <div className="text-left">
+                        <h3 className="font-semibold">{service.name}</h3>
+                        <p className="text-sm text-muted-foreground">
+                          {service.checks.length} check{(service.checks.length as number) !== 1 ? 's' : ''}
+                        </p>
+                      </div>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        className="gap-2 ml-2"
+                        disabled={isServiceLoading}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          runServiceChecks(service.name)
+                        }}
+                      >
+                        {isServiceLoading ? (
+                          <LoadingSpinner className="h-3 w-3" />
+                        ) : (
+                          <Play className="h-3 w-3" />
+                        )}
+                        Run Checks
+                      </Button>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <Badge className={statusColors[serviceStatus]} variant="outline">
+                        {serviceStatus.toUpperCase()}
+                      </Badge>
+                      <ChevronDown className="h-4 w-4 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180" />
+                    </div>
+                  </div>
+                </CollapsibleTrigger>
+
+                <CollapsibleContent>
+                  <div className="space-y-3">
+                    {service.checks.map((check) => {
+                      const checkKey = `${service.name}-${check.name}`
+                      const individualResult = individualChecks[checkKey]
+                      const isLoadingCheck = loadingChecks.has(checkKey)
+                      const checkStatus: HealthStatus = individualResult?.status ?? 'pending'
+
+                      return (
+                        <div key={check.name} className="border rounded-lg p-3 bg-muted/30">
+                          <Collapsible defaultOpen={!!individualResult}>
+                            <div className="flex items-center justify-between mb-2">
+                              <CollapsibleTrigger className="group flex items-center gap-2 hover:opacity-80 transition-opacity">
+                                <ChevronDown className="h-4 w-4 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180" />
+                                <div className="flex items-center gap-2 text-left">
+                                  <div className="text-lg">{statusIcons[checkStatus]}</div>
+                                  <div>
+                                    <p className="font-medium text-sm">{check.name}</p>
+                                    <p className="text-xs text-muted-foreground">{check.endpoint}</p>
+                                  </div>
+                                </div>
+                              </CollapsibleTrigger>
+                              <Button
+                                size="sm"
+                                variant="outline"
+                                onClick={() => runIndividualCheck(service.name, check.name, check.endpoint)}
+                                disabled={isLoadingCheck}
+                                className="gap-1"
+                              >
+                                {isLoadingCheck ? (
+                                  <>
+                                    <LoadingSpinner className="h-3 w-3" />
+                                    Running...
+                                  </>
+                                ) : (
+                                  <>
+                                    <Play className="h-3 w-3" />
+                                    Run Check
+                                  </>
+                                )}
+                              </Button>
+                            </div>
+
+                            {/* Individual Check Result */}
+                            <CollapsibleContent>
+                              {individualResult && (
+                                <div className="mt-2 p-3 bg-background rounded border">
+                                  <div className="flex items-center justify-between mb-2">
+                                    <div className="flex items-center gap-2">
+                                      {statusIcons[individualResult.status]}
+                                      <Badge className={statusColors[individualResult.status]} variant="outline">
+                                        {individualResult.status.toUpperCase()}
+                                      </Badge>
+                                    </div>
+                                    {individualResult.responseTimeMs && (
+                                      <span className="text-xs text-muted-foreground">
+                                        {individualResult.responseTimeMs}ms
+                                      </span>
+                                    )}
+                                  </div>
+                                  {individualResult.error && (
+                                    <p className="text-sm text-red-600 mt-1">{individualResult.error}</p>
+                                  )}
+                                  {individualResult.httpStatus && (
+                                    <p className="text-xs text-muted-foreground mt-1">
+                                      HTTP Status: {individualResult.httpStatus}
+                                    </p>
+                                  )}
+                                  {individualResult.timestamp && (
+                                    <p className="text-xs text-muted-foreground mt-1">
+                                      Checked at: {new Date(individualResult.timestamp).toLocaleString()}
+                                    </p>
+                                  )}
+                                  {individualResult.data && (
+                                    <div className="mt-2">
+                                      <pre className="p-2 rounded bg-muted text-xs overflow-auto max-h-[200px] whitespace-pre-wrap">
+                                        {JSON.stringify(individualResult.data, null, 2)}
+                                      </pre>
+                                    </div>
+                                  )}
+                                </div>
+                              )}
+                            </CollapsibleContent>
+                          </Collapsible>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            </Card>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/template/src/features/health-check/config.ts

@@ -0,0 +1,71 @@
+// Health check service configuration placeholder
+export const SERVICES = [
+  {
+    name: 'Clerk Authentication',
+    icon: 'key',
+    checks: [
+      { name: 'Environment Config', endpoint: '/clerk/env' },
+      { name: 'API Connectivity', endpoint: '/clerk/api-status' },
+      { name: 'Get Current User', endpoint: '/clerk/user' },
+      { name: 'Get Org Membership', endpoint: '/clerk/org' },
+      { name: 'List Org Members', endpoint: '/clerk/members' },
+    ],
+  },
+  {
+    name: 'Supabase Database',
+    icon: 'database',
+    checks: [
+      { name: 'Write Test Row', endpoint: '/database/write' },
+      { name: 'Read Test Row', endpoint: '/database/read' },
+      { name: 'Delete Test Row', endpoint: '/database/delete' },
+    ],
+  },
+  {
+    name: 'Supabase Storage',
+    icon: 'folder',
+    checks: [
+      { name: 'Upload Test File', endpoint: '/storage/upload' },
+      { name: 'Download Test File', endpoint: '/storage/download' },
+      { name: 'Delete Test File', endpoint: '/storage/delete' },
+    ],
+  },
+  {
+    name: 'Supabase Edge Functions',
+    icon: 'zap',
+    checks: [
+      { name: 'Ping Edge Function', endpoint: '/edge/ping' },
+      { name: 'Test Auth Header', endpoint: '/edge/auth' },
+    ],
+  },
+  {
+    name: 'Snowflake',
+    icon: 'snowflake',
+    checks: [
+      { name: 'Test Connection', endpoint: '/snowflake/connect' },
+      { name: 'Execute Query', endpoint: '/snowflake/query' },
+    ],
+  },
+  {
+    name: 'NextBank',
+    icon: 'building',
+    checks: [
+      { name: 'Ping API', endpoint: '/nextbank/ping' },
+    ],
+  },
+  {
+    name: 'Framework',
+    icon: 'code',
+    checks: [
+      { name: 'Hono API', endpoint: '/framework/hono' },
+      { name: 'Drizzle ORM', endpoint: '/framework/drizzle' },
+    ],
+  },
+  {
+    name: 'Client State',
+    icon: 'cpu',
+    checks: [
+      { name: 'Zustand Store', endpoint: 'client:zustand' },
+      { name: 'TanStack Query', endpoint: 'client:query' },
+    ],
+  },
+] as const

package/template/src/features/health-check/index.ts

@@ -0,0 +1,4 @@
+// Health check feature index placeholder
+export { HealthDashboard } from './components/health-dashboard'
+export { SERVICES } from './config'
+export type { HealthStatus, ServiceCheck, ServiceHealth } from './types'

package/template/src/features/health-check/stores/health-store.ts

@@ -0,0 +1,14 @@
+import { create } from 'zustand'
+
+interface HealthStore {
+  counter: number
+  increment: () => void
+  reset: () => void
+}
+
+export const useHealthStore = create<HealthStore>((set) => ({
+  counter: 0,
+  increment: () => set((state) => ({ counter: state.counter + 1 })),
+  reset: () => set({ counter: 0 }),
+}))
+

package/template/src/features/health-check/types.ts

@@ -0,0 +1,18 @@
+// Health check types placeholder
+export type HealthStatus = 'healthy' | 'unhealthy' | 'error' | 'pending' | 'unconfigured'
+
+export interface ServiceCheck {
+  name: string
+  endpoint: string
+  status: HealthStatus
+  responseTimeMs?: number
+  error?: string
+}
+
+export interface ServiceHealth {
+  name: string
+  icon: string
+  status: HealthStatus
+  responseTimeMs: number
+  checks: ServiceCheck[]
+}

package/template/src/hooks/__tests__/use-debounce.test.tsx

@@ -0,0 +1,28 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useDebounce } from '../utils/use-debounce';
+
+describe('useDebounce hook', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should return initial value immediately', () => {
+    const { result } = renderHook(() => useDebounce('test', 500));
+    expect(result.current).toBe('test');
+  });
+
+  it('should cleanup timer on unmount', () => {
+    const clearTimeoutSpy = vi.spyOn(global, 'clearTimeout');
+
+    const { unmount } = renderHook(() => useDebounce('test', 500));
+
+    unmount();
+
+    expect(clearTimeoutSpy).toHaveBeenCalled();
+  });
+});

package/template/src/hooks/queries/use-health-checks.ts

@@ -0,0 +1,16 @@
+// Health checks query hook placeholder
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+
+export function useHealthChecks() {
+  return useQuery({
+    queryKey: ['health-checks'],
+    queryFn: async () => {
+      const response = await fetch('/api/health/all')
+      if (!response.ok) throw new Error('Failed to fetch health checks')
+      return response.json()
+    },
+    enabled: false,
+  })
+}

package/template/src/hooks/utils/use-debounce.ts

@@ -0,0 +1,20 @@
+// Debounce hook placeholder
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export function useDebounce<T>(value: T, delay: number = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}

package/template/src/lib/__tests__/utils.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest';
+import { cn } from '../utils';
+
+describe('cn utility function', () => {
+  it('should merge class names correctly', () => {
+    expect(cn('foo', 'bar')).toBe('foo bar');
+  });
+
+  it('should handle conditional classes', () => {
+    expect(cn('foo', false && 'bar', 'baz')).toBe('foo baz');
+  });
+
+  it('should handle undefined and null values', () => {
+    expect(cn('foo', undefined, null, 'bar')).toBe('foo bar');
+  });
+
+  it('should handle empty strings', () => {
+    expect(cn('foo', '', 'bar')).toBe('foo bar');
+  });
+
+  it('should merge Tailwind classes correctly - later classes should override earlier ones', () => {
+    expect(cn('px-2 py-1', 'px-4')).toBe('py-1 px-4');
+  });
+
+  it('should handle arrays of classes', () => {
+    expect(cn(['foo', 'bar'], 'baz')).toBe('foo bar baz');
+  });
+
+  it('should handle objects with conditional classes', () => {
+    expect(cn({ foo: true, bar: false, baz: true })).toBe('foo baz');
+  });
+
+  it('should handle mixed input types', () => {
+    expect(cn('foo', { bar: true }, ['baz'], undefined)).toBe('foo bar baz');
+  });
+
+  it('should handle conflicting Tailwind utility classes', () => {
+    expect(cn('text-red-500', 'text-blue-500')).toBe('text-blue-500');
+  });
+
+  it('should handle responsive classes', () => {
+    expect(cn('px-2', 'md:px-4', 'lg:px-6')).toBe('px-2 md:px-4 lg:px-6');
+  });
+
+  it('should return empty string when no valid classes provided', () => {
+    expect(cn('', false, null, undefined)).toBe('');
+  });
+
+  it('should handle numbers converted to strings', () => {
+    expect(cn('foo', 123 as any)).toBe('foo 123');
+  });
+});