@burdenoff/microfe-devportal 2026.528.1 → 2026.530.1

package/dist/devportal/pages/CreateApplicationPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreateApplicationPage.js","names":[],"sources":["../../../src/devportal/pages/CreateApplicationPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useState } from \"react\";\nimport { Save, X, Info } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport {\n  InputField,\n  TextareaField,\n  SelectField,\n  TagInput,\n  CheckboxField,\n} from \"../components/FormField\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport { useDevportalEventBus } from \"../events\";\nimport type { AppType, AppVisibility } from \"../types\";\nimport { APP_TYPE_LABELS } from \"../utils/constants\";\nimport {\n  useCreateApplicationMutation,\n  useGetMyOrganizationsQuery,\n} from \"../../generated/global-operations\";\nimport { useCurrentUserAppsQuery } from \"../hooks\";\n\ninterface CreateApplicationFormData {\n  name: string;\n  slug: string;\n  shortDescription: string;\n  description: string;\n  appType: AppType | \"\";\n  visibility: AppVisibility;\n  category: string;\n  tags: string[];\n  keywords: string[];\n  websiteUrl: string;\n  documentationUrl: string;\n  supportUrl: string;\n  privacyPolicyUrl: string;\n  termsOfServiceUrl: string;\n  githubUrl: string;\n  developerOrganizationId: string;\n  appId: string;\n  requiresApproval: boolean;\n}\n\ninterface FormErrors {\n  name?: string;\n  slug?: string;\n  shortDescription?: string;\n  appType?: string;\n  category?: string;\n}\n\nconst APP_TYPE_OPTIONS = Object.entries(APP_TYPE_LABELS).map(\n  ([value, label]) => ({\n    value,\n    label,\n  }),\n);\n\nconst VISIBILITY_OPTIONS = [\n  { value: \"PUBLIC\", label: \"Public - Visible to everyone\" },\n  { value: \"PRIVATE\", label: \"Private - Only visible to you\" },\n  { value: \"UNLISTED\", label: \"Unlisted - Accessible via direct link\" },\n  { value: \"INTERNAL\", label: \"Internal - Only visible within organization\" },\n];\n\nconst CATEGORY_OPTIONS = [\n  { value: \"productivity\", label: \"Productivity\" },\n  { value: \"communication\", label: \"Communication\" },\n  { value: \"analytics\", label: \"Analytics\" },\n  { value: \"automation\", label: \"Automation\" },\n  { value: \"developer-tools\", label: \"Developer Tools\" },\n  { value: \"finance\", label: \"Finance\" },\n  { value: \"hr\", label: \"HR & People\" },\n  { value: \"marketing\", label: \"Marketing\" },\n  { value: \"project-management\", label: \"Project Management\" },\n  { value: \"security\", label: \"Security\" },\n  { value: \"support\", label: \"Support\" },\n  { value: \"other\", label: \"Other\" },\n];\n\n/**\n * Create new application page\n */\nexport const CreateApplicationPage: 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  const [errors, setErrors] = useState<FormErrors>({});\n  const [createApplication, { loading: isSubmitting }] =\n    useCreateApplicationMutation();\n  const bus = useDevportalEventBus();\n\n  // Fetch real organizations\n  const { data: orgsData } = useGetMyOrganizationsQuery({\n    fetchPolicy: \"cache-and-network\",\n  });\n  const { data: authAppsData, loading: authAppsLoading } =\n    useCurrentUserAppsQuery({\n      fetchPolicy: \"cache-and-network\",\n    });\n\n  const organizationOptions = [\n    { value: \"\", label: \"Personal Account\" },\n    ...(orgsData?.myDeveloperOrganizations ?? []).map(\n      (org: { id: string; name: string }) => ({\n        value: org.id,\n        label: org.name,\n      }),\n    ),\n  ];\n\n  const authAppOptions = [\n    { value: \"\", label: tr(\"devportal.noLinkedAuthApp\", \"Link later\") },\n    ...((authAppsData?.currentUserApps ?? []).map(\n      (authApp: {\n        id: string;\n        name: string;\n        type: string;\n        clientId: string;\n      }) => ({\n        value: authApp.id,\n        label: `${authApp.name} · ${authApp.type} · ${authApp.clientId}`,\n      }),\n    ) ?? []),\n  ];\n\n  const [formData, setFormData] = useState<CreateApplicationFormData>({\n    name: \"\",\n    slug: \"\",\n    shortDescription: \"\",\n    description: \"\",\n    appType: \"\",\n    visibility: \"PRIVATE\",\n    category: \"\",\n    tags: [],\n    keywords: [],\n    websiteUrl: \"\",\n    documentationUrl: \"\",\n    supportUrl: \"\",\n    privacyPolicyUrl: \"\",\n    termsOfServiceUrl: \"\",\n    githubUrl: \"\",\n    developerOrganizationId: \"\",\n    appId: \"\",\n    requiresApproval: false,\n  });\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  const generateSlug = (name: string): string => {\n    return name\n      .toLowerCase()\n      .replace(/[^a-z0-9]+/g, \"-\")\n      .replace(/^-|-$/g, \"\");\n  };\n\n  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const name = e.target.value;\n    setFormData((prev) => ({\n      ...prev,\n      name,\n      slug: prev.slug || generateSlug(name),\n    }));\n    if (errors.name) {\n      setErrors((prev) => ({ ...prev, name: undefined }));\n    }\n  };\n\n  const handleChange = (\n    field: keyof CreateApplicationFormData,\n    value: string | string[] | boolean,\n  ) => {\n    setFormData((prev) => ({ ...prev, [field]: value }));\n    if (errors[field as keyof FormErrors]) {\n      setErrors((prev) => ({ ...prev, [field]: undefined }));\n    }\n  };\n\n  const validateForm = (): boolean => {\n    const newErrors: FormErrors = {};\n\n    if (!formData.name.trim()) {\n      newErrors.name = tr(\n        \"devportal.appNameRequired\",\n        \"Application name is required\",\n      );\n    } else if (formData.name.length < 3) {\n      newErrors.name = tr(\n        \"devportal.nameTooShort\",\n        \"Name must be at least 3 characters\",\n      );\n    } else if (formData.name.length > 100) {\n      newErrors.name = tr(\n        \"devportal.nameTooLong\",\n        \"Name must be less than 100 characters\",\n      );\n    }\n\n    if (!formData.slug.trim()) {\n      newErrors.slug = tr(\"devportal.slugRequired\", \"Slug is required\");\n    } else if (!/^[a-z0-9-]+$/.test(formData.slug)) {\n      newErrors.slug = tr(\n        \"devportal.slugInvalid\",\n        \"Slug can only contain lowercase letters, numbers, and hyphens\",\n      );\n    }\n\n    if (!formData.shortDescription.trim()) {\n      newErrors.shortDescription = tr(\n        \"devportal.shortDescriptionRequired\",\n        \"Short description is required\",\n      );\n    } else if (formData.shortDescription.length > 200) {\n      newErrors.shortDescription = tr(\n        \"devportal.shortDescriptionTooLong\",\n        \"Short description must be less than 200 characters\",\n      );\n    }\n\n    if (!formData.appType) {\n      newErrors.appType = tr(\n        \"devportal.appTypeRequired\",\n        \"Application type is required\",\n      );\n    }\n\n    if (!formData.category) {\n      newErrors.category = tr(\n        \"devportal.categoryRequired\",\n        \"Category is required\",\n      );\n    }\n\n    setErrors(newErrors);\n    return Object.keys(newErrors).length === 0;\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    if (!validateForm()) {\n      return;\n    }\n\n    try {\n      const result = await createApplication({\n        variables: {\n          input: {\n            name: formData.name,\n            slug: formData.slug || undefined,\n            shortDescription: formData.shortDescription || undefined,\n            description: formData.description || undefined,\n            appType: formData.appType as AppType,\n            visibility: formData.visibility || undefined,\n            category: formData.category || undefined,\n            tags: formData.tags.length > 0 ? formData.tags : undefined,\n            keywords:\n              formData.keywords.length > 0 ? formData.keywords : undefined,\n            websiteUrl: formData.websiteUrl || undefined,\n            documentationUrl: formData.documentationUrl || undefined,\n            supportUrl: formData.supportUrl || undefined,\n            privacyPolicyUrl: formData.privacyPolicyUrl || undefined,\n            termsOfServiceUrl: formData.termsOfServiceUrl || undefined,\n            developerOrganizationId:\n              formData.developerOrganizationId || undefined,\n            appId: formData.appId || undefined,\n            githubUrl: formData.githubUrl || undefined,\n            requiresApproval: formData.requiresApproval,\n            iconUrl: undefined,\n          },\n        },\n      });\n\n      if (result.data?.createApplication?.id) {\n        bus.emit(\"devportal.app.created\", {\n          appId: result.data.createApplication.id,\n          name: formData.name,\n          appType: formData.appType,\n          organizationId: formData.developerOrganizationId || null,\n        });\n        handleNavigate(`/apps/${result.data.createApplication.id}`);\n      }\n    } catch (error) {\n      console.error(\"Failed to create application:\", error);\n    }\n  };\n\n  const handleCancel = () => {\n    handleNavigate(\"/apps\");\n  };\n\n  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_CREATE}>\n      <PageLayout\n        title={tr(\"devportal.createApplication\", \"Create Application\")}\n        description={tr(\n          \"devportal.createApplicationDescription\",\n          \"Register a new application in the developer portal\",\n        )}\n        backLink={`${basePath}/apps`}\n        backLabel={tr(\"devportal.backToApplications\", \"Back to Applications\")}\n      >\n        <form onSubmit={handleSubmit} className=\"space-y-8 max-w-3xl\">\n          {/* Basic Information */}\n          <PageSection\n            title={tr(\"devportal.basicInformation\", \"Basic Information\")}\n            description={tr(\n              \"devportal.basicInformationDescription\",\n              \"Core details about your application\",\n            )}\n          >\n            <div className=\"space-y-4\">\n              <InputField\n                label={tr(\"devportal.applicationName\", \"Application Name\")}\n                value={formData.name}\n                onChange={handleNameChange}\n                placeholder={tr(\n                  \"devportal.applicationNamePlaceholder\",\n                  \"My Awesome App\",\n                )}\n                required\n                error={errors.name}\n                hint={tr(\n                  \"devportal.applicationNameHint\",\n                  \"Choose a memorable name for your application\",\n                )}\n              />\n\n              <InputField\n                label={tr(\"devportal.slug\", \"Slug\")}\n                value={formData.slug}\n                onChange={(e) =>\n                  handleChange(\"slug\", e.target.value.toLowerCase())\n                }\n                placeholder={tr(\"devportal.slugPlaceholder\", \"my-awesome-app\")}\n                required\n                error={errors.slug}\n                hint={tr(\n                  \"devportal.slugHint\",\n                  \"URL-friendly identifier (auto-generated from name)\",\n                )}\n              />\n\n              <TextareaField\n                label={tr(\"devportal.shortDescription\", \"Short Description\")}\n                value={formData.shortDescription}\n                onChange={(e) =>\n                  handleChange(\"shortDescription\", e.target.value)\n                }\n                placeholder={tr(\n                  \"devportal.shortDescriptionPlaceholder\",\n                  \"A brief description of what your app does\",\n                )}\n                required\n                error={errors.shortDescription}\n                hint={`${formData.shortDescription.length}/200 ${tr(\"devportal.characters\", \"characters\")}`}\n                rows={2}\n              />\n\n              <TextareaField\n                label={tr(\"devportal.fullDescription\", \"Full Description\")}\n                value={formData.description}\n                onChange={(e) => handleChange(\"description\", e.target.value)}\n                placeholder={tr(\n                  \"devportal.fullDescriptionPlaceholder\",\n                  \"Detailed description of your application, features, and use cases...\",\n                )}\n                rows={6}\n                hint={tr(\n                  \"devportal.markdownSupported\",\n                  \"Markdown formatting is supported\",\n                )}\n              />\n            </div>\n          </PageSection>\n\n          {/* Classification */}\n          <PageSection\n            title={tr(\"devportal.classification\", \"Classification\")}\n            description={tr(\n              \"devportal.classificationDescription\",\n              \"Categorize your application\",\n            )}\n          >\n            <div className=\"grid gap-4 sm:grid-cols-2\">\n              <SelectField\n                label={tr(\"devportal.applicationType\", \"Application Type\")}\n                value={formData.appType}\n                onChange={(e) => handleChange(\"appType\", e.target.value)}\n                options={APP_TYPE_OPTIONS}\n                required\n                error={errors.appType}\n                placeholder={tr(\"devportal.selectAppType\", \"Select app type\")}\n              />\n\n              <SelectField\n                label={tr(\"devportal.category\", \"Category\")}\n                value={formData.category}\n                onChange={(e) => handleChange(\"category\", e.target.value)}\n                options={CATEGORY_OPTIONS}\n                required\n                error={errors.category}\n                placeholder={tr(\"devportal.selectCategory\", \"Select category\")}\n              />\n\n              <SelectField\n                label={tr(\"devportal.visibility\", \"Visibility\")}\n                value={formData.visibility}\n                onChange={(e) =>\n                  handleChange(\"visibility\", e.target.value as AppVisibility)\n                }\n                options={VISIBILITY_OPTIONS}\n              />\n\n              <SelectField\n                label={tr(\n                  \"devportal.developerOrganization\",\n                  \"Developer Organization\",\n                )}\n                value={formData.developerOrganizationId}\n                onChange={(e) =>\n                  handleChange(\"developerOrganizationId\", e.target.value)\n                }\n                options={organizationOptions}\n                hint={tr(\n                  \"devportal.developerOrganizationHint\",\n                  \"Optional: Associate with an organization\",\n                )}\n              />\n            </div>\n\n            <TagInput\n              label={tr(\"devportal.tags\", \"Tags\")}\n              value={formData.tags}\n              onChange={(tags) => handleChange(\"tags\", tags)}\n              placeholder={tr(\n                \"devportal.addTagsPlaceholder\",\n                \"Add tags (press Enter)\",\n              )}\n              hint={tr(\"devportal.tagsHint\", \"Help users discover your app\")}\n            />\n\n            <TagInput\n              label={tr(\"devportal.keywords\", \"Keywords\")}\n              value={formData.keywords}\n              onChange={(keywords) => handleChange(\"keywords\", keywords)}\n              placeholder={tr(\n                \"devportal.addKeywordsPlaceholder\",\n                \"Add keywords (press Enter)\",\n              )}\n              hint={tr(\"devportal.keywordsHint\", \"Improve search visibility\")}\n            />\n          </PageSection>\n\n          <PageSection\n            title={tr(\n              \"devportal.authenticationAndAuthorization\",\n              \"Authentication & Authorization\",\n            )}\n            description={tr(\n              \"devportal.authenticationAndAuthorizationDescription\",\n              \"Link this marketplace app to an auth app for OAuth, client credentials, API keys, delegation, and device flows.\",\n            )}\n          >\n            <div className=\"space-y-4\">\n              <SelectField\n                label={tr(\"devportal.linkedAuthApp\", \"Linked Auth App\")}\n                value={formData.appId}\n                onChange={(e) => handleChange(\"appId\", e.target.value)}\n                options={authAppOptions}\n                hint={tr(\n                  \"devportal.linkedAuthAppHint\",\n                  \"Select an existing auth app or create one first. You can still configure scopes, client credentials, app-as-user delegation, and device code in the OAuth Clients area.\",\n                )}\n                placeholder={\n                  authAppsLoading\n                    ? tr(\"devportal.loadingAuthApps\", \"Loading auth apps...\")\n                    : tr(\"devportal.selectAuthApp\", \"Select auth app\")\n                }\n              />\n\n              <button\n                type=\"button\"\n                onClick={() => handleNavigate(\"/oauth/new\")}\n                className=\"inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium hover:bg-muted transition-colors\"\n              >\n                <Save size={14} />\n                {tr(\"devportal.createAuthAppFirst\", \"Create Auth App\")}\n              </button>\n            </div>\n          </PageSection>\n\n          {/* URLs */}\n          <PageSection\n            title={tr(\"devportal.links\", \"Links\")}\n            description={tr(\n              \"devportal.linksDescription\",\n              \"External resources for your application\",\n            )}\n          >\n            <div className=\"grid gap-4 sm:grid-cols-2\">\n              <InputField\n                label={tr(\"devportal.websiteUrl\", \"Website URL\")}\n                type=\"url\"\n                value={formData.websiteUrl}\n                onChange={(e) => handleChange(\"websiteUrl\", e.target.value)}\n                placeholder=\"https://example.com\"\n              />\n\n              <InputField\n                label={tr(\"devportal.documentationUrl\", \"Documentation URL\")}\n                type=\"url\"\n                value={formData.documentationUrl}\n                onChange={(e) =>\n                  handleChange(\"documentationUrl\", e.target.value)\n                }\n                placeholder=\"https://docs.example.com\"\n              />\n\n              <InputField\n                label={tr(\"devportal.supportUrl\", \"Support URL\")}\n                type=\"url\"\n                value={formData.supportUrl}\n                onChange={(e) => handleChange(\"supportUrl\", e.target.value)}\n                placeholder=\"https://support.example.com\"\n              />\n\n              <InputField\n                label={tr(\"devportal.githubUrl\", \"GitHub URL\")}\n                type=\"url\"\n                value={formData.githubUrl}\n                onChange={(e) => handleChange(\"githubUrl\", e.target.value)}\n                placeholder=\"https://github.com/org/repo\"\n              />\n\n              <InputField\n                label={tr(\"devportal.privacyPolicyUrl\", \"Privacy Policy URL\")}\n                type=\"url\"\n                value={formData.privacyPolicyUrl}\n                onChange={(e) =>\n                  handleChange(\"privacyPolicyUrl\", e.target.value)\n                }\n                placeholder=\"https://example.com/privacy\"\n              />\n\n              <InputField\n                label={tr(\n                  \"devportal.termsOfServiceUrl\",\n                  \"Terms of Service URL\",\n                )}\n                type=\"url\"\n                value={formData.termsOfServiceUrl}\n                onChange={(e) =>\n                  handleChange(\"termsOfServiceUrl\", e.target.value)\n                }\n                placeholder=\"https://example.com/terms\"\n              />\n            </div>\n          </PageSection>\n\n          {/* Settings */}\n          <PageSection\n            title={tr(\"devportal.settings\", \"Settings\")}\n            description={tr(\n              \"devportal.settingsDescription\",\n              \"Additional configuration options\",\n            )}\n          >\n            <div className=\"space-y-4\">\n              <CheckboxField\n                label={tr(\n                  \"devportal.requireWorkspaceAdminApproval\",\n                  \"Require workspace admin approval\",\n                )}\n                description={tr(\n                  \"devportal.requireWorkspaceAdminApprovalDescription\",\n                  \"When enabled, workspace admins must approve installations before users can access this app\",\n                )}\n                checked={formData.requiresApproval}\n                onChange={(e) =>\n                  handleChange(\"requiresApproval\", e.target.checked)\n                }\n              />\n            </div>\n\n            {/* Info banner */}\n            <div className=\"rounded-lg border border-border-subtle bg-status-info-bg-subtle p-4 flex gap-3\">\n              <Info\n                size={20}\n                className=\"text-accent-blue flex-shrink-0 mt-0.5\"\n              />\n              <div className=\"text-sm text-status-info-text\">\n                <p className=\"font-medium\">\n                  {tr(\"devportal.whatHappensNext\", \"What happens next?\")}\n                </p>\n                <ul className=\"mt-1 space-y-1 text-status-info-text\">\n                  <li>\n                    {tr(\n                      \"devportal.appCreatedInDraft\",\n                      \"Your app will be created in\",\n                    )}{\" \"}\n                    <strong>{tr(\"devportal.draft\", \"Draft\")}</strong>{\" \"}\n                    {tr(\"devportal.status\", \"status\")}\n                  </li>\n                  <li>\n                    {tr(\n                      \"devportal.canConfigureOAuthAndWebhooks\",\n                      \"You can configure OAuth clients, API keys, and webhooks\",\n                    )}\n                  </li>\n                  <li>\n                    {tr(\n                      \"devportal.submitForReviewWhenReady\",\n                      \"Submit for review when ready to publish to the marketplace\",\n                    )}\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </PageSection>\n\n          {/* Actions */}\n          <div className=\"flex items-center justify-end gap-3 border-t pt-6\">\n            <button\n              type=\"button\"\n              onClick={handleCancel}\n              disabled={isSubmitting}\n              className=\"inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors disabled:opacity-50\"\n            >\n              <X size={16} />\n              {tr(\"devportal.cancel\", \"Cancel\")}\n            </button>\n            <button\n              type=\"submit\"\n              disabled={isSubmitting}\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 disabled:opacity-50\"\n            >\n              {isSubmitting ? (\n                <>\n                  <span className=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n                  {tr(\"devportal.creating\", \"Creating...\")}\n                </>\n              ) : (\n                <>\n                  <Save size={16} />\n                  {tr(\"devportal.createApplication\", \"Create Application\")}\n                </>\n              )}\n            </button>\n          </div>\n        </form>\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CreateApplicationPage.js","names":[],"sources":["../../../src/devportal/pages/CreateApplicationPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useState } from \"react\";\nimport { Save, X, Info } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport {\n  InputField,\n  TextareaField,\n  SelectField,\n  TagInput,\n  CheckboxField,\n} from \"../components/FormField\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport { useDevportalEventBus } from \"../events\";\nimport type { AppType, AppVisibility } from \"../types\";\nimport { APP_TYPE_LABELS } from \"../utils/constants\";\nimport {\n  useCreateApplicationMutation,\n  useGetMyOrganizationsQuery,\n} from \"../../generated/global-operations\";\nimport { useCurrentUserAppsQuery } from \"../hooks\";\n\ninterface CreateApplicationFormData {\n  name: string;\n  slug: string;\n  shortDescription: string;\n  description: string;\n  appType: AppType | \"\";\n  visibility: AppVisibility;\n  category: string;\n  tags: string[];\n  keywords: string[];\n  websiteUrl: string;\n  documentationUrl: string;\n  supportUrl: string;\n  privacyPolicyUrl: string;\n  termsOfServiceUrl: string;\n  githubUrl: string;\n  developerOrganizationId: string;\n  appId: string;\n  requiresApproval: boolean;\n}\n\ninterface FormErrors {\n  name?: string;\n  slug?: string;\n  shortDescription?: string;\n  appType?: string;\n  category?: string;\n}\n\nconst APP_TYPE_OPTIONS = Object.entries(APP_TYPE_LABELS).map(\n  ([value, label]) => ({\n    value,\n    label,\n  }),\n);\n\nconst VISIBILITY_OPTIONS = [\n  { value: \"PUBLIC\", label: \"Public - Visible to everyone\" },\n  { value: \"PRIVATE\", label: \"Private - Only visible to you\" },\n  { value: \"UNLISTED\", label: \"Unlisted - Accessible via direct link\" },\n  { value: \"INTERNAL\", label: \"Internal - Only visible within organization\" },\n];\n\nconst CATEGORY_OPTIONS = [\n  { value: \"productivity\", label: \"Productivity\" },\n  { value: \"communication\", label: \"Communication\" },\n  { value: \"analytics\", label: \"Analytics\" },\n  { value: \"automation\", label: \"Automation\" },\n  { value: \"developer-tools\", label: \"Developer Tools\" },\n  { value: \"finance\", label: \"Finance\" },\n  { value: \"hr\", label: \"HR & People\" },\n  { value: \"marketing\", label: \"Marketing\" },\n  { value: \"project-management\", label: \"Project Management\" },\n  { value: \"security\", label: \"Security\" },\n  { value: \"support\", label: \"Support\" },\n  { value: \"other\", label: \"Other\" },\n];\n\n/**\n * Create new application page\n */\nexport const CreateApplicationPage: 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  const [errors, setErrors] = useState<FormErrors>({});\n  const [createApplication, { loading: isSubmitting }] =\n    useCreateApplicationMutation();\n  const bus = useDevportalEventBus();\n\n  // Fetch real organizations\n  const { data: orgsData } = useGetMyOrganizationsQuery({\n    fetchPolicy: \"cache-and-network\",\n  });\n  const { data: authAppsData, loading: authAppsLoading } =\n    useCurrentUserAppsQuery({\n      fetchPolicy: \"cache-and-network\",\n    });\n\n  const organizationOptions = [\n    { value: \"\", label: \"Personal Account\" },\n    ...(orgsData?.myDeveloperOrganizations ?? []).map(\n      (org: { id: string; name: string }) => ({\n        value: org.id,\n        label: org.name,\n      }),\n    ),\n  ];\n\n  const authAppOptions = [\n    { value: \"\", label: tr(\"devportal.noLinkedAuthApp\", \"Link later\") },\n    ...((authAppsData?.currentUserApps?.apps ?? []).map(\n      (authApp: {\n        id: string;\n        name: string;\n        type: string;\n        clientId: string;\n      }) => ({\n        value: authApp.id,\n        label: `${authApp.name} · ${authApp.type} · ${authApp.clientId}`,\n      }),\n    ) ?? []),\n  ];\n\n  const [formData, setFormData] = useState<CreateApplicationFormData>({\n    name: \"\",\n    slug: \"\",\n    shortDescription: \"\",\n    description: \"\",\n    appType: \"\",\n    visibility: \"PRIVATE\",\n    category: \"\",\n    tags: [],\n    keywords: [],\n    websiteUrl: \"\",\n    documentationUrl: \"\",\n    supportUrl: \"\",\n    privacyPolicyUrl: \"\",\n    termsOfServiceUrl: \"\",\n    githubUrl: \"\",\n    developerOrganizationId: \"\",\n    appId: \"\",\n    requiresApproval: false,\n  });\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  const generateSlug = (name: string): string => {\n    return name\n      .toLowerCase()\n      .replace(/[^a-z0-9]+/g, \"-\")\n      .replace(/^-|-$/g, \"\");\n  };\n\n  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const name = e.target.value;\n    setFormData((prev) => ({\n      ...prev,\n      name,\n      slug: prev.slug || generateSlug(name),\n    }));\n    if (errors.name) {\n      setErrors((prev) => ({ ...prev, name: undefined }));\n    }\n  };\n\n  const handleChange = (\n    field: keyof CreateApplicationFormData,\n    value: string | string[] | boolean,\n  ) => {\n    setFormData((prev) => ({ ...prev, [field]: value }));\n    if (errors[field as keyof FormErrors]) {\n      setErrors((prev) => ({ ...prev, [field]: undefined }));\n    }\n  };\n\n  const validateForm = (): boolean => {\n    const newErrors: FormErrors = {};\n\n    if (!formData.name.trim()) {\n      newErrors.name = tr(\n        \"devportal.appNameRequired\",\n        \"Application name is required\",\n      );\n    } else if (formData.name.length < 3) {\n      newErrors.name = tr(\n        \"devportal.nameTooShort\",\n        \"Name must be at least 3 characters\",\n      );\n    } else if (formData.name.length > 100) {\n      newErrors.name = tr(\n        \"devportal.nameTooLong\",\n        \"Name must be less than 100 characters\",\n      );\n    }\n\n    if (!formData.slug.trim()) {\n      newErrors.slug = tr(\"devportal.slugRequired\", \"Slug is required\");\n    } else if (!/^[a-z0-9-]+$/.test(formData.slug)) {\n      newErrors.slug = tr(\n        \"devportal.slugInvalid\",\n        \"Slug can only contain lowercase letters, numbers, and hyphens\",\n      );\n    }\n\n    if (!formData.shortDescription.trim()) {\n      newErrors.shortDescription = tr(\n        \"devportal.shortDescriptionRequired\",\n        \"Short description is required\",\n      );\n    } else if (formData.shortDescription.length > 200) {\n      newErrors.shortDescription = tr(\n        \"devportal.shortDescriptionTooLong\",\n        \"Short description must be less than 200 characters\",\n      );\n    }\n\n    if (!formData.appType) {\n      newErrors.appType = tr(\n        \"devportal.appTypeRequired\",\n        \"Application type is required\",\n      );\n    }\n\n    if (!formData.category) {\n      newErrors.category = tr(\n        \"devportal.categoryRequired\",\n        \"Category is required\",\n      );\n    }\n\n    setErrors(newErrors);\n    return Object.keys(newErrors).length === 0;\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    if (!validateForm()) {\n      return;\n    }\n\n    try {\n      const result = await createApplication({\n        variables: {\n          input: {\n            name: formData.name,\n            slug: formData.slug || undefined,\n            shortDescription: formData.shortDescription || undefined,\n            description: formData.description || undefined,\n            appType: formData.appType as AppType,\n            visibility: formData.visibility || undefined,\n            category: formData.category || undefined,\n            tags: formData.tags.length > 0 ? formData.tags : undefined,\n            keywords:\n              formData.keywords.length > 0 ? formData.keywords : undefined,\n            websiteUrl: formData.websiteUrl || undefined,\n            documentationUrl: formData.documentationUrl || undefined,\n            supportUrl: formData.supportUrl || undefined,\n            privacyPolicyUrl: formData.privacyPolicyUrl || undefined,\n            termsOfServiceUrl: formData.termsOfServiceUrl || undefined,\n            developerOrganizationId:\n              formData.developerOrganizationId || undefined,\n            appId: formData.appId || undefined,\n            githubUrl: formData.githubUrl || undefined,\n            requiresApproval: formData.requiresApproval,\n            iconUrl: undefined,\n          },\n        },\n      });\n\n      if (result.data?.createApplication?.id) {\n        bus.emit(\"devportal.app.created\", {\n          appId: result.data.createApplication.id,\n          name: formData.name,\n          appType: formData.appType,\n          organizationId: formData.developerOrganizationId || null,\n        });\n        handleNavigate(`/apps/${result.data.createApplication.id}`);\n      }\n    } catch (error) {\n      console.error(\"Failed to create application:\", error);\n    }\n  };\n\n  const handleCancel = () => {\n    handleNavigate(\"/apps\");\n  };\n\n  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_CREATE}>\n      <PageLayout\n        title={tr(\"devportal.createApplication\", \"Create Application\")}\n        description={tr(\n          \"devportal.createApplicationDescription\",\n          \"Register a new application in the developer portal\",\n        )}\n        backLink={`${basePath}/apps`}\n        backLabel={tr(\"devportal.backToApplications\", \"Back to Applications\")}\n      >\n        <form onSubmit={handleSubmit} className=\"space-y-8 max-w-3xl\">\n          {/* Basic Information */}\n          <PageSection\n            title={tr(\"devportal.basicInformation\", \"Basic Information\")}\n            description={tr(\n              \"devportal.basicInformationDescription\",\n              \"Core details about your application\",\n            )}\n          >\n            <div className=\"space-y-4\">\n              <InputField\n                label={tr(\"devportal.applicationName\", \"Application Name\")}\n                value={formData.name}\n                onChange={handleNameChange}\n                placeholder={tr(\n                  \"devportal.applicationNamePlaceholder\",\n                  \"My Awesome App\",\n                )}\n                required\n                error={errors.name}\n                hint={tr(\n                  \"devportal.applicationNameHint\",\n                  \"Choose a memorable name for your application\",\n                )}\n              />\n\n              <InputField\n                label={tr(\"devportal.slug\", \"Slug\")}\n                value={formData.slug}\n                onChange={(e) =>\n                  handleChange(\"slug\", e.target.value.toLowerCase())\n                }\n                placeholder={tr(\"devportal.slugPlaceholder\", \"my-awesome-app\")}\n                required\n                error={errors.slug}\n                hint={tr(\n                  \"devportal.slugHint\",\n                  \"URL-friendly identifier (auto-generated from name)\",\n                )}\n              />\n\n              <TextareaField\n                label={tr(\"devportal.shortDescription\", \"Short Description\")}\n                value={formData.shortDescription}\n                onChange={(e) =>\n                  handleChange(\"shortDescription\", e.target.value)\n                }\n                placeholder={tr(\n                  \"devportal.shortDescriptionPlaceholder\",\n                  \"A brief description of what your app does\",\n                )}\n                required\n                error={errors.shortDescription}\n                hint={`${formData.shortDescription.length}/200 ${tr(\"devportal.characters\", \"characters\")}`}\n                rows={2}\n              />\n\n              <TextareaField\n                label={tr(\"devportal.fullDescription\", \"Full Description\")}\n                value={formData.description}\n                onChange={(e) => handleChange(\"description\", e.target.value)}\n                placeholder={tr(\n                  \"devportal.fullDescriptionPlaceholder\",\n                  \"Detailed description of your application, features, and use cases...\",\n                )}\n                rows={6}\n                hint={tr(\n                  \"devportal.markdownSupported\",\n                  \"Markdown formatting is supported\",\n                )}\n              />\n            </div>\n          </PageSection>\n\n          {/* Classification */}\n          <PageSection\n            title={tr(\"devportal.classification\", \"Classification\")}\n            description={tr(\n              \"devportal.classificationDescription\",\n              \"Categorize your application\",\n            )}\n          >\n            <div className=\"grid gap-4 sm:grid-cols-2\">\n              <SelectField\n                label={tr(\"devportal.applicationType\", \"Application Type\")}\n                value={formData.appType}\n                onChange={(e) => handleChange(\"appType\", e.target.value)}\n                options={APP_TYPE_OPTIONS}\n                required\n                error={errors.appType}\n                placeholder={tr(\"devportal.selectAppType\", \"Select app type\")}\n              />\n\n              <SelectField\n                label={tr(\"devportal.category\", \"Category\")}\n                value={formData.category}\n                onChange={(e) => handleChange(\"category\", e.target.value)}\n                options={CATEGORY_OPTIONS}\n                required\n                error={errors.category}\n                placeholder={tr(\"devportal.selectCategory\", \"Select category\")}\n              />\n\n              <SelectField\n                label={tr(\"devportal.visibility\", \"Visibility\")}\n                value={formData.visibility}\n                onChange={(e) =>\n                  handleChange(\"visibility\", e.target.value as AppVisibility)\n                }\n                options={VISIBILITY_OPTIONS}\n              />\n\n              <SelectField\n                label={tr(\n                  \"devportal.developerOrganization\",\n                  \"Developer Organization\",\n                )}\n                value={formData.developerOrganizationId}\n                onChange={(e) =>\n                  handleChange(\"developerOrganizationId\", e.target.value)\n                }\n                options={organizationOptions}\n                hint={tr(\n                  \"devportal.developerOrganizationHint\",\n                  \"Optional: Associate with an organization\",\n                )}\n              />\n            </div>\n\n            <TagInput\n              label={tr(\"devportal.tags\", \"Tags\")}\n              value={formData.tags}\n              onChange={(tags) => handleChange(\"tags\", tags)}\n              placeholder={tr(\n                \"devportal.addTagsPlaceholder\",\n                \"Add tags (press Enter)\",\n              )}\n              hint={tr(\"devportal.tagsHint\", \"Help users discover your app\")}\n            />\n\n            <TagInput\n              label={tr(\"devportal.keywords\", \"Keywords\")}\n              value={formData.keywords}\n              onChange={(keywords) => handleChange(\"keywords\", keywords)}\n              placeholder={tr(\n                \"devportal.addKeywordsPlaceholder\",\n                \"Add keywords (press Enter)\",\n              )}\n              hint={tr(\"devportal.keywordsHint\", \"Improve search visibility\")}\n            />\n          </PageSection>\n\n          <PageSection\n            title={tr(\n              \"devportal.authenticationAndAuthorization\",\n              \"Authentication & Authorization\",\n            )}\n            description={tr(\n              \"devportal.authenticationAndAuthorizationDescription\",\n              \"Link this marketplace app to an auth app for OAuth, client credentials, API keys, delegation, and device flows.\",\n            )}\n          >\n            <div className=\"space-y-4\">\n              <SelectField\n                label={tr(\"devportal.linkedAuthApp\", \"Linked Auth App\")}\n                value={formData.appId}\n                onChange={(e) => handleChange(\"appId\", e.target.value)}\n                options={authAppOptions}\n                hint={tr(\n                  \"devportal.linkedAuthAppHint\",\n                  \"Select an existing auth app or create one first. You can still configure scopes, client credentials, app-as-user delegation, and device code in the OAuth Clients area.\",\n                )}\n                placeholder={\n                  authAppsLoading\n                    ? tr(\"devportal.loadingAuthApps\", \"Loading auth apps...\")\n                    : tr(\"devportal.selectAuthApp\", \"Select auth app\")\n                }\n              />\n\n              <button\n                type=\"button\"\n                onClick={() => handleNavigate(\"/oauth/new\")}\n                className=\"inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium hover:bg-muted transition-colors\"\n              >\n                <Save size={14} />\n                {tr(\"devportal.createAuthAppFirst\", \"Create Auth App\")}\n              </button>\n            </div>\n          </PageSection>\n\n          {/* URLs */}\n          <PageSection\n            title={tr(\"devportal.links\", \"Links\")}\n            description={tr(\n              \"devportal.linksDescription\",\n              \"External resources for your application\",\n            )}\n          >\n            <div className=\"grid gap-4 sm:grid-cols-2\">\n              <InputField\n                label={tr(\"devportal.websiteUrl\", \"Website URL\")}\n                type=\"url\"\n                value={formData.websiteUrl}\n                onChange={(e) => handleChange(\"websiteUrl\", e.target.value)}\n                placeholder=\"https://example.com\"\n              />\n\n              <InputField\n                label={tr(\"devportal.documentationUrl\", \"Documentation URL\")}\n                type=\"url\"\n                value={formData.documentationUrl}\n                onChange={(e) =>\n                  handleChange(\"documentationUrl\", e.target.value)\n                }\n                placeholder=\"https://docs.example.com\"\n              />\n\n              <InputField\n                label={tr(\"devportal.supportUrl\", \"Support URL\")}\n                type=\"url\"\n                value={formData.supportUrl}\n                onChange={(e) => handleChange(\"supportUrl\", e.target.value)}\n                placeholder=\"https://support.example.com\"\n              />\n\n              <InputField\n                label={tr(\"devportal.githubUrl\", \"GitHub URL\")}\n                type=\"url\"\n                value={formData.githubUrl}\n                onChange={(e) => handleChange(\"githubUrl\", e.target.value)}\n                placeholder=\"https://github.com/org/repo\"\n              />\n\n              <InputField\n                label={tr(\"devportal.privacyPolicyUrl\", \"Privacy Policy URL\")}\n                type=\"url\"\n                value={formData.privacyPolicyUrl}\n                onChange={(e) =>\n                  handleChange(\"privacyPolicyUrl\", e.target.value)\n                }\n                placeholder=\"https://example.com/privacy\"\n              />\n\n              <InputField\n                label={tr(\n                  \"devportal.termsOfServiceUrl\",\n                  \"Terms of Service URL\",\n                )}\n                type=\"url\"\n                value={formData.termsOfServiceUrl}\n                onChange={(e) =>\n                  handleChange(\"termsOfServiceUrl\", e.target.value)\n                }\n                placeholder=\"https://example.com/terms\"\n              />\n            </div>\n          </PageSection>\n\n          {/* Settings */}\n          <PageSection\n            title={tr(\"devportal.settings\", \"Settings\")}\n            description={tr(\n              \"devportal.settingsDescription\",\n              \"Additional configuration options\",\n            )}\n          >\n            <div className=\"space-y-4\">\n              <CheckboxField\n                label={tr(\n                  \"devportal.requireWorkspaceAdminApproval\",\n                  \"Require workspace admin approval\",\n                )}\n                description={tr(\n                  \"devportal.requireWorkspaceAdminApprovalDescription\",\n                  \"When enabled, workspace admins must approve installations before users can access this app\",\n                )}\n                checked={formData.requiresApproval}\n                onChange={(e) =>\n                  handleChange(\"requiresApproval\", e.target.checked)\n                }\n              />\n            </div>\n\n            {/* Info banner */}\n            <div className=\"rounded-lg border border-border-subtle bg-status-info-bg-subtle p-4 flex gap-3\">\n              <Info\n                size={20}\n                className=\"text-accent-blue flex-shrink-0 mt-0.5\"\n              />\n              <div className=\"text-sm text-status-info-text\">\n                <p className=\"font-medium\">\n                  {tr(\"devportal.whatHappensNext\", \"What happens next?\")}\n                </p>\n                <ul className=\"mt-1 space-y-1 text-status-info-text\">\n                  <li>\n                    {tr(\n                      \"devportal.appCreatedInDraft\",\n                      \"Your app will be created in\",\n                    )}{\" \"}\n                    <strong>{tr(\"devportal.draft\", \"Draft\")}</strong>{\" \"}\n                    {tr(\"devportal.status\", \"status\")}\n                  </li>\n                  <li>\n                    {tr(\n                      \"devportal.canConfigureOAuthAndWebhooks\",\n                      \"You can configure OAuth clients, API keys, and webhooks\",\n                    )}\n                  </li>\n                  <li>\n                    {tr(\n                      \"devportal.submitForReviewWhenReady\",\n                      \"Submit for review when ready to publish to the marketplace\",\n                    )}\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </PageSection>\n\n          {/* Actions */}\n          <div className=\"flex items-center justify-end gap-3 border-t pt-6\">\n            <button\n              type=\"button\"\n              onClick={handleCancel}\n              disabled={isSubmitting}\n              className=\"inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors disabled:opacity-50\"\n            >\n              <X size={16} />\n              {tr(\"devportal.cancel\", \"Cancel\")}\n            </button>\n            <button\n              type=\"submit\"\n              disabled={isSubmitting}\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 disabled:opacity-50\"\n            >\n              {isSubmitting ? (\n                <>\n                  <span className=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n                  {tr(\"devportal.creating\", \"Creating...\")}\n                </>\n              ) : (\n                <>\n                  <Save size={16} />\n                  {tr(\"devportal.createApplication\", \"Create Application\")}\n                </>\n              )}\n            </button>\n          </div>\n        </form>\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n"],"mappings":"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"}

