@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha-20260224145405

package/src/routes/admin/approval-methods/index.tsx

@@ -0,0 +1,161 @@
+import type { ApprovalMethodType, TRPCRouter } from '@env-hopper/backend-core'
+import type { ColumnDef } from '@tanstack/react-table'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { createFileRoute } from '@tanstack/react-router'
+import type { TRPCClient } from '@trpc/client'
+import { useTRPC } from '~/api/infra/trpc'
+import { ApprovalMethodForm } from '~/modules/approvalMethod/ApprovalMethodForm'
+import { Badge } from '~/ui/badge'
+import { CrudList } from '~/ui/crud-list'
+
+/**
+ * ApprovalMethod type as returned by tRPC (dates serialized to strings)
+ */
+type SerializedApprovalMethod = Awaited<
+  ReturnType<TRPCClient<TRPCRouter>['approvalMethod']['list']['query']>
+>[number]
+
+export const Route = createFileRoute('/admin/approval-methods/')({
+  component: RouteComponent,
+  async loader({ context }) {
+    const { trpcClient } = context
+    return {
+      approvalMethods: await trpcClient.approvalMethod.list.query(),
+    }
+  },
+  staticData: {
+    breadcrumb: {
+      title: 'List',
+    },
+  },
+})
+
+const TYPE_LABELS: Record<ApprovalMethodType, string> = {
+  service: 'Service',
+  personTeam: 'Person/Team',
+  custom: 'Custom',
+}
+
+const TYPE_COLORS: Record<
+  ApprovalMethodType,
+  'default' | 'outline' | 'secondary'
+> = {
+  service: 'default',
+  personTeam: 'secondary',
+  custom: 'outline',
+}
+
+const columns: Array<ColumnDef<SerializedApprovalMethod>> = [
+  {
+    accessorKey: 'displayName',
+    header: 'Name',
+  },
+  {
+    accessorKey: 'type',
+    header: 'Type',
+    cell: ({ row }) => (
+      <Badge variant={TYPE_COLORS[row.original.type]}>
+        {TYPE_LABELS[row.original.type]}
+      </Badge>
+    ),
+  },
+  {
+    accessorKey: 'config',
+    header: 'Configuration',
+    cell: ({ row }) => {
+      const config = row.original.config as Record<string, unknown> | null
+      if (!config) return <span className="text-muted-foreground">-</span>
+
+      // Show relevant config preview based on type
+      if (row.original.type === 'service' && config.url) {
+        return (
+          <span className="text-sm text-muted-foreground truncate max-w-[200px]">
+            {config.url as string}
+          </span>
+        )
+      }
+      if (
+        row.original.type === 'personTeam' &&
+        Array.isArray(config.reachOutContacts)
+      ) {
+        return (
+          <span className="text-sm text-muted-foreground">
+            {config.reachOutContacts.length} contact(s)
+          </span>
+        )
+      }
+      return <span className="text-muted-foreground">-</span>
+    },
+  },
+]
+
+function RouteComponent() {
+  const trpc = useTRPC()
+  const queryClient = useQueryClient()
+  const loaderData = Route.useLoaderData()
+
+  // Use query with loader data as initial data
+  const { data: approvalMethods = [] } = useQuery({
+    ...trpc.approvalMethod.list.queryOptions(),
+    initialData:
+      'approvalMethods' in loaderData ? loaderData.approvalMethods : [],
+  })
+
+  const createMutation = useMutation({
+    ...trpc.approvalMethod.create.mutationOptions(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: trpc.approvalMethod.list.queryKey(),
+      })
+    },
+  })
+
+  const updateMutation = useMutation({
+    ...trpc.approvalMethod.update.mutationOptions(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: trpc.approvalMethod.list.queryKey(),
+      })
+    },
+  })
+
+  const deleteMutation = useMutation({
+    ...trpc.approvalMethod.delete.mutationOptions(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: trpc.approvalMethod.list.queryKey(),
+      })
+    },
+  })
+
+  return (
+    <div className="p-6">
+      <CrudList
+        data={approvalMethods}
+        columns={columns as any}
+        getRowId={(item) => item.slug}
+        title="Approval Methods"
+        createButtonLabel="Add Method"
+        emptyMessage="No approval methods configured"
+        renderForm={({ mode, item, onSubmit, onCancel, isPending }) => (
+          <ApprovalMethodForm
+            mode={mode}
+            initialData={item as any}
+            onSubmit={onSubmit}
+            onCancel={onCancel}
+            isPending={isPending}
+          />
+        )}
+        onCreate={async (data: any) => {
+          await createMutation.mutateAsync(data)
+        }}
+        onUpdate={async (data: any) => {
+          await updateMutation.mutateAsync(data)
+        }}
+        onDelete={async (item) => {
+          await deleteMutation.mutateAsync({ slug: item.slug })
+        }}
+      />
+    </div>
+  )
+}

