@igstack/app-catalog-frontend-core 0.0.1

package/src/ui/components/error/DefaultErrorComponent.tsx

@@ -0,0 +1,107 @@
+import type { ErrorComponentProps } from '@tanstack/react-router'
+import { BugIcon, RefreshCcwIcon } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from '~/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '~/ui/empty'
+import { useDb } from '~/userDb/DbContext'
+import { isDexieError, isDexieMigrationError } from '~/util/error-utils'
+import { BaseErrorPage } from './BaseErrorPage'
+
+export function Treatment({ error, reset }: ErrorComponentProps) {
+  const db = useDb()
+  const [isResetting, setIsResetting] = useState(false)
+
+  async function dexieResetDb() {
+    setIsResetting(true)
+    try {
+      await db.resetDatabase()
+      console.log('Database deleted and recreated successfully')
+      // Reload the page after successful reset
+      window.location.reload()
+    } catch (resetError) {
+      console.error('Failed to reset database:', resetError)
+      // Still reload the page even if reset fails, as it might help
+      window.location.reload()
+    } finally {
+      setIsResetting(false)
+    }
+  }
+
+  if (isDexieError(error)) {
+    const isMigrationError = isDexieMigrationError(error)
+    const buttonText = isMigrationError
+      ? isResetting
+        ? 'Clearing database...'
+        : 'Clear database and reload'
+      : isResetting
+        ? 'Resetting...'
+        : 'Try reset local settings'
+
+    return (
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => dexieResetDb()}
+        disabled={isResetting}
+      >
+        <RefreshCcwIcon className={isResetting ? 'animate-spin' : ''} />
+        {buttonText}
+      </Button>
+    )
+  }
+
+  return (
+    <div className="flex gap-2">
+      <Button variant="outline" size="sm" onClick={() => reset()}>
+        <RefreshCcwIcon />
+        Try reset error
+      </Button>
+      {/* <Button
+        variant="outline"
+        size="sm"
+        onClick={() => window.location.reload()}
+      >
+        <RefreshCcwIcon />
+        Try refresh page
+      </Button> */}
+    </div>
+  )
+}
+
+export function DefaultErrorComponent({ error, reset }: ErrorComponentProps) {
+  return (
+    <BaseErrorPage>
+      <Empty role="alert">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <BugIcon />
+          </EmptyMedia>
+          <EmptyTitle>Ooops!</EmptyTitle>
+          <EmptyDescription>
+            Error inside app-catalog occured: {<i>{error.message}</i>}
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Treatment error={error} reset={reset} />
+
+          <div
+            className={
+              'mt-8 text-center max-w-[90vw] max-h-[80vh] overflow-auto'
+            }
+          >
+            <pre className={'text-left mt-8 text-sm'}>
+              {<i>{error.stack}</i>}
+            </pre>
+          </div>
+        </EmptyContent>
+      </Empty>
+    </BaseErrorPage>
+  )
+}

package/src/ui/components/error/ForbiddenErrorPage.tsx

