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

package/src/modules/appCatalog/AppCatalogAdminPage.tsx

@@ -0,0 +1,281 @@
+import type { AppForCatalog } from '@env-hopper/backend-core'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+import { Edit, Plus, Trash2 } from 'lucide-react'
+import { useState } from 'react'
+import { useTRPC } from '~/api/infra/trpc'
+import { Button } from '~/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '~/ui/card'
+import { Input } from '~/ui/input'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '~/ui/table'
+
+// Extended type with DB fields
+type AppForCatalogRow = AppForCatalog & {
+  slug: string
+  links?: Array<{ displayName?: string; url: string }>
+  screenshotIds?: Array<string>
+  createdAt: string
+  updatedAt: string
+}
+
+const columnHelper = createColumnHelper<AppForCatalogRow>()
+
+const columns = [
+  columnHelper.accessor('slug', {
+    header: 'Slug',
+    cell: (info) => <code className="text-xs truncate">{info.getValue()}</code>,
+    size: 100,
+  }),
+  columnHelper.accessor('displayName', {
+    header: 'Name',
+    cell: (info) => (
+      <Link
+        to="/admin/app-for-catalog/$id"
+        params={{ id: info.row.original.id }}
+      >
+        <span className="font-medium cursor-pointer hover:underline truncate">
+          {info.getValue()}
+        </span>
+      </Link>
+    ),
+    size: 120,
+  }),
+  columnHelper.accessor('description', {
+    header: 'Description',
+    cell: (info) => {
+      const desc = info.getValue()
+      return (
+        <span className="text-sm text-muted-foreground truncate" title={desc}>
+          {desc}
+        </span>
+      )
+    },
+    size: 140,
+  }),
+  columnHelper.accessor('access', {
+    header: 'Access',
+    cell: (info) => (
+      <span className="text-sm truncate">{info.getValue()?.type || 'N/A'}</span>
+    ),
+    size: 80,
+  }),
+  columnHelper.accessor('iconName', {
+    header: 'Icon',
+    cell: (info) => {
+      const iconName = info.getValue()
+      return iconName ? (
+        <div className="w-8 h-8 flex items-center justify-center shrink-0">
+          <img
+            src={`/api/assets/by-name/${iconName}`}
+            alt={iconName}
+            className="max-w-full max-h-full object-contain"
+          />
+        </div>
+      ) : (
+        <span className="text-sm text-muted-foreground">-</span>
+      )
+    },
+    size: 50,
+  }),
+  columnHelper.accessor('links', {
+    header: 'Links',
+    cell: (info) => (
+      <span className="text-sm truncate">{info.getValue()?.length || 0}</span>
+    ),
+    size: 50,
+  }),
+  columnHelper.accessor('screenshotIds', {
+    header: 'Screenshots',
+    cell: (info) => (
+      <span className="text-sm truncate">{info.getValue()?.length || 0}</span>
+    ),
+    size: 70,
+  }),
+  columnHelper.accessor('createdAt', {
+    header: 'Created',
+    cell: (info) => new Date(info.getValue()).toLocaleDateString(),
+    size: 100,
+  }),
+  columnHelper.display({
+    id: 'actions',
+    header: 'Actions',
+    cell: (props) => <AppActions app={props.row.original} />,
+    size: 70,
+  }),
+]
+
+function AppActions({ app }: { app: AppForCatalogRow }) {
+  const trpc = useTRPC()
+  const queryClient = useQueryClient()
+
+  const deleteMutation = useMutation({
+    ...trpc.appCatalogAdmin.delete.mutationOptions(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: trpc.appCatalogAdmin.list.queryKey(),
+      })
+    },
+  })
+
+  return (
+    <div className="flex gap-2">
+      <Button variant="ghost" size="sm" asChild>
+        <Link to="/admin/app-for-catalog/$id" params={{ id: app.id }}>
+          <Edit className="w-4 h-4" />
+        </Link>
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => {
+          if (
+            confirm(`Are you sure you want to delete "${app.displayName}"?`)
+          ) {
+            deleteMutation.mutate({ id: app.id })
+          }
+        }}
+        disabled={deleteMutation.isPending}
+      >
+        <Trash2 className="w-4 h-4" />
+      </Button>
+    </div>
+  )
+}
+
+export function AppCatalogAdminPage() {
+  const trpc = useTRPC()
+  const [globalFilter, setGlobalFilter] = useState('')
+
+  const { data: apps = [], isLoading } = useQuery({
+    ...trpc.appCatalogAdmin.list.queryOptions(),
+  })
+
+  const table = useReactTable({
+    data: apps as Array<AppForCatalogRow>,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      globalFilter,
+    },
+    onGlobalFilterChange: setGlobalFilter,
+  })
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <div className="flex justify-between items-center">
+            <div>
+              <CardTitle>App Catalog Management</CardTitle>
+              <CardDescription>
+                Manage apps in the catalog with full CRUD operations
+              </CardDescription>
+            </div>
+            <Button asChild>
+              <Link to="/admin/app-for-catalog/$id" params={{ id: 'new' }}>
+                <Plus className="w-4 h-4 mr-2" />
+                Add App
+              </Link>
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Input
+            placeholder="Search apps by name, slug, or description..."
+            value={globalFilter || ''}
+            onChange={(e) => setGlobalFilter(e.target.value)}
+            className="max-w-sm"
+          />
+          {isLoading ? (
+            <div className="text-center py-8">Loading...</div>
+          ) : (
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => (
+                        <TableHead
+                          key={header.id}
+                          style={{
+                            width: `${header.getSize()}px`,
+                            minWidth: `${header.getSize()}px`,
+                            maxWidth: `${header.getSize()}px`,
+                          }}
+                          className="overflow-hidden"
+                        >
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                        </TableHead>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {table.getRowModel().rows.length ? (
+                    table.getRowModel().rows.map((row) => (
+                      <TableRow key={row.id}>
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell
+                            key={cell.id}
+                            style={{
+                              width: `${cell.column.getSize()}px`,
+                              minWidth: `${cell.column.getSize()}px`,
+                              maxWidth: `${cell.column.getSize()}px`,
+                            }}
+                            className="overflow-hidden"
+                          >
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell
+                        colSpan={columns.length}
+                        className="h-24 text-center"
+                      >
+                        No apps found.
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/src/modules/appCatalog/AppCatalogEditDialog.tsx

@@ -0,0 +1,268 @@
+import type { AppForCatalog } from '@env-hopper/backend-core'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import { useTRPC } from '~/api/infra/trpc'
+import { Button } from '~/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '~/ui/dialog'
+import { Input } from '~/ui/input'
+import { Label } from '~/ui/label'
+import { Textarea } from '~/ui/textarea'
+
+// Extended type with DB fields
+type AppForCatalogWithDb = AppForCatalog & {
+  links?: Array<{ displayName?: string; url: string }>
+  screenshotIds?: Array<string>
+  createdAt: string
+  updatedAt: string
+}
+
+interface AppCatalogEditDialogProps {
+  app: AppForCatalogWithDb | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+interface FormData {
+  displayName: string
+  description: string
+  iconName: string
+  appUrl: string
+  notes: string
+  accessType: string
+  links: string // JSON array as string
+}
+
+export function AppCatalogEditDialog({
+  app,
+  open,
+  onOpenChange,
+}: AppCatalogEditDialogProps) {
+  const trpc = useTRPC()
+  const queryClient = useQueryClient()
+  const isEditing = !!app
+
+  const [formData, setFormData] = useState<FormData>({
+    displayName: '',
+    description: '',
+    iconName: '',
+    appUrl: '',
+    notes: '',
+    accessType: 'self-service',
+    links: '[]',
+  })
+
+  // Reset form when dialog opens/closes or app changes
+  useEffect(() => {
+    if (open) {
+      const newFormData = app
+        ? {
+            displayName: app.displayName || '',
+            description: app.description || '',
+            iconName: app.iconName || '',
+            appUrl: app.appUrl || '',
+            notes: app.notes || '',
+            accessType: app.access?.type || 'self-service',
+            links: JSON.stringify(app.links || [], null, 2),
+          }
+        : {
+            displayName: '',
+            description: '',
+            iconName: '',
+            appUrl: '',
+            notes: '',
+            accessType: 'self-service',
+            links: '[]',
+          }
+      setFormData(newFormData)
+    }
+  }, [app, open])
+
+  const createMutation = useMutation({
+    ...trpc.appCatalogAdmin.create.mutationOptions(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: trpc.appCatalogAdmin.list.queryKey(),
+      })
+      onOpenChange(false)
+    },
+  })
+
+  const updateMutation = useMutation({
+    ...trpc.appCatalogAdmin.update.mutationOptions(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: trpc.appCatalogAdmin.list.queryKey(),
+      })
+      onOpenChange(false)
+    },
+  })
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+
+    try {
+      const links = JSON.parse(formData.links)
+
+      const payload = {
+        slug: formData.displayName
+          .toLowerCase()
+          .replace(/\s+/g, '-')
+          .replace(/[^a-z0-9-]/g, ''),
+        displayName: formData.displayName,
+        description: formData.description,
+        access: { type: formData.accessType as any },
+        iconName: formData.iconName || undefined,
+        appUrl: formData.appUrl || undefined,
+        notes: formData.notes || undefined,
+        links: links.length > 0 ? links : undefined,
+      }
+
+      if (isEditing) {
+        updateMutation.mutate({
+          id: app.id,
+          ...payload,
+        })
+      } else {
+        createMutation.mutate(payload)
+      }
+    } catch (error) {
+      alert('Invalid JSON in links field')
+    }
+  }
+
+  const isPending = createMutation.isPending || updateMutation.isPending
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{isEditing ? 'Edit App' : 'Create App'}</DialogTitle>
+          <DialogDescription>
+            {isEditing
+              ? 'Update the app catalog entry'
+              : 'Add a new app to the catalog'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid gap-4">
+            <div>
+              <Label htmlFor="displayName">Name *</Label>
+              <Input
+                id="displayName"
+                value={formData.displayName}
+                onChange={(e) =>
+                  setFormData({ ...formData, displayName: e.target.value })
+                }
+                required
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="description">Description *</Label>
+              <Textarea
+                id="description"
+                value={formData.description}
+                onChange={(e) =>
+                  setFormData({ ...formData, description: e.target.value })
+                }
+                rows={3}
+                required
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="accessType">Access Type *</Label>
+              <select
+                id="accessType"
+                value={formData.accessType}
+                onChange={(e) =>
+                  setFormData({ ...formData, accessType: e.target.value })
+                }
+                className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              >
+                <option value="self-service">Self Service</option>
+                <option value="ticketing">Ticketing</option>
+                <option value="bot">Bot</option>
+                <option value="email">Email</option>
+                <option value="documentation">Documentation</option>
+                <option value="manual">Manual</option>
+              </select>
+            </div>
+
+            <div>
+              <Label htmlFor="iconName">Icon Name</Label>
+              <Input
+                id="iconName"
+                value={formData.iconName}
+                onChange={(e) =>
+                  setFormData({ ...formData, iconName: e.target.value })
+                }
+                placeholder="e.g., my-app-icon"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="appUrl">App URL</Label>
+              <Input
+                id="appUrl"
+                type="url"
+                value={formData.appUrl}
+                onChange={(e) =>
+                  setFormData({ ...formData, appUrl: e.target.value })
+                }
+                placeholder="https://..."
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="notes">Notes</Label>
+              <Textarea
+                id="notes"
+                value={formData.notes}
+                onChange={(e) =>
+                  setFormData({ ...formData, notes: e.target.value })
+                }
+                rows={2}
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="links">Links (JSON)</Label>
+              <Textarea
+                id="links"
+                value={formData.links}
+                onChange={(e) =>
+                  setFormData({ ...formData, links: e.target.value })
+                }
+                rows={5}
+                placeholder={`[\n  { "displayName": "Documentation", "url": "https://..." },\n  { "url": "https://..." }\n]`}
+                className="font-mono text-sm"
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isPending}>
+              {isPending ? 'Saving...' : isEditing ? 'Update' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/modules/appCatalog/ScreenshotItem.tsx

@@ -0,0 +1,63 @@
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { GripVertical, X } from 'lucide-react'
+import { Button } from '~/ui/button'
+import type { Screenshot } from './ScreenshotManager'
+
+interface ScreenshotItemProps {
+  screenshot: Screenshot
+  onDelete: () => void
+}
+
+export function ScreenshotItem({ screenshot, onDelete }: ScreenshotItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: screenshot.id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="relative group"
+    >
+      <div className="aspect-video rounded-md overflow-hidden border border-border bg-muted">
+        <img
+          src={screenshot.url}
+          alt="Screenshot"
+          className="w-full h-full object-cover"
+        />
+      </div>
+
+      <div className="absolute inset-0 rounded-md bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100">
+        <Button
+          size="sm"
+          variant="ghost"
+          className="text-white hover:bg-white/20"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical className="w-4 h-4" />
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="text-white hover:bg-red-500/20"
+          onClick={onDelete}
+        >
+          <X className="w-4 h-4" />
+        </Button>
+      </div>
+    </div>
+  )
+}