feat(docs): migrate and reorganize frontend guides for BP panel and file uploads

- Deleted outdated documentation files for BP panel list sorting and Filestore frontend guide.
- Created new documentation files for BP panel list sorting and Filestore frontend guide in the client directory.
- Updated the structure and content to enhance clarity and accessibility for frontend integration with file upload and profile image APIs.
- Ensured consistency in documentation style and improved examples for better developer experience.

src/components/forms/customers/CreateCustomer.tsx

@@ -3,6 +3,10 @@
 import { EyeIcon, GlobeIcon } from "@/assets/icons";
 import InputGroup from "@/components/FormElements/InputGroup";
 import MultiSelect from "@/components/FormElements/MultiSelect";
+import {
+  createPhoneFieldRules,
+  PhoneNumberInput,
+} from "@/components/FormElements/PhoneNumberInput";
 import { Select } from "@/components/FormElements/select";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";
 import FormFooter from "@/components/ui/FormFooter";
@@ -11,6 +15,7 @@ import { REGEX } from "@/constants/regex";
 import { FormErrorMessages } from "@/constants/Texts";
 import { CreateCustomerCredentials } from "@/lib/api";
 import { getEnumAsArray } from "@/utils/shared";
+import { Controller } from "react-hook-form";
 import useCreateCustomerPresenter from "./useCreateCustomerPresenter";
 
 interface IProps {
@@ -25,6 +30,7 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
     handleSubmit,
     register,
     watch,
+    control,
     onSubmit,
     companies,
     showPassword,
@@ -172,24 +178,20 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
           )}
         </div>
         <div className="flex flex-col gap-2">
-          <InputGroup
-            {...register("phone", {
-              minLength: {
-                value: 10,
-                message: FormErrorMessages.minLength(10),
-              },
-              maxLength: {
-                value: 20,
-                message: FormErrorMessages.maxLength(20),
-              },
-            })}
+          <Controller
             name="phone"
-            label="Phone"
-            type="tel"
+            control={control}
+            rules={createPhoneFieldRules({ required: false })}
+            render={({ field }) => (
+              <PhoneNumberInput
+                label="Phone"
+                value={field.value ?? ""}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                error={errors.phone?.message as string | undefined}
+              />
+            )}
           />
-          {errors.phone && (
-            <p className="mt-1 text-sm text-red-500">{errors.phone.message}</p>
-          )}
         </div>
 
         <div className="flex flex-col gap-2">