@studiocubics/cms 0.0.1

package/src/ui/System/Permissions/RoleListCard.tsx

@@ -0,0 +1,33 @@
+import {
+  AccordionItem,
+  CollectionItemCard,
+  SectionWrapper,
+} from "@studiocubics/ui";
+import { RolePermissionsTable } from "./RolePermissionsTable";
+import type { Role, RoleDoc } from "../../../clerk/rbacConfig";
+
+export interface RoleCardProps {
+  role: Role;
+  rbacConfig: RoleDoc;
+}
+
+export function RoleListCard(props: RoleCardProps) {
+  const { role, rbacConfig } = props;
+
+  return (
+    <AccordionItem
+      name="RoleCard"
+      summary={
+        <CollectionItemCard
+          title={role}
+          chip={rbacConfig.isSystem ? "System User" : ""}
+          description={rbacConfig.desc}
+        />
+      }
+    >
+      <SectionWrapper title={`${role}'s Permissions`} noBorders>
+        <RolePermissionsTable {...props} />
+      </SectionWrapper>
+    </AccordionItem>
+  );
+}

package/src/ui/System/Permissions/RolePermissionsPage.tsx

@@ -0,0 +1,18 @@
+import { PageLayoutPagination, type TabProps } from "@studiocubics/ui";
+import { RoleListCard } from "./RoleListCard";
+import { RBAC_CONFIG } from "../../../clerk/rbacConfig";
+
+export function RolePermissionsPage({
+  securityLinks,
+}: {
+  securityLinks: TabProps[];
+}) {
+  return (
+    <PageLayoutPagination size="sm" title={securityLinks[1]?.children}>
+      {(Object.keys(RBAC_CONFIG) as (keyof typeof RBAC_CONFIG)[]).map((k) => {
+        const item = RBAC_CONFIG[k];
+        return <RoleListCard key={k} role={k} rbacConfig={item} />;
+      })}
+    </PageLayoutPagination>
+  );
+}

package/src/ui/System/Permissions/RolePermissionsTable.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Check, X } from "lucide-react";
+import type { RoleCardProps } from "./RoleListCard";
+import { useCallback, useMemo } from "react";
+import { Table, type TableData } from "@studiocubics/ui";
+
+export function RolePermissionsTable({ rbacConfig }: RoleCardProps) {
+  const permissions = rbacConfig.permissions;
+  const icon = useCallback((check?: boolean) => {
+    return check ? <Check /> : <X />;
+  }, []);
+  const tableData: TableData = useMemo(
+    () => [
+      ["", "create", "delete", "read", "update"],
+      ...permissions.map((p) => [
+        p.resource,
+        icon(p.actions.create),
+        icon(p.actions.delete),
+        icon(p.actions.read),
+        icon(p.actions.update),
+      ]),
+    ],
+    [permissions],
+  );
+
+  if (!permissions || !permissions.length)
+    return (
+      <p>
+        This is a root system user role, all resource actions are permitted to
+        anyone with this role. Make sure to always have atleast one admin user.
+      </p>
+    );
+
+  return <Table data={tableData} />;
+}

package/src/ui/System/Permissions/_index.ts

@@ -0,0 +1,3 @@
+export * from "./RoleListCard";
+export * from "./RolePermissionsPage";
+export * from "./RolePermissionsTable";

package/src/ui/System/SystemUser/CurrentSystemUserButton/CurrentSystemUserButton.module.css

@@ -0,0 +1,5 @@
+.title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap);
+}

