@burdenoff/microfe-devportal 2026.609.1 → 2026.609.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/devportal/DevportalRoutes.js +9 -5
- package/dist/devportal/DevportalRoutes.js.map +1 -1
- package/dist/devportal/pages/DashboardPage.js +152 -134
- package/dist/devportal/pages/DashboardPage.js.map +1 -1
- package/dist/devportal/pages/SetupPage.js +501 -0
- package/dist/devportal/pages/SetupPage.js.map +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardPage.js","names":[],"sources":["../../../src/devportal/pages/DashboardPage.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n AppWindow,\n Building2,\n Key,\n Webhook,\n TrendingUp,\n Users,\n DollarSign,\n Activity,\n Plus,\n ArrowRight,\n Loader2,\n} from \"lucide-react\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { StatCard, StatCardGrid } from \"../components/StatCard\";\nimport { AppListItem } from \"../components/AppCard\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type { Application, DeveloperOrganization } from \"../types\";\nimport {\n useGetDevportalDashboardBootstrapQuery,\n type OrganizationFieldsFragment,\n type ApplicationFieldsFragment,\n} from \"../hooks\";\n\n/**\n * Developer Portal Dashboard Page\n *\n * Shows an overview of the developer's applications, organizations,\n * and key metrics using real data from the GraphQL API.\n */\nexport const DashboardPage: FC = () => {\n const { navigate, basePath } = useDevportal();\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n\n // Fetch dashboard bootstrap in a single global query\n const { data, loading } = useGetDevportalDashboardBootstrapQuery({\n fetchPolicy: \"cache-and-network\",\n });\n\n const organizations: OrganizationFieldsFragment[] =\n data?.myDeveloperOrganizations ?? [];\n const applications: ApplicationFieldsFragment[] =\n data?.applications?.edges?.map(\n (e: { node: ApplicationFieldsFragment }) => e.node,\n ) ?? [];\n\n // Calculate aggregate stats\n const stats = {\n totalApps: data?.applications?.totalCount ?? 0,\n totalOrgs: organizations.length,\n totalApiKeys: 0,\n totalWebhooks: 0,\n totalApiCalls: organizations.reduce(\n (acc: number, org: OrganizationFieldsFragment) =>\n acc + parseInt(org.totalApiCalls || \"0\"),\n 0,\n ),\n activeInstalls: organizations.reduce(\n (acc: number, org: OrganizationFieldsFragment) =>\n acc + (org.activeInstalls || 0),\n 0,\n ),\n monthlyRevenue: organizations.reduce(\n (acc: number, org: OrganizationFieldsFragment) =>\n acc + (org.totalRevenue || 0),\n 0,\n ),\n errorRate: 0,\n };\n\n const handleNavigate = (path: string) => {\n navigate?.(`${basePath}${path}`);\n };\n\n const isLoading = loading;\n\n return (\n <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_READ}>\n <PageLayout\n title={tr(\"devportal.developerPortal\", \"Developer Portal\")}\n description={tr(\n \"devportal.buildManageMonitor\",\n \"Build, manage, and monitor your applications\",\n )}\n actions={\n <button\n data-tour=\"devportal-dashboard-create-app-button\"\n onClick={() => handleNavigate(\"/apps/new\")}\n className=\"inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors\"\n >\n <Plus size={16} />\n {tr(\"devportal.createApp\", \"Create App\")}\n </button>\n }\n >\n {/* Stats Overview */}\n <PageSection data-tour=\"devportal-dashboard-stats-overview\">\n <StatCardGrid columns={4}>\n <StatCard\n title={tr(\"devportal.totalApps\", \"Total Apps\")}\n value={\n isLoading ? (\n <Loader2 className=\"h-5 w-5 animate-spin\" />\n ) : (\n stats.totalApps\n )\n }\n icon={<AppWindow size={20} />}\n trend={undefined}\n />\n <StatCard\n title={tr(\"devportal.organizations\", \"Organizations\")}\n value={\n isLoading ? (\n <Loader2 className=\"h-5 w-5 animate-spin\" />\n ) : (\n stats.totalOrgs\n )\n }\n icon={<Building2 size={20} />}\n />\n <StatCard\n title={tr(\"devportal.apiKeys\", \"API Keys\")}\n value={stats.totalApiKeys}\n icon={<Key size={20} />}\n description={tr(\"devportal.activeKeys\", \"Active keys\")}\n />\n <StatCard\n title={tr(\"devportal.webhooks\", \"Webhooks\")}\n value={stats.totalWebhooks}\n icon={<Webhook size={20} />}\n description={tr(\"devportal.configured\", \"Configured\")}\n />\n </StatCardGrid>\n </PageSection>\n\n {/* Usage Stats */}\n <PageSection\n title={tr(\"devportal.usageOverview\", \"Usage Overview\")}\n data-tour=\"devportal-dashboard-usage-overview\"\n >\n <StatCardGrid columns={4}>\n <StatCard\n title={tr(\"devportal.apiCalls\", \"API Calls\")}\n value={\n isLoading ? (\n <Loader2 className=\"h-5 w-5 animate-spin\" />\n ) : stats.totalApiCalls > 1000000 ? (\n `${(stats.totalApiCalls / 1000000).toFixed(1)}M`\n ) : stats.totalApiCalls > 1000 ? (\n `${(stats.totalApiCalls / 1000).toFixed(1)}K`\n ) : (\n stats.totalApiCalls.toString()\n )\n }\n icon={<Activity size={20} />}\n trend={undefined}\n />\n <StatCard\n title={tr(\"devportal.activeInstalls\", \"Active Installs\")}\n value={\n isLoading ? (\n <Loader2 className=\"h-5 w-5 animate-spin\" />\n ) : stats.activeInstalls > 1000 ? (\n `${(stats.activeInstalls / 1000).toFixed(1)}K`\n ) : (\n stats.activeInstalls.toString()\n )\n }\n icon={<Users size={20} />}\n trend={undefined}\n />\n <StatCard\n title={tr(\"devportal.monthlyRevenue\", \"Monthly Revenue\")}\n value={\n isLoading ? (\n <Loader2 className=\"h-5 w-5 animate-spin\" />\n ) : (\n `$${stats.monthlyRevenue.toLocaleString()}`\n )\n }\n icon={<DollarSign size={20} />}\n trend={undefined}\n />\n <StatCard\n title={tr(\"devportal.errorRate\", \"Error Rate\")}\n value={`${stats.errorRate}%`}\n icon={<TrendingUp size={20} />}\n trend={undefined}\n />\n </StatCardGrid>\n </PageSection>\n\n {/* Quick Actions & Recent Items */}\n <div className=\"grid gap-6 lg:grid-cols-2\">\n {/* Recent Apps */}\n <PageSection\n data-tour=\"devportal-dashboard-recent-apps\"\n title={tr(\"devportal.recentApplications\", \"Recent Applications\")}\n actions={\n <button\n onClick={() => handleNavigate(\"/apps\")}\n className=\"text-sm text-primary hover:underline flex items-center gap-1\"\n >\n {tr(\"devportal.viewAll\", \"View all\")} <ArrowRight size={14} />\n </button>\n }\n >\n {isLoading ? (\n <div className=\"flex items-center justify-center py-8\">\n <Loader2 className=\"h-6 w-6 animate-spin text-muted-foreground\" />\n </div>\n ) : applications.length > 0 ? (\n <div className=\"space-y-2\">\n {applications\n .slice(0, 3)\n .map((app: ApplicationFieldsFragment) => (\n <AppListItem\n key={app.id}\n app={app as Application}\n onClick={() => handleNavigate(`/apps/${app.id}`)}\n />\n ))}\n </div>\n ) : (\n <EmptyState\n icon={<AppWindow size={24} />}\n title={tr(\"devportal.noApplicationsYet\", \"No applications yet\")}\n description={tr(\n \"devportal.createFirstApplicationToGetStarted\",\n \"Create your first application to get started\",\n )}\n action={\n <button\n onClick={() => handleNavigate(\"/apps/new\")}\n className=\"inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90\"\n >\n <Plus size={16} />\n {tr(\"devportal.createApp\", \"Create App\")}\n </button>\n }\n />\n )}\n </PageSection>\n\n {/* Quick Actions */}\n <PageSection\n title={tr(\"devportal.quickActions\", \"Quick Actions\")}\n data-tour=\"devportal-dashboard-quick-actions\"\n >\n <div className=\"grid gap-3\">\n <QuickActionCard\n title={tr(\"devportal.createNewApp\", \"Create New App\")}\n description={tr(\n \"devportal.startBuildingANewApplication\",\n \"Start building a new application\",\n )}\n icon={<AppWindow size={20} />}\n onClick={() => handleNavigate(\"/apps/new\")}\n />\n <QuickActionCard\n title={tr(\n \"devportal.createOrganization\",\n \"Create Organization\",\n )}\n description={tr(\n \"devportal.setUpATeamToCollaborate\",\n \"Set up a team to collaborate\",\n )}\n icon={<Building2 size={20} />}\n onClick={() => handleNavigate(\"/organizations/new\")}\n />\n <QuickActionCard\n title={tr(\"devportal.generateApiKey\", \"Generate API Key\")}\n description={tr(\n \"devportal.createCredentialsForYourApps\",\n \"Create credentials for your apps\",\n )}\n icon={<Key size={20} />}\n onClick={() => handleNavigate(\"/api-keys\")}\n />\n <QuickActionCard\n title={tr(\"devportal.configureWebhooks\", \"Configure Webhooks\")}\n description={tr(\n \"devportal.setUpEventNotifications\",\n \"Set up event notifications\",\n )}\n icon={<Webhook size={20} />}\n onClick={() => handleNavigate(\"/webhooks\")}\n />\n </div>\n </PageSection>\n </div>\n\n {/* Organizations */}\n {isLoading ? (\n <PageSection\n data-tour=\"devportal-dashboard-organizations\"\n title={tr(\"devportal.yourOrganizations\", \"Your Organizations\")}\n >\n <div className=\"flex items-center justify-center py-8\">\n <Loader2 className=\"h-6 w-6 animate-spin text-muted-foreground\" />\n </div>\n </PageSection>\n ) : organizations.length > 0 ? (\n <PageSection\n title={tr(\"devportal.yourOrganizations\", \"Your Organizations\")}\n actions={\n <button\n onClick={() => handleNavigate(\"/organizations\")}\n className=\"text-sm text-primary hover:underline flex items-center gap-1\"\n >\n {tr(\"devportal.viewAll\", \"View all\")} <ArrowRight size={14} />\n </button>\n }\n >\n <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n {organizations\n .slice(0, 3)\n .map((org: OrganizationFieldsFragment) => (\n <OrgCard\n key={org.id}\n org={org as DeveloperOrganization}\n onClick={() => handleNavigate(`/organizations/${org.id}`)}\n />\n ))}\n </div>\n </PageSection>\n ) : null}\n </PageLayout>\n </PermissionGuard>\n );\n};\n\n// Quick action card component\nconst QuickActionCard: FC<{\n title: string;\n description: string;\n icon: React.ReactNode;\n onClick: () => void;\n}> = ({ title, description, icon, onClick }) => (\n <button\n onClick={onClick}\n className=\"flex items-center gap-4 rounded-lg border bg-card p-4 text-left hover:bg-accent transition-colors\"\n >\n <div className=\"rounded-lg bg-primary/10 p-2 text-primary\">{icon}</div>\n <div>\n <p className=\"font-medium\">{title}</p>\n <p className=\"text-sm text-muted-foreground\">{description}</p>\n </div>\n </button>\n);\n\n// Organization card component\nconst OrgCard: FC<{\n org: DeveloperOrganization;\n onClick: () => void;\n}> = ({ org, onClick }) => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n return (\n <button\n onClick={onClick}\n className=\"rounded-lg border bg-card p-4 text-left hover:bg-accent transition-colors\"\n >\n <div className=\"flex items-center gap-3\">\n {org.logoUrl ? (\n <img\n src={org.logoUrl}\n alt={org.name}\n className=\"h-10 w-10 rounded-lg object-cover\"\n />\n ) : (\n <div className=\"flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary\">\n <Building2 size={20} />\n </div>\n )}\n <div className=\"flex-1 min-w-0\">\n <p className=\"font-medium truncate\">{org.name}</p>\n <p className=\"text-sm text-muted-foreground\">\n {org.publishedApps}{\" \"}\n {tr(\"devportal.appsPublished\", \"apps published\")}\n </p>\n </div>\n </div>\n <div className=\"mt-3 flex gap-4 text-sm text-muted-foreground\">\n <span>\n {(org.totalInstalls || 0).toLocaleString()}{\" \"}\n {tr(\"devportal.installs\", \"installs\")}\n </span>\n <span>\n ${(org.totalRevenue || 0).toLocaleString()}{\" \"}\n {tr(\"devportal.revenue\", \"revenue\")}\n </span>\n </div>\n </button>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DashboardPage.js","names":[],"sources":["../../../src/devportal/pages/DashboardPage.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport { useEffect } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n AppWindow,\n Building2,\n Key,\n Webhook,\n TrendingUp,\n Users,\n DollarSign,\n Activity,\n Plus,\n ArrowRight,\n Loader2,\n} from \"lucide-react\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { StatCard, StatCardGrid } from \"../components/StatCard\";\nimport { AppListItem } from \"../components/AppCard\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type { Application, DeveloperOrganization } from \"../types\";\nimport {\n useGetDevportalDashboardBootstrapQuery,\n type OrganizationFieldsFragment,\n type ApplicationFieldsFragment,\n} from \"../hooks\";\n\n/**\n * Developer Portal Dashboard Page\n *\n * Shows an overview of the developer's applications, organizations,\n * and key metrics using real data from the GraphQL API.\n */\nexport const DashboardPage: FC = () => {\n const { navigate, basePath } = useDevportal();\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n\n // Fetch dashboard bootstrap in a single global query\n const { data, loading } = useGetDevportalDashboardBootstrapQuery({\n fetchPolicy: \"cache-and-network\",\n });\n\n const organizations: OrganizationFieldsFragment[] =\n data?.myDeveloperOrganizations ?? [];\n\n // First-time users: redirect to setup wizard when no org exists and they\n // haven't already dismissed the wizard in this browser.\n useEffect(() => {\n if (loading || !data) return;\n if (organizations.length > 0) return;\n try {\n if (localStorage.getItem(\"devportal_setup_dismissed\")) return;\n } catch {\n // localStorage unavailable — don't redirect\n return;\n }\n navigate?.(`${basePath}/setup`);\n }, [loading, data, organizations.length, navigate, basePath]);\n const applications: ApplicationFieldsFragment[] =\n data?.applications?.edges?.map(\n (e: { node: ApplicationFieldsFragment }) => e.node,\n ) ?? [];\n\n // Calculate aggregate stats\n const stats = {\n totalApps: data?.applications?.totalCount ?? 0,\n totalOrgs: organizations.length,\n totalApiKeys: 0,\n totalWebhooks: 0,\n totalApiCalls: organizations.reduce(\n (acc: number, org: OrganizationFieldsFragment) =>\n acc + parseInt(org.totalApiCalls || \"0\"),\n 0,\n ),\n activeInstalls: organizations.reduce(\n (acc: number, org: OrganizationFieldsFragment) =>\n acc + (org.activeInstalls || 0),\n 0,\n ),\n monthlyRevenue: organizations.reduce(\n (acc: number, org: OrganizationFieldsFragment) =>\n acc + (org.totalRevenue || 0),\n 0,\n ),\n errorRate: 0,\n };\n\n const handleNavigate = (path: string) => {\n navigate?.(`${basePath}${path}`);\n };\n\n const isLoading = loading;\n\n return (\n <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_READ}>\n <PageLayout\n title={tr(\"devportal.developerPortal\", \"Developer Portal\")}\n description={tr(\n \"devportal.buildManageMonitor\",\n \"Build, manage, and monitor your applications\",\n )}\n actions={\n <button\n data-tour=\"devportal-dashboard-create-app-button\"\n onClick={() => handleNavigate(\"/apps/new\")}\n className=\"inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors\"\n >\n <Plus size={16} />\n {tr(\"devportal.createApp\", \"Create App\")}\n </button>\n }\n >\n {/* Stats Overview */}\n <PageSection data-tour=\"devportal-dashboard-stats-overview\">\n <StatCardGrid columns={4}>\n <StatCard\n title={tr(\"devportal.totalApps\", \"Total Apps\")}\n value={\n isLoading ? (\n <Loader2 className=\"h-5 w-5 animate-spin\" />\n ) : (\n stats.totalApps\n )\n }\n icon={<AppWindow size={20} />}\n trend={undefined}\n />\n <StatCard\n title={tr(\"devportal.organizations\", \"Organizations\")}\n value={\n isLoading ? (\n <Loader2 className=\"h-5 w-5 animate-spin\" />\n ) : (\n stats.totalOrgs\n )\n }\n icon={<Building2 size={20} />}\n />\n <StatCard\n title={tr(\"devportal.apiKeys\", \"API Keys\")}\n value={stats.totalApiKeys}\n icon={<Key size={20} />}\n description={tr(\"devportal.activeKeys\", \"Active keys\")}\n />\n <StatCard\n title={tr(\"devportal.webhooks\", \"Webhooks\")}\n value={stats.totalWebhooks}\n icon={<Webhook size={20} />}\n description={tr(\"devportal.configured\", \"Configured\")}\n />\n </StatCardGrid>\n </PageSection>\n\n {/* Usage Stats */}\n <PageSection\n title={tr(\"devportal.usageOverview\", \"Usage Overview\")}\n data-tour=\"devportal-dashboard-usage-overview\"\n >\n <StatCardGrid columns={4}>\n <StatCard\n title={tr(\"devportal.apiCalls\", \"API Calls\")}\n value={\n isLoading ? (\n <Loader2 className=\"h-5 w-5 animate-spin\" />\n ) : stats.totalApiCalls > 1000000 ? (\n `${(stats.totalApiCalls / 1000000).toFixed(1)}M`\n ) : stats.totalApiCalls > 1000 ? (\n `${(stats.totalApiCalls / 1000).toFixed(1)}K`\n ) : (\n stats.totalApiCalls.toString()\n )\n }\n icon={<Activity size={20} />}\n trend={undefined}\n />\n <StatCard\n title={tr(\"devportal.activeInstalls\", \"Active Installs\")}\n value={\n isLoading ? (\n <Loader2 className=\"h-5 w-5 animate-spin\" />\n ) : stats.activeInstalls > 1000 ? (\n `${(stats.activeInstalls / 1000).toFixed(1)}K`\n ) : (\n stats.activeInstalls.toString()\n )\n }\n icon={<Users size={20} />}\n trend={undefined}\n />\n <StatCard\n title={tr(\"devportal.monthlyRevenue\", \"Monthly Revenue\")}\n value={\n isLoading ? (\n <Loader2 className=\"h-5 w-5 animate-spin\" />\n ) : (\n `$${stats.monthlyRevenue.toLocaleString()}`\n )\n }\n icon={<DollarSign size={20} />}\n trend={undefined}\n />\n <StatCard\n title={tr(\"devportal.errorRate\", \"Error Rate\")}\n value={`${stats.errorRate}%`}\n icon={<TrendingUp size={20} />}\n trend={undefined}\n />\n </StatCardGrid>\n </PageSection>\n\n {/* Quick Actions & Recent Items */}\n <div className=\"grid gap-6 lg:grid-cols-2\">\n {/* Recent Apps */}\n <PageSection\n data-tour=\"devportal-dashboard-recent-apps\"\n title={tr(\"devportal.recentApplications\", \"Recent Applications\")}\n actions={\n <button\n onClick={() => handleNavigate(\"/apps\")}\n className=\"text-sm text-primary hover:underline flex items-center gap-1\"\n >\n {tr(\"devportal.viewAll\", \"View all\")} <ArrowRight size={14} />\n </button>\n }\n >\n {isLoading ? (\n <div className=\"flex items-center justify-center py-8\">\n <Loader2 className=\"h-6 w-6 animate-spin text-muted-foreground\" />\n </div>\n ) : applications.length > 0 ? (\n <div className=\"space-y-2\">\n {applications\n .slice(0, 3)\n .map((app: ApplicationFieldsFragment) => (\n <AppListItem\n key={app.id}\n app={app as Application}\n onClick={() => handleNavigate(`/apps/${app.id}`)}\n />\n ))}\n </div>\n ) : (\n <EmptyState\n icon={<AppWindow size={24} />}\n title={tr(\"devportal.noApplicationsYet\", \"No applications yet\")}\n description={tr(\n \"devportal.createFirstApplicationToGetStarted\",\n \"Create your first application to get started\",\n )}\n action={\n <button\n onClick={() => handleNavigate(\"/apps/new\")}\n className=\"inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90\"\n >\n <Plus size={16} />\n {tr(\"devportal.createApp\", \"Create App\")}\n </button>\n }\n />\n )}\n </PageSection>\n\n {/* Quick Actions */}\n <PageSection\n title={tr(\"devportal.quickActions\", \"Quick Actions\")}\n data-tour=\"devportal-dashboard-quick-actions\"\n >\n <div className=\"grid gap-3\">\n <QuickActionCard\n title={tr(\"devportal.createNewApp\", \"Create New App\")}\n description={tr(\n \"devportal.startBuildingANewApplication\",\n \"Start building a new application\",\n )}\n icon={<AppWindow size={20} />}\n onClick={() => handleNavigate(\"/apps/new\")}\n />\n <QuickActionCard\n title={tr(\n \"devportal.createOrganization\",\n \"Create Organization\",\n )}\n description={tr(\n \"devportal.setUpATeamToCollaborate\",\n \"Set up a team to collaborate\",\n )}\n icon={<Building2 size={20} />}\n onClick={() => handleNavigate(\"/organizations/new\")}\n />\n <QuickActionCard\n title={tr(\"devportal.generateApiKey\", \"Generate API Key\")}\n description={tr(\n \"devportal.createCredentialsForYourApps\",\n \"Create credentials for your apps\",\n )}\n icon={<Key size={20} />}\n onClick={() => handleNavigate(\"/api-keys\")}\n />\n <QuickActionCard\n title={tr(\"devportal.configureWebhooks\", \"Configure Webhooks\")}\n description={tr(\n \"devportal.setUpEventNotifications\",\n \"Set up event notifications\",\n )}\n icon={<Webhook size={20} />}\n onClick={() => handleNavigate(\"/webhooks\")}\n />\n </div>\n </PageSection>\n </div>\n\n {/* Organizations */}\n {isLoading ? (\n <PageSection\n data-tour=\"devportal-dashboard-organizations\"\n title={tr(\"devportal.yourOrganizations\", \"Your Organizations\")}\n >\n <div className=\"flex items-center justify-center py-8\">\n <Loader2 className=\"h-6 w-6 animate-spin text-muted-foreground\" />\n </div>\n </PageSection>\n ) : organizations.length > 0 ? (\n <PageSection\n title={tr(\"devportal.yourOrganizations\", \"Your Organizations\")}\n actions={\n <button\n onClick={() => handleNavigate(\"/organizations\")}\n className=\"text-sm text-primary hover:underline flex items-center gap-1\"\n >\n {tr(\"devportal.viewAll\", \"View all\")} <ArrowRight size={14} />\n </button>\n }\n >\n <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n {organizations\n .slice(0, 3)\n .map((org: OrganizationFieldsFragment) => (\n <OrgCard\n key={org.id}\n org={org as DeveloperOrganization}\n onClick={() => handleNavigate(`/organizations/${org.id}`)}\n />\n ))}\n </div>\n </PageSection>\n ) : null}\n </PageLayout>\n </PermissionGuard>\n );\n};\n\n// Quick action card component\nconst QuickActionCard: FC<{\n title: string;\n description: string;\n icon: React.ReactNode;\n onClick: () => void;\n}> = ({ title, description, icon, onClick }) => (\n <button\n onClick={onClick}\n className=\"flex items-center gap-4 rounded-lg border bg-card p-4 text-left hover:bg-accent transition-colors\"\n >\n <div className=\"rounded-lg bg-primary/10 p-2 text-primary\">{icon}</div>\n <div>\n <p className=\"font-medium\">{title}</p>\n <p className=\"text-sm text-muted-foreground\">{description}</p>\n </div>\n </button>\n);\n\n// Organization card component\nconst OrgCard: FC<{\n org: DeveloperOrganization;\n onClick: () => void;\n}> = ({ org, onClick }) => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n return (\n <button\n onClick={onClick}\n className=\"rounded-lg border bg-card p-4 text-left hover:bg-accent transition-colors\"\n >\n <div className=\"flex items-center gap-3\">\n {org.logoUrl ? (\n <img\n src={org.logoUrl}\n alt={org.name}\n className=\"h-10 w-10 rounded-lg object-cover\"\n />\n ) : (\n <div className=\"flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary\">\n <Building2 size={20} />\n </div>\n )}\n <div className=\"flex-1 min-w-0\">\n <p className=\"font-medium truncate\">{org.name}</p>\n <p className=\"text-sm text-muted-foreground\">\n {org.publishedApps}{\" \"}\n {tr(\"devportal.appsPublished\", \"apps published\")}\n </p>\n </div>\n </div>\n <div className=\"mt-3 flex gap-4 text-sm text-muted-foreground\">\n <span>\n {(org.totalInstalls || 0).toLocaleString()}{\" \"}\n {tr(\"devportal.installs\", \"installs\")}\n </span>\n <span>\n ${(org.totalRevenue || 0).toLocaleString()}{\" \"}\n {tr(\"devportal.revenue\", \"revenue\")}\n </span>\n </div>\n </button>\n );\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,501 @@
|
|
|
1
|
+
import { useDevportal as e } from "../providers/DevportalProvider.js";
|
|
2
|
+
import { useDevportalEventBus as t } from "../events/index.js";
|
|
3
|
+
import { APP_TYPE_LABELS as n } from "../utils/constants.js";
|
|
4
|
+
import { InputField as r, SelectField as i, TextareaField as a } from "../components/FormField.js";
|
|
5
|
+
import { useCreateApplicationMutation as ee, useCreateOrganizationMutation as te } from "../../generated/global-operations.js";
|
|
6
|
+
import { useState as o } from "react";
|
|
7
|
+
import { useI18n as s } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
|
|
8
|
+
import { AppWindow as c, ArrowRight as ne, BookOpen as re, Building2 as l, Check as u, ChevronRight as d, Key as f, Rocket as p } from "lucide-react";
|
|
9
|
+
import { jsx as m, jsxs as h } from "react/jsx-runtime";
|
|
10
|
+
//#region src/devportal/pages/SetupPage.tsx
|
|
11
|
+
var g = [
|
|
12
|
+
{
|
|
13
|
+
value: "FREE",
|
|
14
|
+
label: "Free",
|
|
15
|
+
price: "Free",
|
|
16
|
+
apps: "1 app",
|
|
17
|
+
calls: "100K calls/mo"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
value: "DEVELOPER",
|
|
21
|
+
label: "Developer",
|
|
22
|
+
price: "$29/mo",
|
|
23
|
+
apps: "3 apps",
|
|
24
|
+
calls: "1M calls/mo"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
value: "PROFESSIONAL",
|
|
28
|
+
label: "Professional",
|
|
29
|
+
price: "$99/mo",
|
|
30
|
+
apps: "10 apps",
|
|
31
|
+
calls: "10M calls/mo"
|
|
32
|
+
}
|
|
33
|
+
], _ = [{
|
|
34
|
+
value: "",
|
|
35
|
+
label: "Select type…"
|
|
36
|
+
}, ...Object.entries(n).map(([e, t]) => ({
|
|
37
|
+
value: e,
|
|
38
|
+
label: t
|
|
39
|
+
}))], v = [
|
|
40
|
+
{
|
|
41
|
+
value: "",
|
|
42
|
+
label: "Select category…"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
value: "productivity",
|
|
46
|
+
label: "Productivity"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
value: "communication",
|
|
50
|
+
label: "Communication"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
value: "analytics",
|
|
54
|
+
label: "Analytics"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
value: "automation",
|
|
58
|
+
label: "Automation"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
value: "developer-tools",
|
|
62
|
+
label: "Developer Tools"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
value: "finance",
|
|
66
|
+
label: "Finance"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
value: "hr",
|
|
70
|
+
label: "HR & People"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
value: "marketing",
|
|
74
|
+
label: "Marketing"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
value: "project-management",
|
|
78
|
+
label: "Project Management"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
value: "security",
|
|
82
|
+
label: "Security"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
value: "support",
|
|
86
|
+
label: "Support"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
value: "other",
|
|
90
|
+
label: "Other"
|
|
91
|
+
}
|
|
92
|
+
];
|
|
93
|
+
function y(e) {
|
|
94
|
+
return e.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
|
|
95
|
+
}
|
|
96
|
+
function b() {
|
|
97
|
+
try {
|
|
98
|
+
localStorage.setItem("devportal_setup_dismissed", "1");
|
|
99
|
+
} catch {}
|
|
100
|
+
}
|
|
101
|
+
var x = [
|
|
102
|
+
{
|
|
103
|
+
key: "org",
|
|
104
|
+
label: "Organization"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
key: "app",
|
|
108
|
+
label: "First app"
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
key: "done",
|
|
112
|
+
label: "Done"
|
|
113
|
+
}
|
|
114
|
+
], ie = ({ current: e }) => {
|
|
115
|
+
let t = x.findIndex((t) => t.key === e);
|
|
116
|
+
return /* @__PURE__ */ m("div", {
|
|
117
|
+
className: "flex items-center gap-0",
|
|
118
|
+
children: x.map((e, n) => {
|
|
119
|
+
let r = n < t, i = n === t;
|
|
120
|
+
return /* @__PURE__ */ h("div", {
|
|
121
|
+
className: "flex items-center",
|
|
122
|
+
children: [/* @__PURE__ */ h("div", {
|
|
123
|
+
className: "flex flex-col items-center gap-1.5",
|
|
124
|
+
children: [/* @__PURE__ */ m("div", {
|
|
125
|
+
className: ["flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold transition-colors", r ? "bg-primary text-primary-foreground" : i ? "bg-primary text-primary-foreground ring-4 ring-primary/20" : "bg-muted text-muted-foreground"].join(" "),
|
|
126
|
+
children: r ? /* @__PURE__ */ m(u, { size: 14 }) : n + 1
|
|
127
|
+
}), /* @__PURE__ */ m("span", {
|
|
128
|
+
className: ["text-xs font-medium whitespace-nowrap", i ? "text-foreground" : "text-muted-foreground"].join(" "),
|
|
129
|
+
children: e.label
|
|
130
|
+
})]
|
|
131
|
+
}), n < x.length - 1 && /* @__PURE__ */ m("div", { className: ["mx-3 mb-5 h-px w-16 flex-shrink-0 transition-colors", n < t ? "bg-primary" : "bg-border"].join(" ") })]
|
|
132
|
+
}, e.key);
|
|
133
|
+
})
|
|
134
|
+
});
|
|
135
|
+
}, S = () => {
|
|
136
|
+
let { navigate: n, basePath: u } = e(), { t: x } = s(), S = t(), w = (e, t) => {
|
|
137
|
+
let n = x(e);
|
|
138
|
+
return n === e ? t : n;
|
|
139
|
+
}, T = (e) => n?.(`${u}${e}`), [E, D] = o("org"), [O, k] = o(null), [A, ae] = o(null), [j, M] = o(""), [N, P] = o(""), [F, oe] = o(""), [I, L] = o("FREE"), [R, z] = o({}), [B, { loading: V }] = te(), H = () => {
|
|
140
|
+
let e = {};
|
|
141
|
+
return j.trim() ? j.length < 2 && (e.name = w("devportal.orgNameTooShort", "Name must be at least 2 characters")) : e.name = w("devportal.orgNameRequired", "Organization name is required"), N.trim() ? /^[a-z0-9-]+$/.test(N) || (e.slug = w("devportal.slugInvalid", "Lowercase letters, numbers, and hyphens only")) : e.slug = w("devportal.slugRequired", "Slug is required"), z(e), Object.keys(e).length === 0;
|
|
142
|
+
}, U = async () => {
|
|
143
|
+
if (H()) try {
|
|
144
|
+
let e = (await B({ variables: { input: {
|
|
145
|
+
name: j,
|
|
146
|
+
slug: N || void 0,
|
|
147
|
+
description: F || void 0,
|
|
148
|
+
metadata: I === "FREE" ? void 0 : { tier: I }
|
|
149
|
+
} } })).data?.createDeveloperOrganization?.id;
|
|
150
|
+
e && (S.emit("devportal.org.created", {
|
|
151
|
+
organizationId: e,
|
|
152
|
+
name: j
|
|
153
|
+
}), k(e), D("app"));
|
|
154
|
+
} catch {}
|
|
155
|
+
}, [W, G] = o(""), [K, se] = o(""), [q, ce] = o(""), [J, le] = o(""), [Y, ue] = o(""), [X, Z] = o({}), [de, { loading: Q }] = ee(), fe = () => {
|
|
156
|
+
let e = {};
|
|
157
|
+
return W.trim() ? W.length < 3 && (e.name = w("devportal.nameTooShort", "Name must be at least 3 characters")) : e.name = w("devportal.appNameRequired", "Application name is required"), q || (e.appType = w("devportal.appTypeRequired", "Application type is required")), J || (e.category = w("devportal.categoryRequired", "Category is required")), Y.trim() || (e.shortDescription = w("devportal.shortDescriptionRequired", "Short description is required")), Z(e), Object.keys(e).length === 0;
|
|
158
|
+
}, pe = async () => {
|
|
159
|
+
if (fe()) try {
|
|
160
|
+
let e = (await de({ variables: { input: {
|
|
161
|
+
name: W,
|
|
162
|
+
slug: K || void 0,
|
|
163
|
+
appType: q,
|
|
164
|
+
category: J || void 0,
|
|
165
|
+
shortDescription: Y || void 0,
|
|
166
|
+
visibility: "PRIVATE",
|
|
167
|
+
developerOrganizationId: O || void 0
|
|
168
|
+
} } })).data?.createApplication?.id;
|
|
169
|
+
e && (S.emit("devportal.app.created", {
|
|
170
|
+
appId: e,
|
|
171
|
+
name: W,
|
|
172
|
+
appType: q,
|
|
173
|
+
organizationId: O
|
|
174
|
+
}), ae(e), b(), D("done"));
|
|
175
|
+
} catch {}
|
|
176
|
+
}, $ = () => {
|
|
177
|
+
b(), T("/");
|
|
178
|
+
};
|
|
179
|
+
return /* @__PURE__ */ h("main", {
|
|
180
|
+
className: "min-h-screen bg-surface-default",
|
|
181
|
+
children: [/* @__PURE__ */ m("div", {
|
|
182
|
+
className: "border-b border-border-default bg-surface-raised",
|
|
183
|
+
children: /* @__PURE__ */ m("div", {
|
|
184
|
+
className: "mx-auto max-w-2xl px-6 py-5",
|
|
185
|
+
children: /* @__PURE__ */ h("div", {
|
|
186
|
+
className: "flex items-center justify-between",
|
|
187
|
+
children: [/* @__PURE__ */ h("div", {
|
|
188
|
+
className: "flex items-center gap-3",
|
|
189
|
+
children: [/* @__PURE__ */ m("div", {
|
|
190
|
+
className: "flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary",
|
|
191
|
+
children: /* @__PURE__ */ m(p, { size: 20 })
|
|
192
|
+
}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("p", {
|
|
193
|
+
className: "text-xs font-medium text-muted-foreground",
|
|
194
|
+
children: w("devportal.developerPortal", "Developer Portal")
|
|
195
|
+
}), /* @__PURE__ */ m("h1", {
|
|
196
|
+
className: "text-base font-semibold text-foreground",
|
|
197
|
+
children: w("devportal.setup.title", "Get set up")
|
|
198
|
+
})] })]
|
|
199
|
+
}), E !== "done" && /* @__PURE__ */ m("button", {
|
|
200
|
+
type: "button",
|
|
201
|
+
onClick: $,
|
|
202
|
+
className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
|
|
203
|
+
children: w("devportal.setup.skipForNow", "Skip for now")
|
|
204
|
+
})]
|
|
205
|
+
})
|
|
206
|
+
})
|
|
207
|
+
}), /* @__PURE__ */ h("div", {
|
|
208
|
+
className: "mx-auto max-w-2xl px-6 py-10",
|
|
209
|
+
children: [
|
|
210
|
+
/* @__PURE__ */ m("div", {
|
|
211
|
+
className: "mb-10 flex justify-center",
|
|
212
|
+
children: /* @__PURE__ */ m(ie, { current: E })
|
|
213
|
+
}),
|
|
214
|
+
E === "org" && /* @__PURE__ */ h("div", {
|
|
215
|
+
className: "rounded-xl border border-border-default bg-surface-raised p-8 shadow-sm",
|
|
216
|
+
children: [
|
|
217
|
+
/* @__PURE__ */ h("div", {
|
|
218
|
+
className: "mb-6 flex items-center gap-3",
|
|
219
|
+
children: [/* @__PURE__ */ m("div", {
|
|
220
|
+
className: "flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary",
|
|
221
|
+
children: /* @__PURE__ */ m(l, { size: 20 })
|
|
222
|
+
}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h2", {
|
|
223
|
+
className: "text-lg font-semibold text-foreground",
|
|
224
|
+
children: w("devportal.setup.orgTitle", "Set up your organization")
|
|
225
|
+
}), /* @__PURE__ */ m("p", {
|
|
226
|
+
className: "text-sm text-muted-foreground",
|
|
227
|
+
children: w("devportal.setup.orgSubtitle", "This groups your apps and teams under one publisher identity.")
|
|
228
|
+
})] })]
|
|
229
|
+
}),
|
|
230
|
+
/* @__PURE__ */ h("div", {
|
|
231
|
+
className: "space-y-5",
|
|
232
|
+
children: [
|
|
233
|
+
/* @__PURE__ */ m(r, {
|
|
234
|
+
label: w("devportal.organizationName", "Organization Name"),
|
|
235
|
+
value: j,
|
|
236
|
+
onChange: (e) => {
|
|
237
|
+
M(e.target.value), (!N || N === y(j)) && P(y(e.target.value)), z((e) => ({
|
|
238
|
+
...e,
|
|
239
|
+
name: void 0
|
|
240
|
+
}));
|
|
241
|
+
},
|
|
242
|
+
placeholder: w("devportal.organizationNamePlaceholder", "Acme Development"),
|
|
243
|
+
required: !0,
|
|
244
|
+
error: R.name
|
|
245
|
+
}),
|
|
246
|
+
/* @__PURE__ */ m(r, {
|
|
247
|
+
label: w("devportal.slug", "Slug"),
|
|
248
|
+
value: N,
|
|
249
|
+
onChange: (e) => {
|
|
250
|
+
P(e.target.value.toLowerCase()), z((e) => ({
|
|
251
|
+
...e,
|
|
252
|
+
slug: void 0
|
|
253
|
+
}));
|
|
254
|
+
},
|
|
255
|
+
placeholder: "acme-dev",
|
|
256
|
+
required: !0,
|
|
257
|
+
error: R.slug,
|
|
258
|
+
hint: w("devportal.slugHint", "URL-friendly identifier — auto-generated from name")
|
|
259
|
+
}),
|
|
260
|
+
/* @__PURE__ */ m(a, {
|
|
261
|
+
label: w("devportal.description", "Description"),
|
|
262
|
+
value: F,
|
|
263
|
+
onChange: (e) => oe(e.target.value),
|
|
264
|
+
placeholder: w("devportal.orgDescriptionPlaceholder", "Tell us about your organization…"),
|
|
265
|
+
rows: 2
|
|
266
|
+
}),
|
|
267
|
+
/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("p", {
|
|
268
|
+
className: "mb-2 text-sm font-medium text-foreground",
|
|
269
|
+
children: w("devportal.selectPlan", "Select Plan")
|
|
270
|
+
}), /* @__PURE__ */ m("div", {
|
|
271
|
+
className: "grid grid-cols-3 gap-3",
|
|
272
|
+
children: g.map((e) => /* @__PURE__ */ h("button", {
|
|
273
|
+
type: "button",
|
|
274
|
+
onClick: () => L(e.value),
|
|
275
|
+
className: ["rounded-lg border p-3 text-left text-sm transition-colors", I === e.value ? "border-primary bg-primary/5 ring-2 ring-primary" : "border-border-default hover:border-muted-foreground/50"].join(" "),
|
|
276
|
+
children: [
|
|
277
|
+
/* @__PURE__ */ m("p", {
|
|
278
|
+
className: "font-semibold text-foreground",
|
|
279
|
+
children: e.label
|
|
280
|
+
}),
|
|
281
|
+
/* @__PURE__ */ m("p", {
|
|
282
|
+
className: "mt-0.5 text-xs text-primary",
|
|
283
|
+
children: e.price
|
|
284
|
+
}),
|
|
285
|
+
/* @__PURE__ */ m("p", {
|
|
286
|
+
className: "mt-1.5 text-xs text-muted-foreground",
|
|
287
|
+
children: e.apps
|
|
288
|
+
}),
|
|
289
|
+
/* @__PURE__ */ m("p", {
|
|
290
|
+
className: "text-xs text-muted-foreground",
|
|
291
|
+
children: e.calls
|
|
292
|
+
})
|
|
293
|
+
]
|
|
294
|
+
}, e.value))
|
|
295
|
+
})] })
|
|
296
|
+
]
|
|
297
|
+
}),
|
|
298
|
+
/* @__PURE__ */ h("div", {
|
|
299
|
+
className: "mt-8 flex items-center justify-between border-t border-border-default pt-6",
|
|
300
|
+
children: [/* @__PURE__ */ m("button", {
|
|
301
|
+
type: "button",
|
|
302
|
+
onClick: $,
|
|
303
|
+
className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
|
|
304
|
+
children: w("devportal.setup.skipForNow", "Skip for now")
|
|
305
|
+
}), /* @__PURE__ */ h("button", {
|
|
306
|
+
type: "button",
|
|
307
|
+
onClick: () => void U(),
|
|
308
|
+
disabled: V,
|
|
309
|
+
className: "inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground hover:bg-primary/90 disabled:opacity-60 transition-colors",
|
|
310
|
+
children: [
|
|
311
|
+
V ? /* @__PURE__ */ m("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : null,
|
|
312
|
+
w("devportal.setup.createAndContinue", "Create & Continue"),
|
|
313
|
+
!V && /* @__PURE__ */ m(d, { size: 16 })
|
|
314
|
+
]
|
|
315
|
+
})]
|
|
316
|
+
})
|
|
317
|
+
]
|
|
318
|
+
}),
|
|
319
|
+
E === "app" && /* @__PURE__ */ h("div", {
|
|
320
|
+
className: "rounded-xl border border-border-default bg-surface-raised p-8 shadow-sm",
|
|
321
|
+
children: [
|
|
322
|
+
/* @__PURE__ */ h("div", {
|
|
323
|
+
className: "mb-6 flex items-center gap-3",
|
|
324
|
+
children: [/* @__PURE__ */ m("div", {
|
|
325
|
+
className: "flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary",
|
|
326
|
+
children: /* @__PURE__ */ m(c, { size: 20 })
|
|
327
|
+
}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h2", {
|
|
328
|
+
className: "text-lg font-semibold text-foreground",
|
|
329
|
+
children: w("devportal.setup.appTitle", "Create your first app")
|
|
330
|
+
}), /* @__PURE__ */ m("p", {
|
|
331
|
+
className: "text-sm text-muted-foreground",
|
|
332
|
+
children: w("devportal.setup.appSubtitle", "Register the app you want to publish or integrate.")
|
|
333
|
+
})] })]
|
|
334
|
+
}),
|
|
335
|
+
/* @__PURE__ */ h("div", {
|
|
336
|
+
className: "space-y-5",
|
|
337
|
+
children: [
|
|
338
|
+
/* @__PURE__ */ m(r, {
|
|
339
|
+
label: w("devportal.applicationName", "Application Name"),
|
|
340
|
+
value: W,
|
|
341
|
+
onChange: (e) => {
|
|
342
|
+
G(e.target.value), (!K || K === y(W)) && se(y(e.target.value)), Z((e) => ({
|
|
343
|
+
...e,
|
|
344
|
+
name: void 0
|
|
345
|
+
}));
|
|
346
|
+
},
|
|
347
|
+
placeholder: w("devportal.applicationNamePlaceholder", "My Awesome App"),
|
|
348
|
+
required: !0,
|
|
349
|
+
error: X.name
|
|
350
|
+
}),
|
|
351
|
+
/* @__PURE__ */ h("div", {
|
|
352
|
+
className: "grid grid-cols-2 gap-4",
|
|
353
|
+
children: [/* @__PURE__ */ m(i, {
|
|
354
|
+
label: w("devportal.applicationType", "Application Type"),
|
|
355
|
+
value: q,
|
|
356
|
+
onChange: (e) => {
|
|
357
|
+
ce(e.target.value), Z((e) => ({
|
|
358
|
+
...e,
|
|
359
|
+
appType: void 0
|
|
360
|
+
}));
|
|
361
|
+
},
|
|
362
|
+
options: _,
|
|
363
|
+
required: !0,
|
|
364
|
+
error: X.appType
|
|
365
|
+
}), /* @__PURE__ */ m(i, {
|
|
366
|
+
label: w("devportal.category", "Category"),
|
|
367
|
+
value: J,
|
|
368
|
+
onChange: (e) => {
|
|
369
|
+
le(e.target.value), Z((e) => ({
|
|
370
|
+
...e,
|
|
371
|
+
category: void 0
|
|
372
|
+
}));
|
|
373
|
+
},
|
|
374
|
+
options: v,
|
|
375
|
+
required: !0,
|
|
376
|
+
error: X.category
|
|
377
|
+
})]
|
|
378
|
+
}),
|
|
379
|
+
/* @__PURE__ */ m(a, {
|
|
380
|
+
label: w("devportal.shortDescription", "Short Description"),
|
|
381
|
+
value: Y,
|
|
382
|
+
onChange: (e) => {
|
|
383
|
+
ue(e.target.value), Z((e) => ({
|
|
384
|
+
...e,
|
|
385
|
+
shortDescription: void 0
|
|
386
|
+
}));
|
|
387
|
+
},
|
|
388
|
+
placeholder: w("devportal.shortDescriptionPlaceholder", "A brief description of what your app does"),
|
|
389
|
+
required: !0,
|
|
390
|
+
error: X.shortDescription,
|
|
391
|
+
rows: 2,
|
|
392
|
+
hint: `${Y.length}/200`
|
|
393
|
+
})
|
|
394
|
+
]
|
|
395
|
+
}),
|
|
396
|
+
/* @__PURE__ */ h("div", {
|
|
397
|
+
className: "mt-8 flex items-center justify-between border-t border-border-default pt-6",
|
|
398
|
+
children: [/* @__PURE__ */ m("button", {
|
|
399
|
+
type: "button",
|
|
400
|
+
onClick: $,
|
|
401
|
+
className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
|
|
402
|
+
children: w("devportal.setup.skipForNow", "Skip for now")
|
|
403
|
+
}), /* @__PURE__ */ h("button", {
|
|
404
|
+
type: "button",
|
|
405
|
+
onClick: () => void pe(),
|
|
406
|
+
disabled: Q,
|
|
407
|
+
className: "inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground hover:bg-primary/90 disabled:opacity-60 transition-colors",
|
|
408
|
+
children: [
|
|
409
|
+
Q ? /* @__PURE__ */ m("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : null,
|
|
410
|
+
w("devportal.setup.createApp", "Create App"),
|
|
411
|
+
!Q && /* @__PURE__ */ m(d, { size: 16 })
|
|
412
|
+
]
|
|
413
|
+
})]
|
|
414
|
+
})
|
|
415
|
+
]
|
|
416
|
+
}),
|
|
417
|
+
E === "done" && /* @__PURE__ */ h("div", {
|
|
418
|
+
className: "text-center",
|
|
419
|
+
children: [
|
|
420
|
+
/* @__PURE__ */ m("div", {
|
|
421
|
+
className: "mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-primary",
|
|
422
|
+
children: /* @__PURE__ */ m(p, { size: 32 })
|
|
423
|
+
}),
|
|
424
|
+
/* @__PURE__ */ m("h2", {
|
|
425
|
+
className: "text-2xl font-bold text-foreground",
|
|
426
|
+
children: w("devportal.setup.doneTitle", "You're all set!")
|
|
427
|
+
}),
|
|
428
|
+
/* @__PURE__ */ m("p", {
|
|
429
|
+
className: "mt-2 text-muted-foreground",
|
|
430
|
+
children: w("devportal.setup.doneSubtitle", "Your organization and first app are ready. Here's what to do next.")
|
|
431
|
+
}),
|
|
432
|
+
/* @__PURE__ */ h("div", {
|
|
433
|
+
className: "mt-8 grid gap-3 sm:grid-cols-2",
|
|
434
|
+
children: [
|
|
435
|
+
A && /* @__PURE__ */ m(C, {
|
|
436
|
+
icon: /* @__PURE__ */ m(c, { size: 20 }),
|
|
437
|
+
title: w("devportal.setup.viewApp", "View your app"),
|
|
438
|
+
description: w("devportal.setup.viewAppDesc", "Configure OAuth, webhooks, and versioning"),
|
|
439
|
+
onClick: () => T(`/apps/${A}`),
|
|
440
|
+
primary: !0
|
|
441
|
+
}),
|
|
442
|
+
/* @__PURE__ */ m(C, {
|
|
443
|
+
icon: /* @__PURE__ */ m(f, { size: 20 }),
|
|
444
|
+
title: w("devportal.setup.generateApiKey", "Generate API key"),
|
|
445
|
+
description: w("devportal.setup.generateApiKeyDesc", "Create credentials to start calling APIs"),
|
|
446
|
+
onClick: () => T("/api-keys/new")
|
|
447
|
+
}),
|
|
448
|
+
/* @__PURE__ */ m(C, {
|
|
449
|
+
icon: /* @__PURE__ */ m(re, { size: 20 }),
|
|
450
|
+
title: w("devportal.setup.browseDocs", "Browse docs"),
|
|
451
|
+
description: w("devportal.setup.browseDocsDesc", "Learn about publishing, SDKs, and webhooks"),
|
|
452
|
+
onClick: () => T("/docs")
|
|
453
|
+
}),
|
|
454
|
+
O && /* @__PURE__ */ m(C, {
|
|
455
|
+
icon: /* @__PURE__ */ m(l, { size: 20 }),
|
|
456
|
+
title: w("devportal.setup.inviteTeam", "Invite your team"),
|
|
457
|
+
description: w("devportal.setup.inviteTeamDesc", "Add members to collaborate on your apps"),
|
|
458
|
+
onClick: () => T(`/organizations/${O}/members`)
|
|
459
|
+
})
|
|
460
|
+
]
|
|
461
|
+
}),
|
|
462
|
+
/* @__PURE__ */ h("button", {
|
|
463
|
+
type: "button",
|
|
464
|
+
onClick: () => T("/"),
|
|
465
|
+
className: "mt-8 inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors",
|
|
466
|
+
children: [w("devportal.setup.goToDashboard", "Go to dashboard"), /* @__PURE__ */ m(ne, { size: 14 })]
|
|
467
|
+
})
|
|
468
|
+
]
|
|
469
|
+
})
|
|
470
|
+
]
|
|
471
|
+
})]
|
|
472
|
+
});
|
|
473
|
+
}, C = ({ icon: e, title: t, description: n, onClick: r, primary: i }) => /* @__PURE__ */ h("button", {
|
|
474
|
+
type: "button",
|
|
475
|
+
onClick: r,
|
|
476
|
+
className: ["flex items-start gap-4 rounded-xl border p-5 text-left transition-colors", i ? "border-primary bg-primary/5 hover:bg-primary/10" : "border-border-default bg-surface-raised hover:bg-surface-hover"].join(" "),
|
|
477
|
+
children: [
|
|
478
|
+
/* @__PURE__ */ m("div", {
|
|
479
|
+
className: ["flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg", i ? "bg-primary/20 text-primary" : "bg-muted text-muted-foreground"].join(" "),
|
|
480
|
+
children: e
|
|
481
|
+
}),
|
|
482
|
+
/* @__PURE__ */ h("div", {
|
|
483
|
+
className: "min-w-0 flex-1",
|
|
484
|
+
children: [/* @__PURE__ */ m("p", {
|
|
485
|
+
className: "font-semibold text-foreground",
|
|
486
|
+
children: t
|
|
487
|
+
}), /* @__PURE__ */ m("p", {
|
|
488
|
+
className: "mt-0.5 text-sm text-muted-foreground",
|
|
489
|
+
children: n
|
|
490
|
+
})]
|
|
491
|
+
}),
|
|
492
|
+
/* @__PURE__ */ m(d, {
|
|
493
|
+
size: 16,
|
|
494
|
+
className: "mt-0.5 flex-shrink-0 text-muted-foreground"
|
|
495
|
+
})
|
|
496
|
+
]
|
|
497
|
+
});
|
|
498
|
+
//#endregion
|
|
499
|
+
export { S as SetupPage };
|
|
500
|
+
|
|
501
|
+
//# sourceMappingURL=SetupPage.js.map
|