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

package/src/modules/approvalMethod/ApprovalMethodForm.tsx

@@ -0,0 +1,323 @@
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Button } from '~/ui/button'
+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 { EditableListField } from '~/ui/editable-list'
+
+const APPROVAL_METHOD_TYPES = [
+  { value: 'service', label: 'Service' },
+  { value: 'personTeam', label: 'Person/Team' },
+  { value: 'custom', label: 'Custom' },
+] as const
+
+// Form schema
+const formSchema = z.object({
+  type: z.enum(['service', 'personTeam', 'custom']),
+  displayName: z.string().min(1, 'Display name is required'),
+  // Service config
+  serviceUrl: z.string().url().optional().or(z.literal('')),
+  serviceIcon: z.string().optional(),
+  // PersonTeam config
+  reachOutContacts: z
+    .array(
+      z.object({
+        displayName: z.string(),
+        contact: z.string(),
+      }),
+    )
+    .optional(),
+})
+
+type FormData = z.infer<typeof formSchema>
+
+interface ApprovalMethodFormProps {
+  mode: 'create' | 'edit'
+  initialData: {
+    id?: string
+    type: 'service' | 'personTeam' | 'custom'
+    displayName: string
+    config?: Record<string, unknown>
+  } | null
+  onSubmit: (data: any) => void
+  onCancel: () => void
+  isPending: boolean
+}
+
+export function ApprovalMethodForm({
+  mode,
+  initialData,
+  onSubmit,
+  onCancel,
+  isPending,
+}: ApprovalMethodFormProps) {
+  const config = initialData?.config
+  const configRecord = config ? config : undefined
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema as any) as any,
+    defaultValues: {
+      type: initialData?.type || 'custom',
+      displayName: initialData?.displayName || '',
+      serviceUrl: configRecord?.url ? String(configRecord.url) : '',
+      serviceIcon: configRecord?.icon ? String(configRecord.icon) : '',
+      reachOutContacts: Array.isArray(configRecord?.reachOutContacts)
+        ? (configRecord.reachOutContacts as Array<{
+            displayName: string
+            contact: string
+          }>)
+        : [],
+    },
+  })
+
+  const typeValue = form.watch('type')
+
+  const handleSubmit = (data: FormData) => {
+    // Build config based on type
+    let configPayload: Record<string, unknown> | undefined
+
+    if (data.type === 'service') {
+      configPayload = {
+        ...(data.serviceUrl && { url: data.serviceUrl }),
+        ...(data.serviceIcon && { icon: data.serviceIcon }),
+      }
+    } else if (data.type === 'personTeam') {
+      configPayload = {
+        ...(data.reachOutContacts?.length && {
+          reachOutContacts: data.reachOutContacts,
+        }),
+      }
+    }
+
+    const payload = {
+      ...(mode === 'edit' && initialData?.id && { id: initialData.id }),
+      type: data.type,
+      displayName: data.displayName,
+      config:
+        Object.keys(configPayload ?? {}).length > 0 ? configPayload : undefined,
+    }
+
+    onSubmit(payload)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+        <FormField
+          control={form.control as any}
+          name="type"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Type *</FormLabel>
+              <Select value={field.value} onValueChange={field.onChange}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {APPROVAL_METHOD_TYPES.map((type) => (
+                    <SelectItem key={type.value} value={type.value}>
+                      {type.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormDescription>
+                {typeValue === 'service' &&
+                  'For bots, ticketing systems, self-service portals'}
+                {typeValue === 'personTeam' && 'For human approvers or teams'}
+                {typeValue === 'custom' &&
+                  'Generic approval method with no specific configuration'}
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control as any}
+          name="displayName"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Display Name *</FormLabel>
+              <FormControl>
+                <Input placeholder="e.g., Natero Bot, IT Helpdesk" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Service-specific fields */}
+        {typeValue === 'service' && (
+          <div className="space-y-4 p-4 border rounded-lg bg-muted/30">
+            <div className="text-sm font-medium">Service Configuration</div>
+
+            <FormField
+              control={form.control as any}
+              name="serviceUrl"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>URL</FormLabel>
+                  <FormControl>
+                    <Input type="url" placeholder="https://..." {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    URL to the service (shown as clickable link in app)
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control as any}
+              name="serviceIcon"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Icon</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Icon name" {...field} />
+                  </FormControl>
+                  <FormDescription>Optional icon identifier</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+        )}
+
+        {/* PersonTeam-specific fields */}
+        {typeValue === 'personTeam' && (
+          <div className="space-y-4 p-4 border rounded-lg bg-muted/30">
+            <div className="text-sm font-medium">Reach-Out Contacts</div>
+            <FormDescription>
+              People or teams to contact for approval (not necessarily the
+              approvers themselves)
+            </FormDescription>
+
+            <FormField
+              control={form.control as any}
+              name="reachOutContacts"
+              render={({ field }) => (
+                <EditableListField
+                  value={field.value ?? []}
+                  onChange={field.onChange}
+                  columns={[
+                    { accessorKey: 'displayName', header: 'Name' },
+                    { accessorKey: 'contact', header: 'Contact' },
+                  ]}
+                  createEmpty={() => ({ displayName: '', contact: '' })}
+                  getItemKey={(_, i) => String(i)}
+                  addButtonLabel="Add Contact"
+                  emptyMessage="No contacts configured"
+                  renderForm={({ item, onSave, onCancel: onCancelEdit }) => {
+                    if (!item) return null
+                    return (
+                      <ContactForm
+                        item={item}
+                        onSave={onSave}
+                        onCancel={onCancelEdit}
+                      />
+                    )
+                  }}
+                />
+              )}
+            />
+          </div>
+        )}
+
+        {/* Custom type - no additional fields */}
+        {typeValue === 'custom' && (
+          <div className="p-4 border rounded-lg bg-muted/30 text-sm text-muted-foreground">
+            Custom type has no additional configuration. App-specific details
+            will be configured per app.
+          </div>
+        )}
+
+        <div className="flex gap-2 pt-4">
+          <Button type="submit" disabled={isPending}>
+            {isPending ? 'Saving...' : mode === 'create' ? 'Create' : 'Save'}
+          </Button>
+          <Button type="button" variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </Form>
+  )
+}
+
+// Simple contact form for the dialog
+function ContactForm({
+  item,
+  onSave,
+  onCancel: handleCancel,
+}: {
+  item: { displayName: string; contact: string }
+  onSave: (item: { displayName: string; contact: string }) => void
+  onCancel: () => void
+}) {
+  const form = useForm<{ displayName: string; contact: string }>({
+    defaultValues: item,
+  })
+
+  return (
+    <form onSubmit={form.handleSubmit(onSave)} className="space-y-4">
+      <FormField
+        control={form.control as any}
+        name="displayName"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Name</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="e.g., John Doe, IT Team" />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control as any}
+        name="contact"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Contact</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="e.g., email, Slack handle" />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+      <div className="flex gap-2">
+        <Button type="submit" size="sm">
+          Save
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={handleCancel}
+        >
+          Cancel
+        </Button>
+      </div>
+    </form>
+  )
+}

