hazo_auth 0.1.0

package/src/components/layouts/my_settings/components/profile_picture_library_tab.tsx

@@ -0,0 +1,282 @@
+// file_description: Library tab component for profile picture dialog with category tabs and image grid
+// section: client_directive
+"use client";
+
+// section: imports
+import { useState, useEffect } from "react";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { VerticalTabs, VerticalTabsList, VerticalTabsTrigger, VerticalTabsContent } from "@/components/ui/vertical-tabs";
+import { Loader2 } from "lucide-react";
+import { HazoUITooltip } from "@/components/ui/hazo_ui_tooltip";
+
+// section: types
+export type ProfilePictureLibraryTabProps = {
+  useLibrary: boolean;
+  onUseLibraryChange: (use: boolean) => void;
+  onPhotoSelect: (photoUrl: string) => void;
+  disabled?: boolean;
+  libraryPhotoPath: string;
+  currentPhotoUrl?: string;
+  libraryTooltipMessage: string;
+  tooltipIconSizeSmall: number;
+  libraryPhotoGridColumns: number;
+  libraryPhotoPreviewSize: number;
+};
+
+// section: component
+/**
+ * Library tab component for profile picture dialog
+ * Two columns: left = vertical category tabs, right = image grid + preview
+ * Lazy loads thumbnails when category is selected
+ * @param props - Component props including library state, photo selection handler, and configuration
+ * @returns Library tab component
+ */
+export function ProfilePictureLibraryTab({
+  useLibrary,
+  onUseLibraryChange,
+  onPhotoSelect,
+  disabled = false,
+  libraryPhotoPath,
+  currentPhotoUrl,
+  libraryTooltipMessage,
+  tooltipIconSizeSmall,
+  libraryPhotoGridColumns,
+  libraryPhotoPreviewSize,
+}: ProfilePictureLibraryTabProps) {
+  const [categories, setCategories] = useState<string[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [photos, setPhotos] = useState<string[]>([]);
+  const [selectedPhoto, setSelectedPhoto] = useState<string | null>(currentPhotoUrl || null);
+  const [loadingCategories, setLoadingCategories] = useState(false);
+  const [loadingPhotos, setLoadingPhotos] = useState(false);
+
+  // Load categories on mount
+  useEffect(() => {
+    const loadCategories = async () => {
+      setLoadingCategories(true);
+      try {
+        const response = await fetch("/api/auth/library_photos");
+        const data = await response.json();
+        if (data.success && data.categories) {
+          setCategories(data.categories);
+          // Select first category if available
+          if (data.categories.length > 0) {
+            setSelectedCategory(data.categories[0]);
+          }
+        }
+      } catch (error) {
+        // Client-side error handling - show toast notification
+        import("sonner").then(({ toast }) => {
+          toast.error("Failed to load photo categories. Please try again.");
+        });
+      } finally {
+        setLoadingCategories(false);
+      }
+    };
+
+    void loadCategories();
+  }, []);
+
+  // Sync selectedPhoto with currentPhotoUrl when it changes
+  useEffect(() => {
+    if (currentPhotoUrl && currentPhotoUrl !== selectedPhoto) {
+      setSelectedPhoto(currentPhotoUrl);
+    }
+  }, [currentPhotoUrl]);
+
+  // Load photos when category is selected
+  useEffect(() => {
+    if (!selectedCategory) {
+      setPhotos([]);
+      if (!currentPhotoUrl) {
+        setSelectedPhoto(null);
+      }
+      return;
+    }
+
+    const loadPhotos = async () => {
+      setLoadingPhotos(true);
+      try {
+        const response = await fetch(`/api/auth/library_photos?category=${encodeURIComponent(selectedCategory)}`);
+        const data = await response.json();
+        if (data.success && data.photos) {
+          setPhotos(data.photos);
+          
+          // If we have a current photo URL and it's in this category, select it
+          if (currentPhotoUrl && data.photos.includes(currentPhotoUrl)) {
+            setSelectedPhoto(currentPhotoUrl);
+            onPhotoSelect(currentPhotoUrl);
+          } else if (data.photos.length > 0) {
+            // Otherwise, select first photo if available and notify parent
+            const firstPhoto = data.photos[0];
+            setSelectedPhoto(firstPhoto);
+            onPhotoSelect(firstPhoto);
+          } else if (!currentPhotoUrl) {
+            // Clear selection if no photos and no current photo
+            setSelectedPhoto(null);
+          }
+        }
+      } catch (error) {
+        // Client-side error handling - show toast notification
+        import("sonner").then(({ toast }) => {
+          toast.error("Failed to load photos. Please try again.");
+        });
+      } finally {
+        setLoadingPhotos(false);
+      }
+    };
+
+    void loadPhotos();
+  }, [selectedCategory, onPhotoSelect, currentPhotoUrl]);
+
+  const handlePhotoClick = (photoUrl: string) => {
+    setSelectedPhoto(photoUrl);
+    onPhotoSelect(photoUrl);
+  };
+
+  const getInitials = (): string => {
+    return "L";
+  };
+
+  return (
+    <div className="cls_profile_picture_library_tab flex flex-col gap-4">
+      {/* Switch */}
+      <div className="cls_profile_picture_library_tab_switch flex items-center gap-3">
+        <Switch
+          id="use-library"
+          checked={useLibrary}
+          onCheckedChange={onUseLibraryChange}
+          disabled={disabled}
+          className="cls_profile_picture_library_tab_switch_input"
+          aria-label="Use library photo"
+        />
+        <Label
+          htmlFor="use-library"
+          className="cls_profile_picture_library_tab_switch_label text-sm font-medium text-slate-700 cursor-pointer"
+        >
+          Use library photo
+        <HazoUITooltip
+          message={libraryTooltipMessage}
+          iconSize={tooltipIconSizeSmall}
+          side="top"
+        />
+        </Label>
+      </div>
+
+      {/* Three columns: category tabs (25%), photo grid (50%), preview (25%) */}
+      <div className="cls_profile_picture_library_tab_content grid grid-cols-12 gap-4">
+        {/* Left column: Category tabs (25% - 3 columns) */}
+        <div className="cls_profile_picture_library_tab_categories_container flex flex-col gap-2 col-span-3">
+          <Label className="cls_profile_picture_library_tab_categories_label text-sm font-medium text-slate-700">
+            Categories
+          </Label>
+          {loadingCategories ? (
+            <div className="cls_profile_picture_library_tab_loading flex items-center justify-center p-8 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px]">
+              <Loader2 className="h-6 w-6 text-slate-400 animate-spin" aria-hidden="true" />
+            </div>
+          ) : categories.length > 0 ? (
+            <VerticalTabs
+              value={selectedCategory || categories[0]}
+              onValueChange={setSelectedCategory}
+              className="cls_profile_picture_library_tab_vertical_tabs"
+            >
+              <VerticalTabsList className="cls_profile_picture_library_tab_vertical_tabs_list w-full">
+                {categories.map((category) => (
+                  <VerticalTabsTrigger
+                    key={category}
+                    value={category}
+                    className="cls_profile_picture_library_tab_vertical_tabs_trigger w-full justify-start"
+                  >
+                    {category}
+                  </VerticalTabsTrigger>
+                ))}
+              </VerticalTabsList>
+            </VerticalTabs>
+          ) : (
+            <div className="cls_profile_picture_library_tab_no_categories flex items-center justify-center p-8 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px]">
+              <p className="cls_profile_picture_library_tab_no_categories_text text-sm text-slate-600">
+                No categories available
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Middle column: Photo grid (50% - 6 columns) */}
+        <div className="cls_profile_picture_library_tab_photos_container flex flex-col gap-2 col-span-6">
+          <Label className="cls_profile_picture_library_tab_photos_label text-sm font-medium text-slate-700">
+            Photos
+          </Label>
+          {loadingPhotos ? (
+            <div className="cls_profile_picture_library_tab_photos_loading flex items-center justify-center p-8 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px]">
+              <Loader2 className="h-6 w-6 text-slate-400 animate-spin" aria-hidden="true" />
+            </div>
+          ) : photos.length > 0 ? (
+            <div className={`cls_profile_picture_library_tab_photos_grid grid grid-cols-${libraryPhotoGridColumns} gap-3 overflow-y-auto p-4 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px] max-h-[400px]`}>
+              {photos.map((photoUrl) => (
+                <button
+                  key={photoUrl}
+                  type="button"
+                  onClick={() => handlePhotoClick(photoUrl)}
+                  className={`
+                    cls_profile_picture_library_tab_photo_thumbnail
+                    aspect-square rounded-lg overflow-hidden border-2 transition-colors
+                    ${selectedPhoto === photoUrl ? "border-blue-500 ring-2 ring-blue-200" : "border-slate-200 hover:border-slate-300"}
+                  `}
+                  aria-label={`Select ${photoUrl}`}
+                >
+                  <img
+                    src={photoUrl}
+                    alt="Library photo thumbnail"
+                    className="cls_profile_picture_library_tab_photo_thumbnail_image w-full h-full object-cover"
+                    loading="lazy"
+                  />
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="cls_profile_picture_library_tab_no_photos flex items-center justify-center p-8 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px]">
+              <p className="cls_profile_picture_library_tab_no_photos_text text-sm text-slate-600">
+                No photos in this category
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Right column: Preview (25% - 3 columns) */}
+        <div className="cls_profile_picture_library_tab_preview_container flex flex-col gap-2 col-span-3">
+          <Label className="cls_profile_picture_library_tab_preview_label text-sm font-medium text-slate-700">
+            Preview
+          </Label>
+          {selectedPhoto ? (
+            <div className="cls_profile_picture_library_tab_preview flex flex-col items-center gap-4 p-4 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px] justify-center">
+              <div className="cls_profile_picture_library_tab_preview_image_wrapper w-full flex items-center justify-center">
+                <img
+                  src={selectedPhoto}
+                  alt="Selected library photo preview"
+                  className="cls_profile_picture_library_tab_preview_image max-w-full max-h-[350px] rounded-lg object-contain"
+                />
+              </div>
+              <p className="cls_profile_picture_library_tab_preview_text text-sm text-slate-600 text-center">
+                Selected photo preview
+              </p>
+            </div>
+          ) : (
+            <div className="cls_profile_picture_library_tab_preview_empty flex flex-col items-center justify-center gap-2 p-8 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px]">
+              <Avatar className="cls_profile_picture_library_tab_preview_empty_avatar h-32 w-32">
+                <AvatarFallback className="cls_profile_picture_library_tab_preview_empty_avatar_fallback bg-slate-200 text-slate-600 text-3xl">
+                  {getInitials()}
+                </AvatarFallback>
+              </Avatar>
+              <p className="cls_profile_picture_library_tab_preview_empty_text text-sm text-slate-500 text-center">
+                Select a photo to see preview
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/src/components/layouts/my_settings/components/profile_picture_upload_tab.tsx

@@ -0,0 +1,341 @@
+// file_description: Upload tab component for profile picture dialog with dropzone and preview
+// section: client_directive
+"use client";
+
+// section: imports
+import { useState, useCallback, useEffect } from "react";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { Upload, X, Loader2, Info } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import imageCompression from "browser-image-compression";
+
+// section: types
+export type ProfilePictureUploadTabProps = {
+  useUpload: boolean;
+  onUseUploadChange: (use: boolean) => void;
+  onFileSelect: (file: File) => Promise<void>;
+  maxSize: number; // in bytes
+  uploadEnabled: boolean;
+  disabled?: boolean;
+  currentPreview?: string;
+  photoUploadDisabledMessage?: string;
+  imageCompressionMaxDimension?: number;
+  uploadFileHardLimitBytes?: number;
+  allowedImageMimeTypes?: string[];
+};
+
+// section: component
+/**
+ * Upload tab component for profile picture dialog
+ * Two columns: left = dropzone, right = preview
+ * Uses browser-image-compression for client-side compression
+ * @param props - Component props including upload state, file handler, and configuration
+ * @returns Upload tab component
+ */
+export function ProfilePictureUploadTab({
+  useUpload,
+  onUseUploadChange,
+  onFileSelect,
+  maxSize,
+  uploadEnabled,
+  disabled = false,
+  currentPreview,
+  photoUploadDisabledMessage,
+  imageCompressionMaxDimension = 200,
+  uploadFileHardLimitBytes = 10485760, // 10MB default
+  allowedImageMimeTypes = ["image/jpeg", "image/jpg", "image/png"],
+}: ProfilePictureUploadTabProps) {
+  const [dragActive, setDragActive] = useState(false);
+  const [preview, setPreview] = useState<string | null>(currentPreview || null);
+  const [isNewImage, setIsNewImage] = useState(false); // Track if preview is showing a newly uploaded image
+  const [uploading, setUploading] = useState(false);
+  const [compressing, setCompressing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Update preview when currentPreview changes (e.g., when dialog opens)
+  useEffect(() => {
+    if (currentPreview) {
+      setPreview(currentPreview);
+      setIsNewImage(false); // Reset to current when dialog opens or currentPreview changes
+    } else {
+      // If no current preview, only clear if we're not showing a new image
+      if (!isNewImage) {
+        setPreview(null);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPreview]); // Only depend on currentPreview to avoid loops, isNewImage check is intentional
+
+  const handleFile = useCallback(async (file: File) => {
+        // Validate file type
+        if (!allowedImageMimeTypes.includes(file.type)) {
+          setError(`Invalid file type. Only ${allowedImageMimeTypes.map(t => t.split("/")[1].toUpperCase()).join(", ")} files are allowed.`);
+          return;
+        }
+
+    // Hard limit: reject files larger than configured limit (too large to process efficiently)
+    if (file.size > uploadFileHardLimitBytes) {
+      setError(`File is too large. Maximum size is ${Math.round(maxSize / 1024)}KB.`);
+      return;
+    }
+
+    setError(null);
+    setCompressing(false);
+    setUploading(false);
+
+    // If file is larger than maxSize, compress it
+    if (file.size > maxSize) {
+      setCompressing(true);
+      try {
+        // Compress image
+        const options = {
+          maxSizeMB: maxSize / (1024 * 1024), // Convert bytes to MB
+          maxWidthOrHeight: imageCompressionMaxDimension,
+          useWebWorker: true,
+          fileType: file.type,
+        };
+
+        const compressedFile = await imageCompression(file, options);
+        setCompressing(false);
+
+        // Check if compressed file is still too large
+        if (compressedFile.size > maxSize) {
+          setError(`File is too large. Maximum size is ${Math.round(maxSize / 1024)}KB. After compression, file is ${Math.round(compressedFile.size / 1024)}KB.`);
+          return;
+        }
+
+        // Create preview
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          setPreview(reader.result as string);
+          setIsNewImage(true); // Mark as new image
+        };
+        reader.readAsDataURL(compressedFile);
+
+        // Upload the compressed file
+        setUploading(true);
+        await onFileSelect(compressedFile);
+        setUploading(false);
+      } catch (error) {
+        setCompressing(false);
+        const errorMessage = error instanceof Error ? error.message : "Failed to compress image";
+        setError(errorMessage);
+      }
+    } else {
+      // File is already small enough, just upload it
+      setUploading(true);
+      try {
+        // Create preview
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          setPreview(reader.result as string);
+          setIsNewImage(true); // Mark as new image
+        };
+        reader.readAsDataURL(file);
+
+        // Call onFileSelect with original file
+        await onFileSelect(file);
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "Failed to process image";
+        setError(errorMessage);
+      } finally {
+        setUploading(false);
+      }
+    }
+  }, [maxSize, onFileSelect]);
+
+  const handleDrag = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    } else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+
+    if (!uploadEnabled || disabled) {
+      setError("Photo upload is not enabled");
+      return;
+    }
+
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      void handleFile(e.dataTransfer.files[0]);
+    }
+  }, [uploadEnabled, disabled, handleFile]);
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    if (!uploadEnabled || disabled) {
+      setError("Photo upload is not enabled");
+      return;
+    }
+
+    if (e.target.files && e.target.files[0]) {
+      void handleFile(e.target.files[0]);
+    }
+  }, [uploadEnabled, disabled, handleFile]);
+
+  const handleRemove = useCallback(() => {
+    setPreview(currentPreview || null); // Reset to current preview if available
+    setIsNewImage(false); // Reset to showing current image
+    setError(null);
+  }, [currentPreview]);
+
+  const getInitials = (): string => {
+    return "U";
+  };
+
+  return (
+    <div className="cls_profile_picture_upload_tab flex flex-col gap-4">
+      {/* Switch */}
+      <div className="cls_profile_picture_upload_tab_switch flex items-center gap-3">
+        <Switch
+          id="use-upload"
+          checked={useUpload}
+          onCheckedChange={onUseUploadChange}
+          disabled={disabled || !uploadEnabled}
+          className="cls_profile_picture_upload_tab_switch_input"
+          aria-label="Use uploaded photo"
+        />
+        <Label
+          htmlFor="use-upload"
+          className="cls_profile_picture_upload_tab_switch_label text-sm font-medium text-slate-700 cursor-pointer"
+        >
+          Use uploaded photo
+        </Label>
+      </div>
+
+      {!uploadEnabled && (
+        <div className="cls_profile_picture_upload_tab_disabled flex items-center gap-2 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+          <Info className="h-4 w-4 text-yellow-600" aria-hidden="true" />
+          <p className="cls_profile_picture_upload_tab_disabled_text text-sm text-yellow-800">
+            {photoUploadDisabledMessage}
+          </p>
+        </div>
+      )}
+
+      {/* Two columns: dropzone and preview */}
+      <div className="cls_profile_picture_upload_tab_content grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Left column: Dropzone */}
+        <div className="cls_profile_picture_upload_tab_dropzone_container flex flex-col gap-2">
+          <Label className="cls_profile_picture_upload_tab_dropzone_label text-sm font-medium text-slate-700">
+            Upload Photo
+          </Label>
+          <div
+            className={`
+              cls_profile_picture_upload_tab_dropzone
+              flex flex-col items-center justify-center
+              border-2 border-dashed rounded-lg p-8
+              transition-colors
+              ${dragActive ? "border-blue-500 bg-blue-50" : "border-slate-300 bg-slate-50"}
+              ${disabled || !uploadEnabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:border-slate-400"}
+            `}
+            onDragEnter={handleDrag}
+            onDragLeave={handleDrag}
+            onDragOver={handleDrag}
+            onDrop={handleDrop}
+            onClick={() => {
+              if (!disabled && uploadEnabled) {
+                document.getElementById("file-upload-input")?.click();
+              }
+            }}
+          >
+            <input
+              id="file-upload-input"
+              type="file"
+              accept={allowedImageMimeTypes.join(",")}
+              onChange={handleChange}
+              disabled={disabled || !uploadEnabled}
+              className="hidden"
+              aria-label="Upload profile picture"
+            />
+            <Upload className="h-8 w-8 text-slate-400 mb-2" aria-hidden="true" />
+            <p className="cls_profile_picture_upload_tab_dropzone_text text-sm text-slate-600 text-center">
+              Drag and drop an image here, or click to select
+            </p>
+            <p className="cls_profile_picture_upload_tab_dropzone_hint text-xs text-slate-500 text-center mt-1">
+              JPG or PNG, max {Math.round(maxSize / 1024)}KB
+            </p>
+          </div>
+          {error && (
+            <p className="cls_profile_picture_upload_tab_error text-sm text-red-600" role="alert">
+              {error}
+            </p>
+          )}
+        </div>
+
+        {/* Right column: Preview */}
+        <div className="cls_profile_picture_upload_tab_preview_container flex flex-col gap-2">
+          <Label className="cls_profile_picture_upload_tab_preview_label text-sm font-medium text-slate-700">
+            {isNewImage ? "Preview (new)" : "Preview (current)"}
+          </Label>
+          <div className="cls_profile_picture_upload_tab_preview_content flex flex-col items-center justify-center border border-slate-200 rounded-lg p-6 bg-slate-50 min-h-[200px]">
+            {compressing ? (
+              <div className="cls_profile_picture_upload_tab_compressing flex flex-col items-center gap-2">
+                <Loader2 className="h-8 w-8 text-slate-400 animate-spin" aria-hidden="true" />
+                <p className="cls_profile_picture_upload_tab_compressing_text text-sm text-slate-600">
+                  Compressing image...
+                </p>
+              </div>
+            ) : uploading ? (
+              <div className="cls_profile_picture_upload_tab_uploading flex flex-col items-center gap-2">
+                <Loader2 className="h-8 w-8 text-slate-400 animate-spin" aria-hidden="true" />
+                <p className="cls_profile_picture_upload_tab_uploading_text text-sm text-slate-600">
+                  Uploading...
+                </p>
+              </div>
+            ) : preview ? (
+              <div className="cls_profile_picture_upload_tab_preview_image_container flex flex-col items-center gap-4">
+                <div className="cls_profile_picture_upload_tab_preview_image_wrapper relative">
+                  <Avatar className="cls_profile_picture_upload_tab_preview_avatar h-32 w-32">
+                    <AvatarImage
+                      src={preview}
+                      alt="Uploaded profile picture preview"
+                      className="cls_profile_picture_upload_tab_preview_avatar_image"
+                    />
+                    <AvatarFallback className="cls_profile_picture_upload_tab_preview_avatar_fallback bg-slate-200 text-slate-600 text-3xl">
+                      {getInitials()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <Button
+                    type="button"
+                    onClick={handleRemove}
+                    variant="ghost"
+                    size="icon"
+                    className="cls_profile_picture_upload_tab_preview_remove absolute -top-2 -right-2 rounded-full h-6 w-6 border border-slate-300 bg-white hover:bg-slate-50"
+                    aria-label="Remove preview"
+                  >
+                    <X className="h-4 w-4" aria-hidden="true" />
+                  </Button>
+                </div>
+                <p className="cls_profile_picture_upload_tab_preview_success_text text-sm text-slate-600 text-center">
+                  Preview of your uploaded photo
+                </p>
+              </div>
+            ) : (
+              <div className="cls_profile_picture_upload_tab_preview_empty flex flex-col items-center gap-2">
+                <Avatar className="cls_profile_picture_upload_tab_preview_empty_avatar h-32 w-32">
+                  <AvatarFallback className="cls_profile_picture_upload_tab_preview_empty_avatar_fallback bg-slate-200 text-slate-600 text-3xl">
+                    {getInitials()}
+                  </AvatarFallback>
+                </Avatar>
+                <p className="cls_profile_picture_upload_tab_preview_empty_text text-sm text-slate-500 text-center">
+                  Upload an image to see preview
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/src/components/layouts/my_settings/config/my_settings_field_config.ts

@@ -0,0 +1,61 @@
+// file_description: my settings layout specific configuration helpers
+// section: imports
+import type { LayoutFieldMap } from "@/components/layouts/shared/config/layout_customization";
+import {
+  resolveButtonPalette,
+  type ButtonPaletteDefaults,
+  type ButtonPaletteOverrides,
+  type PasswordRequirementOptions,
+} from "@/components/layouts/shared/config/layout_customization";
+
+// section: field_identifiers
+export const MY_SETTINGS_FIELD_IDS = {
+  NAME: "name",
+  EMAIL: "email_address",
+  PASSWORD: "password",
+} as const;
+
+export type MySettingsFieldId = (typeof MY_SETTINGS_FIELD_IDS)[keyof typeof MY_SETTINGS_FIELD_IDS];
+
+// section: label_defaults
+export type MySettingsLabelDefaults = {
+  heading: string;
+  profileTab: string;
+  securityTab: string;
+  lastLoggedInLabel: string;
+  profilePictureLabel: string;
+  changePasswordButton: string;
+};
+
+const MY_SETTINGS_LABEL_DEFAULTS: MySettingsLabelDefaults = {
+  heading: "My Settings",
+  profileTab: "Profile",
+  securityTab: "Security",
+  lastLoggedInLabel: "Last logged in",
+  profilePictureLabel: "Profile Picture",
+  changePasswordButton: "Change Password",
+};
+
+export type MySettingsLabelOverrides = Partial<MySettingsLabelDefaults>;
+
+export const resolveMySettingsLabels = (
+  overrides?: MySettingsLabelOverrides,
+): MySettingsLabelDefaults => {
+  return {
+    ...MY_SETTINGS_LABEL_DEFAULTS,
+    ...overrides,
+  };
+};
+
+// section: button_palette_defaults
+const MY_SETTINGS_BUTTON_PALETTE_DEFAULTS: ButtonPaletteDefaults = {
+  submitBackground: "#0f172a",
+  submitText: "#ffffff",
+  cancelBorder: "#cbd5f5",
+  cancelText: "#0f172a",
+};
+
+export const resolveMySettingsButtonPalette = (
+  overrides?: ButtonPaletteOverrides,
+) => resolveButtonPalette(MY_SETTINGS_BUTTON_PALETTE_DEFAULTS, overrides);
+