@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha.1

package/src/routes/admin/app-for-catalog/$id.tsx

@@ -0,0 +1,468 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import type { Control, FieldValues } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { useTRPC } from '~/api/infra/trpc'
+import { IconPickerField } from '~/components/IconPickerField'
+import type { Screenshot } from '~/modules/appCatalog/ScreenshotManager'
+import { ScreenshotManager } from '~/modules/appCatalog/ScreenshotManager'
+import { Button } from '~/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '~/ui/card'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '~/ui/form'
+import { Input } from '~/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '~/ui/select'
+import { Textarea } from '~/ui/textarea'
+
+export const Route = createFileRoute('/admin/app-for-catalog/$id')({
+  component: RouteComponent,
+  async loader({ params, context }) {
+    const { id } = params
+    if (id === 'new') {
+      return { app: null }
+    }
+
+    const { trpcClient } = context
+    const app = await trpcClient.appCatalogAdmin.getById.query({ id })
+    return { app }
+  },
+  staticData: {
+    breadcrumb: {
+      title: 'Edit App',
+    },
+  },
+})
+
+type AccessType =
+  | 'bot'
+  | 'ticketing'
+  | 'email'
+  | 'self-service'
+  | 'documentation'
+  | 'manual'
+
+const ACCESS_TYPES: ReadonlyArray<{ value: AccessType; label: string }> = [
+  { value: 'self-service', label: 'Self Service' },
+  { value: 'ticketing', label: 'Ticketing' },
+  { value: 'bot', label: 'Bot' },
+  { value: 'email', label: 'Email' },
+  { value: 'documentation', label: 'Documentation' },
+  { value: 'manual', label: 'Manual' },
+]
+
+const formSchema = z.object({
+  slug: z
+    .string()
+    .min(1, 'Slug is required')
+    .regex(
+      /^[a-z0-9-]+$/,
+      'Slug must contain only lowercase letters, numbers, and hyphens',
+    ),
+  displayName: z.string().min(1, 'Display name is required'),
+  description: z.string().min(1, 'Description is required'),
+  accessType: z.enum([
+    'self-service',
+    'ticketing',
+    'bot',
+    'email',
+    'documentation',
+    'manual',
+  ]),
+  iconName: z.string().optional(),
+  appUrl: z.string().url('Must be a valid URL').optional().or(z.literal('')),
+  notes: z.string().optional(),
+  links: z.string().default('[]'),
+})
+
+type FormData = z.infer<typeof formSchema>
+
+function RouteComponent() {
+  const { id } = Route.useParams()
+  const navigate = useNavigate()
+  const trpc = useTRPC()
+  const queryClient = useQueryClient()
+  const loaderData = Route.useLoaderData()
+  const isNew = id === 'new'
+
+  const app = loaderData.app
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema as unknown as never),
+    defaultValues: app
+      ? {
+          slug: app.slug || '',
+          displayName: app.displayName || '',
+          description: app.description || '',
+          accessType:
+            ((app.access as { type?: unknown }).type as
+              | AccessType
+              | undefined) || 'self-service',
+          iconName: app.iconName || '',
+          appUrl: app.appUrl || '',
+          notes: app.notes || '',
+          links: JSON.stringify(
+            (app as { links?: unknown }).links || [],
+            null,
+            2,
+          ),
+        }
+      : {
+          slug: '',
+          displayName: '',
+          description: '',
+          accessType: 'self-service',
+          iconName: '',
+          appUrl: '',
+          notes: '',
+          links: '[]',
+        },
+  })
+  const formControl = form.control as unknown as Control<FieldValues>
+
+  const createMutation = useMutation({
+    ...trpc.appCatalogAdmin.create.mutationOptions(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: trpc.appCatalogAdmin.list.queryKey(),
+      })
+      navigate({ to: '/admin/app-for-catalog' })
+    },
+  })
+
+  const updateMutation = useMutation({
+    ...trpc.appCatalogAdmin.update.mutationOptions(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: trpc.appCatalogAdmin.list.queryKey(),
+      })
+      navigate({ to: '/admin/app-for-catalog' })
+    },
+  })
+
+  const updateScreenshotsMutation = useMutation({
+    ...trpc.appCatalogAdmin.update.mutationOptions(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: trpc.appCatalogAdmin.list.queryKey(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: trpc.appCatalogAdmin.getById.queryKey({ id }),
+      })
+    },
+  })
+
+  const onSubmit = (formData: FormData) => {
+    try {
+      type AppLink = { displayName?: string; url: string }
+      const parsed: unknown = JSON.parse(formData.links)
+      const links: Array<AppLink> | undefined = Array.isArray(parsed)
+        ? parsed.filter(
+            (l): l is AppLink =>
+              typeof l === 'object' &&
+              l !== null &&
+              'url' in l &&
+              typeof (l as { url?: unknown }).url === 'string',
+          )
+        : undefined
+
+      const access: { type: AccessType } & Record<string, unknown> = {
+        type: formData.accessType,
+      }
+
+      const payload = {
+        slug: formData.slug,
+        displayName: formData.displayName,
+        description: formData.description,
+        access,
+        iconName: formData.iconName || undefined,
+        appUrl: formData.appUrl || undefined,
+        notes: formData.notes || undefined,
+        links: links && links.length > 0 ? links : undefined,
+      }
+
+      if (isNew) {
+        createMutation.mutate(payload)
+      } else {
+        updateMutation.mutate({
+          id,
+          ...payload,
+        })
+      }
+    } catch (error) {
+      form.setError('links', {
+        type: 'validate',
+        message: 'Invalid JSON in links field',
+      })
+    }
+  }
+
+  const isPending = createMutation.isPending || updateMutation.isPending
+
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="border-b px-6 py-4 flex items-center justify-between">
+        <h2 className="text-xl font-semibold">
+          {isNew ? 'Create New App' : `Edit: ${app?.displayName || ''}`}
+        </h2>
+        <Button
+          variant="outline"
+          onClick={() => navigate({ to: '/admin/app-for-catalog' })}
+        >
+          Back to List
+        </Button>
+      </div>
+
+      <div className="flex-1 overflow-auto p-6">
+        <div className="max-w-4xl space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>App Details</CardTitle>
+              <CardDescription>
+                Configure the app catalog entry with all necessary information
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Form {...form}>
+                <form
+                  onSubmit={form.handleSubmit(onSubmit)}
+                  className="space-y-6"
+                >
+                  <div className="grid grid-cols-2 gap-4">
+                    <FormField
+                      control={formControl}
+                      name="slug"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Slug (URL identifier) *</FormLabel>
+                          <FormControl>
+                            <Input placeholder="my-app" {...field} />
+                          </FormControl>
+                          <FormDescription>
+                            Lowercase letters, numbers, and hyphens only
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={formControl}
+                      name="displayName"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Display Name *</FormLabel>
+                          <FormControl>
+                            <Input placeholder="My Application" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+
+                  <FormField
+                    control={formControl}
+                    name="description"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Description *</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            placeholder="Enter app description..."
+                            rows={3}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <FormField
+                      control={formControl}
+                      name="accessType"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Access Type *</FormLabel>
+                          <Select
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          >
+                            <FormControl>
+                              <SelectTrigger>
+                                <SelectValue />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {ACCESS_TYPES.map((type) => (
+                                <SelectItem key={type.value} value={type.value}>
+                                  {type.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={formControl}
+                      name="iconName"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Icon</FormLabel>
+                          <FormControl>
+                            <IconPickerField
+                              value={field.value}
+                              onChange={field.onChange}
+                              placeholder="Select an icon..."
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+
+                  <FormField
+                    control={formControl}
+                    name="appUrl"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>App URL</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="url"
+                            placeholder="https://..."
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={formControl}
+                    name="notes"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Notes</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            placeholder="Any additional notes..."
+                            rows={2}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={formControl}
+                    name="links"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Links (JSON)</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            placeholder={`[\n  { "displayName": "Documentation", "url": "https://..." },\n  { "url": "https://..." }\n]`}
+                            rows={5}
+                            className="font-mono text-sm"
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          Array of link objects with url and optional
+                          displayName
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <div className="flex gap-2 pt-4">
+                    <Button type="submit" disabled={isPending}>
+                      {isPending
+                        ? 'Saving...'
+                        : isNew
+                          ? 'Create App'
+                          : 'Save Changes'}
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => navigate({ to: '/admin/app-for-catalog' })}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </form>
+              </Form>
+            </CardContent>
+          </Card>
+
+          {!isNew && (
+            <ScreenshotManager
+              screenshots={(
+                (app as { screenshotIds?: Array<string> }).screenshotIds || []
+              ).map((screenshotId) => ({
+                id: screenshotId,
+                url: `/api/assets/${screenshotId}`,
+              }))}
+              onAddScreenshot={async (file) => {
+                const formData = new FormData()
+                formData.append('asset', file)
+                formData.append('name', `${app?.id ?? 'app'}-${file.name}`)
+                formData.append('assetType', 'screenshot')
+
+                const response = await fetch('/api/assets/upload', {
+                  method: 'POST',
+                  body: formData,
+                })
+
+                if (!response.ok) {
+                  throw new Error('Failed to upload screenshot')
+                }
+
+                const data: { id: string } = await response.json()
+                return { id: data.id, url: `/api/assets/${data.id}` }
+              }}
+              onScreenshotsChange={(screenshots: Array<Screenshot>) => {
+                updateScreenshotsMutation.mutate({
+                  id,
+                  screenshotIds: screenshots.map((s) => s.id),
+                })
+              }}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/routes/admin/app-for-catalog/index.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { AppCatalogAdminPage } from '~/modules/appCatalog/AppCatalogAdminPage'
+
+export const Route = createFileRoute('/admin/app-for-catalog/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="border-b px-6 py-4">
+        <h2 className="text-xl font-semibold">App Catalog</h2>
+      </div>
+      <div className="flex-1 overflow-auto p-6">
+        <AppCatalogAdminPage />
+      </div>
+    </div>
+  )
+}

package/src/routes/admin/app-for-catalog.tsx

@@ -0,0 +1,12 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/admin/app-for-catalog')({
+  component: AppCatalogLayoutRoute,
+  staticData: {
+    breadcrumb: { title: 'App Catalog' },
+  },
+})
+
+function AppCatalogLayoutRoute() {
+  return <Outlet />
+}

package/src/routes/admin/chat.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { AdminChat } from '~/modules/admin-base'
+
+export const Route = createFileRoute('/admin/chat')({
+  component: RouteComponent,
+  staticData: {
+    breadcrumb: { title: 'Chat' },
+  },
+})
+
+function RouteComponent() {
+  return <AdminChat />
+}

package/src/routes/admin/icons.tsx

@@ -0,0 +1,22 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { IconManagementPage } from '~/modules/icons/IconManagementPage'
+
+export const Route = createFileRoute('/admin/icons')({
+  component: IconsAdminPage,
+  staticData: {
+    breadcrumb: { title: 'Icons' },
+  },
+})
+
+function IconsAdminPage() {
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="border-b px-6 py-4">
+        <h2 className="text-xl font-semibold">Icons</h2>
+      </div>
+      <div className="flex-1 overflow-auto p-6">
+        <IconManagementPage />
+      </div>
+    </div>
+  )
+}

package/src/routes/admin/index.tsx

@@ -0,0 +1,9 @@
+import { Navigate, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/admin/')({
+  component: AdminIndexPage,
+})
+
+function AdminIndexPage() {
+  return <Navigate to="/admin/chat" replace />
+}