package/dist/devportal/pages/DashboardPage.js

@@ -34,41 +34,46 @@ var w = () => {
 			title: k("devportal.developerPortal", "Developer Portal"),
 			description: k("devportal.buildManageMonitor", "Build, manage, and monitor your applications"),
 			actions: /* @__PURE__ */ C("button", {
+				"data-tour": "devportal-dashboard-create-app-button",
 				onClick: () => F("/apps/new"),
 				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",
 				children: [/* @__PURE__ */ S(v, { size: 16 }), k("devportal.createApp", "Create App")]
 			}),
 			children: [
-				/* @__PURE__ */ S(r, { children: /* @__PURE__ */ C(a, {
-					columns: 4,
-					children: [
-						/* @__PURE__ */ S(i, {
-							title: k("devportal.totalApps", "Total Apps"),
-							value: I ? /* @__PURE__ */ S(_, { className: "h-5 w-5 animate-spin" }) : P.totalApps,
-							icon: /* @__PURE__ */ S(f, { size: 20 }),
-							trend: void 0
-						}),
-						/* @__PURE__ */ S(i, {
-							title: k("devportal.organizations", "Organizations"),
-							value: I ? /* @__PURE__ */ S(_, { className: "h-5 w-5 animate-spin" }) : P.totalOrgs,
-							icon: /* @__PURE__ */ S(m, { size: 20 })
-						}),
-						/* @__PURE__ */ S(i, {
-							title: k("devportal.apiKeys", "API Keys"),
-							value: P.totalApiKeys,
-							icon: /* @__PURE__ */ S(g, { size: 20 }),
-							description: k("devportal.activeKeys", "Active keys")
-						}),
-						/* @__PURE__ */ S(i, {
-							title: k("devportal.webhooks", "Webhooks"),
-							value: P.totalWebhooks,
-							icon: /* @__PURE__ */ S(x, { size: 20 }),
-							description: k("devportal.configured", "Configured")
-						})
-					]
-				}) }),
+				/* @__PURE__ */ S(r, {
+					"data-tour": "devportal-dashboard-stats-overview",
+					children: /* @__PURE__ */ C(a, {
+						columns: 4,
+						children: [
+							/* @__PURE__ */ S(i, {
+								title: k("devportal.totalApps", "Total Apps"),
+								value: I ? /* @__PURE__ */ S(_, { className: "h-5 w-5 animate-spin" }) : P.totalApps,
+								icon: /* @__PURE__ */ S(f, { size: 20 }),
+								trend: void 0
+							}),
+							/* @__PURE__ */ S(i, {
+								title: k("devportal.organizations", "Organizations"),
+								value: I ? /* @__PURE__ */ S(_, { className: "h-5 w-5 animate-spin" }) : P.totalOrgs,
+								icon: /* @__PURE__ */ S(m, { size: 20 })
+							}),
+							/* @__PURE__ */ S(i, {
+								title: k("devportal.apiKeys", "API Keys"),
+								value: P.totalApiKeys,
+								icon: /* @__PURE__ */ S(g, { size: 20 }),
+								description: k("devportal.activeKeys", "Active keys")
+							}),
+							/* @__PURE__ */ S(i, {
+								title: k("devportal.webhooks", "Webhooks"),
+								value: P.totalWebhooks,
+								icon: /* @__PURE__ */ S(x, { size: 20 }),
+								description: k("devportal.configured", "Configured")
+							})
+						]
+					})
+				}),
 				/* @__PURE__ */ S(r, {
 					title: k("devportal.usageOverview", "Usage Overview"),
+					"data-tour": "devportal-dashboard-usage-overview",
 					children: /* @__PURE__ */ C(a, {
 						columns: 4,
 						children: [
@@ -102,6 +107,7 @@ var w = () => {
 				/* @__PURE__ */ C("div", {
 					className: "grid gap-6 lg:grid-cols-2",
 					children: [/* @__PURE__ */ S(r, {
+						"data-tour": "devportal-dashboard-recent-apps",
 						title: k("devportal.recentApplications", "Recent Applications"),
 						actions: /* @__PURE__ */ C("button", {
 							onClick: () => F("/apps"),
@@ -133,6 +139,7 @@ var w = () => {
 						})
 					}), /* @__PURE__ */ S(r, {
 						title: k("devportal.quickActions", "Quick Actions"),
+						"data-tour": "devportal-dashboard-quick-actions",
 						children: /* @__PURE__ */ C("div", {
 							className: "grid gap-3",
 							children: [
@@ -165,6 +172,7 @@ var w = () => {
 					})]
 				}),
 				I ? /* @__PURE__ */ S(r, {
+					"data-tour": "devportal-dashboard-organizations",
 					title: k("devportal.yourOrganizations", "Your Organizations"),
 					children: /* @__PURE__ */ S("div", {
 						className: "flex items-center justify-center py-8",

package/dist/devportal/pages/DashboardPage.js.map

@@ -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            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>\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 title={tr(\"devportal.usageOverview\", \"Usage Overview\")}>\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            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 title={tr(\"devportal.quickActions\", \"Quick Actions\")}>\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            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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"}
+{"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":";;;;;;;;;;;;;;AAmCA,IAAa,UAA0B;CACrC,IAAM,EAAE,aAAU,gBAAa,GAAc,EACvC,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAI9B,EAAE,SAAM,eAAY,EAAuC,EAC/D,aAAa,qBACd,CAAC,EAEI,IACJ,GAAM,4BAA4B,EAAE,EAChC,IACJ,GAAM,cAAc,OAAO,KACxB,MAA2C,EAAE,KAC/C,IAAI,EAAE,EAGH,IAAQ;EACZ,WAAW,GAAM,cAAc,cAAc;EAC7C,WAAW,EAAc;EACzB,cAAc;EACd,eAAe;EACf,eAAe,EAAc,QAC1B,GAAa,MACZ,IAAM,SAAS,EAAI,iBAAiB,IAAI,EAC1C,EACD;EACD,gBAAgB,EAAc,QAC3B,GAAa,MACZ,KAAO,EAAI,kBAAkB,IAC/B,EACD;EACD,gBAAgB,EAAc,QAC3B,GAAa,MACZ,KAAO,EAAI,gBAAgB,IAC7B,EACD;EACD,WAAW;EACZ,EAEK,KAAkB,MAAiB;AACvC,MAAW,GAAG,IAAW,IAAO;IAG5B,IAAY;AAElB,QACE,kBAAC,GAAD;EAAiB,YAAY,EAAsB;YACjD,kBAAC,GAAD;GACE,OAAO,EAAG,6BAA6B,mBAAmB;GAC1D,aAAa,EACX,gCACA,+CACD;GACD,SACE,kBAAC,UAAD;IACE,aAAU;IACV,eAAe,EAAe,YAAY;IAC1C,WAAU;cAHZ,CAKE,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA,EACjB,EAAG,uBAAuB,aAAa,CACjC;;aAdb;IAkBE,kBAAC,GAAD;KAAa,aAAU;eACrB,kBAAC,GAAD;MAAc,SAAS;gBAAvB;OACE,kBAAC,GAAD;QACE,OAAO,EAAG,uBAAuB,aAAa;QAC9C,OACE,IACE,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,GAE5C,EAAM;QAGV,MAAM,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA;QAC7B,OAAO,KAAA;QACP,CAAA;OACF,kBAAC,GAAD;QACE,OAAO,EAAG,2BAA2B,gBAAgB;QACrD,OACE,IACE,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,GAE5C,EAAM;QAGV,MAAM,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA;QAC7B,CAAA;OACF,kBAAC,GAAD;QACE,OAAO,EAAG,qBAAqB,WAAW;QAC1C,OAAO,EAAM;QACb,MAAM,kBAAC,GAAD,EAAK,MAAM,IAAM,CAAA;QACvB,aAAa,EAAG,wBAAwB,cAAc;QACtD,CAAA;OACF,kBAAC,GAAD;QACE,OAAO,EAAG,sBAAsB,WAAW;QAC3C,OAAO,EAAM;QACb,MAAM,kBAAC,GAAD,EAAS,MAAM,IAAM,CAAA;QAC3B,aAAa,EAAG,wBAAwB,aAAa;QACrD,CAAA;OACW;;KACH,CAAA;IAGd,kBAAC,GAAD;KACE,OAAO,EAAG,2BAA2B,iBAAiB;KACtD,aAAU;eAEV,kBAAC,GAAD;MAAc,SAAS;gBAAvB;OACE,kBAAC,GAAD;QACE,OAAO,EAAG,sBAAsB,YAAY;QAC5C,OACE,IACE,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,GAC1C,EAAM,gBAAgB,MACxB,IAAI,EAAM,gBAAgB,KAAS,QAAQ,EAAE,CAAC,KAC5C,EAAM,gBAAgB,MACxB,IAAI,EAAM,gBAAgB,KAAM,QAAQ,EAAE,CAAC,KAE3C,EAAM,cAAc,UAAU;QAGlC,MAAM,kBAAC,GAAD,EAAU,MAAM,IAAM,CAAA;QAC5B,OAAO,KAAA;QACP,CAAA;OACF,kBAAC,GAAD;QACE,OAAO,EAAG,4BAA4B,kBAAkB;QACxD,OACE,IACE,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,GAC1C,EAAM,iBAAiB,MACzB,IAAI,EAAM,iBAAiB,KAAM,QAAQ,EAAE,CAAC,KAE5C,EAAM,eAAe,UAAU;QAGnC,MAAM,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA;QACzB,OAAO,KAAA;QACP,CAAA;OACF,kBAAC,GAAD;QACE,OAAO,EAAG,4BAA4B,kBAAkB;QACxD,OACE,IACE,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,GAE5C,IAAI,EAAM,eAAe,gBAAgB;QAG7C,MAAM,kBAAC,GAAD,EAAY,MAAM,IAAM,CAAA;QAC9B,OAAO,KAAA;QACP,CAAA;OACF,kBAAC,GAAD;QACE,OAAO,EAAG,uBAAuB,aAAa;QAC9C,OAAO,GAAG,EAAM,UAAU;QAC1B,MAAM,kBAAC,GAAD,EAAY,MAAM,IAAM,CAAA;QAC9B,OAAO,KAAA;QACP,CAAA;OACW;;KACH,CAAA;IAGd,kBAAC,OAAD;KAAK,WAAU;eAAf,CAEE,kBAAC,GAAD;MACE,aAAU;MACV,OAAO,EAAG,gCAAgC,sBAAsB;MAChE,SACE,kBAAC,UAAD;OACE,eAAe,EAAe,QAAQ;OACtC,WAAU;iBAFZ;QAIG,EAAG,qBAAqB,WAAW;QAAC;QAAC,kBAAC,GAAD,EAAY,MAAM,IAAM,CAAA;QACvD;;gBAGV,IACC,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAS,WAAU,8CAA+C,CAAA;OAC9D,CAAA,GACJ,EAAa,SAAS,IACxB,kBAAC,OAAD;OAAK,WAAU;iBACZ,EACE,MAAM,GAAG,EAAE,CACX,KAAK,MACJ,kBAAC,GAAD;QAEO;QACL,eAAe,EAAe,SAAS,EAAI,KAAK;QAChD,EAHK,EAAI,GAGT,CACF;OACA,CAAA,GAEN,kBAAC,GAAD;OACE,MAAM,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA;OAC7B,OAAO,EAAG,+BAA+B,sBAAsB;OAC/D,aAAa,EACX,gDACA,+CACD;OACD,QACE,kBAAC,UAAD;QACE,eAAe,EAAe,YAAY;QAC1C,WAAU;kBAFZ,CAIE,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA,EACjB,EAAG,uBAAuB,aAAa,CACjC;;OAEX,CAAA;MAEQ,CAAA,EAGd,kBAAC,GAAD;MACE,OAAO,EAAG,0BAA0B,gBAAgB;MACpD,aAAU;gBAEV,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,GAAD;SACE,OAAO,EAAG,0BAA0B,iBAAiB;SACrD,aAAa,EACX,0CACA,mCACD;SACD,MAAM,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA;SAC7B,eAAe,EAAe,YAAY;SAC1C,CAAA;QACF,kBAAC,GAAD;SACE,OAAO,EACL,gCACA,sBACD;SACD,aAAa,EACX,qCACA,+BACD;SACD,MAAM,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA;SAC7B,eAAe,EAAe,qBAAqB;SACnD,CAAA;QACF,kBAAC,GAAD;SACE,OAAO,EAAG,4BAA4B,mBAAmB;SACzD,aAAa,EACX,0CACA,mCACD;SACD,MAAM,kBAAC,GAAD,EAAK,MAAM,IAAM,CAAA;SACvB,eAAe,EAAe,YAAY;SAC1C,CAAA;QACF,kBAAC,GAAD;SACE,OAAO,EAAG,+BAA+B,qBAAqB;SAC9D,aAAa,EACX,qCACA,6BACD;SACD,MAAM,kBAAC,GAAD,EAAS,MAAM,IAAM,CAAA;SAC3B,eAAe,EAAe,YAAY;SAC1C,CAAA;QACE;;MACM,CAAA,CACV;;IAGL,IACC,kBAAC,GAAD;KACE,aAAU;KACV,OAAO,EAAG,+BAA+B,qBAAqB;eAE9D,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAS,WAAU,8CAA+C,CAAA;MAC9D,CAAA;KACM,CAAA,GACZ,EAAc,SAAS,IACzB,kBAAC,GAAD;KACE,OAAO,EAAG,+BAA+B,qBAAqB;KAC9D,SACE,kBAAC,UAAD;MACE,eAAe,EAAe,iBAAiB;MAC/C,WAAU;gBAFZ;OAIG,EAAG,qBAAqB,WAAW;OAAC;OAAC,kBAAC,GAAD,EAAY,MAAM,IAAM,CAAA;OACvD;;eAGX,kBAAC,OAAD;MAAK,WAAU;gBACZ,EACE,MAAM,GAAG,EAAE,CACX,KAAK,MACJ,kBAAC,GAAD;OAEO;OACL,eAAe,EAAe,kBAAkB,EAAI,KAAK;OACzD,EAHK,EAAI,GAGT,CACF;MACA,CAAA;KACM,CAAA,GACZ;IACO;;EACG,CAAA;GAKhB,KAKA,EAAE,UAAO,gBAAa,SAAM,iBAChC,kBAAC,UAAD;CACW;CACT,WAAU;WAFZ,CAIE,kBAAC,OAAD;EAAK,WAAU;YAA6C;EAAW,CAAA,EACvE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;EAAG,WAAU;YAAe;EAAU,CAAA,EACtC,kBAAC,KAAD;EAAG,WAAU;YAAiC;EAAgB,CAAA,CAC1D,EAAA,CAAA,CACC;IAIL,KAGA,EAAE,QAAK,iBAAc;CACzB,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;;AAEpC,QACE,kBAAC,UAAD;EACW;EACT,WAAU;YAFZ,CAIE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,EAAI,UACH,kBAAC,OAAD;IACE,KAAK,EAAI;IACT,KAAK,EAAI;IACT,WAAU;IACV,CAAA,GAEF,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA;IACnB,CAAA,EAER,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAU;eAAwB,EAAI;KAAS,CAAA,EAClD,kBAAC,KAAD;KAAG,WAAU;eAAb;MACG,EAAI;MAAe;MACnB,EAAG,2BAA2B,iBAAiB;MAC9C;OACA;MACF;MACN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD,EAAA,UAAA;KACI,EAAI,iBAAiB,GAAG,gBAAgB;IAAE;IAC3C,EAAG,sBAAsB,WAAW;IAChC,EAAA,CAAA,EACP,kBAAC,QAAD,EAAA,UAAA;IAAM;KACD,EAAI,gBAAgB,GAAG,gBAAgB;IAAE;IAC3C,EAAG,qBAAqB,UAAU;IAC9B,EAAA,CAAA,CACH;KACC"}

package/dist/devportal/pages/OAuthClientsPage.js

@@ -19,7 +19,7 @@ var y = () => {
 	let { navigate: y, basePath: b } = e(), { t: x } = d(), S = (e, t) => {
 		let n = x(e);
 		return n === e ? t : n;
-	}, [C, w] = u(""), [T, E] = u(""), { data: D, loading: O, error: k, refetch: A } = o({ fetchPolicy: "cache-and-network" }), j = D?.currentUserApps?.map((e) => ({
+	}, [C, w] = u(""), [T, E] = u(""), { data: D, loading: O, error: k, refetch: A } = o({ fetchPolicy: "cache-and-network" }), j = D?.currentUserApps?.apps.map((e) => ({
 		id: e.id,
 		name: e.name,
 		description: e.description ?? void 0,

package/dist/devportal/pages/OAuthClientsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthClientsPage.js","names":[],"sources":["../../../src/devportal/pages/OAuthClientsPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { Plus, Search, Shield, Loader2, AlertCircle } from \"lucide-react\";\nimport { PageLayout } from \"../components/PageLayout\";\nimport { DataTable } from \"../components/DataTable\";\nimport { ActiveIndicator } from \"../components/StatusBadge\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type { AuthApp } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { useCurrentUserAppsQuery, getErrorMessage } from \"../hooks\";\n\n/**\n * OAuth Apps listing page\n *\n * Displays the current user's OAuth apps from auth-svc.\n * Previously showed devportal-svc OAuthClients per application;\n * now shows all user-owned apps centrally.\n */\nexport const OAuthClientsPage: 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  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [typeFilter, setTypeFilter] = useState<string>(\"\");\n\n  // Fetch apps from auth-svc (user-scoped, no applicationId needed)\n  const { data, loading, error, refetch } = useCurrentUserAppsQuery({\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const apps: AuthApp[] =\n    data?.currentUserApps?.map(\n      (app: (typeof data.currentUserApps)[number]) => ({\n        id: app.id,\n        name: app.name,\n        description: app.description ?? undefined,\n        clientId: app.clientId,\n        type: app.type as AuthApp[\"type\"],\n        status: app.status as AuthApp[\"status\"],\n        scopes: app.scopes ?? [],\n        redirectUris: app.redirectUris ?? [],\n        ownerUserId: app.ownerUserId,\n        tenantId: app.tenantId ?? \"\",\n        createdAt: app.createdAt,\n        updatedAt: app.updatedAt,\n      }),\n    ) ?? [];\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  // Filter apps\n  const filteredApps = apps.filter((app) => {\n    const matchesSearch =\n      !searchQuery ||\n      app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      app.clientId.toLowerCase().includes(searchQuery.toLowerCase());\n    const matchesType = !typeFilter || app.type === typeFilter;\n    return matchesSearch && matchesType;\n  });\n\n  // Loading state\n  if (loading && !data) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.oauthApps\", \"OAuth Apps\")}\n        description={tr(\n          \"devportal.manageOAuthApps\",\n          \"Manage your OAuth applications and credentials\",\n        )}\n      >\n        <div className=\"flex items-center justify-center py-12\">\n          <Loader2 className=\"h-8 w-8 animate-spin text-muted-foreground\" />\n          <span className=\"ml-2 text-muted-foreground\">\n            {tr(\"devportal.loadingApps\", \"Loading apps...\")}\n          </span>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.oauthApps\", \"OAuth Apps\")}\n        description={tr(\n          \"devportal.manageOAuthApps\",\n          \"Manage your OAuth applications and credentials\",\n        )}\n      >\n        <div className=\"rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center\">\n          <AlertCircle className=\"mx-auto h-8 w-8 text-destructive\" />\n          <h3 className=\"mt-2 font-medium text-destructive\">\n            {tr(\"devportal.failedToLoadApps\", \"Failed to load apps\")}\n          </h3>\n          <p className=\"mt-1 text-sm text-muted-foreground\">\n            {getErrorMessage(error)}\n          </p>\n          <button\n            onClick={() => refetch()}\n            className=\"mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90\"\n          >\n            {tr(\"devportal.tryAgain\", \"Try Again\")}\n          </button>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  const columns = [\n    {\n      key: \"name\",\n      header: \"App\",\n      render: (app: AuthApp) => (\n        <div className=\"flex items-center gap-3\">\n          <div\n            className={cn(\n              \"flex h-10 w-10 items-center justify-center rounded-lg\",\n              app.status === \"ACTIVE\"\n                ? \"bg-primary/10 text-primary\"\n                : \"bg-bg-sunken text-text-tertiary\",\n            )}\n          >\n            <Shield size={20} />\n          </div>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <p className=\"font-medium\">{app.name}</p>\n              <span\n                className={cn(\n                  \"rounded px-1.5 py-0.5 text-xs\",\n                  app.type === \"SERVICE\"\n                    ? \"bg-accent-purple-subtle text-accent-purple\"\n                    : app.type === \"INTEGRATION\" ||\n                        app.type === \"API_INTEGRATION\"\n                      ? \"bg-status-info-bg-subtle text-status-info-text\"\n                      : \"bg-status-success-bg-subtle text-status-success-text\",\n                )}\n              >\n                {app.type}\n              </span>\n            </div>\n            <code className=\"text-xs text-muted-foreground\">\n              {app.clientId}\n            </code>\n          </div>\n        </div>\n      ),\n    },\n    {\n      key: \"scopes\",\n      header: \"Scopes\",\n      render: (app: AuthApp) => (\n        <div className=\"flex flex-wrap gap-1\">\n          {app.scopes.slice(0, 3).map((scope) => (\n            <span\n              key={scope}\n              className=\"inline-flex rounded bg-muted px-1.5 py-0.5 text-xs\"\n            >\n              {scope}\n            </span>\n          ))}\n          {app.scopes.length > 3 && (\n            <span className=\"text-xs text-muted-foreground\">\n              +{app.scopes.length - 3}\n            </span>\n          )}\n        </div>\n      ),\n    },\n    {\n      key: \"redirectUris\",\n      header: \"Redirect URIs\",\n      render: (app: AuthApp) => (\n        <span className=\"text-sm\">\n          {app.redirectUris.length} URI\n          {app.redirectUris.length !== 1 ? \"s\" : \"\"}\n        </span>\n      ),\n    },\n    {\n      key: \"status\",\n      header: \"Status\",\n      render: (app: AuthApp) => (\n        <div className=\"flex items-center gap-2\">\n          <ActiveIndicator active={app.status === \"ACTIVE\"} />\n          <span className=\"text-sm\">{app.status}</span>\n        </div>\n      ),\n    },\n  ];\n\n  // Stats\n  const stats = {\n    total: apps.length,\n    active: apps.filter((a) => a.status === \"ACTIVE\").length,\n    integration: apps.filter(\n      (a) => a.type === \"INTEGRATION\" || a.type === \"API_INTEGRATION\",\n    ).length,\n    service: apps.filter((a) => a.type === \"SERVICE\").length,\n  };\n\n  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_READ}>\n      <PageLayout\n        title={tr(\"devportal.oauthApps\", \"OAuth Apps\")}\n        description={tr(\n          \"devportal.manageOAuthApps\",\n          \"Manage your OAuth applications and credentials\",\n        )}\n        actions={\n          <button\n            onClick={() => handleNavigate(\"/oauth/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        {/* Filters */}\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex flex-1 items-center gap-4\">\n            <div className=\"relative flex-1 max-w-md\">\n              <Search\n                size={16}\n                className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\"\n              />\n              <input\n                type=\"text\"\n                placeholder={tr(\n                  \"devportal.searchByNameOrClientId\",\n                  \"Search by name or client ID...\",\n                )}\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className=\"w-full rounded-md border bg-background pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n              />\n            </div>\n            <select\n              value={typeFilter}\n              onChange={(e) => setTypeFilter(e.target.value)}\n              className=\"rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n            >\n              <option value=\"\">{tr(\"devportal.allTypes\", \"All Types\")}</option>\n              <option value=\"SERVICE\">\n                {tr(\"devportal.service\", \"Service\")}\n              </option>\n              <option value=\"INTEGRATION\">\n                {tr(\"devportal.integration\", \"Integration\")}\n              </option>\n              <option value=\"BOT\">{tr(\"devportal.bot\", \"Bot\")}</option>\n              <option value=\"WEB_APP\">\n                {tr(\"devportal.webApp\", \"Web App\")}\n              </option>\n              <option value=\"AUTOMATION\">\n                {tr(\"devportal.automation\", \"Automation\")}\n              </option>\n            </select>\n          </div>\n        </div>\n\n        {/* Summary Stats */}\n        <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-muted-foreground\">\n              <Shield size={16} />\n              <span className=\"text-sm\">\n                {tr(\"devportal.totalApps\", \"Total Apps\")}\n              </span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.total}</p>\n          </div>\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-status-success-text\">\n              <Shield size={16} />\n              <span className=\"text-sm\">\n                {tr(\"devportal.active\", \"Active\")}\n              </span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.active}</p>\n          </div>\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-accent-blue\">\n              <Shield size={16} />\n              <span className=\"text-sm\">\n                {tr(\"devportal.integration\", \"Integration\")}\n              </span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.integration}</p>\n          </div>\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-accent-purple\">\n              <Shield size={16} />\n              <span className=\"text-sm\">\n                {tr(\"devportal.service\", \"Service\")}\n              </span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.service}</p>\n          </div>\n        </div>\n\n        <p className=\"text-sm text-muted-foreground\">\n          {filteredApps.length}{\" \"}\n          {filteredApps.length !== 1\n            ? tr(\"devportal.appsFound\", \"apps found\")\n            : tr(\"devportal.appFound\", \"app found\")}\n        </p>\n\n        {/* Apps Table */}\n        {filteredApps.length > 0 ? (\n          <DataTable\n            data={filteredApps}\n            columns={columns}\n            keyField=\"id\"\n            onRowClick={(app) => handleNavigate(`/oauth/${app.id}`)}\n          />\n        ) : (\n          <EmptyState\n            icon={<Shield size={32} />}\n            title={tr(\"devportal.noOAuthAppsFound\", \"No OAuth apps found\")}\n            description={\n              searchQuery || typeFilter\n                ? tr(\n                    \"devportal.tryAdjustingFilters\",\n                    \"Try adjusting your filters\",\n                  )\n                : tr(\n                    \"devportal.createFirstOAuthApp\",\n                    \"Create your first OAuth app to enable authentication\",\n                  )\n            }\n            action={\n              !searchQuery && !typeFilter ? (\n                <button\n                  onClick={() => handleNavigate(\"/oauth/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              ) : undefined\n            }\n          />\n        )}\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,IAAa,UAA6B;CACxC,IAAM,EAAE,aAAU,gBAAa,GAAc,EACvC,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAE9B,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAY,KAAiB,EAAiB,GAAG,EAGlD,EAAE,SAAM,YAAS,UAAO,eAAY,EAAwB,EAChE,aAAa,qBACd,CAAC,EAEI,IACJ,GAAM,iBAAiB,KACpB,OAAgD;EAC/C,IAAI,EAAI;EACR,MAAM,EAAI;EACV,aAAa,EAAI,eAAe,KAAA;EAChC,UAAU,EAAI;EACd,MAAM,EAAI;EACV,QAAQ,EAAI;EACZ,QAAQ,EAAI,UAAU,EAAE;EACxB,cAAc,EAAI,gBAAgB,EAAE;EACpC,aAAa,EAAI;EACjB,UAAU,EAAI,YAAY;EAC1B,WAAW,EAAI;EACf,WAAW,EAAI;EAChB,EACF,IAAI,EAAE,EAEH,KAAkB,MAAiB;AACvC,MAAW,GAAG,IAAW,IAAO;IAI5B,IAAe,EAAK,QAAQ,MAAQ;EACxC,IAAM,IACJ,CAAC,KACD,EAAI,KAAK,aAAa,CAAC,SAAS,EAAY,aAAa,CAAC,IAC1D,EAAI,SAAS,aAAa,CAAC,SAAS,EAAY,aAAa,CAAC,EAC1D,IAAc,CAAC,KAAc,EAAI,SAAS;AAChD,SAAO,KAAiB;GACxB;AAGF,KAAI,KAAW,CAAC,EACd,QACE,kBAAC,GAAD;EACE,OAAO,EAAG,uBAAuB,aAAa;EAC9C,aAAa,EACX,6BACA,iDACD;YAED,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAS,WAAU,8CAA+C,CAAA,EAClE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAG,yBAAyB,kBAAkB;IAC1C,CAAA,CACH;;EACK,CAAA;AAKjB,KAAI,EACF,QACE,kBAAC,GAAD;EACE,OAAO,EAAG,uBAAuB,aAAa;EAC9C,aAAa,EACX,6BACA,iDACD;YAED,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD,EAAa,WAAU,oCAAqC,CAAA;IAC5D,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,8BAA8B,sBAAsB;KACrD,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eACV,EAAgB,EAAM;KACrB,CAAA;IACJ,kBAAC,UAAD;KACE,eAAe,GAAS;KACxB,WAAU;eAET,EAAG,sBAAsB,YAAY;KAC/B,CAAA;IACL;;EACK,CAAA;CAIjB,IAAM,IAAU;EACd;GACE,KAAK;GACL,QAAQ;GACR,SAAS,MACP,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KACE,WAAW,EACT,yDACA,EAAI,WAAW,WACX,+BACA,kCACL;eAED,kBAAC,GAAD,EAAQ,MAAM,IAAM,CAAA;KAChB,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAAe,EAAI;MAAS,CAAA,EACzC,kBAAC,QAAD;MACE,WAAW,EACT,iCACA,EAAI,SAAS,YACT,+CACA,EAAI,SAAS,iBACX,EAAI,SAAS,oBACb,mDACA,uDACP;gBAEA,EAAI;MACA,CAAA,CACH;QACN,kBAAC,QAAD;KAAM,WAAU;eACb,EAAI;KACA,CAAA,CACH,EAAA,CAAA,CACF;;GAET;EACD;GACE,KAAK;GACL,QAAQ;GACR,SAAS,MACP,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAI,OAAO,MAAM,GAAG,EAAE,CAAC,KAAK,MAC3B,kBAAC,QAAD;KAEE,WAAU;eAET;KACI,EAJA,EAIA,CACP,EACD,EAAI,OAAO,SAAS,KACnB,kBAAC,QAAD;KAAM,WAAU;eAAhB,CAAgD,KAC5C,EAAI,OAAO,SAAS,EACjB;OAEL;;GAET;EACD;GACE,KAAK;GACL,QAAQ;GACR,SAAS,MACP,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACG,EAAI,aAAa;KAAO;KACxB,EAAI,aAAa,WAAW,IAAU,KAAN;KAC5B;;GAEV;EACD;GACE,KAAK;GACL,QAAQ;GACR,SAAS,MACP,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAiB,QAAQ,EAAI,WAAW,UAAY,CAAA,EACpD,kBAAC,QAAD;KAAM,WAAU;eAAW,EAAI;KAAc,CAAA,CACzC;;GAET;EACF,EAGK,IAAQ;EACZ,OAAO,EAAK;EACZ,QAAQ,EAAK,QAAQ,MAAM,EAAE,WAAW,SAAS,CAAC;EAClD,aAAa,EAAK,QACf,MAAM,EAAE,SAAS,iBAAiB,EAAE,SAAS,kBAC/C,CAAC;EACF,SAAS,EAAK,QAAQ,MAAM,EAAE,SAAS,UAAU,CAAC;EACnD;AAED,QACE,kBAAC,GAAD;EAAiB,YAAY,EAAsB;YACjD,kBAAC,GAAD;GACE,OAAO,EAAG,uBAAuB,aAAa;GAC9C,aAAa,EACX,6BACA,iDACD;GACD,SACE,kBAAC,UAAD;IACE,eAAe,EAAe,aAAa;IAC3C,WAAU;cAFZ,CAIE,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA,EACjB,EAAG,uBAAuB,aAAa,CACjC;;aAbb;IAiBE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD;QACE,MAAM;QACN,WAAU;QACV,CAAA,EACF,kBAAC,SAAD;QACE,MAAK;QACL,aAAa,EACX,oCACA,iCACD;QACD,OAAO;QACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;QAC/C,WAAU;QACV,CAAA,CACE;UACN,kBAAC,UAAD;OACE,OAAO;OACP,WAAW,MAAM,EAAc,EAAE,OAAO,MAAM;OAC9C,WAAU;iBAHZ;QAKE,kBAAC,UAAD;SAAQ,OAAM;mBAAI,EAAG,sBAAsB,YAAY;SAAU,CAAA;QACjE,kBAAC,UAAD;SAAQ,OAAM;mBACX,EAAG,qBAAqB,UAAU;SAC5B,CAAA;QACT,kBAAC,UAAD;SAAQ,OAAM;mBACX,EAAG,yBAAyB,cAAc;SACpC,CAAA;QACT,kBAAC,UAAD;SAAQ,OAAM;mBAAO,EAAG,iBAAiB,MAAM;SAAU,CAAA;QACzD,kBAAC,UAAD;SAAQ,OAAM;mBACX,EAAG,oBAAoB,UAAU;SAC3B,CAAA;QACT,kBAAC,UAAD;SAAQ,OAAM;mBACX,EAAG,wBAAwB,aAAa;SAClC,CAAA;QACF;SACL;;KACF,CAAA;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAQ,MAAM,IAAM,CAAA,EACpB,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAG,uBAAuB,aAAa;SACnC,CAAA,CACH;WACN,kBAAC,KAAD;QAAG,WAAU;kBAA+B,EAAM;QAAU,CAAA,CACxD;;MACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAQ,MAAM,IAAM,CAAA,EACpB,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAG,oBAAoB,SAAS;SAC5B,CAAA,CACH;WACN,kBAAC,KAAD;QAAG,WAAU;kBAA+B,EAAM;QAAW,CAAA,CACzD;;MACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAQ,MAAM,IAAM,CAAA,EACpB,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAG,yBAAyB,cAAc;SACtC,CAAA,CACH;WACN,kBAAC,KAAD;QAAG,WAAU;kBAA+B,EAAM;QAAgB,CAAA,CAC9D;;MACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAQ,MAAM,IAAM,CAAA,EACpB,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAG,qBAAqB,UAAU;SAC9B,CAAA,CACH;WACN,kBAAC,KAAD;QAAG,WAAU;kBAA+B,EAAM;QAAY,CAAA,CAC1D;;MACF;;IAEN,kBAAC,KAAD;KAAG,WAAU;eAAb;MACG,EAAa;MAAQ;MACrB,EAAa,WAAW,IAErB,EAAG,sBAAsB,YAAY,GADrC,EAAG,uBAAuB,aAAa;MAEzC;;IAGH,EAAa,SAAS,IACrB,kBAAC,GAAD;KACE,MAAM;KACG;KACT,UAAS;KACT,aAAa,MAAQ,EAAe,UAAU,EAAI,KAAK;KACvD,CAAA,GAEF,kBAAC,GAAD;KACE,MAAM,kBAAC,GAAD,EAAQ,MAAM,IAAM,CAAA;KAC1B,OAAO,EAAG,8BAA8B,sBAAsB;KAC9D,aACE,KAAe,IACX,EACE,iCACA,6BACD,GACD,EACE,iCACA,uDACD;KAEP,QACE,CAAC,KAAe,CAAC,IACf,kBAAC,UAAD;MACE,eAAe,EAAe,aAAa;MAC3C,WAAU;gBAFZ,CAIE,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA,EACjB,EAAG,uBAAuB,aAAa,CACjC;UACP,KAAA;KAEN,CAAA;IAEO;;EACG,CAAA"}
+{"version":3,"file":"OAuthClientsPage.js","names":[],"sources":["../../../src/devportal/pages/OAuthClientsPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { Plus, Search, Shield, Loader2, AlertCircle } from \"lucide-react\";\nimport { PageLayout } from \"../components/PageLayout\";\nimport { DataTable } from \"../components/DataTable\";\nimport { ActiveIndicator } from \"../components/StatusBadge\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type { AuthApp } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { useCurrentUserAppsQuery, getErrorMessage } from \"../hooks\";\n\n/**\n * OAuth Apps listing page\n *\n * Displays the current user's OAuth apps from auth-svc.\n * Previously showed devportal-svc OAuthClients per application;\n * now shows all user-owned apps centrally.\n */\nexport const OAuthClientsPage: 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  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [typeFilter, setTypeFilter] = useState<string>(\"\");\n\n  // Fetch apps from auth-svc (user-scoped, no applicationId needed)\n  const { data, loading, error, refetch } = useCurrentUserAppsQuery({\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const apps: AuthApp[] =\n    data?.currentUserApps?.apps.map(\n      (app: (typeof data.currentUserApps.apps)[number]) => ({\n        id: app.id,\n        name: app.name,\n        description: app.description ?? undefined,\n        clientId: app.clientId,\n        type: app.type as AuthApp[\"type\"],\n        status: app.status as AuthApp[\"status\"],\n        scopes: app.scopes ?? [],\n        redirectUris: app.redirectUris ?? [],\n        ownerUserId: app.ownerUserId,\n        tenantId: app.tenantId ?? \"\",\n        createdAt: app.createdAt,\n        updatedAt: app.updatedAt,\n      }),\n    ) ?? [];\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  // Filter apps\n  const filteredApps = apps.filter((app) => {\n    const matchesSearch =\n      !searchQuery ||\n      app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      app.clientId.toLowerCase().includes(searchQuery.toLowerCase());\n    const matchesType = !typeFilter || app.type === typeFilter;\n    return matchesSearch && matchesType;\n  });\n\n  // Loading state\n  if (loading && !data) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.oauthApps\", \"OAuth Apps\")}\n        description={tr(\n          \"devportal.manageOAuthApps\",\n          \"Manage your OAuth applications and credentials\",\n        )}\n      >\n        <div className=\"flex items-center justify-center py-12\">\n          <Loader2 className=\"h-8 w-8 animate-spin text-muted-foreground\" />\n          <span className=\"ml-2 text-muted-foreground\">\n            {tr(\"devportal.loadingApps\", \"Loading apps...\")}\n          </span>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.oauthApps\", \"OAuth Apps\")}\n        description={tr(\n          \"devportal.manageOAuthApps\",\n          \"Manage your OAuth applications and credentials\",\n        )}\n      >\n        <div className=\"rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center\">\n          <AlertCircle className=\"mx-auto h-8 w-8 text-destructive\" />\n          <h3 className=\"mt-2 font-medium text-destructive\">\n            {tr(\"devportal.failedToLoadApps\", \"Failed to load apps\")}\n          </h3>\n          <p className=\"mt-1 text-sm text-muted-foreground\">\n            {getErrorMessage(error)}\n          </p>\n          <button\n            onClick={() => refetch()}\n            className=\"mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90\"\n          >\n            {tr(\"devportal.tryAgain\", \"Try Again\")}\n          </button>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  const columns = [\n    {\n      key: \"name\",\n      header: \"App\",\n      render: (app: AuthApp) => (\n        <div className=\"flex items-center gap-3\">\n          <div\n            className={cn(\n              \"flex h-10 w-10 items-center justify-center rounded-lg\",\n              app.status === \"ACTIVE\"\n                ? \"bg-primary/10 text-primary\"\n                : \"bg-bg-sunken text-text-tertiary\",\n            )}\n          >\n            <Shield size={20} />\n          </div>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <p className=\"font-medium\">{app.name}</p>\n              <span\n                className={cn(\n                  \"rounded px-1.5 py-0.5 text-xs\",\n                  app.type === \"SERVICE\"\n                    ? \"bg-accent-purple-subtle text-accent-purple\"\n                    : app.type === \"INTEGRATION\" ||\n                        app.type === \"API_INTEGRATION\"\n                      ? \"bg-status-info-bg-subtle text-status-info-text\"\n                      : \"bg-status-success-bg-subtle text-status-success-text\",\n                )}\n              >\n                {app.type}\n              </span>\n            </div>\n            <code className=\"text-xs text-muted-foreground\">\n              {app.clientId}\n            </code>\n          </div>\n        </div>\n      ),\n    },\n    {\n      key: \"scopes\",\n      header: \"Scopes\",\n      render: (app: AuthApp) => (\n        <div className=\"flex flex-wrap gap-1\">\n          {app.scopes.slice(0, 3).map((scope) => (\n            <span\n              key={scope}\n              className=\"inline-flex rounded bg-muted px-1.5 py-0.5 text-xs\"\n            >\n              {scope}\n            </span>\n          ))}\n          {app.scopes.length > 3 && (\n            <span className=\"text-xs text-muted-foreground\">\n              +{app.scopes.length - 3}\n            </span>\n          )}\n        </div>\n      ),\n    },\n    {\n      key: \"redirectUris\",\n      header: \"Redirect URIs\",\n      render: (app: AuthApp) => (\n        <span className=\"text-sm\">\n          {app.redirectUris.length} URI\n          {app.redirectUris.length !== 1 ? \"s\" : \"\"}\n        </span>\n      ),\n    },\n    {\n      key: \"status\",\n      header: \"Status\",\n      render: (app: AuthApp) => (\n        <div className=\"flex items-center gap-2\">\n          <ActiveIndicator active={app.status === \"ACTIVE\"} />\n          <span className=\"text-sm\">{app.status}</span>\n        </div>\n      ),\n    },\n  ];\n\n  // Stats\n  const stats = {\n    total: apps.length,\n    active: apps.filter((a) => a.status === \"ACTIVE\").length,\n    integration: apps.filter(\n      (a) => a.type === \"INTEGRATION\" || a.type === \"API_INTEGRATION\",\n    ).length,\n    service: apps.filter((a) => a.type === \"SERVICE\").length,\n  };\n\n  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_READ}>\n      <PageLayout\n        title={tr(\"devportal.oauthApps\", \"OAuth Apps\")}\n        description={tr(\n          \"devportal.manageOAuthApps\",\n          \"Manage your OAuth applications and credentials\",\n        )}\n        actions={\n          <button\n            onClick={() => handleNavigate(\"/oauth/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        {/* Filters */}\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex flex-1 items-center gap-4\">\n            <div className=\"relative flex-1 max-w-md\">\n              <Search\n                size={16}\n                className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\"\n              />\n              <input\n                type=\"text\"\n                placeholder={tr(\n                  \"devportal.searchByNameOrClientId\",\n                  \"Search by name or client ID...\",\n                )}\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className=\"w-full rounded-md border bg-background pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n              />\n            </div>\n            <select\n              value={typeFilter}\n              onChange={(e) => setTypeFilter(e.target.value)}\n              className=\"rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n            >\n              <option value=\"\">{tr(\"devportal.allTypes\", \"All Types\")}</option>\n              <option value=\"SERVICE\">\n                {tr(\"devportal.service\", \"Service\")}\n              </option>\n              <option value=\"INTEGRATION\">\n                {tr(\"devportal.integration\", \"Integration\")}\n              </option>\n              <option value=\"BOT\">{tr(\"devportal.bot\", \"Bot\")}</option>\n              <option value=\"WEB_APP\">\n                {tr(\"devportal.webApp\", \"Web App\")}\n              </option>\n              <option value=\"AUTOMATION\">\n                {tr(\"devportal.automation\", \"Automation\")}\n              </option>\n            </select>\n          </div>\n        </div>\n\n        {/* Summary Stats */}\n        <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-muted-foreground\">\n              <Shield size={16} />\n              <span className=\"text-sm\">\n                {tr(\"devportal.totalApps\", \"Total Apps\")}\n              </span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.total}</p>\n          </div>\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-status-success-text\">\n              <Shield size={16} />\n              <span className=\"text-sm\">\n                {tr(\"devportal.active\", \"Active\")}\n              </span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.active}</p>\n          </div>\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-accent-blue\">\n              <Shield size={16} />\n              <span className=\"text-sm\">\n                {tr(\"devportal.integration\", \"Integration\")}\n              </span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.integration}</p>\n          </div>\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-accent-purple\">\n              <Shield size={16} />\n              <span className=\"text-sm\">\n                {tr(\"devportal.service\", \"Service\")}\n              </span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.service}</p>\n          </div>\n        </div>\n\n        <p className=\"text-sm text-muted-foreground\">\n          {filteredApps.length}{\" \"}\n          {filteredApps.length !== 1\n            ? tr(\"devportal.appsFound\", \"apps found\")\n            : tr(\"devportal.appFound\", \"app found\")}\n        </p>\n\n        {/* Apps Table */}\n        {filteredApps.length > 0 ? (\n          <DataTable\n            data={filteredApps}\n            columns={columns}\n            keyField=\"id\"\n            onRowClick={(app) => handleNavigate(`/oauth/${app.id}`)}\n          />\n        ) : (\n          <EmptyState\n            icon={<Shield size={32} />}\n            title={tr(\"devportal.noOAuthAppsFound\", \"No OAuth apps found\")}\n            description={\n              searchQuery || typeFilter\n                ? tr(\n                    \"devportal.tryAdjustingFilters\",\n                    \"Try adjusting your filters\",\n                  )\n                : tr(\n                    \"devportal.createFirstOAuthApp\",\n                    \"Create your first OAuth app to enable authentication\",\n                  )\n            }\n            action={\n              !searchQuery && !typeFilter ? (\n                <button\n                  onClick={() => handleNavigate(\"/oauth/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              ) : undefined\n            }\n          />\n        )}\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n"],"mappings":"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"}

package/dist/devportal/pages/SettingsPage.js

@@ -40,7 +40,7 @@ var x = (e, t) => {
 			description: o(D)
 		})
 	});
-	let M = T?.myDeveloperProfile, N = T?.myDeveloperOrganizations ?? [], P = T?.myApiKeys ?? [], F = P[0], I = N.reduce((e, t) => e + (t.totalRevenue ?? 0), 0);
+	let M = T?.myDeveloperProfile, N = T?.myDeveloperOrganizations ?? [], P = T?.myApiKeys?.apiKeys ?? [], F = T?.myApiKeys?.totalCount ?? P.length, I = P[0], L = N.reduce((e, t) => e + (t.totalRevenue ?? 0), 0);
 	return /* @__PURE__ */ y(n, {
 		title: A,
 		description: j,
@@ -147,11 +147,11 @@ var x = (e, t) => {
 											}),
 											/* @__PURE__ */ y("p", {
 												className: "mt-2 text-2xl font-semibold",
-												children: P.length
+												children: F
 											}),
 											/* @__PURE__ */ y("p", {
 												className: "mt-1 text-sm text-muted-foreground",
-												children: F ? `${w("devportal.settings.lastUsed", "Last used")} ${x(F.lastUsedAt, k)}` : w("devportal.settings.noApiKeys", "No API keys created yet")
+												children: I ? `${w("devportal.settings.lastUsed", "Last used")} ${x(I.lastUsedAt, k)}` : w("devportal.settings.noApiKeys", "No API keys created yet")
 											})
 										]
 									}), /* @__PURE__ */ b("button", {
@@ -204,7 +204,7 @@ var x = (e, t) => {
 										className: "mt-1 text-sm text-muted-foreground",
 										children: [
 											"$",
-											I.toLocaleString(),
+											L.toLocaleString(),
 											" ",
 											w("devportal.settings.lifetimeRevenue", "lifetime revenue across all teams")
 										]
@@ -292,16 +292,16 @@ var x = (e, t) => {
 						title: w("devportal.settings.recentCredentialActivity", "Recent credential activity"),
 						children: /* @__PURE__ */ y("div", {
 							className: "rounded-lg border bg-card p-6",
-							children: F ? /* @__PURE__ */ b("div", {
+							children: I ? /* @__PURE__ */ b("div", {
 								className: "space-y-4 text-sm",
 								children: [/* @__PURE__ */ b("div", {
 									className: "flex items-center justify-between gap-3",
 									children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
 										className: "font-medium",
-										children: F.name
+										children: I.name
 									}), /* @__PURE__ */ y("p", {
 										className: "text-muted-foreground",
-										children: F.prefix
+										children: I.prefix
 									})] }), /* @__PURE__ */ y("span", {
 										className: "inline-flex items-center rounded-full bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text",
 										children: w("devportal.common.active", "Active")
@@ -311,15 +311,15 @@ var x = (e, t) => {
 									children: [
 										/* @__PURE__ */ b("div", {
 											className: "flex items-center justify-between gap-3",
-											children: [/* @__PURE__ */ y("dt", { children: w("devportal.common.created", "Created") }), /* @__PURE__ */ y("dd", { children: x(F.createdAt, k) })]
+											children: [/* @__PURE__ */ y("dt", { children: w("devportal.common.created", "Created") }), /* @__PURE__ */ y("dd", { children: x(I.createdAt, k) })]
 										}),
 										/* @__PURE__ */ b("div", {
 											className: "flex items-center justify-between gap-3",
-											children: [/* @__PURE__ */ y("dt", { children: w("devportal.common.expires", "Expires") }), /* @__PURE__ */ y("dd", { children: x(F.expiresAt, k) })]
+											children: [/* @__PURE__ */ y("dt", { children: w("devportal.common.expires", "Expires") }), /* @__PURE__ */ y("dd", { children: x(I.expiresAt, k) })]
 										}),
 										/* @__PURE__ */ b("div", {
 											className: "flex items-center justify-between gap-3",
-											children: [/* @__PURE__ */ y("dt", { children: w("devportal.settings.lastUsed", "Last used") }), /* @__PURE__ */ y("dd", { children: x(F.lastUsedAt, k) })]
+											children: [/* @__PURE__ */ y("dt", { children: w("devportal.settings.lastUsed", "Last used") }), /* @__PURE__ */ y("dd", { children: x(I.lastUsedAt, k) })]
 										})
 									]
 								})]