package/src/ui/System/SystemUser/CurrentSystemUserButton/CurrentSystemUserButton.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useClerk, useUser } from "@clerk/nextjs";
+import { useAnchorElement, useDisclosure } from "@studiocubics/hooks";
+import {
+  Chip,
+  ConfirmationForm,
+  Dialog,
+  IdentityDisplay,
+  type IdentityDisplayProps,
+  List,
+  ListItem,
+  Popover,
+  Skeleton,
+} from "@studiocubics/ui";
+import { toCapitalised } from "@studiocubics/utils";
+import { LogOut, UserCog } from "lucide-react";
+import type { SubmitEvent } from "react";
+import styles from "./CurrentSystemUserButton.module.css";
+import type { Role } from "../../../../clerk/rbacConfig";
+
+export function CurrentSystemUserButton(
+  props: { clickable?: boolean } & Omit<IdentityDisplayProps, "profileName">,
+) {
+  const user = useUser();
+
+  const { clickable = true, ...rest } = props;
+  const { open, anchorEl, handleClick, handleClose } = useAnchorElement();
+
+  if (!user.isLoaded) return <Skeleton height={78} />;
+
+  return (
+    <>
+      <IdentityDisplay
+        onClick={clickable ? handleClick : undefined}
+        profileImage={user.user?.imageUrl ?? ""}
+        role={user.user?.primaryEmailAddress?.emailAddress}
+        {...rest}
+        profileName={
+          <div className={styles.title}>
+            <h4>{user.user?.fullName}</h4>{" "}
+            <Chip size="sm" color="primary">
+              <strong>
+                {toCapitalised(user.user?.publicMetadata.role as Role)}
+              </strong>
+            </Chip>
+          </div>
+        }
+      />
+      {clickable && (
+        <Popover
+          anchorEl={anchorEl}
+          open={open}
+          onClose={handleClose}
+          anchorPosition={{ vertical: "top", horizontal: "right" }}
+          transformOrigin={{ vertical: "bottom", horizontal: "left" }}
+        >
+          <List className="surfaceContainer">
+            <ListItem
+              startIcon={<UserCog />}
+              href="/dashboard/security/account"
+            >
+              Account Settings
+            </ListItem>
+            <Logout />
+          </List>
+        </Popover>
+      )}
+    </>
+  );
+}
+export function Logout() {
+  const { open, handleClose, handleStrictClose, handleOpen } = useDisclosure();
+  const clerk = useClerk();
+  async function handleSubmit(e: SubmitEvent<HTMLFormElement>) {
+    e.preventDefault();
+    await clerk.signOut();
+  }
+  return (
+    <>
+      <ListItem
+        className={styles.logoutButton}
+        onClick={handleOpen}
+        //   disabled
+        startIcon={<LogOut />}
+        color="error"
+      >
+        Log out
+      </ListItem>
+      <Dialog open={open} onClose={handleStrictClose}>
+        <ConfirmationForm
+          variant="danger"
+          formTitle="Logout"
+          onCancel={handleClose}
+          onSubmit={handleSubmit}
+        >
+          Are you sure you want to sign out of this account?
+        </ConfirmationForm>
+      </Dialog>
+    </>
+  );
+}

package/src/ui/System/SystemUser/CurrentSystemUserPage.tsx

@@ -0,0 +1,12 @@
+import { currentUser } from "@clerk/nextjs/server";
+import { redirect } from "next/navigation";
+import { SystemUserPageContent } from "./SystemUserPageContent";
+import { auth } from "../../../clerk/auth";
+
+export async function CurrentSystemUserPage() {
+  const user = await currentUser();
+  const session = await auth();
+  const allowEdit = await session.hasPermission("systemUsers", "update");
+  if (!user) redirect("/auth/signIn/");
+  return <SystemUserPageContent user={user} allowEdit={allowEdit} />;
+}

package/src/ui/System/SystemUser/SystemUserActions.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import type { User } from "@clerk/nextjs/server";
+import { useDisclosure } from "@studiocubics/hooks";
+import {
+  ConfirmationForm,
+  Dialog,
+  ListItem,
+  type ListItemProps,
+  TextInput,
+} from "@studiocubics/ui";
+import { Trash } from "lucide-react";
+
+export function SystemUserDeleteListItem(
+  props: ListItemProps & { uid: User["id"]; fullName?: User["fullName"] },
+) {
+  const { uid, fullName, ...rest } = props;
+  const { open, handleOpen, handleStrictClose, handleClose } = useDisclosure();
+  return (
+    <>
+      <ListItem
+        {...rest}
+        color="error"
+        startIcon={<Trash />}
+        onClick={handleOpen}
+      >
+        Delete User
+      </ListItem>
+      <Dialog open={open} onClose={handleStrictClose}>
+        <ConfirmationForm
+          formTitle="Delete System User"
+          variant="danger"
+          onCancel={handleClose}
+        >
+          Are you sure you want to delete {fullName ? `${fullName}'s` : "this"}{" "}
+          system account?
+          <br />
+          All information will be deleted, this action is irreversible and
+          cannot be undone.
+          <TextInput fullWidth />
+        </ConfirmationForm>
+      </Dialog>
+    </>
+  );
+}

