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> = {
name: Path<T>;
label: string;
placeholder: string;
placeholder?: string;
required?: boolean;
disabled?: 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"
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">
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">
<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">
src/components/forms/customers/CreateCustomer.tsx
+7 -9
View File
@@ -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={[
{
src/components/forms/notifications/CreateNotification.tsx
+11 -9
View File
@@ -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">