Refactor phone input handling across onboarding and settings forms

- Replaced PhoneInput component with ControlledPhoneField for better integration with react-hook-form.
- Updated validation for phone numbers using isValidPhone function to ensure proper formatting.
- Removed country code handling from forms, simplifying phone number management.
- Introduced new phone field component with consistent styling and behavior.
- Added phone number validation on the backend using class-validator.
- Removed unused phone utility functions and cleaned up related code.

apps/edr-freight-web/portal/src/components/auth/PhoneInput.tsx

@@ -1,47 +0,0 @@
-import { Group, Stack, Text, TextInput, type TextInputProps } from "@mantine/core";
-
-type InputPassthrough = Partial<TextInputProps>;
-
-interface PhoneInputProps {
-  disabled?: boolean;
-  countryCode?: InputPassthrough;
-  phone?: InputPassthrough;
-  countryCodeError?: { message?: string };
-  phoneError?: { message?: string };
-  label?: string;
-}
-
-export default function PhoneInput({
-  disabled,
-  countryCode: countryCodeProps,
-  phone: phoneProps,
-  countryCodeError,
-  phoneError,
-  label = "Phone Number",
-}: PhoneInputProps) {
-  const errorMsg = countryCodeError?.message ?? phoneError?.message;
-  return (
-    <Stack gap={6}>
-      <Text size="sm" fw={500} c="edr-text">{label}</Text>
-      <Group gap={8} wrap="nowrap" align="flex-start">
-        <TextInput
-          w={80}
-          disabled={disabled}
-          error={Boolean(countryCodeError)}
-          styles={{ input: { textAlign: "center" } }}
-          {...countryCodeProps}
-        />
-        <TextInput
-          style={{ flex: 1 }}
-          placeholder="912345678"
-          disabled={disabled}
-          error={Boolean(phoneError)}
-          {...phoneProps}
-        />
-      </Group>
-      {errorMsg && (
-        <Text size="xs" c="red.6">{errorMsg}</Text>
-      )}
-    </Stack>
-  );
-}