package/src/ui/System/SystemUser/SystemUserDetails/SystemUserDetails.module.css

@@ -0,0 +1,6 @@
+.root {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+}

package/src/ui/System/SystemUser/SystemUserDetails/SystemUserDetails.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Button, IdentityDisplay, TransitionAnimation } from "@studiocubics/ui";
+import styles from "./SystemUserDetails.module.css";
+import { Edit } from "lucide-react";
+import { useDisclosure } from "@studiocubics/hooks";
+import { type User } from "@clerk/nextjs/server";
+import { SystemUserDetailsForm } from "../SystemUserDetailsForm/SystemUserDetailsForm";
+
+interface SystemUserDetailsProps {
+  id: User["id"];
+  fullName: User["fullName"];
+  firstName: User["firstName"];
+  lastName?: User["lastName"];
+  imageUrl: User["imageUrl"];
+  emailAddress?: NonNullable<User["primaryEmailAddress"]>["emailAddress"];
+  editable?: boolean;
+}
+export function SystemUserDetails({
+  id,
+  fullName,
+  firstName,
+  lastName,
+  imageUrl,
+  emailAddress,
+  editable,
+}: SystemUserDetailsProps) {
+  const { open, handleOpen, handleClose } = useDisclosure();
+  return (
+    <>
+      <TransitionAnimation
+        in={open}
+        transformOrigin={"top right"}
+        mountOnly
+        unmountOnExit
+      >
+        <SystemUserDetailsForm
+          imageUrl={imageUrl}
+          firstName={firstName}
+          lastName={lastName}
+          onClose={handleClose}
+        />
+      </TransitionAnimation>
+      <TransitionAnimation
+        in={!open}
+        transformOrigin={"top"}
+        mountOnly
+        unmountOnExit
+      >
+        <div className={styles.root}>
+          <IdentityDisplay
+            profileName={fullName}
+            profileImage={imageUrl}
+            role={
+              <p>
+                {emailAddress}
+                <br />
+                <strong>{id}</strong>
+              </p>
+            }
+          />
+          {editable && (
+            <Button size="sm" startIcon={<Edit />} onClick={handleOpen}>
+              Edit Details
+            </Button>
+          )}
+        </div>
+      </TransitionAnimation>
+    </>
+  );
+}

package/src/ui/System/SystemUser/SystemUserDetailsForm/SystemUserDetailsForm.module.css

@@ -0,0 +1,7 @@
+.form {
+  flex: 1;
+}
+.formRow {
+  display: flex;
+  gap: var(--spacing-gap);
+}

package/src/ui/System/SystemUser/SystemUserDetailsForm/SystemUserDetailsForm.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import type { User } from "@clerk/nextjs/server";
+import {
+  type CardProps,
+  Card,
+  ConfirmationForm,
+  IdentityDisplay,
+  Button,
+  TextInput,
+  toast,
+} from "@studiocubics/ui";
+import styles from "./SystemUserDetailsForm.module.css";
+import { initialiseForm } from "@studiocubics/utils";
+import { systemUserDetailsUpdateAction } from "../../../../clerk/_index";
+import { useActionState, useEffect, useRef, useState } from "react";
+
+const initialSystemUserDetailsUpdateState = initialiseForm(
+  "firstName",
+  "lastName",
+  "imageUrl",
+);
+export type SystemUserDetailsUpdateState =
+  typeof initialSystemUserDetailsUpdateState;
+
+export function SystemUserDetailsForm({
+  imageUrl,
+  firstName,
+  lastName,
+  onClose,
+  ...rest
+}: {
+  imageUrl?: User["imageUrl"];
+  firstName?: User["firstName"];
+  lastName?: User["lastName"];
+  onClose(): void;
+} & CardProps) {
+  const [state, action, pending] = useActionState(
+    systemUserDetailsUpdateAction.bind(null, "hello"),
+    initialSystemUserDetailsUpdateState,
+  );
+  const [imagePreview, setImagePreview] = useState(imageUrl);
+  const [inputImage, setInputImage] = useState<File>();
+  const imageInputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (inputImage) setImagePreview(URL.createObjectURL(inputImage));
+  }, [inputImage]);
+
+  return (
+    <Card fullWidth {...rest}>
+      <ConfirmationForm
+        formTitle="Edit Details"
+        onCancel={onClose}
+        action={action}
+        disabled={pending}
+      >
+        <IdentityDisplay
+          profileImage={imagePreview}
+          profileName={
+            <div className={styles.formRow}>
+              <Button
+                size="sm"
+                variant="outlined"
+                disabled={pending}
+                onClick={() => imageInputRef.current?.click()}
+              >
+                Upload
+              </Button>
+              <input
+                type="file"
+                accept="image/jpg, image/png"
+                ref={imageInputRef}
+                name={"imageFile"}
+                onChange={(e) =>
+                  e.target?.files && setInputImage(e.target.files[0])
+                }
+                hidden
+                disabled={pending}
+              />
+              <Button
+                size="sm"
+                color="error"
+                onClick={() => toast("hello")}
+                disabled={pending}
+              >
+                Remove
+              </Button>
+            </div>
+          }
+          role={"Recommended size 1:1, up to 10MB."}
+        />
+        <div className={styles.formRow}>
+          <TextInput
+            fullWidth
+            label="First Name"
+            defaultValue={firstName!}
+            name="firstName"
+            error={state.fieldErrors?.firstName}
+            disabled={pending}
+          />
+          <TextInput
+            fullWidth
+            label="Last Name"
+            defaultValue={lastName!}
+            name="lastName"
+            error={state.fieldErrors?.lastName}
+            disabled={pending}
+          />
+        </div>
+      </ConfirmationForm>
+    </Card>
+  );
+}

