@burdenoff/microfe-devportal 2026.625.8 → 2026.625.10

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

@@ -1 +1 @@
-{"version":3,"file":"OrganizationsPage.js","names":[],"sources":["../../../src/devportal/pages/OrganizationsPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n  Plus,\n  Building2,\n  Users,\n  AppWindow,\n  DollarSign,\n  CheckCircle,\n  AlertCircle,\n  Loader2,\n} from \"lucide-react\";\nimport { PageLayout } from \"../components/PageLayout\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { StatusBadge, VerifiedBadge } from \"../components/StatusBadge\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type { DeveloperOrganization } from \"../types\";\nimport {\n  useGetMyOrganizationsQuery,\n  getErrorMessage,\n  type OrganizationFieldsFragment,\n} from \"../hooks\";\n\n/**\n * Organizations listing page\n *\n * Displays all developer organizations the current user is a member of.\n * Uses GraphQL to fetch real data from the DevPortal backend.\n */\nexport const OrganizationsPage: 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 organizations from GraphQL API\n  const { data, loading, error, refetch } = useGetMyOrganizationsQuery({\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const organizations = data?.myDeveloperOrganizations ?? [];\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  // Loading state\n  if (loading && !data) {\n    return (\n      <PageLayout\n        title={tr(\n          \"devportal.developerOrganizations\",\n          \"Developer Organizations\",\n        )}\n        description={tr(\n          \"devportal.manageYourDevTeams\",\n          \"Manage your development teams\",\n        )}\n      >\n        <div className=\"flex items-center justify-center py-12\">\n          <Loader2 className=\"h-8 w-8 animate-spin text-muted-foreground\" />\n          <span className=\"ml-2 text-muted-foreground\">\n            {tr(\"devportal.loadingOrganizations\", \"Loading organizations...\")}\n          </span>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <PageLayout\n        title={tr(\n          \"devportal.developerOrganizations\",\n          \"Developer Organizations\",\n        )}\n        description={tr(\n          \"devportal.manageYourDevTeams\",\n          \"Manage your development teams\",\n        )}\n      >\n        <div className=\"rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center\">\n          <AlertCircle className=\"mx-auto h-8 w-8 text-destructive\" />\n          <h3 className=\"mt-2 font-medium text-destructive\">\n            {tr(\n              \"devportal.failedToLoadOrganizations\",\n              \"Failed to load organizations\",\n            )}\n          </h3>\n          <p className=\"mt-1 text-sm text-muted-foreground\">\n            {getErrorMessage(error)}\n          </p>\n          <button\n            onClick={() => refetch()}\n            className=\"mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90\"\n          >\n            {tr(\"devportal.tryAgain\", \"Try Again\")}\n          </button>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.ORG_READ}>\n      <PageLayout\n        title={tr(\n          \"devportal.developerOrganizations\",\n          \"Developer Organizations\",\n        )}\n        description={tr(\n          \"devportal.manageYourDevTeams\",\n          \"Manage your development teams\",\n        )}\n        actions={\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 transition-colors\"\n          >\n            <Plus size={16} />\n            {tr(\"devportal.createOrganization\", \"Create Organization\")}\n          </button>\n        }\n      >\n        {organizations.length > 0 ? (\n          <div className=\"grid gap-6\">\n            {organizations.map((org: OrganizationFieldsFragment) => (\n              <OrganizationCard\n                key={org.id}\n                org={org as DeveloperOrganization}\n                onClick={() => handleNavigate(`/organizations/${org.id}`)}\n              />\n            ))}\n          </div>\n        ) : (\n          <EmptyState\n            icon={<Building2 size={32} />}\n            title={tr(\"devportal.noOrganizationsYet\", \"No organizations yet\")}\n            description={tr(\n              \"devportal.createOrgToCollaborate\",\n              \"Create an organization to collaborate with your team and manage apps together\",\n            )}\n            action={\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(\"devportal.createOrganization\", \"Create Organization\")}\n              </button>\n            }\n          />\n        )}\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n\n// Organization card component\nconst OrganizationCard: FC<{\n  org: DeveloperOrganization;\n  onClick: () => void;\n}> = ({ org, onClick }) => {\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={onClick}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          onClick();\n        }\n      }}\n      className=\"cursor-pointer rounded-lg border bg-card p-6 shadow-sm transition-all hover:shadow-md hover:border-primary/50\"\n    >\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        {/* Left side - Info */}\n        <div className=\"flex items-start gap-4\">\n          {org.logoUrl ? (\n            <img\n              src={org.logoUrl}\n              alt={org.name}\n              className=\"h-16 w-16 rounded-lg object-cover\"\n            />\n          ) : (\n            <div className=\"flex h-16 w-16 items-center justify-center rounded-lg bg-primary/10 text-primary\">\n              <Building2 size={32} />\n            </div>\n          )}\n          <div>\n            <div className=\"flex items-center gap-2 flex-wrap\">\n              <h3 className=\"text-lg font-semibold\">{org.name}</h3>\n              {org.isVerified && <VerifiedBadge verified />}\n              {org.isCertified && (\n                <span className=\"inline-flex items-center gap-1 rounded-full bg-status-info-bg-subtle px-2 py-0.5 text-xs font-medium text-status-info-text\">\n                  <CheckCircle size={12} /> Certified\n                </span>\n              )}\n            </div>\n            {org.description && (\n              <p className=\"mt-1 text-sm text-muted-foreground\">\n                {org.description}\n              </p>\n            )}\n            <div className=\"mt-2 flex flex-wrap items-center gap-2\">\n              <StatusBadge status={org.tier} type=\"tier\" />\n              {org.partnerTier && (\n                <StatusBadge status={org.partnerTier} type=\"partner\" />\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Right side - Stats */}\n        <div className=\"flex flex-wrap gap-6 text-sm\">\n          <div className=\"flex items-center gap-2\">\n            <Users size={16} className=\"text-muted-foreground\" />\n            <span>{org.members?.length || 0} members</span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <AppWindow size={16} className=\"text-muted-foreground\" />\n            <span>\n              {org.publishedApps} / {org.totalApps} apps\n            </span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <DollarSign size={16} className=\"text-muted-foreground\" />\n            <span>${(org.totalRevenue || 0).toLocaleString()}</span>\n          </div>\n        </div>\n      </div>\n\n      {/* Stats bar */}\n      <div className=\"mt-4 grid grid-cols-2 gap-4 rounded-lg bg-muted/50 p-4 sm:grid-cols-4\">\n        <div>\n          <p className=\"text-xs text-muted-foreground\">Total Installs</p>\n          <p className=\"text-lg font-semibold\">\n            {(org.totalInstalls || 0).toLocaleString()}\n          </p>\n        </div>\n        <div>\n          <p className=\"text-xs text-muted-foreground\">Active Installs</p>\n          <p className=\"text-lg font-semibold\">\n            {(org.activeInstalls || 0).toLocaleString()}\n          </p>\n        </div>\n        <div>\n          <p className=\"text-xs text-muted-foreground\">API Calls</p>\n          <p className=\"text-lg font-semibold\">\n            {org.totalApiCalls\n              ? `${(parseInt(org.totalApiCalls) / 1000000).toFixed(1)}M`\n              : \"0\"}\n          </p>\n        </div>\n        <div>\n          <p className=\"text-xs text-muted-foreground\">Avg Rating</p>\n          <p className=\"text-lg font-semibold\">\n            {org.averageRating ? `${org.averageRating.toFixed(1)} ★` : \"N/A\"}\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"OrganizationsPage.js","names":[],"sources":["../../../src/devportal/pages/OrganizationsPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n  Plus,\n  Building2,\n  Users,\n  AppWindow,\n  DollarSign,\n  CheckCircle,\n  AlertCircle,\n  Loader2,\n} from \"lucide-react\";\nimport { EmphasisPanel, GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout } from \"../components/PageLayout\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { StatusBadge, VerifiedBadge } from \"../components/StatusBadge\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type { DeveloperOrganization } from \"../types\";\nimport {\n  useGetMyOrganizationsQuery,\n  getErrorMessage,\n  type OrganizationFieldsFragment,\n} from \"../hooks\";\n\n/**\n * Organizations listing page\n *\n * Displays all developer organizations the current user is a member of.\n * Uses GraphQL to fetch real data from the DevPortal backend.\n */\nexport const OrganizationsPage: 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 organizations from GraphQL API\n  const { data, loading, error, refetch } = useGetMyOrganizationsQuery({\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const organizations = data?.myDeveloperOrganizations ?? [];\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  // Loading state\n  if (loading && !data) {\n    return (\n      <PageLayout\n        title={tr(\n          \"devportal.developerOrganizations\",\n          \"Developer Organizations\",\n        )}\n        description={tr(\n          \"devportal.manageYourDevTeams\",\n          \"Manage your development teams\",\n        )}\n      >\n        <div className=\"flex items-center justify-center py-12\">\n          <Loader2 className=\"h-8 w-8 animate-spin text-text-secondary\" />\n          <span className=\"ml-2 text-text-secondary\">\n            {tr(\"devportal.loadingOrganizations\", \"Loading organizations...\")}\n          </span>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <PageLayout\n        title={tr(\n          \"devportal.developerOrganizations\",\n          \"Developer Organizations\",\n        )}\n        description={tr(\n          \"devportal.manageYourDevTeams\",\n          \"Manage your development teams\",\n        )}\n      >\n        <div className=\"rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-6 text-center\">\n          <AlertCircle className=\"mx-auto h-8 w-8 text-status-error-text\" />\n          <h3 className=\"mt-2 font-medium text-status-error-text\">\n            {tr(\n              \"devportal.failedToLoadOrganizations\",\n              \"Failed to load organizations\",\n            )}\n          </h3>\n          <p className=\"mt-1 text-sm text-text-secondary\">\n            {getErrorMessage(error)}\n          </p>\n          <button\n            onClick={() => refetch()}\n            className=\"mt-4 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            {tr(\"devportal.tryAgain\", \"Try Again\")}\n          </button>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.ORG_READ}>\n      <PageLayout\n        title={tr(\n          \"devportal.developerOrganizations\",\n          \"Developer Organizations\",\n        )}\n        description={tr(\n          \"devportal.manageYourDevTeams\",\n          \"Manage your development teams\",\n        )}\n        purpose={tr(\n          \"devportal.organizationsPurpose\",\n          \"An organization is the team that owns your apps, members, and revenue. Create one so collaborators can share access to the same applications, billing, and store presence instead of working in isolation.\",\n        )}\n        actions={\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 transition-colors\"\n          >\n            <Plus size={16} />\n            {tr(\"devportal.createOrganization\", \"Create Organization\")}\n          </button>\n        }\n      >\n        {organizations.length > 0 && (\n          <EmphasisPanel className=\"mb-6\">\n            <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-3\">\n              <GlassCard treatment=\"metric\" className=\"p-4\">\n                <p className=\"text-sm text-text-secondary\">\n                  {tr(\"devportal.organizations\", \"Organizations\")}\n                </p>\n                <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n                  {organizations.length}\n                </p>\n              </GlassCard>\n              <GlassCard treatment=\"metric\" className=\"p-4\">\n                <p className=\"text-sm text-text-secondary\">\n                  {tr(\"devportal.totalApps\", \"Total Apps\")}\n                </p>\n                <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n                  {organizations.reduce(\n                    (acc: number, org: OrganizationFieldsFragment) =>\n                      acc + (org.totalApps ?? 0),\n                    0,\n                  )}\n                </p>\n              </GlassCard>\n              <GlassCard treatment=\"metric\" className=\"p-4\">\n                <p className=\"text-sm text-text-secondary\">\n                  {tr(\"devportal.activeInstalls\", \"Active Installs\")}\n                </p>\n                <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n                  {organizations\n                    .reduce(\n                      (acc: number, org: OrganizationFieldsFragment) =>\n                        acc + (org.activeInstalls ?? 0),\n                      0,\n                    )\n                    .toLocaleString()}\n                </p>\n              </GlassCard>\n            </div>\n          </EmphasisPanel>\n        )}\n        {organizations.length > 0 ? (\n          <div className=\"grid gap-6\">\n            {organizations.map((org: OrganizationFieldsFragment) => (\n              <OrganizationCard\n                key={org.id}\n                org={org as DeveloperOrganization}\n                onClick={() => handleNavigate(`/organizations/${org.id}`)}\n              />\n            ))}\n          </div>\n        ) : (\n          <EmptyState\n            illustration=\"empty-people\"\n            title={tr(\"devportal.noOrganizationsYet\", \"No organizations yet\")}\n            description={tr(\n              \"devportal.createOrgToCollaborate\",\n              \"Create an organization to collaborate with your team and manage apps together\",\n            )}\n            action={\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(\"devportal.createOrganization\", \"Create Organization\")}\n              </button>\n            }\n          />\n        )}\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n\n// Organization card component\nconst OrganizationCard: FC<{\n  org: DeveloperOrganization;\n  onClick: () => void;\n}> = ({ org, onClick }) => {\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={onClick}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          onClick();\n        }\n      }}\n      className=\"cursor-pointer rounded-card border border-border-seam bg-bg-surface p-6 shadow-[var(--shadow-pop)] transition-[box-shadow,border-color] hover:shadow-[var(--shadow-pop-hover)] hover:border-border-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    >\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        {/* Left side - Info */}\n        <div className=\"flex items-start gap-4\">\n          {org.logoUrl ? (\n            <img\n              src={org.logoUrl}\n              alt={org.name}\n              className=\"h-16 w-16 rounded-lg object-cover\"\n            />\n          ) : (\n            <div className=\"flex h-16 w-16 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary\">\n              <Building2 size={32} />\n            </div>\n          )}\n          <div>\n            <div className=\"flex items-center gap-2 flex-wrap\">\n              <h3 className=\"text-lg font-semibold\">{org.name}</h3>\n              {org.isVerified && <VerifiedBadge verified />}\n              {org.isCertified && (\n                <span className=\"inline-flex items-center gap-1 rounded-full bg-status-info-bg-subtle px-2 py-0.5 text-xs font-medium text-status-info-text\">\n                  <CheckCircle size={12} /> Certified\n                </span>\n              )}\n            </div>\n            {org.description && (\n              <p className=\"mt-1 text-sm text-text-secondary\">\n                {org.description}\n              </p>\n            )}\n            <div className=\"mt-2 flex flex-wrap items-center gap-2\">\n              <StatusBadge status={org.tier} type=\"tier\" />\n              {org.partnerTier && (\n                <StatusBadge status={org.partnerTier} type=\"partner\" />\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Right side - Stats */}\n        <div className=\"flex flex-wrap gap-6 text-sm\">\n          <div className=\"flex items-center gap-2\">\n            <Users size={16} className=\"text-text-secondary\" />\n            <span>{org.members?.length || 0} members</span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <AppWindow size={16} className=\"text-text-secondary\" />\n            <span>\n              {org.publishedApps} / {org.totalApps} apps\n            </span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <DollarSign size={16} className=\"text-text-secondary\" />\n            <span>${(org.totalRevenue || 0).toLocaleString()}</span>\n          </div>\n        </div>\n      </div>\n\n      {/* Stats bar */}\n      <div className=\"mt-4 grid grid-cols-2 gap-4 rounded-lg bg-bg-sunken/50 p-4 sm:grid-cols-4\">\n        <div>\n          <p className=\"text-xs text-text-secondary\">Total Installs</p>\n          <p className=\"text-lg font-semibold\">\n            {(org.totalInstalls || 0).toLocaleString()}\n          </p>\n        </div>\n        <div>\n          <p className=\"text-xs text-text-secondary\">Active Installs</p>\n          <p className=\"text-lg font-semibold\">\n            {(org.activeInstalls || 0).toLocaleString()}\n          </p>\n        </div>\n        <div>\n          <p className=\"text-xs text-text-secondary\">API Calls</p>\n          <p className=\"text-lg font-semibold\">\n            {org.totalApiCalls\n              ? `${(parseInt(org.totalApiCalls) / 1000000).toFixed(1)}M`\n              : \"0\"}\n          </p>\n        </div>\n        <div>\n          <p className=\"text-xs text-text-secondary\">Avg Rating</p>\n          <p className=\"text-lg font-semibold\">\n            {org.averageRating ? `${org.averageRating.toFixed(1)} ★` : \"N/A\"}\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}