package/src/modules/approvalMethod/ApprovalMethodSelector.tsx

@@ -0,0 +1,150 @@
+import { useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Check, ChevronsUpDown, Plus } from 'lucide-react'
+import { useTRPC } from '~/api/infra/trpc'
+import { cn } from '~/lib/utils'
+import { Button } from '~/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '~/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '~/ui/popover'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/ui/dialog'
+import { Badge } from '~/ui/badge'
+import { ApprovalMethodForm } from './ApprovalMethodForm'
+import { ApiQueryMagazineApprovalMethod } from './api/ApiQueryMagazineApprovalMethod'
+
+interface ApprovalMethodSelectorProps {
+  value: string | undefined
+  onChange: (value: string | undefined) => void
+  disabled?: boolean
+}
+
+export function ApprovalMethodSelector({
+  value,
+  onChange,
+  disabled = false,
+}: ApprovalMethodSelectorProps) {
+  const [open, setOpen] = useState(false)
+  const [showQuickAdd, setShowQuickAdd] = useState(false)
+
+  const trpc = useTRPC()
+  const queryClient = useQueryClient()
+
+  const { data: methods = [] } = useQuery(ApiQueryMagazineApprovalMethod.list())
+
+  const createMutation = useMutation({
+    ...trpc.approvalMethod.create.mutationOptions(),
+    onSuccess: (newMethod) => {
+      queryClient.invalidateQueries({
+        queryKey: ['approvalMethod'],
+      })
+      onChange(newMethod.slug)
+      setShowQuickAdd(false)
+    },
+  })
+
+  const selectedMethod = methods.find((m) => m.slug === value)
+
+  const TYPE_LABELS: Record<string, string> = {
+    service: 'Service',
+    personTeam: 'Person/Team',
+    custom: 'Custom',
+  }
+
+  return (
+    <>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full justify-between"
+            disabled={disabled}
+          >
+            {selectedMethod ? (
+              <span className="flex items-center gap-2">
+                {selectedMethod.displayName}
+                <Badge variant="secondary" className="text-xs">
+                  {TYPE_LABELS[selectedMethod.type]}
+                </Badge>
+              </span>
+            ) : (
+              <span className="text-muted-foreground">
+                Select approval method...
+              </span>
+            )}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[400px] p-0">
+          <Command>
+            <CommandInput placeholder="Search methods..." />
+            <CommandList>
+              <CommandEmpty>No methods found.</CommandEmpty>
+              <CommandGroup>
+                {methods.map((method) => (
+                  <CommandItem
+                    key={method.slug}
+                    value={method.displayName}
+                    onSelect={() => {
+                      onChange(method.slug)
+                      setOpen(false)
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        value === method.slug ? 'opacity-100' : 'opacity-0',
+                      )}
+                    />
+                    <span className="flex items-center gap-2">
+                      {method.displayName}
+                      <Badge variant="outline" className="text-xs">
+                        {TYPE_LABELS[method.type]}
+                      </Badge>
+                    </span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup>
+                <CommandItem
+                  onSelect={() => {
+                    setOpen(false)
+                    setShowQuickAdd(true)
+                  }}
+                >
+                  <Plus className="mr-2 h-4 w-4" />
+                  Create new method...
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {/* Quick Add Dialog */}
+      <Dialog open={showQuickAdd} onOpenChange={setShowQuickAdd}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create Approval Method</DialogTitle>
+          </DialogHeader>
+          <ApprovalMethodForm
+            mode="create"
+            initialData={null}
+            onSubmit={(data) => createMutation.mutate(data)}
+            onCancel={() => setShowQuickAdd(false)}
+            isPending={createMutation.isPending}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

package/src/modules/approvalMethod/api/ApiQueryMagazineApprovalMethod.ts

@@ -0,0 +1,34 @@
+import { queryOptions } from '@tanstack/react-query'
+import { getTrpcFromMeta } from '~/util/reactQueryUtils'
+
+/**
+ * Query options for ApprovalMethod data.
+ *
+ * Note: We let tRPC infer the return types directly rather than using
+ * the backend's ApprovalMethod type, because tRPC serializes Date → string
+ * over JSON. This ensures end-to-end type safety without manual casting.
+ */
+export class ApiQueryMagazineApprovalMethod {
+  static list() {
+    return queryOptions({
+      queryKey: ['approvalMethod', 'list'] as const,
+      queryFn: (ctx) => getTrpcFromMeta(ctx).approvalMethod.list.query(),
+    })
+  }
+
+  static getById(slug: string) {
+    return queryOptions({
+      queryKey: ['approvalMethod', 'getById', slug] as const,
+      queryFn: (ctx) =>
+        getTrpcFromMeta(ctx).approvalMethod.getById.query({ slug }),
+    })
+  }
+
+  static listByType(type: 'service' | 'personTeam' | 'custom') {
+    return queryOptions({
+      queryKey: ['approvalMethod', 'listByType', type] as const,
+      queryFn: (ctx) =>
+        getTrpcFromMeta(ctx).approvalMethod.listByType.query({ type }),
+    })
+  }
+}

package/src/modules/auth/AuthContext.tsx

@@ -0,0 +1,130 @@
+import type { Session } from 'better-auth/types'
+import { createContext, use, useEffect, useMemo, useState } from 'react'
+
+interface User {
+  id: string
+  email?: string | null
+  name?: string | null
+  image?: string | null
+  emailVerified?: boolean
+}
+
+interface AuthContextType {
+  session: Session | null
+  user: User | null
+  isLoading: boolean
+  isAuthenticated: boolean
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+const STORAGE_KEY = 'eh_auth_user'
+
+/**
+ * Provider component for authentication state
+ * Fetches and manages session from the backend
+ * Uses localStorage for optimistic rendering to avoid flickering
+ */
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [session, setSession] = useState<Session | null>(null)
+  const [user, setUser] = useState<User | null>(() => {
+    // Hydrate from localStorage on mount to avoid flickering
+    if (typeof window === 'undefined') return null
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY)
+      return stored ? JSON.parse(stored) : null
+    } catch {
+      return null
+    }
+  })
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    // Use AbortController to cancel fetch on unmount (e.g., React StrictMode double-mount)
+    const abortController = new AbortController()
+
+    // Fetch session from backend
+    async function fetchSession() {
+      try {
+        const response = await fetch('/api/auth/session', {
+          credentials: 'include',
+          signal: abortController.signal,
+        })
+        if (response.ok) {
+          const data = await response.json()
+          setSession(data)
+          setUser(data?.user || null)
+          if (data?.user) {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(data.user))
+          } else {
+            localStorage.removeItem(STORAGE_KEY)
+          }
+        } else {
+          setSession(null)
+          setUser(null)
+          localStorage.removeItem(STORAGE_KEY)
+        }
+      } catch (error) {
+        // Ignore abort errors (happens on cleanup)
+        if (error instanceof Error && error.name === 'AbortError') {
+          return
+        }
+        console.error('Failed to fetch session:', error)
+        setSession(null)
+        setUser(null)
+        localStorage.removeItem(STORAGE_KEY)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchSession()
+
+    // Cleanup: abort fetch on unmount
+    return () => {
+      abortController.abort()
+    }
+  }, [])
+
+  const value: AuthContextType = useMemo(
+    () => ({
+      session,
+      user,
+      isLoading,
+      isAuthenticated: !!user,
+    }),
+    [session, user, isLoading],
+  )
+
+  return <AuthContext value={value}>{children}</AuthContext>
+}
+
+/**
+ * Hook to access authentication state
+ * @returns Authentication context containing session, user, and auth state
+ */
+export function useAuth() {
+  const context = use(AuthContext)
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider')
+  }
+  return context
+}
+
+/**
+ * Hook to check if user is authenticated
+ * @returns Boolean indicating if user is authenticated
+ */
+export function useIsAuthenticated() {
+  const { isAuthenticated } = useAuth()
+  return isAuthenticated
+}
+
+/**
+ * Hook to get the current user
+ * @returns Current user or null
+ */
+export function useUser() {
+  const { user } = useAuth()
+  return user
+}

package/src/modules/auth/AuthModalContext.tsx

@@ -0,0 +1,49 @@
+import { createContext, use, useMemo, useState } from 'react'
+
+interface AuthModalContextType {
+  isOpen: boolean
+  redirectUrl: string
+  open: (redirectUrl?: string) => void
+  close: () => void
+}
+
+const AuthModalContext = createContext<AuthModalContextType | undefined>(
+  undefined,
+)
+
+/**
+ * Provider for global login modal state
+ * Allows opening/closing modal from anywhere in the app
+ */
+export function AuthModalProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [redirectUrl, setRedirectUrl] = useState('/')
+
+  const value = useMemo<AuthModalContextType>(() => ({
+    isOpen,
+    redirectUrl,
+    open: (url?: string) => {
+      setRedirectUrl(url || '/')
+      setIsOpen(true)
+    },
+    close: () => setIsOpen(false),
+  }), [isOpen, redirectUrl])
+
+  return (
+    <AuthModalContext value={value}>{children}</AuthModalContext>
+  )
+}
+
+/**
+ * Hook to access and control the login modal
+ * @returns Object with isOpen, open, and close
+ */
+export function useAuthModal() {
+  const context = use(AuthModalContext)
+  if (!context) {
+    throw new Error(
+      'useAuthModal must be used within AuthModalProvider',
+    )
+  }
+  return context
+}