From dae564b8594b974a7c912e24dafe9c210bb1c4dc Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Sun, 19 Apr 2026 18:12:23 +0330
Subject: [PATCH] refactor(forms): update placeholders for improved clarity and
 user guidance

- Made the placeholder in InputGroup optional for better flexibility.
- Updated various form components (CreateCompany, CreateCustomer, CreateNotification, CreateCompanyCategory) to provide more descriptive placeholders, enhancing user understanding of expected input.
- Ensured consistency in placeholder text across different fields to improve overall user experience.
---
 .../FormElements/InputGroup/text-area.tsx     |  2 +-
 .../forms/companies/CreateCompany.tsx         | 39 ++++++++-----------
 .../CreateCompanyCategory.tsx                 |  4 +-
 .../forms/customers/CreateCustomer.tsx        | 16 ++++----
 .../notifications/CreateNotification.tsx      | 20 +++++-----
 5 files changed, 38 insertions(+), 43 deletions(-)

diff --git a/src/components/FormElements/InputGroup/text-area.tsx b/src/components/FormElements/InputGroup/text-area.tsx
index 1f78831..e63837c 100644
--- a/src/components/FormElements/InputGroup/text-area.tsx
+++ b/src/components/FormElements/InputGroup/text-area.tsx
@@ -11,7 +11,7 @@ import {
 type PropsType<T extends FieldValues> = {
   name: Path<T>;
   label: string;
-  placeholder: string;
+  placeholder?: string;
   required?: boolean;
   disabled?: boolean;
   active?: boolean;
diff --git a/src/components/forms/companies/CreateCompany.tsx b/src/components/forms/companies/CreateCompany.tsx
index 2da9202..c9027dd 100644
--- a/src/components/forms/companies/CreateCompany.tsx
+++ b/src/components/forms/companies/CreateCompany.tsx
@@ -58,7 +58,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             name="name"
             required
             type="text"
-            placeholder="Enter Company Name"
+            placeholder="Legal name as registered"
           />
           {errors.name && (
             <p className="mt-1 text-sm text-red-500">{errors.name.message}</p>
@@ -75,7 +75,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             name="email"
             required
             type="email"
-            placeholder="Enter Company Email"
+            placeholder="name@company.com"
           />
           {errors.email && (
             <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
@@ -100,7 +100,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             name="phone"
             required
             type="tel"
-            placeholder="Enter Company Phone"
+            placeholder="+971 50 123 4567"
           />
           {errors.phone && (
             <p className="mt-1 text-sm text-red-500">{errors.phone.message}</p>
@@ -138,7 +138,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             name="registration_number"
             type="text"
             required
-            placeholder="Enter Registration Number"
+            placeholder="Registry or license number"
           />
           {errors.registration_number && (
             <p className="mt-1 text-sm text-red-500">
@@ -158,7 +158,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             name="tax_id"
             type="text"
             required
-            placeholder="Enter Tax id"
+            placeholder="National tax identification number"
           />
           {errors.tax_id && (
             <p className="mt-1 text-sm text-red-500">{errors.tax_id.message}</p>
@@ -176,7 +176,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             name="industry"
             type="text"
             required
-            placeholder="Enter Industry"
+            placeholder="e.g. construction, software, logistics"
           />
           {errors.industry && (
             <p className="mt-1 text-sm text-red-500">
@@ -196,7 +196,6 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
               },
             })}
             name="description"
-            placeholder="Enter Description"
           />
           {errors.description && (
             <p className="mt-1 text-sm text-red-500">
@@ -216,7 +215,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             required
             name="website"
             type="url"
-            placeholder="Enter Company Website"
+            placeholder="https://www.example.com"
           />
           {errors.website && (
             <p className="mt-1 text-sm text-red-500">
@@ -283,7 +282,6 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             label="Timezone"
             name="timezone"
             type="text"
-            placeholder="Enter Timezone"
           />
           {errors.timezone && (
             <p className="mt-1 text-sm text-red-500">
@@ -305,7 +303,6 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             label="Employee Count"
             name="employee_count"
             type="number"
-            placeholder="Enter Employee Count"
           />
           {errors.employee_count && (
             <p className="mt-1 text-sm text-red-500">
@@ -323,7 +320,6 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             label="Annual Revenue"
             name="annual_revenue"
             type="number"
-            placeholder="Enter Annual Revenue"
           />
           {errors.annual_revenue && (
             <p className="mt-1 text-sm text-red-500">
@@ -341,7 +337,6 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             label="Founded Year"
             name="founded_year"
             type="number"
-            placeholder="Enter Founded Year"
           />
           {errors.founded_year && (
             <p className="mt-1 text-sm text-red-500">
@@ -366,7 +361,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             name="address.street"
             required
             type="text"
-            placeholder="Enter Street"
+            placeholder="Building, street, suite or unit"
           />
           {errors.address?.street && (
             <p className="mt-1 text-sm text-red-500">
@@ -389,7 +384,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             required
             name="address.city"
             type="text"
-            placeholder="Enter City"
+            placeholder="City or town"
           />
           {errors.address?.city && (
             <p className="mt-1 text-sm text-red-500">
@@ -412,7 +407,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             name="address.state"
             type="text"
             required
-            placeholder="Enter State"
+            placeholder="State, province, or region"
           />
           {errors.address?.state && (
             <p className="mt-1 text-sm text-red-500">
@@ -435,7 +430,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             name="address.postal_code"
             type="text"
             required
-            placeholder="Enter Postal code"
+            placeholder="Postal or ZIP code"
           />
           {errors.address?.postal_code && (
             <p className="mt-1 text-sm text-red-500">
@@ -458,7 +453,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             name="address.country"
             type="text"
             required
-            placeholder="Enter Country"
+            placeholder="Full country name"
           />
           {errors.address?.country && (
             <p className="mt-1 text-sm text-red-500">
@@ -471,7 +466,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             {...register("tags.keywords")}
             name="tags.keywords"
             label="Keywords"
-            placeholder="Enter Tag Keywords"
+            placeholder=""
             register={register}
             setValue={setValue}
             watch={watch}
@@ -491,7 +486,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
                   })
                 : []
             }
-            placeholder="Please select categories"
+            placeholder=""
           />
           <TagInput
             {...register("tags.cpv_codes")}
@@ -500,7 +495,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             shouldAddWithSpace
             watch={watch}
             setValue={setValue}
-            placeholder="Enter Tag CPV codes"
+            placeholder=""
           />
 
           <TagInput
@@ -509,7 +504,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             name="tags.certifications"
             watch={watch}
             setValue={setValue}
-            placeholder="Enter Tag Certifications"
+            placeholder=""
           />
 
           <TagInput
@@ -518,7 +513,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
             name="tags.specializations"
             watch={watch}
             setValue={setValue}
-            placeholder="Enter Tag Specializations"
+            placeholder=""
           />
           {errors.tags?.specializations && (
             <p className="mt-1 text-sm text-red-500">
diff --git a/src/components/forms/companies/company-categories/CreateCompanyCategory.tsx b/src/components/forms/companies/company-categories/CreateCompanyCategory.tsx
index 86f9148..a00a11a 100644
--- a/src/components/forms/companies/company-categories/CreateCompanyCategory.tsx
+++ b/src/components/forms/companies/company-categories/CreateCompanyCategory.tsx
@@ -25,6 +25,7 @@ const CreateCompanyCategoryForm = ({ defaultValues, editMode, id }: IProps) => {
         <div className="flex flex-col gap-2 md:col-span-1">
           <InputGroup
             label="Name"
+            required
             {...register("name", {
               required: {
                 value: true,
@@ -41,7 +42,7 @@ const CreateCompanyCategoryForm = ({ defaultValues, editMode, id }: IProps) => {
             })}
             type="text"
             name="name"
-            placeholder="Enter Category Name"
+            placeholder="e.g. Technology"
           />
           {errors.name && (
             <p className="mt-1 text-sm text-red-500">{errors.name.message}</p>
@@ -61,7 +62,6 @@ const CreateCompanyCategoryForm = ({ defaultValues, editMode, id }: IProps) => {
               },
             })}
             name="description"
-            placeholder="Enter Description"
           />
           {errors.description && (
             <p className="mt-1 text-sm text-red-500">
diff --git a/src/components/forms/customers/CreateCustomer.tsx b/src/components/forms/customers/CreateCustomer.tsx
index e54ed6e..a08be57 100644
--- a/src/components/forms/customers/CreateCustomer.tsx
+++ b/src/components/forms/customers/CreateCustomer.tsx
@@ -54,7 +54,7 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
             name="username"
             label="Username"
             type="text"
-            placeholder="Enter username"
+            placeholder="Unique login, letters and numbers only"
             required
           />
           {errors.username && (
@@ -75,9 +75,9 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
                   }))
                 : []
             }
-            placeholder="Select companies to assign"
             {...register("companies")}
             errors={errors}
+            placeholder=""
           />
         </div>
         <div className="flex flex-col gap-2">
@@ -93,7 +93,7 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
             label="Email"
             type="email"
             required
-            placeholder="Enter email"
+            placeholder="name@company.com"
           />
           {errors.email && (
             <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
@@ -108,7 +108,7 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
             name="role"
             value={watch("role")}
             items={getEnumAsArray(AdminRoles)}
-            placeholder="Select Role"
+            placeholder="Choose a role"
             required
           />
         </div>
@@ -141,7 +141,7 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
               iconPosition="right"
               label="Password"
               type={showPassword ? "text" : "password"}
-              placeholder="Enter password"
+              placeholder="At least 8 characters"
               required={!editMode}
             />
             {errors.password && (
@@ -163,8 +163,7 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
             })}
             name="full_name"
             label="Full name"
-            type="full_name"
-            placeholder="Enter full name"
+            type="text"
           />
           {errors.full_name && (
             <p className="mt-1 text-sm text-red-500">
@@ -187,7 +186,6 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
             name="phone"
             label="Phone"
             type="tel"
-            placeholder="Enter phone"
           />
           {errors.phone && (
             <p className="mt-1 text-sm text-red-500">{errors.phone.message}</p>
@@ -206,7 +204,7 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
             label="Type"
             required
             value={watch("type")}
-            placeholder="Select Type"
+            placeholder="Choose customer type"
             prefixIcon={<GlobeIcon />}
             items={[
               {
diff --git a/src/components/forms/notifications/CreateNotification.tsx b/src/components/forms/notifications/CreateNotification.tsx
index 14a819d..c246fb8 100644
--- a/src/components/forms/notifications/CreateNotification.tsx
+++ b/src/components/forms/notifications/CreateNotification.tsx
@@ -39,7 +39,7 @@ const CreateNotificationForm = () => {
             name="title"
             label="Title"
             type="text"
-            placeholder="Enter title"
+            placeholder="Short headline shown to recipients"
           />
           {errors.title && (
             <p className="mt-1 text-sm text-red-500">{errors.title.message}</p>
@@ -52,7 +52,6 @@ const CreateNotificationForm = () => {
             label="schedule at"
             range={false}
             timePicker
-            placeholder="Select schedule date"
           />
         </div>
         <div className="flex flex-col gap-2">
@@ -67,7 +66,7 @@ const CreateNotificationForm = () => {
             })}
             items={targets}
             label="target"
-            placeholder="Select target"
+            placeholder="Choose who this applies to"
             name="target"
           />
           {errors.target && (
@@ -82,7 +81,11 @@ const CreateNotificationForm = () => {
             {...register("recipient")}
             label="recipient"
             items={recipient ?? []}
-            placeholder="Select recipient"
+            placeholder={
+              recipient && recipient.length > 0
+                ? "Choose recipients"
+                : ""
+            }
             name="recipient"
           />
         </div>
@@ -92,7 +95,7 @@ const CreateNotificationForm = () => {
             {...register("channels")}
             label="channels"
             items={channels ?? []}
-            placeholder="Select channels"
+            placeholder="Email, push, or both"
             name="channels"
           />
         </div>
@@ -107,7 +110,6 @@ const CreateNotificationForm = () => {
             name="link"
             label="Link"
             type="url"
-            placeholder="Enter link"
           />
           {errors.link && (
             <p className="mt-1 text-sm text-red-500">{errors.link.message}</p>
@@ -124,7 +126,7 @@ const CreateNotificationForm = () => {
             })}
             items={priorities}
             label="Priority"
-            placeholder="Select priority"
+            placeholder="Choose urgency"
             name="priority"
           />
           {errors.priority && (
@@ -144,7 +146,7 @@ const CreateNotificationForm = () => {
             })}
             items={types}
             label="type"
-            placeholder="Select type"
+            placeholder="Info, warning, alert, or reject"
             name="type"
           />
           {errors.type && (
@@ -162,7 +164,7 @@ const CreateNotificationForm = () => {
             })}
             label="Description"
             name="description"
-            placeholder="Enter description"
+            placeholder="Main message — include context and any action needed"
           />
         </div>
         <div className="md:col-span-2">