@spacemade/ui 0.0.1

package/src/pages/settings/index.tsx

@@ -0,0 +1,133 @@
+import type { GetServerSideProps, NextPage } from 'next'
+import Link from 'next/link'
+import { useMemo } from 'react'
+import { Avatar } from '@chakra-ui/react'
+import WithAuth from '@components/hoc/WithAuth'
+import { PageProps } from '@helpers/types/page-props'
+import { SettingsLayout } from '@components/settings/SettingsLayout'
+import { useSettingsNavItems } from '@components/settings/settingsNav'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import { colorCirclePNG, defaultAvatar } from '@helpers/images'
+import { getUserNameFromUser } from '@helpers/string'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import { useListOrgsQuery } from '@store/slice/api/orgApiSlice'
+
+const SettingsIndex: NextPage<PageProps> = () => {
+  const navItems = useSettingsNavItems()
+  const { user, activeOrgId } = useUserAuthContext()
+  const { data: orgMemberships } = useListOrgsQuery()
+
+  const activeMembership = useMemo(() => {
+    if (!orgMemberships || !activeOrgId) return null
+    return orgMemberships.find((m) => m.orgId === activeOrgId) || null
+  }, [orgMemberships, activeOrgId])
+
+  const isBusinessOrg = activeMembership?.org?.orgType === 'business'
+  const activeOrg = activeMembership?.org
+
+  return (
+    <SettingsLayout>
+      <div className="container p-4">
+        <h1 className="mb-2">Settings</h1>
+        <p className="text-muted mb-4">
+          Manage your account, organizations, and API access.
+        </p>
+
+        {isBusinessOrg && activeOrg ? (
+          <div className="shadow-xs p-4 rounded-md mw-xs-500p mb-4">
+            <div className="d-flex align-items-center justify-content-between h-xs-25p">
+              <h3 className="h6 mb-0">Organization Profile</h3>
+              <Link href="/settings/profile/org-profile" className="d-block">
+                <i className="bi bi-pencil text-primary" />
+              </Link>
+            </div>
+
+            <div className="d-flex align-items-center mt-3">
+              <OptimizedImage
+                src={
+                  activeOrg.profileMedia?.media?.sourceUrl ||
+                  activeOrg.profileImageUrl ||
+                  colorCirclePNG
+                }
+                alt={activeOrg.name || 'Organization'}
+                width={48}
+                height={48}
+                className="rounded-circle object-fit-cover"
+              />
+              <div className="ms-3">
+                <p className="mb-1 fw-semibold">{activeOrg.name}</p>
+                {activeOrg.slug && (
+                  <p className="mb-0 text-muted small">@{activeOrg.slug}</p>
+                )}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="shadow-xs p-4 rounded-md mw-xs-500p mb-4">
+            <div className="d-flex align-items-center justify-content-between h-xs-25p">
+              <h3 className="h6 mb-0">Profile</h3>
+              <Link href="/settings/profile/profile" className="d-block">
+                <i className="bi bi-pencil text-primary" />
+              </Link>
+            </div>
+
+            <div className="d-flex align-items-center mt-3">
+              <Avatar
+                name={user?.name || '?'}
+                src={user?.profileMedia?.media.sourceUrl || defaultAvatar}
+              />
+              <div className="ms-3">
+                <p className="mb-1">{user ? getUserNameFromUser(user) : ''}</p>
+                <p className="mb-0">{user?.email}</p>
+              </div>
+            </div>
+
+            <div className="mt-3">
+              <Link
+                href="/settings/profile/change-password"
+                className="text-sm text-primary d-inline-flex align-items-center"
+              >
+                <i className="bi bi-lock me-1" /> Change Password
+              </Link>
+            </div>
+          </div>
+        )}
+
+        <div className="row g-3">
+          {navItems.map((item) => (
+            <div key={item.href} className="col-12 col-md-6 col-lg-4">
+              <Link href={item.href} className="text-decoration-none text-reset">
+                <div className="card h-100 border-0 shadow-sm">
+                  <div className="card-body d-flex align-items-center gap-3">
+                    <div
+                      className="rounded d-flex align-items-center justify-content-center"
+                      style={{
+                        width: 42,
+                        height: 42,
+                        background: 'rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1)',
+                      }}
+                    >
+                      <i className={`${item.icon} text-primary`} />
+                    </div>
+                    <div>
+                      <h2 className="h6 mb-1">{item.label}</h2>
+                      <p className="small text-muted mb-0">Open {item.label.toLowerCase()}</p>
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+    </SettingsLayout>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps = async () => ({
+  props: {
+    pageTitle: 'Settings',
+  },
+})
+
+export default WithAuth(SettingsIndex)

package/src/pages/settings/organizations/[orgId]/invite/index.tsx

@@ -0,0 +1,162 @@
+import type { GetServerSideProps } from 'next'
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+import { toast } from 'react-toastify'
+
+import WithAuth from '@components/hoc/WithAuth'
+import Button from '@components/common/button/Button'
+import UserInvitePicker, {
+  type UserInviteSelection,
+} from '@components/common/forms/UserInvitePicker'
+import { useInviteOrgMemberMutation } from '@store/slice/api/orgApiSlice'
+import { useListOrgGroupsQuery } from '@store/slice/api/orgGroupApiSlice'
+import type { OrgGroup } from '@store/model'
+import { SettingsLayout } from '@components/settings/SettingsLayout'
+
+const InviteMembers = () => {
+  const router = useRouter()
+  const { orgId } = router.query
+  const [inviteOrgMember, { isLoading }] = useInviteOrgMemberMutation()
+  const [selectedInvites, setSelectedInvites] = useState<UserInviteSelection[]>([])
+  const [selectedGroupId, setSelectedGroupId] = useState('')
+  const { data: groupsData } = useListOrgGroupsQuery(
+    { orgId: typeof orgId === 'string' ? orgId : '', limit: 200, page: 1 },
+    { skip: typeof orgId !== 'string' }
+  )
+
+  const groups = (groupsData?.results || []) as OrgGroup[]
+
+  const handleCompleteSetup = async () => {
+    if (typeof orgId !== 'string') {
+      toast.error('Invalid organization')
+      return
+    }
+
+    if (!selectedInvites.length) {
+      router.push('/settings/organizations')
+      return
+    }
+    if (!selectedGroupId) {
+      toast.error('Select a group first')
+      return
+    }
+
+    try {
+      await Promise.all(
+        selectedInvites.map((invite) =>
+          invite.type === 'user'
+            ? inviteOrgMember({
+                orgId,
+                userId: invite.user.id,
+                role: 'member',
+                orgGroupId: selectedGroupId,
+                captcha: null,
+              }).unwrap()
+            : inviteOrgMember({
+                orgId,
+                email: String(invite.email || '').toLowerCase(),
+                role: 'member',
+                orgGroupId: selectedGroupId,
+                captcha: null,
+              }).unwrap()
+        )
+      )
+
+      toast.success(
+        `Invitation${selectedInvites.length > 1 ? 's' : ''} sent successfully!`
+      )
+      setSelectedInvites([])
+      router.push('/settings/organizations')
+    } catch (err: any) {
+      toast.error(err?.data?.message || 'Failed to send invitation')
+    }
+  }
+
+  const handleSkip = () => {
+    router.push('/settings/organizations')
+  }
+
+  return (
+    <SettingsLayout>
+      <div className="container" style={{ maxWidth: '820px' }}>
+        <div className="mt-5">
+          <div className="text-center mb-5">
+            <p className="text-muted mb-2">Start collaborating</p>
+            <h1 className="display-5 mb-0">Welcome to Osirus</h1>
+          </div>
+
+          <div className="card border-0 shadow-sm">
+            <div className="card-body p-5">
+              <h3 className="mb-3">Add organization members</h3>
+              <p className="text-muted mb-2">
+                Organization members will be able to view repositories, organize into teams, review
+                code, and tag other members using @mentions.
+              </p>
+              <a href="#" className="text-primary text-decoration-none small mb-4 d-inline-block">
+                Learn more about permissions for organizations →
+              </a>
+
+              <div className="mb-4 position-relative">
+                <label htmlFor="invite-group" className="form-label fw-semibold">
+                  Group
+                </label>
+                <select
+                  id="invite-group"
+                  className="form-select mb-3"
+                  value={selectedGroupId}
+                  onChange={(e) => setSelectedGroupId(e.target.value)}
+                >
+                  <option value="">Select a group</option>
+                  {groups.map((group) => (
+                    <option key={group.id} value={group.id}>
+                      {group.name}
+                    </option>
+                  ))}
+                </select>
+                {!groups.length && (
+                  <div className="small text-muted mb-3">
+                    Create a group before inviting people so access is assigned immediately.
+                  </div>
+                )}
+                <UserInvitePicker
+                  inputId="org-invite-lookup"
+                  label="Lookup by username, full name or email address"
+                  value={selectedInvites}
+                  onChange={setSelectedInvites}
+                  defaultRole="member"
+                  selectedTitle="Invites"
+                />
+              </div>
+
+              <div className="d-flex flex-column gap-3 align-items-center">
+                <Button
+                  onClick={handleCompleteSetup}
+                  color="success"
+                  className="w-100"
+                  style={{ maxWidth: '400px' }}
+                  isLoading={isLoading}
+                  disabled={isLoading || (!!selectedInvites.length && !selectedGroupId)}
+                >
+                  Complete setup
+                </Button>
+                <button
+                  onClick={handleSkip}
+                  className="btn btn-link text-decoration-none"
+                  disabled={isLoading}
+                >
+                  Skip this step
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </SettingsLayout>
+  )
+}
+export const getServerSideProps: GetServerSideProps = async () => ({
+  props: {
+  pageTitle: 'Invite Members',
+},
+})
+export default WithAuth(InviteMembers)

package/src/pages/settings/organizations/[orgId]/settings/index.tsx

@@ -0,0 +1,98 @@
+import type { GetServerSideProps, NextPage } from 'next'
+import Link from 'next/link'
+import { useMemo } from 'react'
+import { useRouter } from 'next/router'
+import WithAuth from '@components/hoc/WithAuth'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import { SettingsLayout } from '@components/settings/SettingsLayout'
+import { colorCirclePNG } from '@helpers/images'
+import { PageProps } from '@helpers/types/page-props'
+import { useListOrgsQuery } from '@store/slice/api/orgApiSlice'
+
+const OrganizationSettingsPage: NextPage<PageProps> = () => {
+  const router = useRouter()
+  const { orgId } = router.query
+  const orgIdValue = Array.isArray(orgId) ? orgId[0] : orgId
+  const { data: memberships, isLoading } = useListOrgsQuery()
+
+  const membership = useMemo(() => {
+    if (!orgIdValue || !memberships) return null
+    return memberships.find((m) => m.orgId === orgIdValue) || null
+  }, [memberships, orgIdValue])
+
+  return (
+    <SettingsLayout>
+      <div className="container py-4">
+        {isLoading ? (
+          <p className="text-muted mb-0">Loading organization settings...</p>
+        ) : !membership ? (
+          <div className="border rounded p-4 bg-white">
+            <h1 className="h5 mb-2">Organization Not Found</h1>
+            <p className="text-muted mb-3">
+              This organization could not be found in your memberships.
+            </p>
+            <Link href="/settings/organizations" className="btn btn-outline-primary btn-sm">
+              Back to organizations
+            </Link>
+          </div>
+        ) : (
+          <>
+            <div className="d-flex align-items-center gap-2 mb-4">
+              <OptimizedImage
+                src={
+                  membership.org?.profileMedia?.media?.sourceUrl ||
+                  membership.org?.profileImageUrl ||
+                  colorCirclePNG
+                }
+                alt={membership.org?.name || 'Organization'}
+                width={32}
+                height={32}
+                className="rounded object-fit-cover"
+              />
+              <div>
+                <h1 className="h4 mb-0">{membership.org?.name || 'Organization'} Settings</h1>
+                <p className="text-muted small mb-0">
+                  Role: {membership.role}
+                  {membership.org?.slug ? ` - slug: ${membership.org.slug}` : ''}
+                </p>
+              </div>
+            </div>
+
+            <div className="d-flex flex-wrap gap-2 mb-4">
+              <Link
+                href={`/settings/organizations/${membership.orgId}/invite`}
+                className="btn btn-sm btn-outline-secondary"
+              >
+                Invite members
+              </Link>
+              <Link
+                href="/settings/organizations"
+                className="btn btn-sm btn-outline-secondary"
+              >
+                Back to organizations
+              </Link>
+            </div>
+
+            <div className="border rounded p-4 bg-white">
+              <h2 className="h6 mb-2">Leaving this organization</h2>
+              <p className="text-muted mb-3">
+                Leave controls will be handled here with safety checks for last-member/owner cases.
+              </p>
+              <button type="button" className="btn btn-sm btn-outline-danger" disabled>
+                Leave organization (coming soon)
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </SettingsLayout>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps = async () => ({
+  props: {
+    pageTitle: 'Organization Settings',
+  },
+})
+
+export default WithAuth(OrganizationSettingsPage)

package/src/pages/settings/organizations/[orgId]/token/index.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useRef, useState } from 'react'
+import type { GetServerSideProps, NextPage } from 'next'
+import { useRouter } from 'next/router'
+import { toast } from 'react-toastify'
+
+import { WithReCaptcha } from '@components/hoc/WithReCaptcha'
+import LoadingScreen from '@components/common/loading/LoadingScreen'
+import InvalidInviteCard from '@components/common/state/InvalidInviteCard'
+import { PageProps } from '@helpers/types/page-props'
+import { useAcceptOrgInviteMutation } from '@store/slice/api/orgApiSlice'
+import { UserTokenAction } from '@store/slice/api/authApiSlice'
+
+type OrgInviteProps = PageProps & {
+  isValid: boolean
+  token?: string
+  orgId?: string
+}
+
+const OrgInvite: NextPage<OrgInviteProps> = WithReCaptcha(
+  ({ isValid, token, orgId }) => {
+    const router = useRouter()
+    const [hasError, setHasError] = useState(false)
+
+    const [acceptInvite, { isLoading }] = useAcceptOrgInviteMutation()
+    const hasRunRef = useRef(false)
+
+    useEffect(() => {
+      if (!isValid || !token || !orgId) {
+        setHasError(true)
+        return
+      }
+
+      if (hasRunRef.current) return
+      hasRunRef.current = true
+
+      const consumeInvite = async () => {
+        try {
+          const response = await acceptInvite({
+            token,
+            orgId,
+          }).unwrap()
+
+          if (response.needsProfileUpdate) {
+            const query = new URLSearchParams({
+              token,
+              action: UserTokenAction.org_invite,
+              orgId,
+            })
+            router.replace(`/update?${query.toString()}`)
+            return
+          }
+
+          router.replace('/')
+        } catch (err: any) {
+          setHasError(true)
+          toast.error(err?.data?.message ?? 'Unable to accept invite')
+        }
+      }
+
+      consumeInvite()
+    }, [isValid, token, orgId, acceptInvite, router])
+
+    if (isLoading) return <LoadingScreen />
+
+    if (hasError) return <InvalidInviteCard />
+    return <LoadingScreen />
+  }
+)
+
+export default OrgInvite
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const { orgId } = context.query
+  const tokenParam = context.query.token
+
+  const token =
+    typeof tokenParam === 'string'
+      ? tokenParam
+      : Array.isArray(tokenParam)
+        ? tokenParam[0]
+        : undefined
+
+  const orgIdStr =
+    typeof orgId === 'string'
+      ? orgId
+      : Array.isArray(orgId)
+        ? orgId[0]
+        : undefined
+
+  if (!token || !orgIdStr) {
+    return {
+      props: {
+        pageTitle: 'Org Invite',
+        isValid: false,
+        excludeTopNav: true,
+      },
+    }
+  }
+
+  return {
+    props: {
+      pageTitle: 'Org Invite',
+      isValid: true,
+      token,
+      orgId: orgIdStr,
+      excludeTopNav: true,
+    },
+  }
+}

package/src/pages/settings/organizations/index.tsx

@@ -0,0 +1,148 @@
+import Link from 'next/link'
+import type { GetServerSideProps, NextPage } from 'next'
+import { useRouter } from 'next/router'
+import { useEffect, useMemo } from 'react'
+import { Spinner } from '@chakra-ui/react'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import WithAuth from '@components/hoc/WithAuth'
+import { SettingsLayout } from '@components/settings/SettingsLayout'
+import { colorCirclePNG } from '@helpers/images'
+import { useListOrgsQuery } from '@store/slice/api/orgApiSlice'
+import { useAppSelector } from '@store/hooks'
+import { selectAccountState } from '@store/slice/api/accountSlice'
+
+const Organizations: NextPage = () => {
+  const router = useRouter()
+  const { data: orgMemberships, isLoading } = useListOrgsQuery()
+  const { activeOrgId, user } = useAppSelector(selectAccountState)
+
+  const isPersonalOrg = useMemo(() => {
+    if (!orgMemberships || !activeOrgId) return true
+    const activeMembership = orgMemberships.find((m) => m.orgId === activeOrgId)
+    const activeOrg = activeMembership?.org
+    return (
+      activeOrg?.orgType === 'personal' ||
+      (!!activeOrg?.slug && !!user?.name && activeOrg.slug === user.name)
+    )
+  }, [orgMemberships, activeOrgId, user?.name])
+
+  useEffect(() => {
+    if (!isLoading && !isPersonalOrg) {
+      router.replace('/settings')
+    }
+  }, [isLoading, isPersonalOrg, router])
+
+  const businessOrgMemberships = useMemo(
+    () => (orgMemberships || []).filter((membership) => membership.org?.orgType === 'business'),
+    [orgMemberships]
+  )
+
+  const isEmptyState = !isLoading && businessOrgMemberships.length === 0
+
+  const handleCreateOrg = () => {
+    router.push('/settings/organizations/new')
+  }
+
+  const toOrgRouteName = (membership: NonNullable<typeof businessOrgMemberships>[number]) => {
+    const routeValue = membership.org?.slug || membership.org?.name || membership.orgId
+    return encodeURIComponent(routeValue)
+  }
+
+  const toRoleLabel = (role: string | undefined) => {
+    if (!role) return 'Member'
+    return role.charAt(0).toUpperCase() + role.slice(1)
+  }
+
+  return (
+    <SettingsLayout>
+      <div className="mt-5 w-100">
+        <div className="d-flex justify-content-between align-items-center mb-4">
+          <h1 className="mb-0">Organizations</h1>
+          {!isEmptyState && (
+            <button onClick={handleCreateOrg} className="btn btn-primary rounded-pill fw-bold px-4">
+              +
+            </button>
+          )}
+        </div>
+
+        {isLoading ? (
+          <div className="d-flex justify-content-center align-items-center" style={{ minHeight: '300px' }}>
+            <Spinner size="xl" />
+          </div>
+        ) : isEmptyState ? (
+          <div className="d-flex flex-column align-items-center justify-content-center text-center py-4">
+            <div
+              className="bg-light rounded-circle d-flex align-items-center justify-content-center mb-3"
+              style={{ width: 48, height: 48 }}
+            >
+              <i className="bi bi-buildings text-dark" />
+            </div>
+            <h5 className="mb-2">Organizations</h5>
+            <p className="text-muted mb-3" style={{ maxWidth: 420 }}>
+              Organizations let teams collaborate across shared apps, members, and billing.
+            </p>
+            <button
+              type="button"
+              className="btn btn-dark px-4 mb-4"
+              onClick={handleCreateOrg}
+            >
+              Add Organization
+            </button>
+          </div>
+        ) : (
+          <div className="mb-5">
+            <div className="border rounded overflow-hidden bg-white">
+              {businessOrgMemberships.map((membership) => (
+                <div
+                  key={membership.id}
+                  className="d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-between gap-3 px-3 py-3 border-bottom"
+                >
+                  <div className="d-flex align-items-center gap-2">
+                    <OptimizedImage
+                      src={
+                        membership.org?.profileMedia?.media?.sourceUrl ||
+                        membership.org?.profileImageUrl ||
+                        colorCirclePNG
+                      }
+                      alt={membership.org?.name || 'Organization'}
+                      width={26}
+                      height={26}
+                      className="rounded object-fit-cover"
+                    />
+                    <Link
+                      href={`/org/${toOrgRouteName(membership)}/settings`}
+                      className="fw-semibold text-primary text-decoration-none"
+                    >
+                      {membership.org?.name || 'Organization'}
+                    </Link>
+                    <span className="badge rounded-pill border text-dark bg-light">
+                      {toRoleLabel(membership.role)}
+                    </span>
+                  </div>
+
+                  <div className="d-flex gap-2 ms-lg-auto">
+                    <Link
+                      href={`/org/${toOrgRouteName(membership)}/settings?redirect=/settings`}
+                      className="btn btn-sm btn-outline-secondary"
+                    >
+                      Settings
+                    </Link>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+      </div>
+    </SettingsLayout>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps = async () => ({
+  props: {
+    pageTitle: 'Organizations',
+  },
+})
+
+export default WithAuth(Organizations)