refactor(auth, layouts): enhance UI components for improved aesthetics and usability

- Updated SignIn and Profile components with new background styles and layout adjustments for a more modern look.
- Refined button styles in GoogleSigninButton and SigninWithPassword for better user interaction feedback.
- Enhanced InputGroup and Select components with improved styling and error handling for a more consistent user experience.
- Adjusted Sidebar and Header components for better responsiveness and visual appeal.
- Implemented spotlight effect in UserInfo dropdown for a more engaging user interface.

src/utils/shared.ts

@@ -125,4 +125,39 @@ export const getPaginatedRowNumber = ({
   const safeLimit = limit > 0 ? limit : 10;
 
   return (safePage - 1) * safeLimit + index + 1;
+};
+
+export const ALLOWED_IMAGE_FILE_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/webp",
+  "image/jpg",
+];
+
+export const MAX_IMAGE_FILE_SIZE = 5 * 1024 * 1024;
+
+export const validateImageFile = ({
+  file,
+  allowedTypes = ALLOWED_IMAGE_FILE_TYPES,
+  maxSize = MAX_IMAGE_FILE_SIZE,
+}: {
+  file: File;
+  allowedTypes?: string[];
+  maxSize?: number;
+}) => {
+  if (!allowedTypes.includes(file.type)) {
+    return "Only JPG, PNG, or WEBP images are allowed";
+  }
+
+  if (file.size > maxSize) {
+    return "Image size must be 5MB or less";
+  }
+
+  return null;
+};
+
+export const formatFileSize = (bytes: number) => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 };