User Profile & Address Management

Relevant source files

The following files were used as context for generating this wiki page:

• app/(account)/profile/profile-page-content.tsx
• features/users/components/profile-tab.tsx
• features/users/hooks/use-update-profile.ts
• features/users/services/users.service.ts
• types/user.types.ts
• features/addresses/components/addresses-tab.tsx
• features/addresses/hooks/use-addresses.ts
• features/addresses/services/addresses.service.spec.ts
• types/address.types.ts
• README.md

The User Profile and Address Management feature allows authenticated users to view and manage their personal account information and shipping addresses. This functionality is centralized within the "My Account" section of the application, accessible via the /profile route. The system is designed with a feature-based architecture, separating concerns for user data and address data into distinct modules.

The main user interface is a tabbed layout, which segregates different management areas: "Đơn hàng" (Orders), "Địa chỉ" (Addresses), and "Hồ sơ" (Profile). This document focuses on the "Profile" and "Addresses" tabs, detailing their components, data flows, and interactions with the backend API.

Sources: app/(account)/profile/profile-page-content.tsx:1-66, README.md:16-36

Architecture Overview

The project follows a feature-based organization, where both users and addresses are treated as separate features. Each feature module contains its own UI components, hooks for state management and data fetching, and type definitions. Business logic, specifically API interactions, is abstracted into a service layer.

This diagram illustrates the high-level structure for the Profile and Address management features.

User Profile Management

This section covers the "Hồ sơ" (Profile) tab, which allows users to view and update their full name and phone number.

Sources: features/users/components/profile-tab.tsx

UI Component: ProfileTab

The ProfileTab component is responsible for rendering the user's profile information and providing an editing interface.

Key Features:

• View Mode: Displays the user's full name, phone number, email, role, and account status.
• Edit Mode: Activated by clicking the "Chỉnh sửa" (Edit) button. It presents a form to update the fullName and phone.
• Form Handling: Uses react-hook-form for managing form state and zod with UpdateProfileRequestSchema for validation.
• State Management: Employs a local isEditing state to toggle between view and edit modes.
• Data Fetching: Leverages the useUserProfile hook to retrieve the current user's data.
• Data Mutation: Uses the useUpdateProfile hook to submit changes to the backend.

Sources: features/users/components/profile-tab.tsx:21-72

Data Models and Validation

The user profile data is structured according to the User type, and updates are validated against the UpdateProfileRequestSchema.

UpdateProfileRequest Interface

This interface defines the payload for updating a user's profile.

Field	Type	Description	Required
fullName	string	The user's full name.	Optional
phone	string	The user's phone number.	Optional

Sources: types/user.types.ts:15-18

The corresponding Zod schema enforces validation rules:

// types/user.types.ts

export const UpdateProfileRequestSchema = z.object({
  fullName: z.string().min(1, "Full name is required").optional(),
  phone: z.string().optional(),
});

Sources: types/user.types.ts:23-26

Profile Update Flow

The following sequence diagram illustrates the process of a user updating their profile information.

Address Management

This section covers the "Địa chỉ" (Addresses) tab, which provides full CRUD (Create, Read, Update, Delete) functionality for user shipping addresses.

Sources: features/addresses/components/addresses-tab.tsx

UI Component: AddressesTab

The AddressesTab component lists all of the user's saved addresses and provides controls to add new ones, edit existing ones, delete them, or set one as the default.

Key Features:

• Address List: Displays a list of addresses, highlighting the default one.
• CRUD Operations: Buttons for "Thêm địa chỉ mới" (Add new address), "Chỉnh sửa" (Edit), and "Xoá" (Delete).
• Set Default: A button to set a non-default address as the new default.
• Modals/Dialogs: Uses dialogs (AddressFormDialog) for creating and editing addresses.
• State Management: Leverages a suite of custom hooks (useAddresses, useCreateAddress, etc.) to manage server state.

Sources: features/addresses/components/addresses-tab.tsx

Data Models and Validation

Address data is defined by the Address interface and validated by AddressSchema.

Address Entity Relationship

The diagram below shows the relationship between a User and their Address entries. A user can have multiple addresses.

Address Schema Fields

Field	Type	Description	Constraints
id	string	Unique identifier (CUID).	cuidSchema()
userId	string	Foreign key linking to the User.	cuidSchema()
fullName	string	Recipient's full name.	min(1)
phone	string	Recipient's phone number.	min(10)
street	string	Street name and number.	min(1)
ward	string	Ward/Commune.	min(1)
district	string	District/Town.	min(1)
city	string	City/Province.	min(1)
isDefault	boolean	Whether this is the default shipping address.	-
createdAt	string	Timestamp of creation.	ISO Date String

Sources: types/address.types.ts:25-36

Address Management API

Interactions with the address endpoints are handled by the addressesApi service.

Method	HTTP Verb	Endpoint	Description
getAll()	GET	/addresses	Fetches all addresses for the current user.
getById(id)	GET	/addresses/{id}	Fetches a single address by its ID.
create(data)	POST	/addresses	Creates a new address.
update(id, data)	PUT	/addresses/{id}	Updates an existing address.
delete(id)	DELETE	/addresses/{id}	Deletes an address.
setDefault(id)	PATCH	/addresses/{id}/default	Sets an address as the default.

Sources: features/addresses/services/addresses.service.spec.ts:47-133

New Address Creation Flow

This diagram shows the sequence of events when a user adds a new address.

Summary

The User Profile and Address Management system is a well-structured feature that leverages modern frontend practices. It uses a feature-based architecture to isolate concerns, custom hooks based on React Query principles for robust server state management, and a dedicated service layer for API communication. Validation is handled consistently using Zod schemas, ensuring data integrity from the client to the server. This modular design makes the system maintainable and scalable.

Sources: README.md, features/users/hooks/use-update-profile.ts, features/addresses/hooks/use-addresses.ts