Merge branch 'dev' into refactor/landing-page

src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx

@@ -2,6 +2,7 @@
 
 import { AxiosResponse } from "axios";
 import { EllipsisIcon } from "lucide-react";
+import Link from "next/link";
 import { useState } from "react";
 
 import CustomButton from "~/components/common/common-button/common-button";
@@ -184,7 +185,11 @@ const Members = () => {
         <p className="text-sm">
           On the Free plan all members in a workspace are administrators.
           Upgrade to a paid plan to add the ability to assign or remove
-          administrator roles. <span className="text-primary">Go to Plans</span>
+          administrator roles.{" "}
+          <Link href="/dashboard/admin/settings/payment-information">
+            {" "}
+            <span className="text-primary">Go to Plans</span>
+          </Link>
         </p>
       </div>
       <div className="my-8 flex justify-between">

src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx

@@ -137,8 +137,9 @@ function CreateNewRolePage() {
     handleSubmit,
     formState: { errors },
     setValue,
+    trigger,
   } = useForm<UseFormInputs>({
-    mode: "onBlur",
+    mode: "onChange",
     resolver: zodResolver(roleSchema),
   });
 
@@ -207,6 +208,10 @@ function CreateNewRolePage() {
     }
   };
 
+  const handleInputChange = (field: keyof UseFormInputs) => {
+    trigger(field);
+  };
+
   return (
     <div className="flex w-full max-w-[682px] flex-col gap-6">
       <div className="flex flex-col gap-2">
@@ -237,17 +242,28 @@ function CreateNewRolePage() {
             <input
               type="text"
               placeholder="e.g: IT Staff"
-              {...register("name")}
-              className="!w-full rounded-md border border-border bg-transparent px-3 py-2 shadow-sm outline-none focus:border-primary focus:ring-ring md:w-56"
+              {...register("name", {
+                onChange: () => handleInputChange("name"),
+              })}
+              className={`!w-full rounded-md border ${
+                errors.name ? "border-red-500" : "border-border"
+              } bg-transparent px-3 py-2 shadow-sm outline-none focus:border-primary focus:ring-ring md:w-56`}
             />
+            {errors.name && (
+              <p className="mt-1 text-sm text-red-500">{errors.name.message}</p>
+            )}
           </div>
+
           <div className="flex w-full max-w-[620px] flex-col gap-2">
             <label className="block text-left text-base font-bold text-neutral-dark-2">
               Permissions
             </label>
             <div className="flex flex-col gap-0.5">
               <Select
-                onValueChange={(value) => setPermissions(JSON.parse(value))}
+                onValueChange={(value) => {
+                  setPermissions(JSON.parse(value));
+                  trigger("permissions");
+                }}
               >
                 <SelectTrigger className="!text-left">
                   <SelectValue
@@ -269,7 +285,9 @@ function CreateNewRolePage() {
                 </SelectContent>
               </Select>
               {errors.permissions && (
-                <p className="text-red-500">Please select valid permissions.</p>
+                <p className="mt-1 text-sm text-red-500">
+                  {errors.permissions.message}
+                </p>
               )}
             </div>
           </div>
@@ -279,9 +297,18 @@ function CreateNewRolePage() {
             </label>
             <textarea
               placeholder="describe role"
-              {...register("description")}
-              className="min-h-20 w-full resize-none rounded-md border border-border bg-transparent px-3 py-2 shadow-sm outline-none focus:border-primary focus:ring-ring"
+              {...register("description", {
+                onChange: () => handleInputChange("description"),
+              })}
+              className={`min-h-20 w-full resize-none rounded-md border ${
+                errors.description ? "border-red-500" : "border-border"
+              } bg-transparent px-3 py-2 shadow-sm outline-none focus:border-primary focus:ring-ring`}
             />
+            {errors.description && (
+              <p className="mt-1 text-sm text-red-500">
+                {errors.description.message}
+              </p>
+            )}
           </div>
         </div>
         <div className="flex gap-x-6">

src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx

@@ -270,7 +270,7 @@ export default function SettingsPage() {
               onValueChange={(value) => setPronoun(value)}
             >
               <SelectTrigger className="w-full rounded-md border border-slate-300 bg-white text-sm font-medium text-slate-700 focus:border-orange-500 focus:ring-0">
-                <SelectValue placeholder="Select language" />
+                <SelectValue placeholder="Select" />
               </SelectTrigger>
               <SelectContent>
                 {pronouns.map((pronoun) => (

src/components/common/modals/invite-member/index.tsx

@@ -154,14 +154,14 @@ const InviteMemberModal: React.FC<ModalProperties> = ({ show, onClose }) => {
             </div>
             <div>
               <label className="mb-2 block text-left text-base text-neutral-dark-2">
-                Add to Organization (Optional)
+                Invite as
               </label>
               <Select
                 onOpenChange={handleOrganizationDropdownOpen}
                 onValueChange={handleOrganizationChange}
               >
                 <SelectTrigger className="bg-white">
-                  <SelectValue placeholder="Select Organization" />
+                  <SelectValue placeholder="Select Role" />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectGroup>

src/components/layouts/footer/index.tsx

@@ -152,8 +152,8 @@ const Footer = () => {
   ];
 
   const footerBottom = [
-    { route: "privacyPolicy", link: "/" },
-    { route: "termsOfUse", link: "/" },
+    { route: "privacyPolicy", link: "/privacy-policy" },
+    { route: "termsOfUse", link: "/terms-and-conditions" },
   ];
 
   //

src/schemas/index.ts

@@ -121,14 +121,25 @@ export const permissionsSchema = z.object({
   "Can create users": z.boolean(),
   "Can blacklist/whitelist users": z.boolean(),
 });
+
 export const roleSchema = z.object({
-  name: z.string().min(2, {
-    message: "name is required",
-  }),
+  name: z
+    .string()
+    .min(2, { message: "Name is required" })
+    .max(50, { message: "Name must be 50 characters or less" })
+    .regex(/^[\d !(),.?A-Za-z-]+$/, {
+      message:
+        "Name can only include letters, numbers, spaces, and common punctuation marks",
+    }),
+  description: z
+    .string()
+    .min(10, { message: "Role description must be at least 10 characters" })
+    .max(200, { message: "Role description must be 200 characters or less" })
+    .regex(/^[\d !(),.?A-Za-z-]+$/, {
+      message:
+        "Description can only include letters, numbers, spaces, and common punctuation marks",
+    }),
   permissions: z
     .array(z.string().uuid())
     .nonempty("At least one permission must be selected"),
-  description: z.string().min(2, {
-    message: "Role description must be at least 2 characters.",
-  }),
 });