@wopr-network/platform-ui-core 1.1.13 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wopr-network/platform-ui-core",
-  "version": "1.1.13",
+  "version": "1.2.0",
   "description": "Brand-agnostic AI agent platform UI — deploy as any brand via env vars",
   "repository": {
     "type": "git",

package/src/app/(dashboard)/settings/org/page.tsx

@@ -36,6 +36,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { useIsAdminOrOwner } from "@/hooks/use-my-org-role";
 import type { Organization, OrgMember } from "@/lib/api";
 import {
   changeRole,
@@ -58,6 +59,7 @@ export default function OrgPage() {
   const routerRef = useRef(router);
   routerRef.current = router;
   const [org, setOrg] = useState<Organization | null>(null);
+  const isAdminOrOwner = useIsAdminOrOwner(org);
   const [loading, setLoading] = useState(true);
   const [saveError, setSaveError] = useState<string | null>(null);
 
@@ -219,82 +221,102 @@ export default function OrgPage() {
         )}
       </AnimatePresence>
 
-      <Card>
-        <CardHeader>
-          <CardTitle>Organization Details</CardTitle>
-          <CardDescription>Update your organization name and billing email</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSave} className="flex flex-col gap-4">
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="org-name">Organization name</Label>
-              <Input
-                id="org-name"
-                value={orgName}
-                onChange={(e) => setOrgName(e.target.value)}
-                required
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="org-slug">Slug</Label>
-              <Input
-                id="org-slug"
-                value={orgSlug}
-                onChange={(e) => setOrgSlug(e.target.value)}
-                placeholder="my-org"
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="billing-email">Billing email</Label>
-              <Input
-                id="billing-email"
-                type="email"
-                value={billingEmail}
-                onChange={(e) => setBillingEmail(e.target.value)}
-                required
-              />
-            </div>
-            <AnimatePresence>
-              {saveMsg && (
-                <motion.p
-                  initial={{ opacity: 0, y: -4 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -4 }}
-                  transition={{ duration: 0.15 }}
-                  className="text-sm text-terminal"
-                >
-                  {saveMsg}
-                </motion.p>
-              )}
-            </AnimatePresence>
-            <Button type="submit" variant="terminal" className="w-fit" disabled={saving}>
-              <AnimatePresence mode="wait">
-                {saveSuccess ? (
-                  <motion.span
-                    key="success"
-                    initial={{ opacity: 0, scale: 0.8 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    exit={{ opacity: 0, scale: 0.8 }}
-                    className="flex items-center gap-1"
+      {isAdminOrOwner ? (
+        <Card>
+          <CardHeader>
+            <CardTitle>Organization Details</CardTitle>
+            <CardDescription>Update your organization name and billing email</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSave} className="flex flex-col gap-4">
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="org-name">Organization name</Label>
+                <Input
+                  id="org-name"
+                  value={orgName}
+                  onChange={(e) => setOrgName(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="org-slug">Slug</Label>
+                <Input
+                  id="org-slug"
+                  value={orgSlug}
+                  onChange={(e) => setOrgSlug(e.target.value)}
+                  placeholder="my-org"
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="billing-email">Billing email</Label>
+                <Input
+                  id="billing-email"
+                  type="email"
+                  value={billingEmail}
+                  onChange={(e) => setBillingEmail(e.target.value)}
+                  required
+                />
+              </div>
+              <AnimatePresence>
+                {saveMsg && (
+                  <motion.p
+                    initial={{ opacity: 0, y: -4 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -4 }}
+                    transition={{ duration: 0.15 }}
+                    className="text-sm text-terminal"
                   >
-                    <CheckIcon className="size-4" />
-                    Saved
-                  </motion.span>
-                ) : (
-                  <motion.span
-                    key="save"
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                  >
-                    {saving ? "Saving..." : "Save changes"}
-                  </motion.span>
+                    {saveMsg}
+                  </motion.p>
                 )}
               </AnimatePresence>
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
+              <Button type="submit" variant="terminal" className="w-fit" disabled={saving}>
+                <AnimatePresence mode="wait">
+                  {saveSuccess ? (
+                    <motion.span
+                      key="success"
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.8 }}
+                      className="flex items-center gap-1"
+                    >
+                      <CheckIcon className="size-4" />
+                      Saved
+                    </motion.span>
+                  ) : (
+                    <motion.span
+                      key="save"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                    >
+                      {saving ? "Saving..." : "Save changes"}
+                    </motion.span>
+                  )}
+                </AnimatePresence>
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card>
+          <CardHeader>
+            <CardTitle>Organization Details</CardTitle>
+            <CardDescription>You are a member of this organization</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col gap-2 text-sm">
+              <div>
+                <span className="font-medium text-muted-foreground">Name:</span> {org.name}
+              </div>
+              <div>
+                <span className="font-medium text-muted-foreground">Slug:</span>{" "}
+                {org.slug ?? <span className="text-muted-foreground italic">not set</span>}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
 
       <Separator />
 
@@ -326,7 +348,7 @@ export default function OrgPage() {
             {org.members.length} member{org.members.length !== 1 ? "s" : ""}
           </p>
         </div>
-        <InviteDialog orgId={org.id} onInvited={load} />
+        {isAdminOrOwner && <InviteDialog orgId={org.id} onInvited={load} />}
       </div>
 
       <div className="rounded-md border overflow-x-auto">
@@ -337,7 +359,7 @@ export default function OrgPage() {
               <TableHead>Email</TableHead>
               <TableHead>Role</TableHead>
               <TableHead>Joined</TableHead>
-              <TableHead className="w-[160px]" />
+              {isAdminOrOwner && <TableHead className="w-[160px]" />}
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -355,31 +377,33 @@ export default function OrgPage() {
                     year: "numeric",
                   })}
                 </TableCell>
-                <TableCell>
-                  {member.role !== "owner" && (
-                    <div className="flex gap-1">
-                      <ChangeRoleSelect
-                        currentRole={member.role}
-                        onChangeRole={(role) => handleChangeRole(member.userId, role)}
-                      />
-                      <TransferDialog
-                        memberName={member.name}
-                        onTransfer={() => handleTransfer(member.userId)}
-                      />
-                      <RemoveMemberDialog
-                        memberName={member.name}
-                        onRemove={() => handleRemove(member.userId)}
-                      />
-                    </div>
-                  )}
-                </TableCell>
+                {isAdminOrOwner && (
+                  <TableCell>
+                    {member.role !== "owner" && (
+                      <div className="flex gap-1">
+                        <ChangeRoleSelect
+                          currentRole={member.role}
+                          onChangeRole={(role) => handleChangeRole(member.userId, role)}
+                        />
+                        <TransferDialog
+                          memberName={member.name}
+                          onTransfer={() => handleTransfer(member.userId)}
+                        />
+                        <RemoveMemberDialog
+                          memberName={member.name}
+                          onRemove={() => handleRemove(member.userId)}
+                        />
+                      </div>
+                    )}
+                  </TableCell>
+                )}
               </TableRow>
             ))}
           </TableBody>
         </Table>
       </div>
 
-      {org.invites.length > 0 && (
+      {isAdminOrOwner && org.invites.length > 0 && (
         <>
           <Separator />
           <div>

package/src/hooks/use-my-org-role.ts

@@ -0,0 +1,32 @@
+"use client";
+
+import { useMemo } from "react";
+import type { Organization, OrgMember } from "@/lib/api";
+import { useSession } from "@/lib/auth-client";
+
+/**
+ * Derives the current user's role from an already-fetched org object.
+ * Does NOT fetch org data — avoids duplicate requests and role-flash.
+ * Pass the org from the page's own load() call.
+ */
+export function useMyOrgRole(org: Organization | null): OrgMember["role"] | null {
+  const { data: session } = useSession();
+
+  return useMemo(() => {
+    if (!org || !session?.user?.id) return null;
+
+    const me = org.members?.find(
+      (m: OrgMember) => m.userId === session.user.id || m.email === session.user.email,
+    );
+    return me?.role ?? null;
+  }, [org, session?.user?.id, session?.user?.email]);
+}
+
+/**
+ * Returns true if the current user is an admin or owner of the given org.
+ * Pass the org from the page's own load() call.
+ */
+export function useIsAdminOrOwner(org: Organization | null): boolean {
+  const role = useMyOrgRole(org);
+  return role === "admin" || role === "owner";
+}

package/src/lib/org-api.ts

@@ -72,3 +72,13 @@ export async function createOrganization(data: {
 }): Promise<{ id: string; name: string; slug: string }> {
   return trpcVanilla.org.createOrganization.mutate(data);
 }
+
+export async function listMyOrganizations(): Promise<
+  Array<{ id: string; name: string; slug: string; role: "owner" | "admin" | "member" }>
+> {
+  return trpcVanilla.org.listMyOrganizations.query(undefined);
+}
+
+export async function acceptInvite(token: string): Promise<{ orgId: string; orgName: string }> {
+  return trpcVanilla.org.acceptInvite.mutate({ token });
+}

package/src/lib/trpc-types.ts

@@ -157,6 +157,7 @@ type AppRouterRecord = {
     transferOwnership: AnyTRPCMutationProcedure;
     deleteOrganization: AnyTRPCMutationProcedure;
     listMyOrganizations: AnyTRPCQueryProcedure;
+    acceptInvite: AnyTRPCMutationProcedure;
     orgBillingBalance: AnyTRPCQueryProcedure;
     orgMemberUsage: AnyTRPCQueryProcedure;
     orgBillingInfo: AnyTRPCQueryProcedure;