package/src/routes/admin/approval-methods.tsx

@@ -0,0 +1,10 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/admin/approval-methods')({
+  component: () => <Outlet />,
+  staticData: {
+    breadcrumb: {
+      title: 'Approval Methods',
+    },
+  },
+})

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,60 @@
+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'
+import { AuthorizationError } from '~/errors/AuthorizationError'
+import { isAdmin } from '~/modules/auth/authUtils'
+
+export const Route = createFileRoute('/admin')({
+  beforeLoad: async ({ context }) => {
+    // Fetch current user session with groups from tRPC (not better-auth's /api/auth/session)
+    const session = await context.trpcClient.auth.getSession.query()
+    const user = session.user
+
+    // Check if user is authenticated
+    if (!user) {
+      throw new AuthorizationError({
+        message: 'You must be logged in to access the admin panel',
+        resource: 'Admin Panel',
+      })
+    }
+
+    // Fetch auth config from backend to get adminGroups
+    const authConfig = await context.trpcClient.authConfig.query()
+    const adminGroups = authConfig.adminGroups
+
+    // Check if user has admin role
+    if (!isAdmin(user, adminGroups)) {
+      throw new AuthorizationError({
+        message: 'You need administrator privileges to access this area',
+        requiredRoles: adminGroups,
+        resource: 'Admin Panel',
+      })
+    }
+  },
+  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' {

package/src/types/types.ts

@@ -1,17 +1,27 @@
 /// <reference types="vite-plugin-pwa/client" />
 
-import type { RouterHistory } from '@tanstack/react-router'
+import type { TRPCRouter } from '@env-hopper/backend-core'
 import type { QueryClient } from '@tanstack/react-query'
+import type { RouterHistory } from '@tanstack/react-router'
 import type { TRPCClient } from '@trpc/client'
-import type { TRPCRouter } from '@env-hopper/backend-core'
-import type { EhDb } from '~/userDb/EhDb'
+import type { EnvHopperHealthStateBootstrapPart } from '~/modules/config/HealthStateContext'
 import type { EhPlugin } from '~/modules/pluginCore/types'
+import type { EhDb } from '~/userDb/EhDb'
+
+export interface BreadcrumbMeta {
+  title: string
+  href?: string
+}
 
 export interface EhRouterContext {
   queryClient: QueryClient
   trpcClient: TRPCClient<TRPCRouter>
   db: EhDb
   plugins: Array<EhPlugin>
+  boostrapHealth: EnvHopperHealthStateBootstrapPart
+  meta?: {
+    breadcrumb?: BreadcrumbMeta
+  }
 }
 
 export interface EhRouterInitParams {

package/src/types/userBehaviourTypes.ts

@@ -66,7 +66,7 @@ export interface AppPageSelectionAction {
 }
 
 export interface PageJumpAction {
-  actionType: 'pageJump'
+  actionType: 'jumpPage'
   envSlug: string
   appPageSlug: AppPageSlug
   appPageContext?: AppPageContext

package/src/types/vite-env.d.ts

@@ -1 +1,2 @@
+/// <reference types="@env-hopper/shared-core/env" />
 /// <reference types="vite-plugin-svgr/client" />

package/src/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react'
+import { ChevronDownIcon } from 'lucide-react'
+import { Accordion as AccordionPrimitive } from 'radix-ui'
+
+import { cn } from '~/lib/utils'
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/ui/alert-dialog.tsx

@@ -0,0 +1,155 @@
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '~/lib/utils'
+import { buttonVariants } from '~/ui/button'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: 'outline' }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}