@igstack/app-catalog-frontend-core 0.0.1

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

@@ -0,0 +1,161 @@
+import type { ApprovalMethodType, TRPCRouter } from '@igstack/app-catalog-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/slateTypes.ts

@@ -0,0 +1,22 @@
+import type { BaseEditor } from 'slate'
+import type { ReactEditor } from 'slate-react'
+
+type TagElement = {
+  type: 'tag'
+  children: Array<CustomText>
+  selected: boolean
+}
+type InterTagElement = { type: 'inter-tag'; children: Array<CustomText> }
+type TagContainer = { type: 'tag-container'; children: Array<CustomText> }
+type CustomText = { text: string }
+
+export type CustomElement = TagElement | TagContainer | InterTagElement
+export type CustomEditor = BaseEditor & ReactEditor
+
+declare module 'slate' {
+  interface CustomTypes {
+    Editor: CustomEditor
+    Element: CustomElement
+    Text: CustomText
+  }
+}

package/src/types/table.ts

@@ -0,0 +1,9 @@
+import type {} from '@tanstack/react-table'
+
+// Extend TanStack Table's ColumnMeta for custom column styling
+declare module '@tanstack/react-table' {
+  interface ColumnMeta<TData, TValue> {
+    /** CSS className to apply to column header and cells */
+    className?: string
+  }
+}

package/src/types/tanstackQuery.ts

@@ -0,0 +1,16 @@
+import type { TRPCRouter } from '@igstack/app-catalog-backend-core'
+import '@tanstack/react-query'
+import type { TRPCClient } from '@trpc/client'
+import type { AcDb } from '~/userDb/AcDb'
+
+export interface EhReactQueryMeta extends Record<string, unknown> {
+  trpcClient: TRPCClient<TRPCRouter>
+  db: AcDb
+}
+
+declare module '@tanstack/react-query' {
+  interface Register {
+    queryMeta: EhReactQueryMeta
+    mutationMeta: EhReactQueryMeta
+  }
+}

package/src/types/types.ts

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

package/src/types/userBehaviourTypes.ts

@@ -0,0 +1,100 @@
+export interface SearchInteraction {
+  dateUtcTimestamp: number
+  query: string
+  selection: SearchSelection
+}
+
+export type SearchSelection =
+  | {
+      type: 'env'
+      envSlug: string
+    }
+  | {
+      type: 'app'
+      appSlug: string
+    }
+  | {
+      type: 'appPage'
+      appPageSlug: AppPageSlug
+      appPageContext?: AppPageContext
+    }
+  | {
+      type: 'envAppPage'
+      envSlug: string
+      appPageSlug: AppPageSlug
+      appPageContext?: AppPageContext
+    }
+  | {
+      type: 'envAction'
+      envSlug: string
+      actionName: string
+    }
+
+export interface MicroInteraction {
+  dateUtcTimestamp: number
+  context: MicroInteractionContext
+  action: Action
+}
+
+export interface MicroInteractionContext {
+  envSlug?: string
+  appSlug?: string
+  appPageSlug?: AppPageSlug
+}
+
+export type Action =
+  | PageJumpAction
+  | ConfigSearchAction
+  | EnvSelectionAction
+  | AppSelectionAction
+  | AppPageSelectionAction
+  | EnvAction
+
+export interface EnvSelectionAction {
+  actionType: 'envSelection'
+  envSlug: string | undefined
+}
+
+export interface AppSelectionAction {
+  actionType: 'appSelection'
+  appSlug: string | undefined
+}
+
+export interface AppPageSelectionAction {
+  actionType: 'appPageSelection'
+  appPageSlug: AppPageSlug
+}
+
+export interface PageJumpAction {
+  actionType: 'jumpPage'
+  envSlug: string
+  appPageSlug: AppPageSlug
+  appPageContext?: AppPageContext
+}
+
+export interface EnvAction {
+  actionType: 'envAction'
+  envSlug: string
+  actionName: string
+}
+
+export interface AppPageSlug {
+  app: string
+  page: string
+}
+
+export interface AppPageContext {
+  params: Array<AppPageContextKeyValue>
+}
+
+export interface AppPageContextKeyValue {
+  key: string
+  value: string
+}
+
+export interface ConfigSearchAction {
+  actionType: 'configSearch'
+  envSlug: string
+  appSlug: string
+  query: string
+}

package/src/types/utilityTypes.ts

@@ -0,0 +1 @@
+export type PartialRecord<TKey extends keyof any, T> = Partial<Record<TKey, T>>

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

@@ -0,0 +1,2 @@
+/// <reference types="@igstack/app-catalog-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 }