@@ -0,0 +1,89 @@
+import { Link } from '@tanstack/react-router'
+import { Home, Mail, ShieldAlert } from 'lucide-react'
+import type { AuthorizationError } from '~/errors/AuthorizationError'
+import { Button } from '~/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '~/ui/empty'
+import { BaseErrorPage } from './BaseErrorPage'
+
+export interface ForbiddenErrorPageProps {
+  error: AuthorizationError
+}
+
+export function ForbiddenErrorPage({ error }: ForbiddenErrorPageProps) {
+  const hasRoleInfo =
+    error.requiredRoles !== undefined && error.requiredRoles.length > 0
+  const hasPermissionInfo =
+    error.requiredPermissions !== undefined &&
+    error.requiredPermissions.length > 0
+
+  return (
+    <BaseErrorPage>
+      <Empty role="alert">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <ShieldAlert className="text-destructive" />
+          </EmptyMedia>
+          <EmptyTitle>Access Denied</EmptyTitle>
+          <EmptyDescription>
+            {error.message}
+            {error.resource && (
+              <>
+                <br />
+                <span className="text-sm text-muted-foreground">
+                  Resource: {error.resource}
+                </span>
+              </>
+            )}
+          </EmptyDescription>
+        </EmptyHeader>
+
+        <EmptyContent>
+          {(hasRoleInfo || hasPermissionInfo) && (
+            <div className="mb-6 p-4 bg-muted/50 rounded-lg text-left max-w-md mx-auto">
+              <p className="text-sm font-medium mb-2">Required Access:</p>
+              {hasRoleInfo && (
+                <div className="text-sm text-muted-foreground mb-2">
+                  <span className="font-medium">Roles: </span>
+                  {error.requiredRoles.join(', ')}
+                </div>
+              )}
+              {hasPermissionInfo && (
+                <div className="text-sm text-muted-foreground">
+                  <span className="font-medium">Permissions: </span>
+                  {error.requiredPermissions.join(', ')}
+                </div>
+              )}
+            </div>
+          )}
+
+          <div className="flex gap-3 justify-center">
+            <Button asChild>
+              <Link to="/">
+                <Home className="w-4 h-4 mr-2" />
+                Go Home
+              </Link>
+            </Button>
+            <Button variant="outline" asChild>
+              <a href="mailto:support@example.com">
+                <Mail className="w-4 h-4 mr-2" />
+                Contact Support
+              </a>
+            </Button>
+          </div>
+
+          <p className="mt-6 text-sm text-muted-foreground max-w-md mx-auto">
+            If you believe you should have access to this resource, please
+            contact your administrator or support team.
+          </p>
+        </EmptyContent>
+      </Empty>
+    </BaseErrorPage>
+  )
+}

package/src/ui/components/error/RootErrorPage.tsx

@@ -0,0 +1,23 @@
+import { DefaultErrorComponent } from './DefaultErrorComponent'
+import { ForbiddenErrorPage } from './ForbiddenErrorPage'
+import type { ErrorComponentProps } from '@tanstack/react-router'
+import { AuthorizationError } from '~/errors/AuthorizationError'
+
+/**
+ * Smart error component that routes to appropriate error UI based on error type
+ */
+export function RootErrorPage(props: ErrorComponentProps) {
+  const { error } = props
+
+  // Handle authorization errors with custom 403 page
+  if (AuthorizationError.isAuthorizationError(error)) {
+    return <ForbiddenErrorPage error={error} />
+  }
+
+  // Handle other errors with default error component
+  return (
+    <div className="p-5">
+      <DefaultErrorComponent {...props} />
+    </div>
+  )
+}

package/src/ui/components/footer/Footer.tsx

@@ -0,0 +1,51 @@
+import { ExternalLink } from 'lucide-react'
+
+export function Footer() {
+  return (
+    <footer className="mt-auto border-t border-border bg-background/50 backdrop-blur-sm">
+      <div className="max-w-7xl mx-auto px-6 py-4">
+        <div className="flex items-center justify-center text-sm text-muted-foreground">
+          <span>Built with</span>
+          <a
+            href="https://ui.shadcn.com/docs/components"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="ml-1 inline-flex items-center gap-1 text-primary hover:text-primary/80 transition-colors font-medium"
+          >
+            shadcn/ui
+            <ExternalLink className="h-3 w-3" />
+          </a>
+          <span className="mx-2">•</span>
+          <a
+            href="https://lucide.dev/icons/expand"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-primary hover:text-primary/80 transition-colors font-medium"
+          >
+            Lucide Icons
+            <ExternalLink className="h-3 w-3" />
+          </a>
+        </div>
+        {import.meta.env.DEV && (
+          <div className="grid grid-cols-4 w-[700px] gap-1 text-sm ">
+            <div className="p-1 bg-accent">bg-accent</div>
+            <div className="p-1 bg-background">bg-background</div>
+            <div className="p-1 bg-highlight">bg-highglight</div>
+            <div className="p-1 bg-card">bg-card</div>
+            <div className="p-1 bg-popover">bg-poprover</div>
+            <div className="p-1 bg-secondary">bg-secondary</div>
+            <div className="p-1 bg-muted">bg-muted</div>
+            <div className="p-1 bg-chart-1">bg-chart-1</div>
+            <div className="p-1 bg-chart-2">bg-chart-2</div>
+            <div className="p-1 bg-sidebar">bg-sidebar</div>
+            <div className="p-1 bg-input">bg-input</div>
+            <div className="p-1 bg-border">bg-border</div>
+            <div className="p-1 bg-sidebar-primary">bg-sidebar-primary</div>
+            <div className="p-1 bg-sidebar-accent">bg-sidebar-accent</div>
+            <div className="p-1 bg-sidebar-border">bg-sidebar-border</div>
+          </div>
+        )}
+      </div>
+    </footer>
+  )
+}