package/src/routes/admin.tsx

@@ -0,0 +1,32 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+import { ThemeProvider } from '~/components/theme-provider'
+import { AdminConfigProvider, AdminLayout } from '~/modules/admin-base'
+import { TopLevelProviders } from '~/ui/layout/TopLevelProviders'
+
+export const Route = createFileRoute('/admin')({
+  component: AdminLayoutRoute,
+  staticData: {
+    breadcrumb: { title: 'Admin' },
+  },
+})
+
+function AdminLayoutRoute() {
+  const { queryClient, trpcClient } = Route.useRouteContext()
+
+  return (
+    <TopLevelProviders queryClient={queryClient} trpcClient={trpcClient}>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+      >
+        <AdminConfigProvider>
+          <AdminLayout>
+            <Outlet />
+          </AdminLayout>
+        </AdminConfigProvider>
+      </ThemeProvider>
+    </TopLevelProviders>
+  )
+}

package/src/routes/auth.callback.tsx

@@ -0,0 +1,74 @@
+import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router'
+import { useEffect } from 'react'
+
+export const Route = createFileRoute('/auth/callback')({
+  component: AuthCallbackPage,
+  validateSearch: (search: Record<string, unknown>) => ({
+    error: search.error as string | undefined,
+    code: search.code as string | undefined,
+  }),
+})
+
+function AuthCallbackPage() {
+  const navigate = useNavigate()
+  const search = useSearch({ from: '/auth/callback' })
+
+  const errorMessages: Record<string, string> = {
+    'internal_server_error': 'An internal server error occurred. Please try again.',
+    'invalid_request': 'Invalid authentication request. Please try again.',
+    'access_denied': 'Authentication was denied. Please try again.',
+    'unauthorized_client': 'This client is not authorized. Please contact support.',
+    'server_error': 'Server error occurred. Please try again.',
+    'temporarily_unavailable': 'Authentication service is temporarily unavailable. Please try again later.',
+  }
+
+  const displayMessage = search.error
+    ? errorMessages[search.error] || `Authentication failed: ${search.error}`
+    : ''
+
+  useEffect(() => {
+    let cleanup: (() => void) | undefined
+
+    if (search.error) {
+      // Redirect to home after 5 seconds
+      const timer = setTimeout(() => {
+        navigate({ to: '/' })
+      }, 5000)
+
+      cleanup = () => clearTimeout(timer)
+    } else if (!search.code) {
+      // If no error and no code, redirect immediately
+      navigate({ to: '/' })
+    }
+
+    return cleanup
+  }, [search.error, search.code, navigate])
+
+  if (search.error) {
+    return (
+      <div className="min-h-screen bg-base-200 flex items-center justify-center p-4">
+        <div className="card bg-base-100 shadow-xl max-w-md w-full">
+          <div className="card-body">
+            <h2 className="card-title text-error">Authentication Error</h2>
+            <p className="text-base-content/70">{displayMessage}</p>
+            <p className="text-sm text-base-content/50 mt-4">
+              Redirecting you back home in a few seconds...
+            </p>
+            <div className="card-actions justify-end mt-4">
+              <button
+                type="button"
+                className="btn btn-sm btn-primary"
+                onClick={() => navigate({ to: '/' })}
+              >
+                Go Home Now
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Success case - redirect immediately
+  return null
+}

package/src/types/ehTypes.ts

@@ -1,11 +1,9 @@
-import type { TRPCRouter } from '@env-hopper/backend-core'
+import type { EnvBaseInfo, TRPCRouter } from '@env-hopper/backend-core'
 import type { TRPCClient } from '@trpc/client'
 import type { EhDb } from '~/userDb/EhDb'
 
-export interface EhEnvIndexed {
-  slug: string
-  displayName: string
-}
+// EhEnvIndexed is now imported from @env-hopper/backend-core as EnvBaseInfo
+export type EhEnvIndexed = EnvBaseInfo
 
 // EhAppIndexed is now imported from @env-hopper/backend-core
 

package/src/types/tanstackQuery.ts

@@ -1,9 +1,11 @@
 import type { TRPCRouter } from '@env-hopper/backend-core'
 import '@tanstack/react-query'
 import type { TRPCClient } from '@trpc/client'
+import type { EhDb } from '~/userDb/EhDb'
 
 export interface EhReactQueryMeta extends Record<string, unknown> {
   trpcClient: TRPCClient<TRPCRouter>
+  db: EhDb
 }
 
 declare module '@tanstack/react-query' {