package/src/ui/System/SystemUser/SystemUserList.tsx

@@ -0,0 +1,18 @@
+import { systemUserListReadAction } from "../../../clerk/actions/systemUsers";
+import type { Role } from "../../../clerk/rbacConfig";
+import { SystemUserListCard } from "./SystemUserListCard";
+
+export async function SystemUserList(params: ClerkUserListParams) {
+  const systemUserList = await systemUserListReadAction(params);
+  return systemUserList.data.map((user) => (
+    <SystemUserListCard
+      key={user.id}
+      id={user.id}
+      fullName={user.fullName}
+      imageUrl={user.imageUrl}
+      emailAddress={user.primaryEmailAddress?.emailAddress}
+      role={user.publicMetadata.role as Role}
+      lastSignInAt={user.lastSignInAt}
+    />
+  ));
+}

package/src/ui/System/SystemUser/SystemUserListActions.tsx

@@ -0,0 +1,17 @@
+import { Button } from "@studiocubics/ui";
+import { Search, ChartNoAxesGantt } from "lucide-react";
+import { InvitationCreateDialog } from "../Invitations/InvitationListActions";
+
+export function SystemUserListActions() {
+  return (
+    <>
+      <InvitationCreateDialog />
+      <Button size="sm" square>
+        <Search />
+      </Button>
+      <Button size="sm" square>
+        <ChartNoAxesGantt />
+      </Button>
+    </>
+  );
+}

package/src/ui/System/SystemUser/SystemUserListCard.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import type { User } from "@clerk/nextjs/server";
+import {
+  CollectionItemCard,
+  CollectionItemCardActions,
+  type DocumentAction,
+  List,
+  ListItem,
+} from "@studiocubics/ui";
+import { toCapitalised } from "@studiocubics/utils";
+import {
+  BrickWallShield,
+  EllipsisVertical,
+  History,
+  OctagonX,
+} from "lucide-react";
+import Link from "next/link";
+import { SystemUserDeleteListItem } from "./SystemUserActions";
+import type { Route } from "next";
+import type { Role } from "../../../clerk/rbacConfig";
+
+export interface SystemUserListCardProps {
+  id: User["id"];
+  fullName: User["fullName"];
+  imageUrl: User["imageUrl"];
+  emailAddress?: NonNullable<User["primaryEmailAddress"]>["emailAddress"];
+  role?: Role;
+  lastSignInAt?: User["lastActiveAt"];
+}
+
+export function SystemUserListCard(props: SystemUserListCardProps) {
+  const { id, fullName, imageUrl, emailAddress, role, lastSignInAt } = props;
+  const actions: DocumentAction[] = [
+    {
+      actionType: "link",
+      icon: <BrickWallShield />,
+      label: "View Sessions",
+      href: `/dashboard/security/systemUsers/${id}/sessions`,
+      prefetch: true,
+      // @ts-expect-error
+      // This is dumb polymorphism garbage!
+      as: Link,
+    },
+    {
+      actionType: "popover",
+      icon: <EllipsisVertical />,
+      popoverChildren: (
+        <List className="surfaceContainer">
+          <SystemUserDeleteListItem uid={id} fullName={fullName} />
+          <ListItem
+            {...{
+              startIcon: <OctagonX />,
+              children: "Ban User",
+              color: "error",
+            }}
+          />
+        </List>
+      ),
+    },
+  ];
+
+  return (
+    <CollectionItemCard
+      as={Link}
+      href={`/dashboard/security/systemUsers/${id}` as Route}
+      title={fullName ?? "Name is missing"}
+      thumbnail={<img src={imageUrl} alt={fullName ?? ""} />}
+      subtitle={emailAddress}
+      chip={toCapitalised(role)}
+      description={
+        lastSignInAt ? (
+          <>
+            <History size={16} />
+            &ensp;Last Active&ensp;
+            <strong>{new Date(lastSignInAt).toDateString()}</strong>
+          </>
+        ) : (
+          "No activity found!"
+        )
+      }
+      footer={<CollectionItemCardActions actions={actions} />}
+    />
+  );
+}