package/src/ui/components/header/Header.tsx

@@ -0,0 +1,135 @@
+import { Link, useNavigate } from '@tanstack/react-router'
+import { LogOut, Settings } from 'lucide-react'
+import type React from 'react'
+import AppCatalogLogo from '~/assets/app-catalog.svg?react'
+import { ThemeSwitcher } from '~/components/ThemeSwitcher'
+import {
+  useAuth,
+  useAuthActions,
+  useIsAuthenticated,
+  useUser,
+} from '~/modules/auth'
+import { useAuthModal } from '~/modules/auth/AuthModalContext'
+import { Button } from '~/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '~/ui/dropdown-menu'
+import { Skeleton } from '~/ui/skeleton'
+
+export interface HeaderProps {
+  middle?: React.ReactNode
+}
+
+export function Header({ middle }: HeaderProps) {
+  const { isLoading } = useAuth()
+  const isAuthenticated = useIsAuthenticated()
+  const user = useUser()
+  const { logout } = useAuthActions()
+  const navigate = useNavigate()
+  const { open: openLoginModal } = useAuthModal()
+
+  const handleLogout = async () => {
+    try {
+      await logout()
+    } catch (error) {
+      console.error('Logout failed:', error)
+    }
+  }
+
+  const handleAdminClick = () => {
+    navigate({ to: '/admin' })
+  }
+
+  const handleLoginClick = () => {
+    // Preserve the current URL for redirect after login
+    const currentUrl = window.location.pathname + window.location.search
+    openLoginModal(currentUrl)
+  }
+
+  return (
+    <div className="flex items-center mb-4 justify-between gap-2">
+      <div className="flex items-center gap-4">
+        <Link to="/">
+          <div className="flex items-center gap-2">
+            <AppCatalogLogo className="h-16 w-16" />
+            <span className="text-lg font-bold hidden md:block">
+              App Catalog
+            </span>
+          </div>
+        </Link>
+      </div>
+      {middle && <div className="sm:min-w-75">{middle}</div>}
+      <div className="flex items-center gap-3">
+        <ThemeSwitcher />
+        {isLoading ? (
+          <Skeleton className="w-8 h-8 rounded-full" />
+        ) : !isAuthenticated ? (
+          <button
+            type="button"
+            onClick={handleLoginClick}
+            className="text-sm font-medium text-muted-foreground hover:text-foreground cursor-pointer"
+          >
+            Login
+          </button>
+        ) : user?.name ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="w-8 h-8 rounded-full p-0 hover:bg-accent hover:text-accent-foreground cursor-pointer"
+              >
+                {user.image ? (
+                  <img
+                    src={user.image}
+                    alt={user.name}
+                    className="w-full h-full rounded-full object-cover"
+                  />
+                ) : (
+                  <div className="flex items-center justify-center w-full h-full rounded-full bg-primary text-primary-foreground text-xs font-semibold">
+                    {user.name.charAt(0).toUpperCase()}
+                  </div>
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              <div className="px-2 py-3 flex items-center gap-3">
+                {user.image ? (
+                  <img
+                    src={user.image}
+                    alt={user.name}
+                    className="w-10 h-10 rounded-full object-cover shrink-0"
+                  />
+                ) : (
+                  <div className="flex items-center justify-center w-10 h-10 rounded-full bg-primary text-primary-foreground text-sm font-semibold shrink-0">
+                    {user.name.charAt(0).toUpperCase()}
+                  </div>
+                )}
+                <div className="flex flex-col min-w-0">
+                  <p className="text-xs text-muted-foreground truncate">
+                    @{user.email?.split('@')[0] || 'user'}
+                  </p>
+                  <p className="text-sm font-medium truncate">{user.name}</p>
+                </div>
+              </div>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={handleAdminClick}>
+                <Settings className="h-4 w-4 mr-2" />
+                <span>Admin</span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={handleLogout}>
+                <LogOut className="h-4 w-4 mr-2" />
+                <span>Sign out</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/ui/components/widgetPanel/AddWidgetCard.tsx

@@ -0,0 +1,17 @@
+import { Plus } from 'lucide-react'
+
+interface AddWidgetCardProps {
+  onClick?: () => void
+}
+
+export function AddWidgetCard({ onClick }: AddWidgetCardProps) {
+  return (
+    <div
+      className="border-2 border-dashed border-muted h-32 rounded-md flex flex-col items-center justify-center cursor-pointer text-muted-foreground hover:text-foreground"
+      onClick={onClick}
+    >
+      <Plus className="h-5 w-5 mb-1" />
+      <span className="text-xs">Add widget…</span>
+    </div>
+  )
+}

package/src/ui/components/widgetPanel/WidgetGrid.tsx

@@ -0,0 +1,18 @@
+import { CredentialsWidget } from '../widgets/CredentialsWidget'
+import { VersionWidget } from '../widgets/VersionWidget'
+import { AddWidgetCard } from './AddWidgetCard'
+
+interface WidgetGridProps {
+  widgets: ReadonlyArray<string>
+  onAddWidget?: () => void
+}
+
+export function WidgetGrid({ widgets, onAddWidget }: WidgetGridProps) {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6 gap-4">
+      {widgets.includes('creds') && <CredentialsWidget />}
+      {widgets.includes('version') && <VersionWidget />}
+      <AddWidgetCard onClick={onAddWidget} />
+    </div>
+  )
+}

package/src/ui/components/widgets/CredentialsWidget.tsx

@@ -0,0 +1,55 @@
+import { Copy, KeyRound } from 'lucide-react'
+import { Badge } from '~/ui/badge'
+import { Button } from '~/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '~/ui/card'
+
+interface Credential {
+  slug: string
+  desc: string
+  user: string
+  pwd: string
+}
+
+interface CredentialsWidgetProps {
+  credentials?: Array<Credential>
+}
+
+const defaultCredentials: Array<Credential> = [
+  { slug: 'SC', desc: 'San‑Carlos', user: 'test@company.com', pwd: 'password' },
+  { slug: 'AU', desc: 'Austin', user: 'austin@company.com', pwd: 'password' },
+]
+
+export function CredentialsWidget({
+  credentials = defaultCredentials,
+}: CredentialsWidgetProps) {
+  const copy = (text: string) => navigator.clipboard.writeText(text)
+
+  return (
+    <Card className="h-32">
+      <CardHeader className="py-2">
+        <CardTitle className="text-sm">Credentials</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-1 px-3 pb-3">
+        {credentials.map((cred) => (
+          <div
+            key={cred.slug}
+            className="flex items-center justify-between text-xs"
+          >
+            <Badge variant="secondary" className="mr-1 px-1.5 py-0.5">
+              {cred.slug}
+            </Badge>
+            <span className="truncate flex-1" title={cred.desc}>
+              {cred.desc}
+            </span>
+            <Button variant="ghost" size="icon" onClick={() => copy(cred.user)}>
+              <Copy className="h-3 w-3" />
+            </Button>
+            <Button variant="ghost" size="icon" onClick={() => copy(cred.pwd)}>
+              <KeyRound className="h-3 w-3" />
+            </Button>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}

package/src/ui/components/widgets/VersionWidget.tsx

@@ -0,0 +1,29 @@
+import { ArrowUpRight } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '~/ui/card'
+
+interface VersionWidgetProps {
+  version?: string
+  diffCommits?: number
+  diffDays?: number
+}
+
+export function VersionWidget({
+  version = 'v1.13.0',
+  diffCommits = 2,
+  diffDays = 5,
+}: VersionWidgetProps) {
+  return (
+    <Card className="h-32">
+      <CardHeader className="py-2">
+        <CardTitle className="text-sm">Version</CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col justify-between h-full px-3 pb-3">
+        <p className="text-lg font-semibold">{version}</p>
+        <p className="text-xs flex items-center text-muted-foreground">
+          <ArrowUpRight className="h-4 w-4 mr-1 text-green-600" />+{diffCommits}{' '}
+          commits • {diffDays}d ahead
+        </p>
+      </CardContent>
+    </Card>
+  )
+}