Feature/profile picture update in settings

[dashabhijeet]

Pull Request

Description
This PR updates the ProfilePhotoForm component to improve avatar handling. It allows users to:

• Upload a new profile photo.
• Edit the uploaded image using cropping before confirming.
• Remove the profile photo.
• Preview the avatar in a larger circular view by clicking on it, with the rest of the profile photo card dimmed for focus.

The edit functionality remains intact when uploading a new photo, and the preview feature lets users clearly see their avatar.

Video Confirming the same

20250830-1904-15.7312230.mp4

Type of change

• Bug fix
• New feature
• Breaking change
• Documentation update

Checklist

• I have performed a self-review of my own code
• I have commented my code where necessary
• I have added tests where necessary
• My changes generate no new warnings

Related Issues
Closes #87

[vercel]

@dashabhijeet is attempting to deploy a commit to the sristy17's projects Team on Vercel.

A member of the Team first needs to authorize it.

[dashabhijeet]

@sristy17 @pooranjoyb

[pooranjoyb]

create a folder called storage in apis and create 3 files provider, query and types.

check the implementation of Auth related apis using tanstack.

[pooranjoyb]

take latest pulls from dev and fix conflicts

[dashabhijeet]

take latest pulls from master and fix conflicts

You mean the dev branch right?

[pooranjoyb]

take latest pulls from dev and fix conflicts

You mean the dev branch right?

yes

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
next-payroll	Error			Sep 3, 2025 5:31pm

[sristy17]

Resolve Conflicts

[sristy17]

[dashabhijeet]

Resolve Conflicts

Yeah yeah on it, was down with fever

[dashabhijeet]

@sristy17 @pooranjoyb please check

[pooranjoyb]

Why are you using so many states and hitting api in the component itself.

Rather, use a tanstack query and render it.

Write provider and query with tanstack

[dashabhijeet]

Why are you using so many states and hitting api in the component itself.

Rather, use a tanstack query and render it.

Write provider and query with tanstack

I initially used all that to make it work but forgot to change it, i will change it.

[sristy17]

[pooranjoyb]

update @dashabhijeet

[dashabhijeet]

Will submit by tomorrow eod

[dashabhijeet]

So now the states i have are important:

These are purely UI-side. They control how the user adjusts the crop box and zoom before uploading. No TanStack Query here because this never touches the server — it’s temporary interaction state.

const [crop, setCrop] = useState({ x: 0, y: 0 });
const [zoom, setZoom] = useState(1);
const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);

These also stay local only. They let us manage the workflow: when a file is picked, when the crop modal is open, and when the preview is shown. Again, TanStack Query isn’t needed because none of this lives on the server — it’s just client-side UX.

const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [imageUrl, setImageUrl] = useState<string | null>(null);
const [showCropModal, setShowCropModal] = useState(false);
const [showPreviewModal, setShowPreviewModal] = useState(false);

These link the local UI to the server state. We use TanStack Query mutations to upload/remove photos and refetch the user profile, but we still need local state here to immediately display the avatar (signed URL + path) while waiting for the query to sync. If we removed them, we’d lose flexibility to optimistically show the latest avatar.

const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
const [avatarPath, setAvatarPath] = useState<string | null>(null);

Finally, the two TanStack Query hooks (upload + remove) exist because server state should be handled through React Query — it automatically caches, invalidates, and refetches, keeping the backend in sync. Local state only covers UI interactions; React Query ensures the database and UI stay consistent.

[dashabhijeet]

@pooranjoyb @sristy17