package/src/ui/System/SystemUser/SystemUserListPage.tsx

@@ -0,0 +1,33 @@
+import { SYSTEM_USERS_PAGE_LIMIT as limit } from "../../../constants/pageLimits";
+import type { SecurityPageProps } from "../types";
+import { PageLayoutPagination } from "@studiocubics/ui";
+import { SystemUserListActions } from "./SystemUserListActions";
+import { SystemUserList } from "./SystemUserList";
+import { SystemUserListPagination } from "./SystemUserListPagination";
+
+export async function SystemUserListPage({
+  searchParams,
+  securityLinks,
+}: SecurityPageProps) {
+  const sp = await searchParams;
+  const page = Number(sp.page ?? 1);
+  const orderBy = String(sp.orderBy ?? "created_at");
+  const query = String(sp.query ?? "");
+  const offset = (page - 1) * limit;
+  const params = {
+    limit,
+    offset,
+    orderBy,
+    query,
+  };
+  return (
+    <PageLayoutPagination
+      actions={<SystemUserListActions />}
+      size="sm"
+      title={securityLinks[2]?.children}
+      paginationComponent={<SystemUserListPagination page={page} {...params} />}
+    >
+      <SystemUserList {...params} />
+    </PageLayoutPagination>
+  );
+}

package/src/ui/System/SystemUser/SystemUserListPagination.tsx

@@ -0,0 +1,19 @@
+import { NextSSRPagination } from "@studiocubics/next";
+import { systemUserListReadAction } from "../../../clerk/actions/systemUsers";
+
+export async function SystemUserListPagination({
+  page,
+  ...params
+}: {
+  page: number;
+  limit: number;
+} & ClerkUserListParams) {
+  const systemUsersList = await systemUserListReadAction(params);
+  return (
+    <NextSSRPagination
+      page={page}
+      limit={params.limit}
+      total={systemUsersList.totalCount}
+    />
+  );
+}

package/src/ui/System/SystemUser/SystemUserPage.tsx

@@ -0,0 +1,30 @@
+import { Breadcrumbs, PageTitle } from "@studiocubics/ui";
+import { SystemUserPageContent } from "./SystemUserPageContent";
+import Link from "next/link";
+import { auth } from "../../../clerk/auth";
+import { systemUserReadAction } from "../../../clerk/actions/systemUsers";
+export async function SystemUserPage({
+  params,
+}: PageProps<"/dashboard/security/systemUsers/[userId]">) {
+  const userId = (await params).userId;
+  const session = await auth();
+  const allowEdit = await session.hasPermission("systemUsers", "update");
+  const user = await systemUserReadAction(userId);
+  return (
+    <>
+      <PageTitle
+        size="sm"
+        title={
+          <Breadcrumbs defaultActive={1}>
+            <h4>
+              <Link href={"/dashboard/security/systemUsers"}>System Users</Link>
+            </h4>
+            <h4>{user.fullName}&apos;s Account</h4>
+          </Breadcrumbs>
+        }
+        noBorders
+      />
+      <SystemUserPageContent user={user} allowEdit={allowEdit} />
+    </>
+  );
+}