refactor(Breadcrumbs, InputGroup, Layouts, Tables): enhance styling and structure for improved responsiveness

- Adjusted Breadcrumb component styles for better spacing and font size.
- Made placeholder in InputGroup optional and refined input styles for consistency.
- Updated MainLayout and Header components for improved padding and layout.
- Enhanced table components by importing necessary elements and optimizing rendering logic.
- Refactored CompanyCategoriesTable to utilize optimistic updates for better user experience.

src/components/forms/admins/CreateAdmin.tsx

@@ -13,12 +13,11 @@ interface IProps {
   id?: string;
 }
 const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
-  const { errors, handleSubmit, register,  onSubmit } =
-    useCreateAdminPresenter({
-      editMode,
-      defaultValues,
-      id,
-    });
+  const { errors, handleSubmit, register, onSubmit } = useCreateAdminPresenter({
+    editMode,
+    defaultValues,
+    id,
+  });
 
   return (
     <form
@@ -30,7 +29,7 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
       <div className="flex flex-col gap-9">
         <ShowcaseSection
           title="Input Fields"
-          className="grid grid-cols-1 gap-5 md:grid-cols-2"
+          className="grid grid-cols-1 gap-3 md:grid-cols-2"
         >
           <div>
             <InputGroup
@@ -46,7 +45,7 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
                 },
               })}
               label="Full name"
-              placeholder="Full name"
+              placeholder="Enter full name (5-100 characters)"
               required
               type="text"
               name="full_name"
@@ -61,7 +60,7 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
           <div>
             <InputGroup
               label="Username"
-              placeholder="Username"
+              placeholder="Letters and numbers only (3-30)"
               autoComplete="off"
               required
               type="text"
@@ -96,7 +95,7 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
             <InputGroup
               label="Email"
               autoComplete="off"
-              placeholder="Email"
+              placeholder="you@example.com"
               type="email"
               required
               {...register("email", {
@@ -121,8 +120,8 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
             <div>
               <InputGroup
                 label="Password"
-                placeholder="Password"
                 autoComplete="new-password"
+                placeholder="At least 8 characters"
                 required
                 type="password"
                 {...register("password", {
@@ -152,7 +151,6 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
           <div>
             <InputGroup
               label="Phone"
-              placeholder="Phone"
               type="text"
               {...register("phone", {
                 minLength: {
@@ -163,9 +161,9 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
                   value: 20,
                   message: FormErrorMessages.maxLength(20),
                 },
-                pattern:{
-                  value:REGEX.PHONE,
-                  message:FormErrorMessages.invalidPattern
+                pattern: {
+                  value: REGEX.PHONE,
+                  message: FormErrorMessages.invalidPattern,
                 },
               })}
               name="phone"
@@ -180,7 +178,6 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
           <div>
             <InputGroup
               label="Department"
-              placeholder="Department"
               type="text"
               {...register("department", {
                 minLength: {
@@ -204,7 +201,6 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
           <div>
             <InputGroup
               label="Position"
-              placeholder="Position"
               type="text"
               {...register("position", {
                 minLength: {
@@ -230,7 +226,6 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
               type="file"
               fileStyleVariant="style1"
               label="Attach file"
-              placeholder="Attach file"
               register={register}
               name="profile_image"
             />