mazyar/tm_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(forms): update placeholders for improved clarity and user guidance

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