Move trial management into admin modal and menus

Author: SaravanakumarR2018

src/frontend/src/components/core/appHeaderComponent/components/AccountMenu/index.tsx

@@ -60,6 +60,14 @@ export const AccountMenu = () => {
       <HeaderMenuItems position="right" classNameSize="w-[272px]">
         <div className="divide-y divide-foreground/10">
           <div>
+            {isAdmin && !autoLogin && (
+              <div className="flex items-center justify-between rounded-md border border-border/40 bg-muted px-4 py-2 text-xs font-medium text-foreground">
+                <span>You are an Admin</span>
+                <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] uppercase tracking-wide text-primary">
+                  Admin
+                </span>
+              </div>
+            )}
             <div className="h-[44px] items-center px-4 pt-3">
               <div className="flex items-center justify-between">
                 <span
@@ -111,18 +119,6 @@ export const AccountMenu = () => {
                     Admin Page
                   </span>
                 </HeaderMenuItemButton>
-                <HeaderMenuItemButton
-                  onClick={() => {
-                    navigate("/admin/trial-access");
-                  }}
-                >
-                  <span
-                    data-testid="menu_trial_access_button"
-                    id="menu_trial_access_button"
-                  >
-                    Trial Access
-                  </span>
-                </HeaderMenuItemButton>
               </div>
             )}
             <HeaderMenuItemLink

src/frontend/src/constants/constants.ts

@@ -628,6 +628,10 @@ export const CONTROL_NEW_USER = {
   password: "",
   is_active: false,
   is_superuser: false,
+  optins: {
+    trial_access_until: "",
+    skip_trial_access: false,
+  },
 };
 
 export const tabsCode = [];

src/frontend/src/customization/components/ClerkAccountMenu.tsx

@@ -3,6 +3,7 @@ import { IS_CLERK_AUTH, useLogout } from "@/clerk/auth";
 import { LogOut, Users, Settings, User } from "lucide-react";
 import { AccountMenu } from "@/components/core/appHeaderComponent/components/AccountMenu";
 import { cn } from "@/utils/utils";
+import useAuthStore from "@/stores/authStore";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -17,6 +18,7 @@ export function ClerkAccountMenu() {
   const { openUserProfile, openOrganizationProfile } = useClerk();
   const { user } = useUser();
   const [menuOpen, setMenuOpen] = useState(false);
+  const isAdmin = useAuthStore((state) => state.isAdmin);
 
   const handleLogout = () => {
     mutationLogout();
@@ -72,6 +74,14 @@ export function ClerkAccountMenu() {
 
         {/* Menu Items */}
         <div className="pt-2 text-sm">
+          {isAdmin ? (
+            <div className="mx-4 mb-2 flex items-center justify-between rounded-md border border-border/40 bg-muted px-3 py-2 text-xs font-medium text-foreground">
+              <span>You are an Admin</span>
+              <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] uppercase tracking-wide text-primary">
+                Admin
+              </span>
+            </div>
+          ) : null}
           {/* Manage Account */}
           <DropdownMenuItem
             onClick={handleOpenUserProfile}
@@ -90,6 +100,19 @@ export function ClerkAccountMenu() {
             Members
           </DropdownMenuItem>
 
+          {/* Admin */}
+          <DropdownMenuItem
+            asChild
+            className="flex items-center gap-3 px-5 py-3 rounded-lg hover:bg-muted/30 transition"
+          >
+            <a href="/admin" className="flex items-center gap-3">
+              <span className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-primary/10 text-[10px] font-semibold uppercase text-primary">
+                A
+              </span>
+              Admin
+            </a>
+          </DropdownMenuItem>
+
           {/* Settings */}
           <DropdownMenuItem asChild>
             <a
@@ -122,4 +145,4 @@ export function ClerkAccountMenu() {
   );
 }
 
-export default ClerkAccountMenu;
+export default ClerkAccountMenu;

src/frontend/src/modals/userManagementModal/index.tsx

@@ -33,6 +33,14 @@ export default function UserManagementModal({
   const [confirmPassword, setConfirmPassword] = useState(data?.password ?? "");
   const [isActive, setIsActive] = useState(data?.is_active ?? false);
   const [isSuperUser, setIsSuperUser] = useState(data?.is_superuser ?? false);
+  const [trialDate, setTrialDate] = useState<string>(
+    data?.optins?.trial_access_until
+      ? data.optins.trial_access_until.split("T")[0]
+      : "",
+  );
+  const [skipTrial, setSkipTrial] = useState<boolean>(
+    Boolean(data?.optins?.skip_trial_access),
+  );
   const [inputState, setInputState] = useState<UserInputType>(CONTROL_NEW_USER);
   const { userData } = useContext(AuthContext);
 
@@ -50,6 +58,12 @@ export default function UserManagementModal({
         setUserName(data.username);
         setIsActive(data.is_active);
         setIsSuperUser(data.is_superuser);
+        setTrialDate(
+          data.optins?.trial_access_until
+            ? data.optins.trial_access_until.split("T")[0]
+            : "",
+        );
+        setSkipTrial(Boolean(data.optins?.skip_trial_access));
 
         handleInput({ target: { name: "username", value: username } });
         handleInput({ target: { name: "is_active", value: isActive } });
@@ -64,6 +78,8 @@ export default function UserManagementModal({
     setConfirmPassword("");
     setIsActive(false);
     setIsSuperUser(false);
+    setTrialDate("");
+    setSkipTrial(false);
   }
 
   return (
@@ -85,7 +101,21 @@ export default function UserManagementModal({
               return;
             }
             resetForm();
-            onConfirm(1, inputState);
+            const trialAccess = trialDate
+              ? new Date(trialDate).toISOString()
+              : undefined;
+            onConfirm(1, {
+              ...inputState,
+              username,
+              password,
+              is_active: isActive,
+              is_superuser: isSuperUser,
+              optins: {
+                ...(data?.optins ?? {}),
+                ...(trialAccess ? { trial_access_until: trialAccess } : {}),
+                skip_trial_access: skipTrial,
+              },
+            });
             setOpen(false);
             event.preventDefault();
           }}
@@ -278,6 +308,38 @@ export default function UserManagementModal({
                 </Form.Field>
               )}
             </div>
+
+            <div className="grid gap-2">
+              <Form.Label className="data-[invalid]:label-invalid">
+                Trial end date
+              </Form.Label>
+              <Form.Control asChild>
+                <input
+                  type="date"
+                  value={trialDate}
+                  className="primary-input"
+                  onChange={(event) => setTrialDate(event.target.value)}
+                />
+              </Form.Control>
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  checked={skipTrial}
+                  id="skip_trial_access"
+                  className="relative top-0.5"
+                  onCheckedChange={(value) => {
+                    setSkipTrial(Boolean(value));
+                  }}
+                />
+                <Form.Label className="data-[invalid]:label-invalid">
+                  Skip trial for this user
+                </Form.Label>
+              </div>
+              {data?.optins?.trial_access_until ? (
+                <p className="text-xs text-muted-foreground">
+                  Stored value: {data.optins.trial_access_until}
+                </p>
+              ) : null}
+            </div>
           </div>
 
           <div className="float-right">