@burdenoff/microfe-devportal 2026.624.6 → 2026.624.8

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

@@ -1 +1 @@
-{"version":3,"file":"CreateWebhookPage.js","names":[],"sources":["../../../src/devportal/pages/CreateWebhookPage.tsx"],"sourcesContent":["import type { FC, FormEvent } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport { Loader2, Webhook } from \"lucide-react\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport {\n  InputField,\n  TextareaField,\n  CheckboxField,\n} from \"../components/FormField\";\nimport { Alert } from \"../components/ConfirmDialog\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport { useDevportalEventBus } from \"../events\";\nimport { WEBHOOK_EVENTS } from \"../types\";\nimport {\n  type GetApplicationsQuery,\n  getErrorMessage,\n  useCreateWebhookMutation,\n  useGetApplicationQuery,\n  useGetApplicationsQuery,\n  useDevportalPermission,\n} from \"../hooks\";\nimport { useTr } from \"../utils/i18n\";\n\nconst eventCategories = {\n  Application: WEBHOOK_EVENTS.filter((event) =>\n    event.startsWith(\"application.\"),\n  ),\n  Installation: WEBHOOK_EVENTS.filter((event) =>\n    event.startsWith(\"installation.\"),\n  ),\n  User: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"user.\")),\n  Workspace: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"workspace.\")),\n  Project: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"project.\")),\n  Task: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"task.\")),\n  Comment: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"comment.\")),\n  File: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"file.\")),\n  Member: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"member.\")),\n};\n\ninterface CreateWebhookFormState {\n  applicationId: string;\n  name: string;\n  description: string;\n  url: string;\n  events: string[];\n  retryEnabled: boolean;\n  maxRetries: number;\n}\n\ntype ApplicationOption =\n  GetApplicationsQuery[\"applications\"][\"edges\"][number][\"node\"];\n\nexport const CreateWebhookPage: FC = () => {\n  const { appId } = useParams<{ appId: string }>();\n  const { navigate, basePath } = useDevportal();\n  const [formData, setFormData] = useState<CreateWebhookFormState>({\n    applicationId: appId || \"\",\n    name: \"\",\n    description: \"\",\n    url: \"\",\n    events: [],\n    retryEnabled: true,\n    maxRetries: 3,\n  });\n  const [errors, setErrors] = useState<Record<string, string>>({});\n  const [submitError, setSubmitError] = useState<string | null>(null);\n\n  const { data: singleAppData } = useGetApplicationQuery({\n    variables: { id: appId ?? \"\" },\n    skip: !appId,\n    fetchPolicy: \"cache-first\",\n  });\n\n  useEffect(() => {\n    const name = singleAppData?.application?.name;\n    if (!appId || !name) return;\n    const reg = (\n      window as unknown as {\n        __breadcrumbRegistry?: {\n          register: (id: string, name: string) => void;\n          unregister: (id: string) => void;\n        };\n      }\n    ).__breadcrumbRegistry;\n    reg?.register(appId, name);\n    return () => reg?.unregister(appId);\n  }, [appId, singleAppData?.application?.name]);\n\n  const {\n    data: appsData,\n    loading: appsLoading,\n    error: appsError,\n  } = useGetApplicationsQuery({\n    variables: { limit: 100 },\n    skip: !!appId,\n    fetchPolicy: \"cache-and-network\",\n  });\n  const [createWebhook, { loading: isSubmitting }] = useCreateWebhookMutation();\n  const bus = useDevportalEventBus();\n  const tr = useTr();\n  const createPerm = useDevportalPermission(\n    DEVPORTAL_PERMISSIONS.WEBHOOK_CREATE,\n  );\n\n  const applications = useMemo(\n    () =>\n      appsData?.applications?.edges\n        ?.map(\n          (edge: GetApplicationsQuery[\"applications\"][\"edges\"][number]) =>\n            edge.node,\n        )\n        .map((application: ApplicationOption) => ({\n          id: application.id,\n          name: application.name,\n          slug: application.slug,\n        })) ?? [],\n    [appsData?.applications?.edges],\n  );\n\n  const selectedApplication = applications.find(\n    (application: { id: string; name: string; slug: string }) =>\n      application.id === formData.applicationId,\n  );\n\n  const handleChange = <K extends keyof CreateWebhookFormState>(\n    key: K,\n    value: CreateWebhookFormState[K],\n  ) => {\n    setFormData((previous) => ({\n      ...previous,\n      [key]: value,\n    }));\n    setErrors((previous) => {\n      if (!previous[key as string]) return previous;\n      const nextErrors = { ...previous };\n      delete nextErrors[key as string];\n      return nextErrors;\n    });\n  };\n\n  const toggleEvent = (event: string) => {\n    setFormData((previous) => ({\n      ...previous,\n      events: previous.events.includes(event)\n        ? previous.events.filter((value) => value !== event)\n        : [...previous.events, event],\n    }));\n  };\n\n  const toggleCategory = (events: readonly string[]) => {\n    const allSelected = events.every((event) =>\n      formData.events.includes(event),\n    );\n\n    setFormData((previous) => ({\n      ...previous,\n      events: allSelected\n        ? previous.events.filter((event) => !events.includes(event))\n        : [...new Set([...previous.events, ...events])],\n    }));\n  };\n\n  const validate = (): boolean => {\n    const nextErrors: Record<string, string> = {};\n\n    if (!formData.applicationId) {\n      nextErrors.applicationId = tr(\n        \"devportal.createWebhook.errors.appRequired\",\n        \"Select an application\",\n      );\n    }\n    if (!formData.name.trim()) {\n      nextErrors.name = tr(\n        \"devportal.createWebhook.errors.nameRequired\",\n        \"Name is required\",\n      );\n    }\n    if (!formData.url.trim()) {\n      nextErrors.url = tr(\n        \"devportal.createWebhook.errors.urlRequired\",\n        \"Endpoint URL is required\",\n      );\n    } else if (!/^https:\\/\\//i.test(formData.url)) {\n      nextErrors.url = tr(\n        \"devportal.createWebhook.errors.urlHttps\",\n        \"Endpoint URL must use HTTPS\",\n      );\n    }\n    if (formData.events.length === 0) {\n      nextErrors.events = tr(\n        \"devportal.createWebhook.errors.eventsRequired\",\n        \"Select at least one event\",\n      );\n    }\n    if (\n      formData.retryEnabled &&\n      (formData.maxRetries < 1 || formData.maxRetries > 10)\n    ) {\n      nextErrors.maxRetries = tr(\n        \"devportal.createWebhook.errors.retriesRange\",\n        \"Retry count must be between 1 and 10\",\n      );\n    }\n\n    setErrors(nextErrors);\n    return Object.keys(nextErrors).length === 0;\n  };\n\n  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setSubmitError(null);\n\n    if (!validate()) return;\n\n    try {\n      const result = await createWebhook({\n        variables: {\n          applicationId: formData.applicationId,\n          input: {\n            name: formData.name.trim(),\n            description: formData.description.trim() || undefined,\n            url: formData.url.trim(),\n            events: formData.events,\n            retryEnabled: formData.retryEnabled,\n            maxRetries: formData.retryEnabled ? formData.maxRetries : 0,\n          },\n        },\n      });\n\n      const createdWebhook = result.data?.createWebhook;\n      if (!createdWebhook?.id) {\n        throw new Error(\n          tr(\n            \"devportal.createWebhook.errors.noId\",\n            \"Webhook creation did not return an identifier\",\n          ),\n        );\n      }\n\n      bus.emit(\"devportal.webhook.created\", {\n        webhookId: createdWebhook.id,\n        applicationId: formData.applicationId,\n      });\n\n      navigate?.(\n        `${basePath}/apps/${formData.applicationId}/webhooks/${createdWebhook.id}`,\n      );\n    } catch (error) {\n      setSubmitError(\n        error instanceof Error\n          ? error.message\n          : tr(\n              \"devportal.createWebhook.errors.createFailed\",\n              \"Failed to create webhook\",\n            ),\n      );\n    }\n  };\n\n  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.WEBHOOK_CREATE}>\n      <PageLayout\n        title={tr(\"devportal.createWebhook.title\", \"Create Webhook\")}\n        description={tr(\n          \"devportal.createWebhook.description\",\n          \"Set up a real webhook endpoint to receive platform events through the public gateway\",\n        )}\n        backLink={\n          formData.applicationId\n            ? `/apps/${formData.applicationId}/webhooks`\n            : \"/webhooks\"\n        }\n        backLabel={tr(\"devportal.createWebhook.back\", \"Back to Webhooks\")}\n      >\n        <form onSubmit={handleSubmit} className=\"space-y-6\">\n          <Alert variant=\"info\">\n            {tr(\n              \"devportal.createWebhook.info\",\n              \"Webhook deliveries are signed and sent through the public global gateway. Use an HTTPS endpoint that accepts POST requests and returns a 2xx response for successful deliveries.\",\n            )}\n          </Alert>\n\n          {submitError && <Alert variant=\"error\">{submitError}</Alert>}\n          {appsError && !appId && (\n            <Alert variant=\"error\">{getErrorMessage(appsError)}</Alert>\n          )}\n\n          <PageSection\n            title={tr(\"devportal.createWebhook.basicInfo\", \"Basic Information\")}\n          >\n            <div className=\"space-y-4 rounded-lg border bg-card p-4\">\n              {!appId && (\n                <label className=\"grid gap-2 text-sm font-medium\">\n                  <span>\n                    {tr(\"devportal.createWebhook.application\", \"Application\")}\n                  </span>\n                  <select\n                    value={formData.applicationId}\n                    onChange={(changeEvent) =>\n                      handleChange(\"applicationId\", changeEvent.target.value)\n                    }\n                    disabled={appsLoading}\n                    aria-label={tr(\n                      \"devportal.createWebhook.application\",\n                      \"Application\",\n                    )}\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=\"\">\n                      {tr(\n                        \"devportal.createWebhook.errors.appRequired\",\n                        \"Select an application\",\n                      )}\n                    </option>\n                    {applications.map(\n                      (application: { id: string; name: string }) => (\n                        <option key={application.id} value={application.id}>\n                          {application.name}\n                        </option>\n                      ),\n                    )}\n                  </select>\n                  {errors.applicationId && (\n                    <span className=\"text-sm text-status-error-text\">\n                      {errors.applicationId}\n                    </span>\n                  )}\n                </label>\n              )}\n\n              {appsLoading && !appId && (\n                <div\n                  className=\"flex items-center gap-2 text-sm text-muted-foreground\"\n                  role=\"status\"\n                  aria-live=\"polite\"\n                >\n                  <Loader2\n                    className=\"h-4 w-4 animate-spin\"\n                    aria-hidden=\"true\"\n                  />\n                  {tr(\n                    \"devportal.createWebhook.loadingApps\",\n                    \"Loading applications...\",\n                  )}\n                </div>\n              )}\n\n              {selectedApplication && (\n                <div className=\"rounded-md border bg-muted/40 px-3 py-2 text-sm text-muted-foreground\">\n                  {tr(\n                    \"devportal.createWebhook.creatingFor\",\n                    \"Creating webhook for\",\n                  )}{\" \"}\n                  <span className=\"font-medium text-foreground\">\n                    {selectedApplication.name}\n                  </span>\n                </div>\n              )}\n\n              <InputField\n                label={tr(\n                  \"devportal.createWebhook.webhookName\",\n                  \"Webhook Name\",\n                )}\n                value={formData.name}\n                onChange={(changeEvent) =>\n                  handleChange(\"name\", changeEvent.target.value)\n                }\n                placeholder={tr(\n                  \"devportal.createWebhook.webhookNamePlaceholder\",\n                  \"Production webhook\",\n                )}\n                error={errors.name}\n                required\n              />\n\n              <TextareaField\n                label={tr(\n                  \"devportal.createWebhook.descriptionLabel\",\n                  \"Description\",\n                )}\n                value={formData.description}\n                onChange={(changeEvent) =>\n                  handleChange(\"description\", changeEvent.target.value)\n                }\n                placeholder={tr(\n                  \"devportal.createWebhook.descriptionPlaceholder\",\n                  \"What this webhook is used for\",\n                )}\n                rows={2}\n              />\n\n              <InputField\n                label={tr(\n                  \"devportal.createWebhook.endpointUrl\",\n                  \"Endpoint URL\",\n                )}\n                type=\"url\"\n                value={formData.url}\n                onChange={(changeEvent) =>\n                  handleChange(\"url\", changeEvent.target.value)\n                }\n                placeholder=\"https://your-app.example.com/webhooks/burdenoff\"\n                hint={tr(\"devportal.createWebhook.httpsOnly\", \"HTTPS only\")}\n                error={errors.url}\n                required\n              />\n            </div>\n          </PageSection>\n\n          <PageSection\n            title={tr(\n              \"devportal.createWebhook.subscribedEvents\",\n              \"Subscribed Events\",\n            )}\n          >\n            <div className=\"space-y-4 rounded-lg border bg-card p-4\">\n              {errors.events && (\n                <p className=\"text-sm text-status-error-text\" role=\"alert\">\n                  {errors.events}\n                </p>\n              )}\n              {Object.entries(eventCategories).map(([category, events]) => (\n                <section\n                  key={category}\n                  className=\"space-y-3 border-b pb-4 last:border-b-0 last:pb-0\"\n                >\n                  <div className=\"flex items-center justify-between gap-3\">\n                    <h3 className=\"font-medium\">\n                      {tr(\n                        `devportal.createWebhook.category.${category.toLowerCase()}`,\n                        category,\n                      )}\n                    </h3>\n                    <button\n                      type=\"button\"\n                      onClick={() => toggleCategory(events)}\n                      className=\"text-xs font-medium text-primary hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n                    >\n                      {events.every((item) => formData.events.includes(item))\n                        ? tr(\n                            \"devportal.createWebhook.deselectAll\",\n                            \"Deselect all\",\n                          )\n                        : tr(\"devportal.createWebhook.selectAll\", \"Select all\")}\n                    </button>\n                  </div>\n                  <div className=\"grid gap-2 sm:grid-cols-2\">\n                    {events.map((eventName) => (\n                      <label\n                        key={eventName}\n                        className=\"flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          checked={formData.events.includes(eventName)}\n                          onChange={() => toggleEvent(eventName)}\n                          className=\"rounded border-border-default text-primary focus:ring-primary\"\n                          aria-label={eventName}\n                        />\n                        <code className=\"text-xs text-foreground\">\n                          {eventName}\n                        </code>\n                      </label>\n                    ))}\n                  </div>\n                </section>\n              ))}\n            </div>\n          </PageSection>\n\n          <PageSection\n            title={tr(\n              \"devportal.createWebhook.retrySettings\",\n              \"Retry Settings\",\n            )}\n          >\n            <div className=\"space-y-4 rounded-lg border bg-card p-4\">\n              <CheckboxField\n                label={tr(\n                  \"devportal.createWebhook.enableRetries\",\n                  \"Enable retries\",\n                )}\n                description={tr(\n                  \"devportal.createWebhook.enableRetriesDesc\",\n                  \"Retry failed deliveries automatically\",\n                )}\n                checked={formData.retryEnabled}\n                onChange={(changeEvent) =>\n                  handleChange(\"retryEnabled\", changeEvent.target.checked)\n                }\n              />\n\n              {formData.retryEnabled && (\n                <InputField\n                  label={tr(\n                    \"devportal.createWebhook.maxRetries\",\n                    \"Maximum retries\",\n                  )}\n                  type=\"number\"\n                  value={formData.maxRetries}\n                  onChange={(changeEvent) =>\n                    handleChange(\"maxRetries\", Number(changeEvent.target.value))\n                  }\n                  min={1}\n                  max={10}\n                  hint={tr(\n                    \"devportal.createWebhook.attemptsHint\",\n                    \"1 to 10 attempts\",\n                  )}\n                  error={errors.maxRetries}\n                />\n              )}\n            </div>\n          </PageSection>\n\n          <div className=\"flex flex-col gap-3 sm:flex-row\">\n            <button\n              type=\"button\"\n              onClick={() =>\n                navigate?.(\n                  `${basePath}${formData.applicationId ? `/apps/${formData.applicationId}/webhooks` : \"/webhooks\"}`,\n                )\n              }\n              className=\"rounded-md border px-4 py-2 text-sm font-medium hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n            >\n              {tr(\"devportal.common.cancel\", \"Cancel\")}\n            </button>\n            <button\n              type=\"submit\"\n              disabled={isSubmitting || appsLoading || !createPerm.allowed}\n              aria-disabled={isSubmitting || appsLoading || !createPerm.allowed}\n              title={\n                !createPerm.allowed\n                  ? tr(\n                      \"devportal.common.noPermission\",\n                      \"You do not have permission to perform this action\",\n                    )\n                  : undefined\n              }\n              className=\"inline-flex items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n            >\n              {isSubmitting ? (\n                <Loader2 className=\"h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n              ) : (\n                <Webhook size={16} aria-hidden=\"true\" />\n              )}\n              {isSubmitting\n                ? tr(\"devportal.createWebhook.creating\", \"Creating...\")\n                : tr(\"devportal.createWebhook.title\", \"Create Webhook\")}\n            </button>\n          </div>\n        </form>\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CreateWebhookPage.js","names":[],"sources":["../../../src/devportal/pages/CreateWebhookPage.tsx"],"sourcesContent":["import type { FC, FormEvent } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport { Loader2, Webhook } from \"lucide-react\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport {\n  InputField,\n  TextareaField,\n  CheckboxField,\n} from \"../components/FormField\";\nimport { Alert } from \"../components/ConfirmDialog\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport { useDevportalEventBus } from \"../events\";\nimport { WEBHOOK_EVENTS } from \"../types\";\nimport {\n  type GetApplicationsQuery,\n  getErrorMessage,\n  useCreateWebhookMutation,\n  useGetApplicationQuery,\n  useGetApplicationsQuery,\n  useDevportalPermission,\n} from \"../hooks\";\nimport { useTr } from \"../utils/i18n\";\n\nconst eventCategories = {\n  Application: WEBHOOK_EVENTS.filter((event) =>\n    event.startsWith(\"application.\"),\n  ),\n  Installation: WEBHOOK_EVENTS.filter((event) =>\n    event.startsWith(\"installation.\"),\n  ),\n  User: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"user.\")),\n  Workspace: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"workspace.\")),\n  Project: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"project.\")),\n  Task: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"task.\")),\n  Comment: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"comment.\")),\n  File: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"file.\")),\n  Member: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"member.\")),\n};\n\ninterface CreateWebhookFormState {\n  applicationId: string;\n  name: string;\n  description: string;\n  url: string;\n  events: string[];\n  retryEnabled: boolean;\n  maxRetries: number;\n}\n\ntype ApplicationOption =\n  GetApplicationsQuery[\"applications\"][\"edges\"][number][\"node\"];\n\nexport const CreateWebhookPage: FC = () => {\n  const { appId } = useParams<{ appId: string }>();\n  const { navigate, basePath } = useDevportal();\n  const [formData, setFormData] = useState<CreateWebhookFormState>({\n    applicationId: appId || \"\",\n    name: \"\",\n    description: \"\",\n    url: \"\",\n    events: [],\n    retryEnabled: true,\n    maxRetries: 3,\n  });\n  const [errors, setErrors] = useState<Record<string, string>>({});\n  const [submitError, setSubmitError] = useState<string | null>(null);\n\n  const { data: singleAppData } = useGetApplicationQuery({\n    variables: { id: appId ?? \"\" },\n    skip: !appId,\n    fetchPolicy: \"cache-first\",\n  });\n\n  useEffect(() => {\n    const name = singleAppData?.application?.name;\n    if (!appId || !name) return;\n    const reg = (\n      window as unknown as {\n        __breadcrumbRegistry?: {\n          register: (id: string, name: string) => void;\n          unregister: (id: string) => void;\n        };\n      }\n    ).__breadcrumbRegistry;\n    reg?.register(appId, name);\n    return () => reg?.unregister(appId);\n  }, [appId, singleAppData?.application?.name]);\n\n  const {\n    data: appsData,\n    loading: appsLoading,\n    error: appsError,\n  } = useGetApplicationsQuery({\n    variables: { limit: 100 },\n    skip: !!appId,\n    fetchPolicy: \"cache-and-network\",\n  });\n  const [createWebhook, { loading: isSubmitting }] = useCreateWebhookMutation();\n  const bus = useDevportalEventBus();\n  const tr = useTr();\n  const createPerm = useDevportalPermission(\n    DEVPORTAL_PERMISSIONS.WEBHOOK_CREATE,\n  );\n\n  const applications = useMemo(\n    () =>\n      appsData?.applications?.edges\n        ?.map(\n          (edge: GetApplicationsQuery[\"applications\"][\"edges\"][number]) =>\n            edge.node,\n        )\n        .map((application: ApplicationOption) => ({\n          id: application.id,\n          name: application.name,\n          slug: application.slug,\n        })) ?? [],\n    [appsData?.applications?.edges],\n  );\n\n  const selectedApplication = applications.find(\n    (application: { id: string; name: string; slug: string }) =>\n      application.id === formData.applicationId,\n  );\n\n  const handleChange = <K extends keyof CreateWebhookFormState>(\n    key: K,\n    value: CreateWebhookFormState[K],\n  ) => {\n    setFormData((previous) => ({\n      ...previous,\n      [key]: value,\n    }));\n    setErrors((previous) => {\n      if (!previous[key as string]) return previous;\n      const nextErrors = { ...previous };\n      delete nextErrors[key as string];\n      return nextErrors;\n    });\n  };\n\n  const toggleEvent = (event: string) => {\n    setFormData((previous) => ({\n      ...previous,\n      events: previous.events.includes(event)\n        ? previous.events.filter((value) => value !== event)\n        : [...previous.events, event],\n    }));\n  };\n\n  const toggleCategory = (events: readonly string[]) => {\n    const allSelected = events.every((event) =>\n      formData.events.includes(event),\n    );\n\n    setFormData((previous) => ({\n      ...previous,\n      events: allSelected\n        ? previous.events.filter((event) => !events.includes(event))\n        : [...new Set([...previous.events, ...events])],\n    }));\n  };\n\n  const validate = (): boolean => {\n    const nextErrors: Record<string, string> = {};\n\n    if (!formData.applicationId) {\n      nextErrors.applicationId = tr(\n        \"devportal.createWebhook.errors.appRequired\",\n        \"Select an application\",\n      );\n    }\n    if (!formData.name.trim()) {\n      nextErrors.name = tr(\n        \"devportal.createWebhook.errors.nameRequired\",\n        \"Name is required\",\n      );\n    }\n    if (!formData.url.trim()) {\n      nextErrors.url = tr(\n        \"devportal.createWebhook.errors.urlRequired\",\n        \"Endpoint URL is required\",\n      );\n    } else if (!/^https:\\/\\//i.test(formData.url)) {\n      nextErrors.url = tr(\n        \"devportal.createWebhook.errors.urlHttps\",\n        \"Endpoint URL must use HTTPS\",\n      );\n    }\n    if (formData.events.length === 0) {\n      nextErrors.events = tr(\n        \"devportal.createWebhook.errors.eventsRequired\",\n        \"Select at least one event\",\n      );\n    }\n    if (\n      formData.retryEnabled &&\n      (formData.maxRetries < 1 || formData.maxRetries > 10)\n    ) {\n      nextErrors.maxRetries = tr(\n        \"devportal.createWebhook.errors.retriesRange\",\n        \"Retry count must be between 1 and 10\",\n      );\n    }\n\n    setErrors(nextErrors);\n    return Object.keys(nextErrors).length === 0;\n  };\n\n  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setSubmitError(null);\n\n    if (!validate()) return;\n\n    try {\n      const result = await createWebhook({\n        variables: {\n          applicationId: formData.applicationId,\n          input: {\n            name: formData.name.trim(),\n            description: formData.description.trim() || undefined,\n            url: formData.url.trim(),\n            events: formData.events,\n            retryEnabled: formData.retryEnabled,\n            maxRetries: formData.retryEnabled ? formData.maxRetries : 0,\n          },\n        },\n      });\n\n      const createdWebhook = result.data?.createWebhook;\n      if (!createdWebhook?.id) {\n        throw new Error(\n          tr(\n            \"devportal.createWebhook.errors.noId\",\n            \"Webhook creation did not return an identifier\",\n          ),\n        );\n      }\n\n      bus.emit(\"devportal.webhook.created\", {\n        webhookId: createdWebhook.id,\n        applicationId: formData.applicationId,\n      });\n\n      navigate?.(\n        `${basePath}/apps/${formData.applicationId}/webhooks/${createdWebhook.id}`,\n      );\n    } catch (error) {\n      setSubmitError(\n        error instanceof Error\n          ? error.message\n          : tr(\n              \"devportal.createWebhook.errors.createFailed\",\n              \"Failed to create webhook\",\n            ),\n      );\n    }\n  };\n\n  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.WEBHOOK_CREATE}>\n      <PageLayout\n        title={tr(\"devportal.createWebhook.title\", \"Create Webhook\")}\n        description={tr(\n          \"devportal.createWebhook.description\",\n          \"Set up a real webhook endpoint to receive platform events through the public gateway\",\n        )}\n        backLink={\n          formData.applicationId\n            ? `/apps/${formData.applicationId}/webhooks`\n            : \"/webhooks\"\n        }\n        backLabel={tr(\"devportal.createWebhook.back\", \"Back to Webhooks\")}\n      >\n        <form onSubmit={handleSubmit} className=\"space-y-6\">\n          <Alert variant=\"info\">\n            {tr(\n              \"devportal.createWebhook.info\",\n              \"Webhook deliveries are signed and sent through the public global gateway. Use an HTTPS endpoint that accepts POST requests and returns a 2xx response for successful deliveries.\",\n            )}\n          </Alert>\n\n          {submitError && <Alert variant=\"error\">{submitError}</Alert>}\n          {appsError && !appId && (\n            <Alert variant=\"error\">{getErrorMessage(appsError)}</Alert>\n          )}\n\n          <PageSection\n            title={tr(\"devportal.createWebhook.basicInfo\", \"Basic Information\")}\n          >\n            <div className=\"space-y-4 rounded-lg border bg-bg-surface p-4\">\n              {!appId && (\n                <label className=\"grid gap-2 text-sm font-medium\">\n                  <span>\n                    {tr(\"devportal.createWebhook.application\", \"Application\")}\n                  </span>\n                  <select\n                    value={formData.applicationId}\n                    onChange={(changeEvent) =>\n                      handleChange(\"applicationId\", changeEvent.target.value)\n                    }\n                    disabled={appsLoading}\n                    aria-label={tr(\n                      \"devportal.createWebhook.application\",\n                      \"Application\",\n                    )}\n                    className=\"rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n                  >\n                    <option value=\"\">\n                      {tr(\n                        \"devportal.createWebhook.errors.appRequired\",\n                        \"Select an application\",\n                      )}\n                    </option>\n                    {applications.map(\n                      (application: { id: string; name: string }) => (\n                        <option key={application.id} value={application.id}>\n                          {application.name}\n                        </option>\n                      ),\n                    )}\n                  </select>\n                  {errors.applicationId && (\n                    <span className=\"text-sm text-status-error-text\">\n                      {errors.applicationId}\n                    </span>\n                  )}\n                </label>\n              )}\n\n              {appsLoading && !appId && (\n                <div\n                  className=\"flex items-center gap-2 text-sm text-text-secondary\"\n                  role=\"status\"\n                  aria-live=\"polite\"\n                >\n                  <Loader2\n                    className=\"h-4 w-4 animate-spin\"\n                    aria-hidden=\"true\"\n                  />\n                  {tr(\n                    \"devportal.createWebhook.loadingApps\",\n                    \"Loading applications...\",\n                  )}\n                </div>\n              )}\n\n              {selectedApplication && (\n                <div className=\"rounded-md border bg-bg-sunken/40 px-3 py-2 text-sm text-text-secondary\">\n                  {tr(\n                    \"devportal.createWebhook.creatingFor\",\n                    \"Creating webhook for\",\n                  )}{\" \"}\n                  <span className=\"font-medium text-text-primary\">\n                    {selectedApplication.name}\n                  </span>\n                </div>\n              )}\n\n              <InputField\n                label={tr(\n                  \"devportal.createWebhook.webhookName\",\n                  \"Webhook Name\",\n                )}\n                value={formData.name}\n                onChange={(changeEvent) =>\n                  handleChange(\"name\", changeEvent.target.value)\n                }\n                placeholder={tr(\n                  \"devportal.createWebhook.webhookNamePlaceholder\",\n                  \"Production webhook\",\n                )}\n                error={errors.name}\n                required\n              />\n\n              <TextareaField\n                label={tr(\n                  \"devportal.createWebhook.descriptionLabel\",\n                  \"Description\",\n                )}\n                value={formData.description}\n                onChange={(changeEvent) =>\n                  handleChange(\"description\", changeEvent.target.value)\n                }\n                placeholder={tr(\n                  \"devportal.createWebhook.descriptionPlaceholder\",\n                  \"What this webhook is used for\",\n                )}\n                rows={2}\n              />\n\n              <InputField\n                label={tr(\n                  \"devportal.createWebhook.endpointUrl\",\n                  \"Endpoint URL\",\n                )}\n                type=\"url\"\n                value={formData.url}\n                onChange={(changeEvent) =>\n                  handleChange(\"url\", changeEvent.target.value)\n                }\n                placeholder=\"https://your-app.example.com/webhooks/burdenoff\"\n                hint={tr(\"devportal.createWebhook.httpsOnly\", \"HTTPS only\")}\n                error={errors.url}\n                required\n              />\n            </div>\n          </PageSection>\n\n          <PageSection\n            title={tr(\n              \"devportal.createWebhook.subscribedEvents\",\n              \"Subscribed Events\",\n            )}\n          >\n            <div className=\"space-y-4 rounded-lg border bg-bg-surface p-4\">\n              {errors.events && (\n                <p className=\"text-sm text-status-error-text\" role=\"alert\">\n                  {errors.events}\n                </p>\n              )}\n              {Object.entries(eventCategories).map(([category, events]) => (\n                <section\n                  key={category}\n                  className=\"space-y-3 border-b pb-4 last:border-b-0 last:pb-0\"\n                >\n                  <div className=\"flex items-center justify-between gap-3\">\n                    <h3 className=\"font-medium\">\n                      {tr(\n                        `devportal.createWebhook.category.${category.toLowerCase()}`,\n                        category,\n                      )}\n                    </h3>\n                    <button\n                      type=\"button\"\n                      onClick={() => toggleCategory(events)}\n                      className=\"text-xs font-medium text-primary hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n                    >\n                      {events.every((item) => formData.events.includes(item))\n                        ? tr(\n                            \"devportal.createWebhook.deselectAll\",\n                            \"Deselect all\",\n                          )\n                        : tr(\"devportal.createWebhook.selectAll\", \"Select all\")}\n                    </button>\n                  </div>\n                  <div className=\"grid gap-2 sm:grid-cols-2\">\n                    {events.map((eventName) => (\n                      <label\n                        key={eventName}\n                        className=\"flex items-center gap-2 rounded-md border bg-bg-surface px-3 py-2 text-sm\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          checked={formData.events.includes(eventName)}\n                          onChange={() => toggleEvent(eventName)}\n                          className=\"rounded border-border-default text-primary focus:ring-primary\"\n                          aria-label={eventName}\n                        />\n                        <code className=\"text-xs text-text-primary\">\n                          {eventName}\n                        </code>\n                      </label>\n                    ))}\n                  </div>\n                </section>\n              ))}\n            </div>\n          </PageSection>\n\n          <PageSection\n            title={tr(\n              \"devportal.createWebhook.retrySettings\",\n              \"Retry Settings\",\n            )}\n          >\n            <div className=\"space-y-4 rounded-lg border bg-bg-surface p-4\">\n              <CheckboxField\n                label={tr(\n                  \"devportal.createWebhook.enableRetries\",\n                  \"Enable retries\",\n                )}\n                description={tr(\n                  \"devportal.createWebhook.enableRetriesDesc\",\n                  \"Retry failed deliveries automatically\",\n                )}\n                checked={formData.retryEnabled}\n                onChange={(changeEvent) =>\n                  handleChange(\"retryEnabled\", changeEvent.target.checked)\n                }\n              />\n\n              {formData.retryEnabled && (\n                <InputField\n                  label={tr(\n                    \"devportal.createWebhook.maxRetries\",\n                    \"Maximum retries\",\n                  )}\n                  type=\"number\"\n                  value={formData.maxRetries}\n                  onChange={(changeEvent) =>\n                    handleChange(\"maxRetries\", Number(changeEvent.target.value))\n                  }\n                  min={1}\n                  max={10}\n                  hint={tr(\n                    \"devportal.createWebhook.attemptsHint\",\n                    \"1 to 10 attempts\",\n                  )}\n                  error={errors.maxRetries}\n                />\n              )}\n            </div>\n          </PageSection>\n\n          <div className=\"flex flex-col gap-3 sm:flex-row\">\n            <button\n              type=\"button\"\n              onClick={() =>\n                navigate?.(\n                  `${basePath}${formData.applicationId ? `/apps/${formData.applicationId}/webhooks` : \"/webhooks\"}`,\n                )\n              }\n              className=\"rounded-md border px-4 py-2 text-sm font-medium hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n            >\n              {tr(\"devportal.common.cancel\", \"Cancel\")}\n            </button>\n            <button\n              type=\"submit\"\n              disabled={isSubmitting || appsLoading || !createPerm.allowed}\n              aria-disabled={isSubmitting || appsLoading || !createPerm.allowed}\n              title={\n                !createPerm.allowed\n                  ? tr(\n                      \"devportal.common.noPermission\",\n                      \"You do not have permission to perform this action\",\n                    )\n                  : undefined\n              }\n              className=\"inline-flex items-center justify-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n            >\n              {isSubmitting ? (\n                <Loader2 className=\"h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n              ) : (\n                <Webhook size={16} aria-hidden=\"true\" />\n              )}\n              {isSubmitting\n                ? tr(\"devportal.createWebhook.creating\", \"Creating...\")\n                : tr(\"devportal.createWebhook.title\", \"Create Webhook\")}\n            </button>\n          </div>\n        </form>\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n"],"mappings":"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"}

package/dist/devportal/pages/DashboardPage.js

@@ -54,12 +54,12 @@ var E = () => {
 			actions: z ? /* @__PURE__ */ T("button", {
 				"data-tour": "devportal-dashboard-create-app-button",
 				onClick: () => L("/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",
+				className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
 				children: [/* @__PURE__ */ w(y, { size: 16 }), j("devportal.createApp", "Create App")]
 			}) : R ? null : /* @__PURE__ */ T("button", {
 				"data-tour": "devportal-dashboard-create-org-button",
 				onClick: () => L("/organizations/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",
+				className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
 				children: [/* @__PURE__ */ w(y, { size: 16 }), j("devportal.createOrganization", "Create Organization")]
 			}),
 			children: [
@@ -143,7 +143,7 @@ var E = () => {
 						}),
 						children: R ? /* @__PURE__ */ w("div", {
 							className: "flex items-center justify-center py-8",
-							children: /* @__PURE__ */ w(v, { className: "h-6 w-6 animate-spin text-muted-foreground" })
+							children: /* @__PURE__ */ w(v, { className: "h-6 w-6 animate-spin text-text-secondary" })
 						}) : F.length > 0 ? /* @__PURE__ */ w("div", {
 							className: "space-y-2",
 							children: F.slice(0, 3).map((e) => /* @__PURE__ */ w(s, {
@@ -156,11 +156,11 @@ var E = () => {
 							description: z ? j("devportal.createFirstApplicationToGetStarted", "Create your first application to get started") : j("devportal.createOrgFirstToPublishApps", "Create an organization first to start publishing apps"),
 							action: z ? /* @__PURE__ */ T("button", {
 								onClick: () => L("/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",
+								className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
 								children: [/* @__PURE__ */ w(y, { size: 16 }), j("devportal.createApp", "Create App")]
 							}) : /* @__PURE__ */ T("button", {
 								onClick: () => L("/organizations/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",
+								className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
 								children: [/* @__PURE__ */ w(y, { size: 16 }), j("devportal.createOrganization", "Create Organization")]
 							})
 						})
@@ -209,7 +209,7 @@ var E = () => {
 					title: j("devportal.yourOrganizations", "Your Organizations"),
 					children: /* @__PURE__ */ w("div", {
 						className: "flex items-center justify-center py-8",
-						children: /* @__PURE__ */ w(v, { className: "h-6 w-6 animate-spin text-muted-foreground" })
+						children: /* @__PURE__ */ w(v, { className: "h-6 w-6 animate-spin text-text-secondary" })
 					})
 				}) : P.length > 0 ? /* @__PURE__ */ w(i, {
 					title: j("devportal.yourOrganizations", "Your Organizations"),
@@ -235,15 +235,15 @@ var E = () => {
 	});
 }, D = ({ title: e, description: t, icon: n, onClick: r, primary: i }) => /* @__PURE__ */ T("button", {
 	onClick: r,
-	className: ["flex items-center gap-4 rounded-lg border p-4 text-left transition-colors", i ? "border-primary bg-primary/5 hover:bg-primary/10" : "bg-card hover:bg-accent"].join(" "),
+	className: ["flex items-center gap-4 rounded-lg border p-4 text-left transition-colors", i ? "border-primary bg-action-primary-bg/5 hover:bg-action-primary-bg/10" : "bg-bg-surface hover:bg-accent"].join(" "),
 	children: [/* @__PURE__ */ w("div", {
-		className: ["rounded-lg p-2", i ? "bg-primary/20 text-primary" : "bg-primary/10 text-primary"].join(" "),
+		className: ["rounded-lg p-2", i ? "bg-action-primary-bg/20 text-primary" : "bg-action-primary-bg/10 text-primary"].join(" "),
 		children: n
 	}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 		className: "font-medium",
 		children: e
 	}), /* @__PURE__ */ w("p", {
-		className: "text-sm text-muted-foreground",
+		className: "text-sm text-text-secondary",
 		children: t
 	})] })]
 }), O = ({ org: e, onClick: t }) => {
@@ -253,7 +253,7 @@ var E = () => {
 	};
 	return /* @__PURE__ */ T("button", {
 		onClick: t,
-		className: "rounded-lg border bg-card p-4 text-left hover:bg-accent transition-colors",
+		className: "rounded-lg border bg-bg-surface p-4 text-left hover:bg-accent transition-colors",
 		children: [/* @__PURE__ */ T("div", {
 			className: "flex items-center gap-3",
 			children: [e.logoUrl ? /* @__PURE__ */ w("img", {
@@ -261,7 +261,7 @@ var E = () => {
 				alt: e.name,
 				className: "h-10 w-10 rounded-lg object-cover"
 			}) : /* @__PURE__ */ w("div", {
-				className: "flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary",
+				className: "flex h-10 w-10 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary",
 				children: /* @__PURE__ */ w(h, { size: 20 })
 			}), /* @__PURE__ */ T("div", {
 				className: "flex-1 min-w-0",
@@ -269,7 +269,7 @@ var E = () => {
 					className: "font-medium truncate",
 					children: e.name
 				}), /* @__PURE__ */ T("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: [
 						e.publishedApps,
 						" ",
@@ -278,7 +278,7 @@ var E = () => {
 				})]
 			})]
 		}), /* @__PURE__ */ T("div", {
-			className: "mt-3 flex gap-4 text-sm text-muted-foreground",
+			className: "mt-3 flex gap-4 text-sm text-text-secondary",
 			children: [/* @__PURE__ */ T("span", { children: [
 				(e.totalInstalls || 0).toLocaleString(),
 				" ",

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 { useEffect } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n  AppWindow,\n  Building2,\n  Key,\n  Webhook,\n  TrendingUp,\n  Users,\n  DollarSign,\n  Activity,\n  Plus,\n  ArrowRight,\n  Loader2,\n  Store,\n} from \"lucide-react\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { StatCard, StatCardGrid } from \"../components/StatCard\";\nimport { AppListItem } from \"../components/AppCard\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type { Application, DeveloperOrganization } from \"../types\";\nimport {\n  useGetDevportalDashboardBootstrapQuery,\n  type OrganizationFieldsFragment,\n  type ApplicationFieldsFragment,\n} from \"../hooks\";\n\n/**\n * Developer Portal Dashboard Page\n *\n * Shows an overview of the developer's applications, organizations,\n * and key metrics using real data from the GraphQL API.\n */\nexport const DashboardPage: FC = () => {\n  const { navigate, basePath } = useDevportal();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  // Fetch dashboard bootstrap in a single global query\n  const { data, loading } = useGetDevportalDashboardBootstrapQuery({\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const organizations: OrganizationFieldsFragment[] =\n    data?.myDeveloperOrganizations ?? [];\n\n  // First-time users: redirect to setup wizard when no org exists and they\n  // haven't already dismissed the wizard in this browser.\n  useEffect(() => {\n    if (loading || !data) return;\n    if (organizations.length > 0) return;\n    try {\n      if (localStorage.getItem(\"devportal_setup_dismissed\")) return;\n    } catch {\n      // localStorage unavailable — don't redirect\n      return;\n    }\n    navigate?.(`${basePath}/setup`);\n  }, [loading, data, organizations.length, navigate, basePath]);\n  const applications: ApplicationFieldsFragment[] =\n    data?.applications?.edges?.map(\n      (e: { node: ApplicationFieldsFragment }) => e.node,\n    ) ?? [];\n\n  // Calculate aggregate stats\n  const stats = {\n    totalApps: data?.applications?.totalCount ?? 0,\n    totalOrgs: organizations.length,\n    totalApiKeys: 0,\n    totalWebhooks: 0,\n    totalApiCalls: organizations.reduce(\n      (acc: number, org: OrganizationFieldsFragment) =>\n        acc + parseInt(org.totalApiCalls || \"0\"),\n      0,\n    ),\n    activeInstalls: organizations.reduce(\n      (acc: number, org: OrganizationFieldsFragment) =>\n        acc + (org.activeInstalls || 0),\n      0,\n    ),\n    monthlyRevenue: organizations.reduce(\n      (acc: number, org: OrganizationFieldsFragment) =>\n        acc + (org.totalRevenue || 0),\n      0,\n    ),\n    errorRate: 0,\n  };\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  const isLoading = loading;\n\n  const hasOrgs = !isLoading && organizations.length > 0;\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          hasOrgs ? (\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          ) : !isLoading ? (\n            <button\n              data-tour=\"devportal-dashboard-create-org-button\"\n              onClick={() => handleNavigate(\"/organizations/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.createOrganization\", \"Create Organization\")}\n            </button>\n          ) : null\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={\n                  hasOrgs\n                    ? tr(\n                        \"devportal.createFirstApplicationToGetStarted\",\n                        \"Create your first application to get started\",\n                      )\n                    : tr(\n                        \"devportal.createOrgFirstToPublishApps\",\n                        \"Create an organization first to start publishing apps\",\n                      )\n                }\n                action={\n                  hasOrgs ? (\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                    <button\n                      onClick={() => handleNavigate(\"/organizations/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(\n                        \"devportal.createOrganization\",\n                        \"Create Organization\",\n                      )}\n                    </button>\n                  )\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              {!hasOrgs ? (\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                  primary\n                />\n              ) : (\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              )}\n              {hasOrgs && (\n                <QuickActionCard\n                  title={tr(\"devportal.publisherProfile\", \"Publisher Profile\")}\n                  description={tr(\n                    \"devportal.manageYourStorePresence\",\n                    \"Manage your store publisher presence\",\n                  )}\n                  icon={<Store size={20} />}\n                  onClick={() => handleNavigate(\"/publisher/profile\")}\n                />\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  primary?: boolean;\n}> = ({ title, description, icon, onClick, primary }) => (\n  <button\n    onClick={onClick}\n    className={[\n      \"flex items-center gap-4 rounded-lg border p-4 text-left transition-colors\",\n      primary\n        ? \"border-primary bg-primary/5 hover:bg-primary/10\"\n        : \"bg-card hover:bg-accent\",\n    ].join(\" \")}\n  >\n    <div\n      className={[\n        \"rounded-lg p-2\",\n        primary ? \"bg-primary/20 text-primary\" : \"bg-primary/10 text-primary\",\n      ].join(\" \")}\n    >\n      {icon}\n    </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 { useEffect } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n  AppWindow,\n  Building2,\n  Key,\n  Webhook,\n  TrendingUp,\n  Users,\n  DollarSign,\n  Activity,\n  Plus,\n  ArrowRight,\n  Loader2,\n  Store,\n} from \"lucide-react\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { StatCard, StatCardGrid } from \"../components/StatCard\";\nimport { AppListItem } from \"../components/AppCard\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type { Application, DeveloperOrganization } from \"../types\";\nimport {\n  useGetDevportalDashboardBootstrapQuery,\n  type OrganizationFieldsFragment,\n  type ApplicationFieldsFragment,\n} from \"../hooks\";\n\n/**\n * Developer Portal Dashboard Page\n *\n * Shows an overview of the developer's applications, organizations,\n * and key metrics using real data from the GraphQL API.\n */\nexport const DashboardPage: FC = () => {\n  const { navigate, basePath } = useDevportal();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  // Fetch dashboard bootstrap in a single global query\n  const { data, loading } = useGetDevportalDashboardBootstrapQuery({\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const organizations: OrganizationFieldsFragment[] =\n    data?.myDeveloperOrganizations ?? [];\n\n  // First-time users: redirect to setup wizard when no org exists and they\n  // haven't already dismissed the wizard in this browser.\n  useEffect(() => {\n    if (loading || !data) return;\n    if (organizations.length > 0) return;\n    try {\n      if (localStorage.getItem(\"devportal_setup_dismissed\")) return;\n    } catch {\n      // localStorage unavailable — don't redirect\n      return;\n    }\n    navigate?.(`${basePath}/setup`);\n  }, [loading, data, organizations.length, navigate, basePath]);\n  const applications: ApplicationFieldsFragment[] =\n    data?.applications?.edges?.map(\n      (e: { node: ApplicationFieldsFragment }) => e.node,\n    ) ?? [];\n\n  // Calculate aggregate stats\n  const stats = {\n    totalApps: data?.applications?.totalCount ?? 0,\n    totalOrgs: organizations.length,\n    totalApiKeys: 0,\n    totalWebhooks: 0,\n    totalApiCalls: organizations.reduce(\n      (acc: number, org: OrganizationFieldsFragment) =>\n        acc + parseInt(org.totalApiCalls || \"0\"),\n      0,\n    ),\n    activeInstalls: organizations.reduce(\n      (acc: number, org: OrganizationFieldsFragment) =>\n        acc + (org.activeInstalls || 0),\n      0,\n    ),\n    monthlyRevenue: organizations.reduce(\n      (acc: number, org: OrganizationFieldsFragment) =>\n        acc + (org.totalRevenue || 0),\n      0,\n    ),\n    errorRate: 0,\n  };\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  const isLoading = loading;\n\n  const hasOrgs = !isLoading && organizations.length > 0;\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          hasOrgs ? (\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-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors\"\n            >\n              <Plus size={16} />\n              {tr(\"devportal.createApp\", \"Create App\")}\n            </button>\n          ) : !isLoading ? (\n            <button\n              data-tour=\"devportal-dashboard-create-org-button\"\n              onClick={() => handleNavigate(\"/organizations/new\")}\n              className=\"inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors\"\n            >\n              <Plus size={16} />\n              {tr(\"devportal.createOrganization\", \"Create Organization\")}\n            </button>\n          ) : null\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-text-secondary\" />\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={\n                  hasOrgs\n                    ? tr(\n                        \"devportal.createFirstApplicationToGetStarted\",\n                        \"Create your first application to get started\",\n                      )\n                    : tr(\n                        \"devportal.createOrgFirstToPublishApps\",\n                        \"Create an organization first to start publishing apps\",\n                      )\n                }\n                action={\n                  hasOrgs ? (\n                    <button\n                      onClick={() => handleNavigate(\"/apps/new\")}\n                      className=\"inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n                    >\n                      <Plus size={16} />\n                      {tr(\"devportal.createApp\", \"Create App\")}\n                    </button>\n                  ) : (\n                    <button\n                      onClick={() => handleNavigate(\"/organizations/new\")}\n                      className=\"inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n                    >\n                      <Plus size={16} />\n                      {tr(\n                        \"devportal.createOrganization\",\n                        \"Create Organization\",\n                      )}\n                    </button>\n                  )\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              {!hasOrgs ? (\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                  primary\n                />\n              ) : (\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              )}\n              {hasOrgs && (\n                <QuickActionCard\n                  title={tr(\"devportal.publisherProfile\", \"Publisher Profile\")}\n                  description={tr(\n                    \"devportal.manageYourStorePresence\",\n                    \"Manage your store publisher presence\",\n                  )}\n                  icon={<Store size={20} />}\n                  onClick={() => handleNavigate(\"/publisher/profile\")}\n                />\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-text-secondary\" />\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  primary?: boolean;\n}> = ({ title, description, icon, onClick, primary }) => (\n  <button\n    onClick={onClick}\n    className={[\n      \"flex items-center gap-4 rounded-lg border p-4 text-left transition-colors\",\n      primary\n        ? \"border-primary bg-action-primary-bg/5 hover:bg-action-primary-bg/10\"\n        : \"bg-bg-surface hover:bg-accent\",\n    ].join(\" \")}\n  >\n    <div\n      className={[\n        \"rounded-lg p-2\",\n        primary ? \"bg-action-primary-bg/20 text-primary\" : \"bg-action-primary-bg/10 text-primary\",\n      ].join(\" \")}\n    >\n      {icon}\n    </div>\n    <div>\n      <p className=\"font-medium\">{title}</p>\n      <p className=\"text-sm text-text-secondary\">{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-bg-surface 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-action-primary-bg/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-text-secondary\">\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-text-secondary\">\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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"}

package/dist/devportal/pages/DelegationsPage.js

@@ -76,18 +76,18 @@ var A = ({ type: t, className: n }) => {
 })), ie = ({ message: e, onRetry: t }) => {
 	let { t: n } = m();
 	return /* @__PURE__ */ T("div", {
-		className: "rounded-lg border border-destructive/50 bg-destructive/10 p-4",
+		className: "rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-4",
 		children: /* @__PURE__ */ E("div", {
 			className: "flex items-center gap-3",
 			children: [
-				/* @__PURE__ */ T(h, { className: "h-5 w-5 text-destructive" }),
+				/* @__PURE__ */ T(h, { className: "h-5 w-5 text-status-error-text" }),
 				/* @__PURE__ */ T("p", {
-					className: "flex-1 text-sm text-destructive",
+					className: "flex-1 text-sm text-status-error-text",
 					children: e
 				}),
 				t && /* @__PURE__ */ T("button", {
 					onClick: t,
-					className: "rounded-md border px-3 py-1.5 text-xs font-medium hover:bg-muted transition-colors",
+					className: "rounded-md border px-3 py-1.5 text-xs font-medium hover:bg-bg-sunken transition-colors",
 					children: ((e, t) => {
 						let r = n(e);
 						return r === e ? t : r;
@@ -102,7 +102,7 @@ var A = ({ type: t, className: n }) => {
 		return n === e ? t : n;
 	};
 	return /* @__PURE__ */ T("div", {
-		className: e("rounded-lg border bg-card p-5 transition-colors hover:border-border/80", i && "border-primary bg-primary/5", t.status !== "ACTIVE" && "opacity-60"),
+		className: e("rounded-lg border bg-bg-surface p-5 transition-colors hover:border-border-subtle/80", i && "border-primary bg-action-primary-bg/5", t.status !== "ACTIVE" && "opacity-60"),
 		children: /* @__PURE__ */ E("div", {
 			className: "flex items-start justify-between gap-4",
 			children: [/* @__PURE__ */ E("div", {
@@ -118,7 +118,7 @@ var A = ({ type: t, className: n }) => {
 						})
 					}),
 					/* @__PURE__ */ T("div", {
-						className: e("flex h-12 w-12 shrink-0 items-center justify-center rounded-lg", t.status === "ACTIVE" ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"),
+						className: e("flex h-12 w-12 shrink-0 items-center justify-center rounded-lg", t.status === "ACTIVE" ? "bg-action-primary-bg/10 text-primary" : "bg-bg-sunken text-text-secondary"),
 						children: /* @__PURE__ */ T(A, {
 							type: t.app?.type ?? "SERVICE",
 							className: "h-6 w-6"
@@ -135,11 +135,11 @@ var A = ({ type: t, className: n }) => {
 								}), /* @__PURE__ */ T(j, { status: t.status })]
 							}),
 							t.app?.description && /* @__PURE__ */ T("p", {
-								className: "text-sm text-muted-foreground line-clamp-2",
+								className: "text-sm text-text-secondary line-clamp-2",
 								children: t.app.description
 							}),
 							/* @__PURE__ */ E("div", {
-								className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground",
+								className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-text-secondary",
 								children: [
 									/* @__PURE__ */ E("span", {
 										className: "flex items-center gap-1",
@@ -160,13 +160,13 @@ var A = ({ type: t, className: n }) => {
 										]
 									}),
 									/* @__PURE__ */ T("span", {
-										className: e("rounded-md px-2 py-0.5 text-xs font-mono", "bg-muted text-muted-foreground"),
+										className: e("rounded-md px-2 py-0.5 text-xs font-mono", "bg-bg-sunken text-text-secondary"),
 										children: t.app?.type ?? "UNKNOWN"
 									})
 								]
 							}),
 							t.scopes.length > 0 && /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
-								className: "mb-1.5 text-xs text-muted-foreground",
+								className: "mb-1.5 text-xs text-text-secondary",
 								children: l("devportal.permissions", "Permissions:")
 							}), /* @__PURE__ */ T("div", {
 								className: "flex flex-wrap gap-1.5",
@@ -176,7 +176,7 @@ var A = ({ type: t, className: n }) => {
 								}, e))
 							})] }),
 							t.workspaceIds.length > 0 && /* @__PURE__ */ E("p", {
-								className: "flex items-center gap-1 text-xs text-muted-foreground",
+								className: "flex items-center gap-1 text-xs text-text-secondary",
 								children: [
 									/* @__PURE__ */ T(S, { className: "h-3.5 w-3.5" }),
 									l("devportal.accessToWorkspaces", "Access to"),
@@ -205,7 +205,7 @@ var A = ({ type: t, className: n }) => {
 		return n === e ? t : n;
 	};
 	return /* @__PURE__ */ T("div", {
-		className: e("rounded-lg border bg-card p-5 transition-colors hover:border-border/80", i && "border-primary bg-primary/5"),
+		className: e("rounded-lg border bg-bg-surface p-5 transition-colors hover:border-border-subtle/80", i && "border-primary bg-action-primary-bg/5"),
 		children: /* @__PURE__ */ E("div", {
 			className: "flex items-start justify-between gap-4",
 			children: [/* @__PURE__ */ E("div", {
@@ -238,18 +238,18 @@ var A = ({ type: t, className: n }) => {
 								}), /* @__PURE__ */ T(j, { status: t.status })]
 							}),
 							/* @__PURE__ */ E("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-text-secondary",
 								children: [
 									l("devportal.grantedToUser", "Granted to user:"),
 									" ",
 									/* @__PURE__ */ T("code", {
-										className: "rounded bg-muted px-1.5 py-0.5 text-xs",
+										className: "rounded bg-bg-sunken px-1.5 py-0.5 text-xs",
 										children: t.userId
 									})
 								]
 							}),
 							/* @__PURE__ */ E("div", {
-								className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground",
+								className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-text-secondary",
 								children: [/* @__PURE__ */ E("span", {
 									className: "flex items-center gap-1",
 									children: [
@@ -269,7 +269,7 @@ var A = ({ type: t, className: n }) => {
 								})]
 							}),
 							t.scopes.length > 0 && /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
-								className: "mb-1.5 text-xs text-muted-foreground",
+								className: "mb-1.5 text-xs text-text-secondary",
 								children: l("devportal.permissionsGranted", "Permissions granted:")
 							}), /* @__PURE__ */ T("div", {
 								className: "flex flex-wrap gap-1.5",
@@ -303,11 +303,11 @@ var A = ({ type: t, className: n }) => {
 		}), /* @__PURE__ */ T("div", {
 			className: "space-y-3 opacity-60",
 			children: e.map((e) => /* @__PURE__ */ E("div", {
-				className: "flex items-center justify-between rounded-lg border bg-muted/30 p-4",
+				className: "flex items-center justify-between rounded-lg border bg-bg-sunken/30 p-4",
 				children: [/* @__PURE__ */ E("div", {
 					className: "flex items-center gap-3",
 					children: [/* @__PURE__ */ T("div", {
-						className: "flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground",
+						className: "flex h-10 w-10 items-center justify-center rounded-lg bg-bg-sunken text-text-secondary",
 						children: /* @__PURE__ */ T(A, {
 							type: e.app?.type ?? "SERVICE",
 							className: "h-5 w-5"
@@ -316,7 +316,7 @@ var A = ({ type: t, className: n }) => {
 						className: "font-medium",
 						children: e.app?.name ?? n("devportal.unknownApp", "Unknown App")
 					}), /* @__PURE__ */ E("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: [
 							e.status === "REVOKED" ? n("devportal.revoked", "Revoked") : n("devportal.expired", "Expired"),
 							" ",
@@ -392,9 +392,9 @@ var A = ({ type: t, className: n }) => {
 					className: "grid grid-cols-2 gap-4 sm:grid-cols-4",
 					children: [
 						/* @__PURE__ */ E("div", {
-							className: "rounded-lg border bg-card p-4",
+							className: "rounded-lg border bg-bg-surface p-4",
 							children: [/* @__PURE__ */ E("div", {
-								className: "flex items-center gap-2 text-muted-foreground",
+								className: "flex items-center gap-2 text-text-secondary",
 								children: [/* @__PURE__ */ T(x, { className: "h-4 w-4" }), /* @__PURE__ */ T("span", {
 									className: "text-sm",
 									children: _("devportal.activeDelegations", "Active Delegations")
@@ -405,9 +405,9 @@ var A = ({ type: t, className: n }) => {
 							})]
 						}),
 						/* @__PURE__ */ E("div", {
-							className: "rounded-lg border bg-card p-4",
+							className: "rounded-lg border bg-bg-surface p-4",
 							children: [/* @__PURE__ */ E("div", {
-								className: "flex items-center gap-2 text-muted-foreground",
+								className: "flex items-center gap-2 text-text-secondary",
 								children: [/* @__PURE__ */ T(S, { className: "h-4 w-4" }), /* @__PURE__ */ T("span", {
 									className: "text-sm",
 									children: _("devportal.grantedByMe", "Granted by Me")
@@ -418,7 +418,7 @@ var A = ({ type: t, className: n }) => {
 							})]
 						}),
 						/* @__PURE__ */ E("div", {
-							className: "rounded-lg border bg-card p-4",
+							className: "rounded-lg border bg-bg-surface p-4",
 							children: [/* @__PURE__ */ E("div", {
 								className: "flex items-center gap-2 text-status-warning-text",
 								children: [/* @__PURE__ */ T(g, { className: "h-4 w-4" }), /* @__PURE__ */ T("span", {
@@ -431,9 +431,9 @@ var A = ({ type: t, className: n }) => {
 							})]
 						}),
 						/* @__PURE__ */ E("div", {
-							className: "rounded-lg border bg-card p-4",
+							className: "rounded-lg border bg-bg-surface p-4",
 							children: [/* @__PURE__ */ E("div", {
-								className: "flex items-center gap-2 text-muted-foreground",
+								className: "flex items-center gap-2 text-text-secondary",
 								children: [/* @__PURE__ */ T(v, { className: "h-4 w-4" }), /* @__PURE__ */ T("span", {
 									className: "text-sm",
 									children: _("devportal.totalAllTime", "Total All-Time")
@@ -458,9 +458,9 @@ var A = ({ type: t, className: n }) => {
 							onClick: () => {
 								Z(), C("acting-as-me");
 							},
-							className: e("-mb-px border-b-2 px-4 py-3 text-sm font-medium transition-colors", b === "acting-as-me" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"),
+							className: e("-mb-px border-b-2 px-4 py-3 text-sm font-medium transition-colors", b === "acting-as-me" ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"),
 							children: [_("devportal.appsActingAsMe", "Apps Acting as Me"), Q > 0 && /* @__PURE__ */ T("span", {
-								className: "ml-2 inline-flex items-center justify-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary",
+								className: "ml-2 inline-flex items-center justify-center rounded-full bg-action-primary-bg/10 px-2 py-0.5 text-xs font-medium text-primary",
 								children: Q
 							})]
 						}), /* @__PURE__ */ E("button", {
@@ -470,16 +470,16 @@ var A = ({ type: t, className: n }) => {
 							onClick: () => {
 								Z(), C("granted-by-me");
 							},
-							className: e("-mb-px border-b-2 px-4 py-3 text-sm font-medium transition-colors", b === "granted-by-me" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"),
+							className: e("-mb-px border-b-2 px-4 py-3 text-sm font-medium transition-colors", b === "granted-by-me" ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"),
 							children: [_("devportal.delegationsIGranted", "Delegations I Granted"), $ > 0 && /* @__PURE__ */ T("span", {
-								className: "ml-2 inline-flex items-center justify-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary",
+								className: "ml-2 inline-flex items-center justify-center rounded-full bg-action-primary-bg/10 px-2 py-0.5 text-xs font-medium text-primary",
 								children: $
 							})]
 						})]
 					})
 				}),
 				W.length > 0 && /* @__PURE__ */ T("div", {
-					className: "rounded-lg border bg-card p-4",
+					className: "rounded-lg border bg-bg-surface p-4",
 					children: /* @__PURE__ */ E("div", {
 						className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
 						children: [
@@ -498,14 +498,14 @@ var A = ({ type: t, className: n }) => {
 									})]
 								}), j.size > 0 && /* @__PURE__ */ T("button", {
 									onClick: Z,
-									className: "text-sm text-muted-foreground hover:text-foreground",
+									className: "text-sm text-text-secondary hover:text-text-primary",
 									children: _("devportal.clearSelection", "Clear selection")
 								})]
 							}),
 							/* @__PURE__ */ T("div", {
 								className: "flex flex-wrap items-center gap-2",
 								children: /* @__PURE__ */ E("span", {
-									className: "rounded-full bg-muted px-3 py-1 text-sm font-medium text-muted-foreground",
+									className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
 									children: [
 										j.size,
 										" ",