✅ Client Auth

Client Portal Auth

Functional Requirement Document

BA & Ideation: Dakshraj Jhala

Reviewed By: KG (Project Manager)

Updated Date: 06 October 2025
Status: Approved

Version 1.0

Functional Requirements Document (FRD) - Client Portal Sign In

1. Module Overview

• Module Name: Client Portal Authentication (Login, Create Password, Forgot Password, and Magic Link Login)
• Purpose: To enable clients associated with agency projects to securely access their brand-specific client portals using multiple authentication methods, including magic link login or password-based login, and to provide a secure process for password creation and recovery.
• Business Goal: To offer clients a seamless, secure, and flexible authentication experience across brand-specific portals, allowing them to easily log in, create or reset passwords, and access all associated project details, communications, and account information while maintaining brand and data security standards.

2. User Roles & Permissions

Role

Description

Key Permissions

Client

A client associated with at least one project under the brand who accesses their brand-specific portal

- Access the client portal only if associated with at least one project of the brand

- Login via password-based authentication or magic link

- Create a password for first-time access

- Reset forgotten password

- Request and use magic links for authentication

- View all projects associated with their email under the specific brand and Access project details

- No access to projects from other brands (separate portals required)

- No access if not associated with any project of the brand

3. User Flow

3.1 Client Login - Need to add if the client is invited to the project

3.2 Create Password First Time

3.3 Forgot Password

3.4 Magic Link Login - Check magic link validation rule

4. Functional Logic

4.1 Client Login

• Client Portal Access
  • The client receives a client portal link at the email address used during client creation by the agency or the email address submitted through the lead form
  • The portal link is sent when the agency associates the client with a project or when the client submits a lead form
  • The client will receive the portal link only if they are attached to a project under any brand of any agency, regardless of whether the project is in the New Lead stage or any other stage
  • To access the portal, the client must be associated with at least one project within the current brand
• Brand-Specific Client Portal Access
  • Each brand has its own unique client portal URL.
  • If a client is associated with projects from multiple brands (within the same or different agencies), a separate portal URL is generated for each brand.
  • Each client portal is brand-specific and provides access only to projects under that particular brand.
  • Clients log in once using their registered email and password to access all their projects within that brand.
  • The authentication system validates the client’s credentials and grants access to every project linked to their account under the same brand’s portal.
• The client can access the client portal through the provided client portal link and log in either using the magic link or by creating a password and logging in with it.
  • Log in using magic link - Refer, Click Here
  • Log in using create password - Refer, Click Here
• Account Login (email & password): This sign-in using credentials (email and password) flow is designed for clients who have already completed their password creation. Clients must use their previously set password to authenticate and access their brand's project portal with all associated projects
• Forgot Password: If the client forgot their password, they can reset their password using the Forgot Password functionality from the login screen - Refer - Click Here
• Failed Attempt Counter: The system monitors consecutive failed login attempts for each email address. If a user enters an incorrect password 5+ times in a row, their account will be locked for 1 hour, preventing further login during the lockout period
• Account Lockout: Locked accounts automatically unlock after exactly 1 hour from the lockout time
• Case Insensitive Email: Email validation treats uppercase and lowercase letters as identical

4.2 Create Password First Time

Email Validation & Create Password Logic:

Email must exist in the agency portal as a registered client email address

The client must be associated with at least one project for the brand that the user tries to log into

Client must not have an existing password (first-time password creation only)

• • The client must not have created a password previously in the system.
  • The client may have logged in earlier using a magic link, but the password has not been set yet.
  • This process applies only to first-time password creation. If a password has already been created and the user attempts to use the “Create a Password” option, an error message will be displayed when they click “Send Link” after entering their email address.
  • Email format must be valid according to standard email validation rules
  • Upon successful validation, immediately redirect the user to the password creation screen, where they will be prompted to enter a new password and confirm it.

Progressive Password Validation Logic:

Display only the next missing requirement as the user types in the Password field

Update the validation message dynamically after each requirement is met

Validation order: Length (6+ chars) → Uppercase → Number → Special character → Lowercase → Max length (20 chars)

Real-time validation for the Repeat Password field to check that it matches the entered Password

Brand Security:

Password creation flow is brand-specific and only provides access to the appropriate brand portal

Email validation ensures the client belongs to the current brand

Post-Password Creation:

After successful password creation, the client will be redirected to the login screen

Client must manually enter their email and newly created password to access the portal

4.3 Forgot Password

The users should be able to reset their passwords by clicking the "Forgot Password" option.

They will be redirected to a page where they must enter their registered email address for the client portal.

Email Validation Logic:

Email must exist in the client portal as a registered client email address and must be associated with at least one project for the brand that the user tries to log into.

Email format must be valid according to standard email validation rules.

If the email is invalid or unregistered, an inline error message is displayed, and the process stops.

• Upon successful validation, a secure password recovery link will be sent to the user’s registered email address, allowing them to reset their password.

Recovery Link Logic:

Each password reset request generates a unique link valid for 10 minutes.

If a new request is made, the previous link is automatically invalidated.

Rate limiting applies - only one password reset request is allowed per email every 15 minutes.

Once the recovery link is sent, the confirmation screen is displayed, showing the recipient's email with an option to resend the link after the cooldown period.

Password Reset Page Access:

When the client opens the recovery link, the system verifies that the link is valid, active, and not previously used.

If verification succeeds, the client is redirected to the “Set New Password” screen.

If verification fails due to expiration or invalidity, an error message is displayed with an option to request a new link.

Progressive Password Validation Logic: Refer - Click Here

Post-Password Reset:

After successful password creation, the client will be redirected to the login screen.

Clients must manually enter their email and newly created password to access the portal.

All previously active sessions are logged out to ensure account security.

Password reset flow is brand-specific and provides access only to the respective brand portal.

4.4 Magic Link Login

• The client should be able to access the client portal at any time using a magic link - regardless of whether they have already created a password or not.
• When the client clicks the “Login using a Magic Link” button, they will be prompted to enter a valid email address to receive the magic link.
  • The entered email must exist in the agency portal as a registered client email address by the agency
  • The client should be associated with at least one project of that brand to access its brand-specific client portal
• Magic Link Generation Rules:
  • Magic links are brand-specific and generated only for the current brand's portal
  • Magic links expire automatically after 7 days from generation
• Rate Limiting Logic:
  • No restriction on magic link generation requests per email address
  • Resend functionality is available with a 60-second cooldown between each request
• When the client clicks the link received in the email, they will be automatically logged in to the client portal without needing to enter any additional credentials.
• After successful login, they will be redirected to the Project Details page → Overview tab of the project they are associated with.
• If the client is associated with multiple projects, they will be redirected to the most recently added project.

5. Field Details & Validations

5.1 Client Login

Field Name

Type

Required

Validation Rules

Email Address

Email

Yes

- Valid email format (user@example.com)

- No spaces allowed

- Must be registered in the system by the agency

- Case insensitive

Password

Password

Yes

- Must match the already created password by the agency

- No spaces allowed

- Min 6 and Max 20 characters

- After 5+ incorrect attempts, restrict submission for one hour for the particular email and display a relevant error message

Eye Icon Toggle

Toggle

Optional

- Shows/hides password text

- Default state: password hidden

Forgot Password

Button

Optional

- On click, redirects the user to the forgot password screen

Sign In Button

CTA

Mandatory

- Validates all fields before submission and displays the relevant error message

- Triggers the authentication process

- Logs the client into the client portal if no validation error

5.2 Create Password First Time

5.2.1. Step 1: Ready to Set Your Password Page

Field Name

Type

Required

Validation Rules

Email Address

Email

Yes

Valid email format

Continue Button

Button

N/A

Triggers email validation and directs a redirect to password creation

Already have an account? Sign In

Link

N/A

Redirects to the main client login page of that brand

5.2.2. Step 2: Let's Secure Your Account Page

Field Name

Type

Required

Validation Rules

Password

Password

Yes

6-20 characters, must contain: uppercase, lowercase, number, special character

Repeat Password

Password

Yes

Must match the Password field exactly

Create Password Button

Button

N/A

Triggers password creation and validation

5.3 Forgot Password

5.3.1 Step 1: Forgot your password?

Field Name

Type

Required

Validation Rules

Email address

Email

Yes

- Valid email format

- Must be registered in the client portal system

Send request

Button

Yes

- Validates email field on click

- Sends password reset link if validation passes

- Displays a relevant error message if validation fails

Return to login

Link

Optional

On click, it redirects the client to the login screen

5.3.2 Step 2: Recovery link sent!

Field Name

Type

Validation Rules

Confirmation message

Text

Display confirmation text and email address where the reset link was sent

Resend Link

Button

- Subject to rate limiting (60-second cooldown)

- Invalidates previous link when a new one is sent

Return to login

Button

On click, it redirects the client to the login screen

5.3.3 Step 3: Set new password

Field Name

Type

Validation Rules

New Password

Password

Min 6 - Max 20 chars, 1 uppercase, 1 number, 1 special char, no spaces

Repeat Password

Password

Must match the new password exactly

Create New Password

Button

- Validates password fields before submission
- Saves new password and redirects to login screen when successful
- Displays relevant error messages if validation fails

6. Success Message Handling

6.1 Client Login

Validation Scenario

Success Message

On successfully signing in

"You've logged in successfully."

6.2 Create Password First Time

Validation Scenario

Success Message

Password created successfully

“Your password has been created successfully.”

6.3 Forgot Password

Validation Scenario

Success Message

Password reset link sent successfully

"Recovery link has been sent successfully."

Password changed successfully

"Your password has been changed successfully."

6.4 Magic Link Login

Validation Scenario

Success Message

Magic link sent successfully

"Magic link has been sent successfully."

7. Error Message Handling

7.1 Client Login

Field

Validation Scenario

Error Message

Email

Empty submission

"Please enter your email address."

Email

Not associated with any project of the brand

"Invalid Credentials. Please try again."

Email

Invalid format

"Please enter a valid email address."

Password

Empty submission

"Please enter your password."

Authentication

Invalid credentials (email/password mismatch)

"Invalid Credentials. Please try again."

Password

Locked after 5 failed login attempts

"Your account has been locked due to multiple failed login attempts. Please try again after one hour."

General

Server timeout

"Something went wrong."

7.2 Create Password First Time

7.2.1 Email Field Validation

Field

Validation Scenario

Error Message

Email

Empty submission

"Please enter your email address."

Email

Invalid format

"Please enter a valid email address."

Email

Email not found in the system

"No account found for this email address."

Email

Already created a password

“If an account exists for this email, you’ll get an email with further instructions.”

7.2.2 Password Field Validation

Field

Validation Scenario

Error Message

Password

Empty submission

"Please enter your password."

Password

Progressive validation (show only the next missing requirement)

Display only the next missing condition:

• "Password must be at least 6 characters."
• "Password must contain at least one uppercase letter."
• "Password must contain at least one number."
• "Password must contain at least one special character."
• "Password must contain at least one lowercase letter."
• "Password cannot exceed 20 characters."

Repeat Password

Empty submission

"Please re-enter your new password."

Repeat Password

Mismatch with Password

"The passwords you entered do not match. Please try again."

7.2.3 General Errors

Field

Validation Scenario

Error Message

General

Server timeout/error

"Something went wrong."

7.3 Forgot Password

7.3.1. Step 1: Forgot your password?

Field

Validation Scenario

Error Message

Email address

Empty submission

"Please enter your email address."

Email address

Invalid format

"Please enter a valid email address."

Email address

Unregistered email

"Invalid Credentials. Please try again."

Email address

Resend attempt within 15 minutes

"Reset link already sent. Please try again in a few minutes."

General

Server error

"Something went wrong."

7.3.2 Step 3: Set new password

Field

Validation Scenario

Error Message

New Password

Empty

"Please enter a new password."

New Password

Weak Password

Progressive validation showing the next missing requirement:

- "Password must be at least 6 characters."

- "Password must contain at least one uppercase letter."

- "Password must contain at least one number."

- "Password must contain at least one special character."

- "Password must contain at least one lowercase letter."

Repeat Password

Empty

"Please re-enter your new password."

New Password and Repeat Password

Mismatch

"The passwords you entered do not match. Please try again."

New Password and Repeat Password

Same as the old password

"Your new password cannot match your old one. Please choose a different password."

General

Invalid/expired token

"Something went wrong."

7.3 Magic Link Login

Field

Validation Scenario

Error Message

Email

Empty submission

"Please enter your email address."

Email

Invalid format

"Please enter a valid email address."

Email

The email does not match any client associated with that particular brand’s project

"No account found for this email address."

General

Resend rate limit (before 60 seconds)

"Please wait before requesting another magic link."

Magic Link

Link Expired

“This magic link has expired. Please request a new link.”

Magic Link

Already used link clicked

“This link has already been used. Please request a new magic link.”

8. Edge Cases

8.1 Create Password First Time

Scenario

Expected Behavior

Client email not associated with the current brand

Display "No account found for this email address" error

A client who already has a password tries to create a new one

Do not display "Create a Password" button (prevention at UI level)

Network interruption during email validation

Display general error message, allow retry

Network interruption during password creation

Display general error message, allow retry

User navigates away during password creation

No data persistence needed; the user must restart the flow

Special characters in password

Accept all standard special characters (!@#$%^&*()_+-=[]{}

Multiple rapid clicks on the Continue button

Prevent duplicate submissions with a button disabled during processing

8.2 Forgot Password

Scenario

Expected Behavior

Client clicks the expired reset link

Show error message: "This reset link has expired. Please request a new one."

Multiple reset requests for the same email

Only the latest link remains valid; previous links are invalidated

Client navigates away during password entry

Must restart the process from the beginning

Client tries to reuse old password

The system prevents reuse and shows an appropriate error message

Email service unavailable

Graceful error handling with a retry mechanism

Client closes the browser during the process

Must restart from Step 1 when returning

8.3 Magic Link Login

Scenario

Expected Behavior

Multiple magic link requests

New magic link invalidates previously unused magic link

Magic link forwarded to another person

The forwarded link works for anyone who clicks it

Magic link clicked after 10 minutes

Display "Invalid link" error message

Client email not associated with the current brand

Display "No account found for this email address" error

Rate limit exceeded

Display an appropriate rate limit error message and prevent further requests

Invalid email format entered

Display email format validation error

Network interruption during the magic link request

Display general error message, allow retry

8. Test Cases

• Link:

9. Acceptance Criteria

• Client Portal Access: Clients receive a portal link via email when associated with a project or submit a lead form; they must be linked to at least one project to access.
• Brand-Specific Access: Each brand has its own portal URL; clients log in per brand to view all projects under that brand; credentials are validated brand-wise.
• Login Options: Clients can log in using magic link or email/password; magic link works even if no password exists.
• Forgot Password: Clients can reset their password via their registered email; invalid or unregistered emails show an inline error; the reset link is valid for 10 minutes and is limited to 1 request per 15 minutes.
• Failed Login Attempts: After 5 incorrect password attempts, the account locks for 1 hour; unlocks automatically; email case-insensitive.
• Create Password (First-Time): Allowed only if client has no existing password; email must belong to an active project under the same brand; progressive validation ensures password meets all criteria; redirects to login after success.
• Forgot Password Flow: Valid email triggers recovery link; expired/invalid links show error; successful reset redirects to login; all active sessions logged out.
• Brand Security: All password creation and reset flows are brand-specific; access is limited to the relevant brand portal.
• Magic Link Login: Brand-specific link sent to verified email; auto-login without credentials; expires in 7 days; resend available after 60 seconds; redirects to latest or most recent project overview.

10. Dependencies

Module/System

Dependency Type

Impact if Unavailable

User Authentication Service

Core functionality

Cannot authenticate users

Client Database

Data dependency

Cannot validate registered clients

Session Management

Security dependency

Cannot maintain secure client sessions

Client Portal

Navigation dependency

Cannot log the client into the portal after authentication

11. References

11.1 Client Login

• Figma Link: Click Here

11.2 Create Password First Time

• Figma Design Link: Click Here

11.3 Forgot Password

• Figma Design Link: - Click Here

11.4 Magic Link

• Figma Design Link: Click Here

✅ Project Header and Tabs

Functional Requirements Document - Client Portal: Project Header and Tabs

1. Module Overview

Module Name: Client Portal - Project Header and Tabs

Purpose: The project header and tabs module provides the primary navigation structure for clients accessing their project portal, displaying essential project information and enabling navigation between different project sections and events.

Business Goals: To provide clients with intuitive navigation and clear project context, enabling seamless access to all project-related information while maintaining brand consistency and professional presentation across the portal experience.

2. User Roles & Permissions

Role

Access Level

Permissions

Client (Primary Contact)

Full View Access

View all tabs, navigate between sections, access all project events, view project header information

Client (Additional Contacts)

Full View Access

View all tabs, navigate between sections, access all project events, view project header information

Guest/Non-authenticated Users

No Access

Cannot access the portal or view any project information

3. User Flow

1. After successful authentication, the client lands on the project overview page where the project header is prominently displayed at the top of the interface.
2. If the client is associated with more than one project, the system displays a project switcher dropdown (with a down arrow icon) next to the project name in the header. Selecting a different project reloads the portal to the new project context and resets the view to the Overview tab. If the client has only a single project, the project name displays as plain text without any dropdown arrow or switcher control.
3. The system displays the project name (e.g., "Jadon & Monika Wedding") as the main header title, establishing immediate context for the client.
4. Below the project header, the system renders navigation tabs based on the project structure, with "Overview" always appearing as the first tab.
5. When a project contains multiple events, the system displays each event as a separate tab (e.g., "Wedding", "Engagement Photoshoot", "Planning").
6. The client clicks on any tab to navigate to that specific section, and the system highlights the active tab with visual indicators.
7. 6. When viewing an event tab, the system loads the event-specific interface with its own sub-navigation: Services | Deliverables | Files/Documents | Notes | Info.
8. 7. The client can click the project name or Overview tab at any time to return to the main project dashboard. If the client is already viewing the Overview tab, no action is taken — the system does not reload the page or reset the scroll position.
9. In the top-right corner, the client accesses their profile menu by clicking on the profile icon, revealing options for account settings and logout.
10. The notification bell icon displays a badge only when the unread count is greater than 0. The badge is hidden entirely when the count is 0. The badge displays the exact number for counts 1–99 and displays "99+" for counts of 100 or more. Clicking the bell icon reveals recent project updates.
11. Throughout navigation, the system maintains the header and tab structure as a persistent element, ensuring consistent orientation.

4. Functional Logic

4.1 Project Header Display

• The system retrieves the project name from the database and displays it as the primary header on all portal pages.
• When a project has a custom branding configuration, the system applies the brand colors and logo to the header area.
• The header remains fixed at the top of the viewport during scrolling to maintain context and navigation accessibility.
• If the project name exceeds 50 characters, the system truncates it with ellipsis and displays the full name on hover.
• The system displays the client company name or individual name alongside the project name when applicable.

4.1.1 Hero Banner Display

• Below the top header bar, the system displays a hero banner spanning the full width of the content area with a background image.
• The hero banner displays the project name as large overlay text centered on the banner (e.g., "Jadon & Monika Wedding").
• Below the project name, the system displays the project date range (e.g., "Wed, Dec 19 - Sat, Dec 21, 2024").
• At the bottom-left of the banner, the system displays the project location with a pin icon (e.g., "Boston, Massachusetts, USA") followed by the timezone (e.g., "Timezone: GMT-4").
• At the bottom-right of the banner, the system displays an "Emails" button that serves as the entry point to the Email Center module. Clicking this button navigates the client to the project-specific Email Center.
• If the agency has configured a custom hero image for the project, the system displays it as the banner background. If no custom image is set, the system displays a default elegant background.
• The hero banner is visible on all tabs (Overview and Event tabs) and does not change when switching between tabs.

4.2 Tab Generation and Display

4.2.1 Overview Tab

• The system always generates an "Overview" tab as the first navigation option, regardless of project configuration.
• The Overview tab serves as the default landing page after login and cannot be removed or hidden.
• The Overview tab displays its own sub-navigation below the main tabs: Activity | Files/Documents | Finances | Meetings | Notes. The Activity sub-tab is the default view when the Overview tab loads.
• Below the Overview tab name, the system displays the project date range in smaller text (e.g., "Wed, Dec 19 - Sat, Dec 21, 2025").
• When clicked, the Overview tab loads the project dashboard displaying summary information, recent activities, and quick access widgets.

4.2.2 Event Tabs

• The system automatically generates a tab for each active event associated with the project.
• Event tabs display in chronological order based on event date, with the earliest event appearing after the Overview tab.
• When an event date is marked as "TBD", the system positions it after all dated events in the tab order.
• Each event tab displays a colored dot indicator before the event name. Each event is assigned a unique color to visually distinguish it from other events. The Overview tab does not display a colored dot.
• Below the event name, each event tab displays the event date in a compact format (e.g., "Wed, Dec 19, 2025"). This date is displayed in smaller, lighter text beneath the event name.
• Each event tab displays the event name as configured in the project settings, with a maximum display length of 30 characters.
• The system displays up to 6 event tabs horizontally; when more events exist, it implements a horizontal scroll or dropdown menu for additional events.

4.2.3 Additional Tabs

• If the project includes planning tools or additional modules, the system generates corresponding tabs (e.g., "Planning", "Timeline").
• These auxiliary tabs appear after all event tabs in the navigation structure.
• The system only displays tabs for modules that have been activated for the specific project.

4.3 Tab Navigation Behavior

• When a client clicks on a tab, the system performs a smooth transition to the selected section without full page reload.
• The active tab receives visual highlighting through background color change, underline, or bold text based on brand settings.
• The system maintains the user's scroll position when navigating between tabs and returning to previously viewed sections
• On browser refresh, the system restores the client to the same main tab and sub-tab they were viewing before the refresh (e.g., if the client was on Rehearsal Dinner > Notes, they return to Rehearsal Dinner > Notes after refresh, not to the Overview tab)..
• If a tab's content is still loading, the system displays a loading indicator within the content area while keeping the header stable.
• When navigating to an event tab, the system loads the event-specific sub-navigation menu below the main tabs: Services | Deliverables | Files/Documents | Notes | Info. The Services sub-tab is the default active view when an event tab is first opened.

4.4 Profile and Settings Access

• The profile icon in the top-right corner displays the client's initials or profile image when available.
• Adjacent to the profile and notification icons, the system displays a theme toggle icon (sun/moon) that allows the client to switch between light mode and dark mode. The selected theme preference persists across sessions.
• Clicking the profile icon reveals a dropdown menu with options for "My Account", "Settings" (if permitted), and "Logout".
• The system tracks the last active session and displays "Last login" information in the profile dropdown.
• When clicking "My Account", the system navigates to the account management page while maintaining the project context.

4.5 Notification System Integration

• The notification bell icon displays a red badge with a count only when unread notifications exist (count > 0). The badge is hidden entirely when the count is 0. The badge displays the exact number for counts 1–99 and displays "99+" for counts of 100 or more.
• Clicking the notification icon opens a dropdown panel showing the 5 most recent notifications.
• Each notification in the dropdown includes a timestamp, notification type icon, and brief message preview.
• The system marks notifications as read when the dropdown is opened and updates the badge count accordingly.

4.6 Responsive Design Behavior

• On mobile devices (screens < 768px), the system converts the horizontal tab navigation to a hamburger menu.
• The mobile menu displays all tabs in a vertical list with clear touch targets of at least 44px height.
• The project name may be abbreviated on mobile to prevent text overflow, showing full name in the expanded menu.
• Touch gestures enable swipe navigation between adjacent tabs on mobile devices.

4.7 Access Control and Visibility

• The system validates client access permissions for each tab before rendering the navigation structure.
• If a client loses access to a specific event, the system removes the corresponding tab from their view immediately.
• For archived or completed events, the system displays the tab with a visual indicator (e.g., grayed out) but maintains navigation access.
• When the agency suspends or restricts portal access, the system displays a warning banner below the header instead of hiding tabs.

5. Field Details & Validations

Field Name

Field Type

Validation Rules

Project Name

Text Display

Maximum 100 characters, required field, HTML entities escaped

Event Tab Names

Text Display

Maximum 30 characters per tab, minimum 1 character, special characters allowed

Profile Initials

Auto-generated Text

First letter of first name + first letter of last name, uppercase

Notification Count

Numeric Badge

Integer value 0-99, displays "99+" for counts exceeding 99

Tab Order Index

Hidden Numeric

Integer values starting from 0, unique per project

Active Tab Indicator

CSS Class

Valid CSS class name, defaults to "active-tab"

Last Login Timestamp

DateTime Display

ISO 8601 format, converted to client's timezone

6. Success Message Handling

Operation

Success Message

Trigger Condition

Post-Success Action

Tab Navigation

None (Silent)

Successful tab content load

Display selected tab content

Profile Update Navigation

"Redirecting to account settings..."

Click on My Account

Navigate to account page

Logout

"Successfully logged out"

Click logout option

Redirect to login page

Notification Mark as Read

None (Silent)

Open notification dropdown

Update badge count

7. Error Message Handling

Error Scenario

Error Message

Trigger Condition

User Action Required

Tab Content Load Failure

"Unable to load content. Please refresh the page."

Network error or server timeout

Refresh browser or try again

Session Expired

"Your session has expired. Please log in again."

Invalid or expired session token

Re-authenticate

Unauthorized Tab Access

"You don't have access to this section."

Attempting to access restricted tab

Contact agency admin

Navigation Timeout

"Navigation is taking longer than expected."

Tab switch exceeds 10 seconds

Wait or refresh page

8. Edge Cases

Scenario

System Behavior

Fallback Action

Project with no events

Display only Overview tab

Show empty state message in content area

Extremely long project names (>100 chars)

Truncate with ellipsis at 100 characters

Show full name in tooltip on hover

More than 10 event tabs

Implement horizontal scroll or "More" dropdown

Group remaining tabs in dropdown menu

Client has multiple projects

Display project switcher in header

Allow switching between projects via dropdown

Network disconnection during navigation

Maintain current tab view

Show offline indicator, cache current content

Simultaneous tab clicks

Process first click only

Ignore subsequent clicks until navigation completes

Browser back button usage

Maintain tab history in browser

Update active tab based on browser history

Event deleted while client is actively viewing that event's tab

Redirect client to Overview tab immediately. Remove the deleted event's tab from the navigation

Display toast: "This event has been removed from the project." Overview tab loads with latest data

9. Acceptance Criteria

• The project header must display the correct project name and remain visible during scrolling
• All active events must generate corresponding tabs in the correct chronological order
• Tab navigation must complete within 3 seconds under normal network conditions
• The active tab must be clearly distinguished through visual styling
• Mobile responsive design must function correctly on devices with screen width ≥320px
• Profile dropdown must display all menu options and function correctly
• Notification badge must accurately reflect unread notification count
• The system must maintain tab state when refreshing the page
• All tab names must be properly escaped to prevent XSS attacks
• The Overview tab must always be present and accessible
• Clicking the Overview tab or project name while already on Overview must not trigger a reload or scroll reset
• When the client has multiple projects, a project switcher dropdown must display next to the project name; selecting a project must reload to that project's Overview tab
• The notification badge must be hidden when count is 0, display exact number for 1–99, and display "99+" for counts ≥ 100
• If an event is deleted while the client is viewing that event's tab, the system must redirect to Overview and display a toast notification
• The hero banner must display the project name, date range, location with pin icon, timezone, and "Emails" button
• Each event tab must display a colored dot indicator before the event name and the event date below the name
• The Overview tab must display the project date range below its name and load with sub-navigation: Activity, Files/Documents, Finances, Meetings, Notes
• Event tabs must load with sub-navigation: Services, Deliverables, Files/Documents, Notes, Info; with Services as the default sub-tab
• The theme toggle must switch between light and dark mode and persist the preference across sessions
• For single-project clients, the project name must display as plain text without a dropdown arrow
• On browser refresh, the system must restore the client to the same main tab and sub-tab they were viewing before the refresh

10. Manual Test Cases

Test cases have been created in a separate Excel file. Access the test cases here: TestCases_ClientPortal_ProjectHeader_Tabs.xlsx

11. Dependencies

Dependency

Type

Description

Fallback Behavior

Authentication Service

Internal

Validates client session and permissions

Redirect to login if unavailable

Project Management Module

Internal

Provides project and event data

Display error message

Notification Service

Internal

Supplies notification count and details

Hide notification badge

Brand Management Module

Internal

Provides custom branding settings

Use default theme

User Profile Service

Internal

Supplies client profile information

Display generic avatar

Event Management Module

Internal

Provides event details for tab generation

Show Overview tab only

12. References

• Figma Design Link: Click Here

✅ Overview(Activity,file,notes)

Functional Requirements Document - Client Portal: Overview Tabs

1. Module Overview

Module Name: Client Portal - Overview Tabs

Purpose: The Overview tab serves as the primary dashboard for clients, providing a comprehensive summary of their project status, recent activities, key metrics, and quick access to important project elements in a fixed layout structure.

Business Goals: To deliver a centralized view that enables clients to quickly understand project progress, access critical information, and navigate to detailed sections efficiently, reducing the need for agency support and improving client satisfaction through transparent project visibility.

2. User Roles & Permissions

Role

Access Level

Permissions

Client (Primary Contact)

Full View Access

View all overview widgets, access all linked content, view complete activity history, see all project notes

Client (Additional Contacts)

Full View Access

View all overview widgets, access all linked content, view complete activity history, see all project notes

Client (View-Only)

Restricted View

View overview content but cannot access payment information or sensitive documents

Guest/Non-authenticated Users

No Access

Cannot access the overview or any project information

3. User Flow

3.1 The client logs in to the client portal, and the system automatically loads the Overview tab as the default landing page. 3.2 The client views the project header showing the couple's names (for example, "Jadon & Monika Wedding") with the navigation tabs displayed below it. 3.3 The system displays the hero banner featuring the couple's image and the event title. 3.4 The client views the four fixed metric cards showing the Services count, Deliverables status, Meetings scheduled, and Engagement/Professional sessions. 3.5 The client scrolls to the left column, where the system displays the Activity Log listing all project and event activities in newest-first order. 3.6 The system renders each activity entry with a respective activity-type icon, a client-facing description, an absolute date and time, and an action button when the activity type supports one. 3.7 The client scrolls within the Activity Log, and the system continuously loads older entries through infinite scrolling until the oldest "project created" entry is reached. 3.8 The client clicks an action button on an activity entry (for example, "View & Pay," "View & Sign," "View & Fill," "View," or "Download"), and the system redirects the client to the respective page for that action. 3.9 The client views the Deliverables widget in the right column showing document status and available download actions. 3.10 The client views the Payment summary widget in the right column showing the total cost, amount paid, and outstanding balance. 3.11 The client clicks any metric card, and the system navigates directly to the corresponding detailed section. 3.12 The client clicks the Overview tab in the main navigation at any time, and the system returns the client to this overview page.

4. Functional Logic

4.1 Page Load and Data Aggregation

• When the Overview tab loads, the system fetches data from all associated project events and consolidates it for display.
• The system calculates totals for services, deliverables, and meetings across all events within the project.
• Loading occurs asynchronously with progressive rendering, showing the header and structure immediately while data populates.
• If data retrieval takes longer than 3 seconds, the system displays a loading indicator in the affected widget.
• The page maintains its layout structure even when individual widgets are still loading data.

4.2 Hero Banner Section

• The system displays the project hero image as configured by the agency in brand settings.
• The banner includes the project title overlaid on the image with appropriate contrast for readability.
• If no custom image is set, the system displays a default elegant background appropriate for the event type.
• The banner height is fixed at 300px on desktop and scales proportionally on mobile devices.
• Any "Announcement" or important message from the agency appears as a dismissible banner below the hero section.

4.3 Metrics Cards Display

4.3.1 Services Card

• The system counts all active services across all project events and displays the total number.
• Each service type (Photography, Videography, Planning) is counted separately if multiple exist.
• The card displays an appropriate icon and the numeric count prominently.
• Clicking the card navigates to the first event's Services tab.

4.3.2 Deliverables Card

• The system aggregates all deliverables from all events and calculates completion percentage.
• The display shows "X of Y completed" format where X is completed deliverables and Y is total.
• A progress indicator visualizes the completion percentage using a circular or linear progress bar.
• Clicking navigates to the detailed deliverables view.

4.3.3 Meetings Card

• The system displays the count of upcoming meetings scheduled through the portal.
• Past meetings are excluded from this count but available in the meetings history.
• The card shows the next meeting date if one is scheduled.
• Clicking opens the meetings scheduling interface.

4.3.4 Engagement/Professional Card

• The system displays relevant metrics based on the project type (e.g., "2 Engagement Sessions" for wedding projects).
• The count reflects contracted services specific to pre-event or professional sessions.
• The card uses appropriate iconography for the service type.

4.4 Overview Content Section (Left Column)

4.4.1 Activity Log

• The Activity Log appears only on the Project Overview page and consolidates activities from the project and all of its events into a single feed, and there is no separate activity log at the individual event level.
• The system orders all activity entries with the newest entry at the top and the oldest entry at the bottom.
• The system loads additional older entries automatically through infinite scrolling as the client scrolls down, and it does not provide pagination controls or activity-type filters.
• The system displays each activity entry with a respective activity-type icon rather than a user avatar, because the Activity Log is client-facing.
• When an activity type has no specific icon mapping, the system displays a default generic activity icon as a fallback.
• The complete set of activity types, their exact client-facing messages, icons, action buttons, and redirect targets is defined in the Activity Log Message and Action Reference table in Section 5.2.
• The system displays the timestamp of each activity entry in absolute date and time format (for example, "Aug 17, 2026, 3:45 PM").
• The Activity Log never shows an empty state because the "project created" entry is always recorded as the first and oldest entry for every project.
• When an activity entry includes an action button, the system redirects the client to the respective page for that action rather than opening an inline modal.
• The system reflects newly recorded activities only after the client manually refreshes the page, consistent with the portal's non-real-time refresh behavior.
• When the client signs a proposal, the system changes the original "proposal sent" entry's button from "View & Sign" to "View" and additionally records a separate "proposal signed" entry, and when the agency counter-signs the proposal, the system records a separate "proposal finalized" entry.
• When the client signs a contract, the system changes the original "contract sent" entry's button from "View & Sign" to "View" and additionally records a separate "contract signed" entry, and when the agency completes the contract, the system records a separate "contract completed" entry.
• The system records contract activities at the project level because contracts are not linked to a specific event.
• When the client makes a partial payment toward an invoice, the system records a standalone payment entry and records one such entry for every payment the client makes, and when a payment settles the outstanding balance in full, the system records a separate "paid in full" entry.
• When the client completes a questionnaire, the system changes the original "questionnaire sent" entry's button from "View & Fill" to "View" and additionally records a separate "questionnaire completed" entry.
• When the client uploads a file through the portal, the system records a client file upload entry and displays a "Download" button that downloads the uploaded file.
• When a new email message or reply is added to a project email thread, the system records an activity entry and displays a "View" button that redirects the client to the Email Center.

4.4.2 Notes Aggregation

• The system collects all notes from all event tabs and displays them in the overview.
• Each note shows the event context (e.g., "[Wedding] Note content here").
• Notes display with the author name, timestamp, and content preview (first 200 characters).
• Client-created notes show an edit option, while agency notes are read-only.
• The system displays the 5 most recent notes with a "View All Notes" link to see more.

4.5 Deliverables Widget (Right Column)

• The system lists all deliverables with their current status using visual indicators (icons and colors).
• Each deliverable shows: name, status (Pending/In Progress/Completed), and action buttons.
• Completed deliverables display a download button for direct file access.
• The widget groups deliverables by event if multiple events exist.
• The system shows a progress bar indicating overall deliverables completion percentage.
• Empty state displays: "No deliverables have been added to your project yet."

4.6 Payment Widget

• The system displays the financial summary with clear formatting and currency symbols.
• The widget shows: Total Package Price, Amount Paid, Outstanding Balance, and Next Payment Due.
• Each payment line item is clickable and opens the detailed invoice view.
• The "Make a Payment" button is prominently displayed when balance is outstanding.
• The system calculates and displays the payment progress as a percentage bar.
• If fully paid, the widget displays a green checkmark with "Paid in Full" status.

4.7 Data Refresh Behavior

• The system requires manual page refresh to load updated data from the agency side.
• A subtle "Last updated" timestamp appears at the top of the overview section.
• The browser's refresh button or F5 key triggers a complete data reload.
• During refresh, the system maintains scroll position when possible.
• Cache headers prevent serving stale data older than 5 minutes.

4.8 Empty States and Error Handling

• Each widget implements specific empty state messaging when no data exists.
• Empty states include helpful context about what will appear once data is available.
• If a widget fails to load, it displays an error message with a "Try Again" button.
• The system logs widget loading failures for troubleshooting without exposing technical details to clients.

5. Field Details & Validations

5.1 Field Details

Field Name

Field Type

Validation Rules

Project Title

Text Display

Maximum 100 characters, HTML-escaped

Service Count

Numeric Display

Integer, minimum 0, maximum 999

Deliverables Count

Text Display

Format: "X of Y", where X ≤ Y

Meeting Count

Numeric Display

Integer, minimum 0

Activity Type Icon

Icon (Display)

Respective icon per activity type; falls back to a default generic activity icon when unmapped

Activity Description (Message)

Text Display

System-generated client-facing message; HTML-escaped; maximum 500 characters per entry

Activity Action Button

Button (Display)

One of "View & Pay", "View & Sign", "View & Fill", "View", or "Download"; shown only for activity types that support an action

Note Preview

Text Display

Maximum 200 characters, truncated with ellipsis

Payment Amount

Currency Display

2 decimal places, with currency symbol

Activity Timestamp

Date/Time Display

Absolute format, e.g., "MMM DD, YYYY, HH:MM AM/PM"

Progress Percentage

Numeric Display

0-100, displayed with % symbol

5.2 Activity Log Message and Action Reference

This reference lists every activity type shown in the client-facing Activity Log, its exact client-facing message, the icon shown for it, the action button (if any), and the page the button redirects to. Placeholders in double braces are replaced with live values at render time.

Activity Type

Trigger Condition

Client-Facing Message

Icon

Action Button

Button Redirects To

Project Created

Agency creates the project

"Your project {{projectName}} has been created."

Project

None

Not applicable

Project Name Changed

Agency changes the project name

"Your project name has been updated to {{projectName}}."

Project

None

Not applicable

Project Cancelled

Agency cancels the project

"Your project {{projectName}} has been cancelled."

Project

None

Not applicable

Project Archived

Agency archives the project

"Your project {{projectName}} has been archived."

Project

None

Not applicable

Event Created

Agency creates an event

"A new event {{eventName}} has been added to your project."

Event

None

Not applicable

Event Updated

Agency updates an event

"Event {{eventName}} has been updated."

Event

None

Not applicable

Event Cancelled

Agency cancels an event

"Event {{eventName}} has been cancelled."

Event

None

Not applicable

Event Archived

Agency archives an event

"Event {{eventName}} has been archived."

Event

None

Not applicable

Event Status Changed

Agency changes an event's status

"Event {{eventName}} status has been updated to {{currentStatus}}."

Event

None

Not applicable

Proposal Sent

Agency sends a proposal

"A new proposal for {{projectName}} is ready for your review."

Proposal

View & Sign (changes to View after the client signs)

Proposal page

Proposal Signed

Client signs the proposal

"You have signed the proposal for {{projectName}}."

Proposal

View

Proposal page

Proposal Finalized

Agency counter-signs the proposal

"Your proposal for {{projectName}} has been finalized."

Proposal

View

Proposal page

Contract Sent

Agency sends a contract

"A new contract for {{projectName}} is ready for your review."

Contract

View & Sign (changes to View after the client signs)

Contract page

Contract Signed

Client signs the contract

"You have signed the contract for {{projectName}}."

Contract

View

Contract page

Contract Completed

Agency completes/counter-signs the contract

"Your contract for {{projectName}} has been fully executed."

Contract

View

Contract page

Invoice Sent

Agency issues an invoice

"A new invoice has been issued."

Invoice

View & Pay

Invoice on the Finances page

Payment Made (Partial)

Client makes a partial payment

"You have made a payment toward your invoice."

Payment

View

Invoice on the Finances page

Invoice Paid in Full

Client's payment settles the balance

"You have paid your invoice in full."

Payment

View

Invoice on the Finances page

Questionnaire Sent

Agency sends a questionnaire

"A new questionnaire is ready for you to complete."

Questionnaire

View & Fill (changes to View after the client completes it)

Questionnaire page

Questionnaire Completed

Client completes the questionnaire

"You have completed the questionnaire."

Questionnaire

View

Questionnaire page

Client File Uploaded

Client uploads a file through the portal

"You have uploaded a new file."

File

Download

Downloads the uploaded file

New Email Message

A new message or reply is added to a project email thread

"A new message has been added to your conversation."

Email

View

Email Center

6. Success Message Handling

Operation

Success Message

Trigger Condition

Post-Success Action

Page Load

None (Silent)

Successful data retrieval

Display populated dashboard

Navigate to Section

None (Silent)

Click on metric card

Load target section

Download Deliverable

"Download started"

Click download button

Initiate file download

Activity Action Button Click

None (Silent)

Client clicks an action button (View & Pay, View & Sign, View & Fill, or View) on an activity entry

Redirect to the respective page (invoice/Finances, proposal, contract, questionnaire, or Email Center)

Activity File Download

"Download started"

Client clicks "Download" on a client-uploaded file activity entry

Initiate file download

Refresh Page

"Content updated"

Manual refresh with new data

Display updated information

7. Error Message Handling

Error Scenario

Error Message

Trigger Condition

User Action Required

Widget Load Failure

"Unable to load [widget name]. Please try again."

API timeout or error

Click "Try Again" button

Deliverable Download Failure

"Unable to download file. Please try again later."

File not accessible

Contact agency or retry

Payment Widget Error

"Unable to load payment information."

Payment service unavailable

Refresh page or contact support

Notes Load Failure

"Notes are temporarily unavailable."

Database connection error

Refresh page

Activity Feed Load Failure

"Unable to load recent activity. Please refresh the page."

Activity logging service error or timeout

Refresh page

Activity File Download Failure

"Unable to download file. Please try again later."

Uploaded file not accessible

Retry download

Network Error

"Please check your internet connection."

No network connectivity

Check connection and refresh

8. Edge Cases

Scenario

System Behavior

Fallback Action

No events in project

Display overview with zero counts

Show message: "Your project is being set up"

All deliverables completed

Show 100% completion with green indicator

Display "All deliverables completed!" message

No payment required

Hide payment widget or show "No payment required"

Display confirmation of paid status

Very long note content

Truncate at 200 characters with "Read more" link

Expand inline or navigate to notes section

Very large activity history

Load older entries progressively via infinite scroll

Continue loading on scroll without pagination controls or filters

Activity type has no specific icon

Display a default generic activity icon

Render fallback icon

Email thread no longer available when opened

Keep the activity entry visible in the feed

View button opens the Email Center, where the thread may show as unavailable

Activity target no longer available (e.g., invoice voided or proposal withdrawn)

Keep the activity entry visible in the feed

Action button leads to the current state of the target or a "no longer available" message on the target page

New activity added while client is viewing the page

Insert the new entry at the top only after the client refreshes

Preserve newest-first ordering on next load

Very long project or event name within an entry

Display the full client-facing message with text wrapping

Wrap text without truncating the entry

Mixed currency payments

Display in client's primary currency

Show currency conversion note if applicable

Slow network connection

Show skeleton loaders for widgets

Progressive content loading

Multiple simultaneous refreshes

Process first refresh, ignore others

Queue subsequent refresh requests

9. Acceptance Criteria

• The Overview tab must load as the default landing page after client login
• All widgets must appear in the fixed order as specified in the design
• Metric cards must accurately reflect real-time counts from all project events
• The page must load initial structure within 2 seconds on standard broadband
• All clickable elements must have appropriate hover states and cursor changes
• Empty states must display for all widgets when no data exists
• The layout must be responsive and functional on devices ≥320px width
• Payment calculations must be accurate to 2 decimal places
• All timestamps must display in the client's timezone
• Data refresh must complete within 5 seconds under normal conditions
• The Activity Log must appear only on the Project Overview page and must combine project-level and all event-level activities into a single newest-first feed
• The "project created" entry must always exist as the oldest entry so the Activity Log is never empty
• Each activity entry must display a respective activity-type icon, an absolute date and time, and the correct client-facing message, and must not display a user avatar
• Activity timestamps must be shown in absolute date and time format and must not use relative time
• Action buttons must appear only for the activity types that support them and must redirect the client to the correct respective page
• The "sent" entries for proposals, contracts, and questionnaires must switch their button to "View" once the client completes the corresponding action, and a separate signed or completed entry must also be recorded
• Each client partial payment must create its own standalone activity entry, and a full settlement must record a "paid in full" entry
• The Activity Log must load older entries via infinite scroll without pagination controls or activity-type filters
• A new email message or reply on a project thread must create an activity entry with a "View" button that redirects the client to the Email Center
• The activity types, client-facing messages, icons, and action buttons must match the Activity Log Message and Action Reference table in Section 5.2

10. Manual Test Cases

Test cases have been created in a separate Excel file. Access the test cases here: Client Portal - Overview Tabs Test Cases.xlsx

11. Dependencies

Dependency

Type

Description

Fallback Behavior

Event Management Module

Internal

Provides event data for aggregation

Display error in affected widgets

Payment Processing Module

Internal

Supplies payment and invoice data

Hide payment widget

Document Management System

Internal

Provides deliverables and files

Show "Unable to load files" message

Notes Module

Internal

Supplies notes from all events

Display empty state for notes

Activity Logging Service

Internal

Provides the Activity Log entries

Show "Unable to load recent activity. Please refresh the page."

Meeting Scheduler

Internal

Supplies meeting information

Display zero meetings count

Email Center Module

Internal

Provides email message activity and is the redirect target for the email entry's View action

Show "Unable to load recent activity" or disable the email entry's View action

Brand Settings Module

Internal

Provides custom branding/imagery

Use default theme and images

12. References

• Figma Design Files:
  • Client_Portal_-_Overview.jpg
  • Client_Portal_-_Emails.jpg
  • Empty_States.jpg
• Logic Source (Activity Log):
  • Client-facing activity log mapping derived from the agency-side project activity reference and confirmed client-facing wording
• Related FRDs:
  • Client Portal - Project Header and Tabs
  • Client Portal - Overview > Finances
  • Client Portal - Events: Files/Documents Tab
  • Event Management Module
  • Payment Processing Module
  • Notes Management Module

✅ Overview- Meeting tab

Functional Requirements Document - Client Portal: Meetings Tab

1. Module Overview

Module Name: Client Portal - Overview > Meetings Tab

Purpose: The Meetings tab within the Overview section of the Client Portal provides clients with a centralized view of all project-related meetings scheduled through Calendly, and enables them to schedule new one-on-one meetings with agency team members who have integrated their Calendly accounts.

Business Goals: To streamline the meeting scheduling process between clients and agencies by leveraging Calendly's scheduling capabilities, provide transparent visibility into all past and upcoming project meetings, and reduce back-and-forth communication for scheduling by enabling self-service booking directly from the client portal.

2. User Roles & Permissions

Role

Access Level

Permissions

Client (Primary Contact)

Full Access

View all project meetings, schedule new meetings with Calendly-integrated team members, view meeting details, join video meetings, view call/location details

Client (Additional Contacts)

Full Access

View all project meetings, schedule new meetings with Calendly-integrated team members, view meeting details, join video meetings, view call/location details

Guest/Non-authenticated Users

No Access

Cannot access the Meetings tab or any meeting information

3. User Flow

3.1 Viewing Meetings

3.1.1 The client logs into the portal and lands on the Overview tab page.

3.1.2 The client clicks on the "Meetings" sub-tab within the Overview sub-navigation (alongside Activity, Files/Documents, Finances, and Notes).

3.1.3 The system loads the Meetings page displaying the meeting list on the left and the persistent Overview sidebar on the right.

3.1.4 The client views the meeting list showing all past and upcoming meetings with Date & Time, Meeting Title, Description, Participant avatars, and an action CTA button.

3.1.5 The client uses the sort dropdown to switch between "Latest" (default) and "Oldest" ordering.

3.1.6 The client clicks on a meeting row to view full meeting details.

3.1.7 The system opens a meeting details pop-up showing the title, date, time, meeting mode information, and all participants with the organizer highlighted.

3.1.8 The client closes the pop-up and returns to the meeting list.

3.1.9 The client identifies an upcoming video call meeting and clicks the "Join Meeting" CTA button.

3.1.10 The system opens the video meeting link (Google Meet / Zoom) in a new browser tab.

3.2 Scheduling a New Meeting

3.2.1 The client clicks the "+ New Meeting" button at the top-right of the Meetings section.

3.2.2 The system displays a selection list of agency project team members who have integrated Calendly.

3.2.3 The client selects a single team member from the list.

3.2.4 The system redirects the client to the selected team member's Calendly scheduling page.

3.2.5 The Calendly form auto-populates the client's name and email, and pre-fills all project team members as guests.

3.2.6 The client selects a date, time slot, and optionally removes/adds guests within the Calendly interface.

3.2.7 The client confirms the meeting on Calendly.

3.2.8 Calendly processes the scheduling and syncs the meeting back to Pixally.

3.2.9 The client is redirected back to the Meetings tab where the newly scheduled meeting appears in the list after a page refresh.

3.3 Empty State Flow

3.3.1 The client navigates to the Meetings sub-tab.

3.3.2 The system detects no meetings exist for the project.

3.3.3 The system displays the empty state with a calendar illustration and the message "No meetings yet."

3.3.4 The client clicks "+ New Meeting" to schedule their first meeting (if Calendly-integrated team members exist).

3.4 All Team Members Disconnected Flow

3.4.1 The client navigates to the Meetings sub-tab.

3.4.2 The system detects that no agency project team members have Calendly integrated.

3.4.3 The "+ New Meeting" button is displayed in a disabled state.

3.4.4 The meeting list area shows the empty state with the message "No meetings yet."

3.4.5 Previously synced meetings (if any) remain visible in the list with their existing details and CTAs.

4. Functional Logic

4.1 Tab Visibility Rules

• The Meetings sub-tab appears in the Client Portal > Overview sub-navigation only if at least one agency project team member has successfully integrated Calendly.

• If no project team member has integrated Calendly, the Meetings sub-tab is completely hidden from the client portal navigation — it is not shown in a disabled or greyed-out state.

• If all project team members disconnect Calendly after the Meetings tab was previously visible, the tab remains visible on the next page load but the "+ New Meeting" button becomes disabled. Existing synced meetings continue to display.

• The tab visibility check occurs on each page load/navigation to the Overview section.

4.2 Page Layout and Structure

• The Meetings tab displays as a sub-tab under the Overview section, positioned in the sub-navigation alongside Activity, Files/Documents, Finances, and Notes.

• The page is divided into two areas: the left/main content area containing the Meetings section, and the right sidebar containing the persistent Overview widget (metric cards and Deliverables section).

• The right sidebar remains consistent across all Overview sub-tabs — it is the same sidebar defined in the Overview Side Menu FRD.

• The main content area header displays the "Meetings" title on the left, with a sort dropdown and "+ New Meeting" button on the right.

4.3 Meeting List Display

• The system retrieves all meetings associated with the project from the Calendly integration and displays them in a table/list format.

• The meeting list shows both past and upcoming meetings in a single list.

• Each meeting row displays the following columns:

  • Date & Time: Displayed in the viewer's local timezone. Format: "Aug 2, 2024 08:30 AM - 9:30 AM"
  • Meeting Title: Pulled from the Calendly event type name
  • Meeting Description: Displayed below the title, truncated with ellipsis if it exceeds the available row width
  • Participants: Avatar display of the organizer and meeting participants
  • Action CTA: Mode-based action button (varies by meeting type — Refer Section 4.5)

• The default sort order is "Latest" which shows the nearest upcoming meetings first, followed by past meetings in reverse chronological order.

• The "Oldest" sort option shows the earliest meetings first.

• Scrolling behavior mirrors the agency portal's meeting list — if the list exceeds the visible area, vertical scrolling is enabled within the meeting list container.

• Clicking on a meeting row opens the meeting details pop-up (same behavior as the agency portal — Refer Section 4.6).

4.4 Participant Avatar Display Logic

• Participant avatars in the meeting list are shown only for emails matching the project team members and clients.

• Non-project-member guests (external email addresses added manually during scheduling) are hidden from the avatar display but remain as attendees in the actual Calendly event.

• The meeting organizer (the person who scheduled the meeting) is identifiable in the participant display.

• If the number of participants exceeds 3, the system displays the first 3 avatars followed by a "+X" indicator where X is the count of remaining participants (e.g., 5 participants → 3 avatars + "+2").

• On hover over the "+X" indicator, the system displays a tooltip or expanded list showing all participant names.

4.5 Meeting Mode Display Logic

Action buttons on each meeting row vary based on the meeting mode configured by the organizer during scheduling in Calendly:

• **Video Call:
  **
  • CTA: "Join Meeting" (with video icon)
  • On click: Opens the meeting link (Google Meet / Zoom) in a new browser tab
• **Phone Call:
  **
  • CTA: "View Call Details" (with phone icon)
  • On click: Opens the Phone Call Details pop-up — Refer Section 4.6.2
• **In-Person Meeting:
  **
  • CTA: "In Person" (with location icon)
  • On click: Opens the In-Person Meeting Details pop-up — Refer Section 4.6.3
• **No Meeting Mode Info:
  **
  • CTA: "Meeting Info" (with info icon)
  • On click: Opens the General Meeting Info pop-up — Refer Section 4.6.4

4.6 Meeting Detail Pop-Ups

When a client clicks on a meeting row or on the action CTA button (for Phone Call, In-Person, and No Info modes), the system displays a detail pop-up. The pop-up structure varies by meeting mode:

4.6.1 Video Call Meeting Details (Row Click)

When the client clicks on a video call meeting row (not the CTA button), the system displays a pop-up with:

• Meeting Title (from Calendly event)
• Date (format: "Aug 2, 2024")
• Time (format: "8:30 AM - 9:30 AM")
• Meeting Link (Google Meet / Zoom URL — clickable, opens in new tab)
• Participants section with all attendees showing names and profile pictures; the organizer is highlighted with an "Organizer" label
• Close button

4.6.2 Phone Call Details Pop-Up

• Pop-up Title: "Phone Call Details"
• Meeting Title (from Calendly event)
• Date (format: "Aug 2, 2024")
• Time (format: "8:30 AM - 9:30 AM")
• Dial Number: Displays the phone number of the invitee
• Participants section with all attendees showing names and profile pictures; the organizer is highlighted with an "Organizer" label
• Close button

4.6.3 In-Person Meeting Details Pop-Up

• Pop-up Title: "In-Person Meeting Details"
• Meeting Title (from Calendly event)
• Date (format: "Aug 2, 2024")
• Time (format: "8:30 AM - 9:30 AM")
• Location: Full address from Calendly settings
• "Show on Google Maps" button: Opens the meeting location in Google Maps in a new tab
• Participants section with all attendees showing names and profile pictures; the organizer is highlighted with an "Organizer" label
• Close button

4.6.4 General Meeting Info Pop-Up

• Pop-up Title: "Meeting Info"
• Date (format: "Aug 2, 2024")
• Time (format: "8:30 AM - 9:30 AM")
• Participants section with all attendees showing names
• Close button

4.7 Schedule New Meeting Flow (+ New Meeting)

• The "+ New Meeting" button is positioned at the top-right of the Meetings section header.

• On click, the system displays a team member selection list showing all agency project team members who have integrated Calendly.

• Non-Calendly-integrated agency users do not appear in the team member selection list.

• The selection list displays each team member's name and profile picture/avatar for easy identification.

• The client selects a single team member (one-on-one meeting scheduling only — no multi-select).

• After selection, the system redirects the client to the selected team member's Calendly scheduling page.

• **Auto-Population Logic:
  **

  • The client's name and email are auto-populated into the Calendly meeting scheduling form.
  • All project team members are automatically added as guests in the Calendly form.
  • The client can remove any pre-populated guests and add additional email addresses manually within the Calendly interface.

• After the client completes scheduling on Calendly, the meeting syncs back to Pixally. The new meeting appears in the Meetings list after a manual page refresh.

• The client who scheduled the meeting is displayed as the organizer in the meeting list.

4.8 Disabled State for + New Meeting

• If all agency project team members have disconnected their Calendly accounts (but at least one was connected previously, so the tab is still visible), the "+ New Meeting" button is displayed in a disabled state (greyed out, non-clickable).

• On hover over the disabled button, a tooltip displays: "No team members have Calendly connected."

• Existing synced meetings remain visible and functional in the list.

4.9 Data Synchronization

• All meeting data is sourced from Calendly through the integration — Pixally does not manage meeting scheduling natively.

• Meetings sync continuously from Calendly to Pixally as long as the integration is active.

• New meetings and updates to existing meetings made in Calendly are reflected in the client portal after a manual page refresh by the client.

• When a meeting is cancelled on Calendly, it is deleted from the client portal meeting list — cancelled meetings are not displayed. The meeting count in the sidebar updates accordingly after a page refresh.

• If an agency user **disconnects Calendly:
  **

  • Existing meetings already synced remain visible in the meeting list.
  • No new meetings from that user will sync after disconnection.
  • The disconnected user is removed from the team member selection list for "+ New Meeting."

4.10 Overview Sidebar - Meetings Count

• The Meetings count in the Overview sidebar metric card shows the total number of upcoming meetings scheduled for the specific project.

• When there are no upcoming meetings, the count displays "--" (double dash).

• The count excludes past meetings — only upcoming active meetings are counted.

• The count updates automatically when meetings are added or removed from the project.

4.11 Empty States and Messaging

• No meetings exist for the project: The system displays a calendar illustration with the message "No meetings yet." The "+ New Meeting" button remains active (if Calendly-integrated team members exist).

• No meetings exist and no team members have Calendly connected: The system displays the same "No meetings yet" empty state, but the "+ New Meeting" button is disabled.

4.12 Client Visibility Scope

• All clients associated with the project (Primary Contact and Additional Contacts) see the same set of meetings — there is no per-client filtering based on individual participation.

• If a client is associated with multiple projects, they see meetings only for the currently selected project in the portal.

• The meeting data shown in the client portal is project-scoped, not client-scoped.

5. Field Details & Validations

5.1 Meeting List Table Fields

Field Name

Type

Validation Rules

Sort

Dropdown

Default: "Latest." Options: "Latest", "Oldest." "Latest" shows nearest upcoming meetings first; "Oldest" shows earliest meetings first

Date & Time

DateTime

Displayed in the viewer's local timezone. Format: "Aug 2, 2024 08:30 AM - 9:30 AM"

Meeting Title

Text

Pulled from the Calendly event type. Displayed as primary text in the meeting row

Meeting Description

Text

Displayed below the title. Truncated with ellipsis if it exceeds the available row width

Participants

Avatar List

Displays profile pictures/avatars of the organizer and participants. Only project team members are shown. Non-project guests are hidden. Maximum 3 avatars displayed; if participants exceed 3, shows "+X" indicator for the remaining count

Action CTA

Button

Varies by meeting mode — "Join Meeting" (video), "View Call Details" (phone), "In Person" (location), "Meeting Info" (no info)

5.2 Team Member Selection List (+ New Meeting)

Field Name

Type

Validation Rules

Team Member Name

Text Display

Full name of the agency project team member

Team Member Avatar

Image/Initials

Profile picture or initials of the team member

Calendly Status

Filter Logic

Only team members with active Calendly integration are displayed. Non-integrated members are excluded from the list entirely

5.3 Phone Call Details Pop-Up

Field Name

Type

Validation Rules

Pop-Up Title

Text

"Phone Call Details"

Title

Text

From the Calendly event

Date

Date

Display format: "Aug 2, 2024"

Time

Time

Display format: "8:30 AM - 9:30 AM"

Dial

Number

Display the phone number of the invitee

Participants Section

Avatar List

All meeting attendees with names and profile pictures. Organizer highlighted with "Organizer" label

Close

Button

On click, closes the pop-up

5.4 In-Person Meeting Details Pop-Up

Field Name

Type

Validation Rules

Pop-Up Title

Text

"In-Person Meeting Details"

Title

Text

From the Calendly event

Date

Date

Display format: "Aug 2, 2024"

Time

Time

Display format: "8:30 AM - 9:30 AM"

Location

Text

Full address from Calendly settings

Participants Section

Avatar List

All meeting attendees with names and profile pictures. Organizer highlighted with "Organizer" label

Show on Google Maps

Button

Opens the meeting location in Google Maps in a new tab

Close Button

Button

Closes the pop-up

5.5 General Meeting Info Pop-Up

Field Name

Type

Validation Rules

Pop-Up Title

Text

"Meeting Info"

Date

Date

Display format: "Aug 2, 2024"

Time

Time

Display format: "8:30 AM - 9:30 AM"

Participants Section

Avatar List

All participants with names

Close Button

Button

Closes the pop-up

6. Success Message Handling

Operation

Success Message

Trigger Condition

Post-Success Action

Page Load

None (Silent)

Successful data retrieval

Display meeting list

Meeting Scheduled

"Meeting has been scheduled successfully."

Successful scheduling via Calendly

Redirect back to Meetings tab; new meeting appears after page refresh

Join Meeting

None (Silent)

Click "Join Meeting" CTA

Opens video meeting link in new tab

View Meeting Details

None (Silent)

Click on meeting row

Opens meeting details pop-up

Copy Meeting Link

"Link copied to clipboard"

Click copy link (if available in pop-up)

Meeting link in clipboard

7. Error Message Handling

Error Scenario

Error Message

Trigger Condition

User Action Required

Meeting List Load Failure

"Unable to load meetings. Please refresh the page."

API timeout or Calendly sync error

Refresh the browser

No Calendly-Integrated Team Members (+ New Meeting)

Tooltip: "No team members have Calendly connected."

All project team members have disconnected Calendly

Contact agency; button remains disabled

Calendly Page Load Failure

"Unable to load scheduling page. Please try again."

Calendly service unavailable or network error during redirect

Retry clicking "+ New Meeting"

Meeting Details Pop-Up Load Failure

"Unable to load meeting details. Please try again."

API error when fetching meeting detail data

Close pop-up and retry

Join Meeting Link Unavailable

"Meeting link is not available."

Meeting link expired or removed from Calendly

Contact agency or organizer

Session Expired

"Your session has expired. Please log in again."

Invalid or expired session token

Re-authenticate

Network Error

"Please check your internet connection."

No network connectivity

Restore connection and refresh

General Error

"Something went wrong."

Calendly service unavailable or unexpected server error

Retry or refresh page

8. Edge Cases

Scenario

Expected Behavior

Fallback Action

No agency team members have Calendly integrated

Meetings tab is completely hidden from the client portal sub-navigation

Client does not see the tab at all

All team members disconnect Calendly after tab was previously visible

Tab remains visible on next page load; "+ New Meeting" button is disabled; existing meetings remain visible

Tooltip on disabled button: "No team members have Calendly connected"

Client tries to schedule but selected team member disconnects Calendly mid-flow

Calendly page may show an error or unavailability

Client returns to Meetings tab and selects another team member

Meeting cancelled on Calendly

Cancelled meeting is deleted from the client portal meeting list and no longer displayed

Meeting count updates after page refresh; if all meetings cancelled/deleted, empty state displays

Meeting scheduled for a removed project member

Meeting remains visible in the project meeting list

Participant avatar may show as generic/removed indicator

Project member removed after scheduling meetings

Existing meetings remain in the project view; removed member no longer appears in "+ New Meeting" selection

Meetings persist for historical reference

Large number of participants added

First 3 participant avatars display; remaining count shown as "+X" indicator (e.g., "+2" for 5 total)

Hover over "+X" shows full participant list

Very long meeting title from Calendly

Title truncates with ellipsis at the available row width

Full title shown on hover tooltip and in the meeting details pop-up

Very long meeting description

Description truncates with ellipsis below the title at available row width

Full description visible in meeting details pop-up

Multiple meetings at the same time slot

All meetings display individually in the list; Calendly handles scheduling conflicts

No conflict resolution in Pixally

Network interruption during scheduling redirect to Calendly

Display "Something went wrong" error

Client retries the scheduling flow

Client refreshes page immediately after scheduling

New meeting may not appear yet if sync is not complete

Client refreshes again after a short wait

Past meeting with video link

"Join Meeting" CTA remains visible but the link may be expired

Clicking opens the link; external service handles expiration

Client associated with multiple projects

Meetings shown are scoped to the currently selected project only

Switching projects shows that project's meetings

Client removed from project

Client loses portal access entirely; meetings are no longer accessible

Login shows access error

Archived/completed project

Meetings tab visible in read-only mode; "+ New Meeting" button is hidden; past meetings remain viewable

Client cannot schedule new meetings

9. Acceptance Criteria

• The Meetings tab must appear only when at least one agency project team member has Calendly integrated; otherwise, the tab is hidden.

• The meeting list must display all past and upcoming project meetings with correct Date & Time, Title, Description, Participants, and mode-based action CTA.

• The default sort must be "Latest" (nearest upcoming first); "Oldest" shows earliest meetings first.

• The "+ New Meeting" button must open a team member selection list showing only Calendly-integrated project members; selecting a member must redirect to their Calendly scheduling page.

• The client's name and email must auto-populate in the Calendly form; all project team members must be pre-added as guests with the option to remove/add.

• Meeting mode CTAs must work correctly: "Join Meeting" opens video link in new tab; "View Call Details" opens phone pop-up; "In Person" opens location pop-up with Google Maps; "Meeting Info" opens general info pop-up.

• Cancelled meetings must be deleted from the meeting list and not displayed to the client.

• Clicking a meeting row must open the appropriate meeting details pop-up matching the meeting mode.

• The Overview sidebar Meetings count must show only upcoming active meetings; display "--" when none exist.

• The "+ New Meeting" button must be disabled when no team members have Calendly connected, with a tooltip explaining the reason.

• New meetings must appear in the list after manual page refresh following successful Calendly scheduling.

• The empty state must show "No meetings yet" with a calendar illustration when no meetings exist.

• All date/time values must display in the client's local timezone.

• The page must be responsive and functional on devices with screen width ≥320px.

• Participant avatars must show only project team members; non-project guests must be hidden from avatar display. Maximum 3 avatars displayed; overflow shown as "+X" indicator.

10. Dependencies

Dependency

Type

Description

Fallback Behavior

Calendly Integration (Agency-Side)

External API

Provides all meeting data, scheduling functionality, and sync capabilities

Meetings tab hidden if no integration; "Something went wrong" error if service unavailable

Calendly API

External Service

Handles meeting scheduling, cancellation, and real-time event data

Display error message if API unreachable; existing synced meetings remain visible

Authentication Service

Internal

Validates client session and project access permissions

Redirect to login if unavailable

Project Management Module

Internal

Determines project association, team members, and client access

Cannot display meetings without project context

User Management System

Internal

Provides team member profiles, avatars, and Calendly integration status

Cannot populate team member selection list

Overview Side Menu Module

Internal

Provides the persistent right sidebar with metric cards and Deliverables

Sidebar loads independently; meeting count may show "--"

Notification Service

Internal

Sends meeting confirmation and reminder notifications

Silent failure; meetings still sync but notifications may not deliver

Time Zone Service

Internal

Converts meeting times to the client's local timezone

Incorrect time display if unavailable; fallback to UTC

Brand Management Module

Internal

Provides custom branding for the portal interface

Default theme applied if unavailable

11. References

• Calendly Integration FRD (Agency-Side): Refer to the Calendly Integration FRD for complete details on the agency-side integration, connection/disconnection flows, calendar sync, and dashboard widget behavior.

• Client Portal - Overview Side Menu FRD: Refer for the persistent right sidebar structure including the Meetings count metric card.

• Client Portal - Project Header and Tabs FRD: Refer for the main navigation structure and tab behavior.

• Figma Design Link:Click here

✅ Overview > Finances

Functional Requirements Document - Client Portal: Overview > Finances

1. Module Overview

Module Name: Client Portal - Overview > Finances

Purpose: The Finances section provides clients with comprehensive visibility into their project's financial status, including package pricing, payment history, outstanding balances, payment schedules, and the ability to make secure online payments through integrated payment processing.

Business Goals: To enable transparent financial management, reduce payment-related inquiries, facilitate timely payment collection, and provide clients with self-service access to invoices, receipts, and payment options throughout their project lifecycle.

2. User Roles & Permissions

Role

Access Level

Permissions

Client (Primary Contact)

Full Access

View all financial details, make payments, download invoices/receipts, add payment methods

Client (Additional Contacts - Authorized)

Payment Access

View financial details, make payments with authorization, download documents

Client (Additional Contacts - View Only)

Read-Only Access

View financial information only, download invoices/receipts

Guest/Non-authenticated Users

No Access

Cannot access financial information

3. User Flow

3.1 The client navigates to the Overview tab from the main project navigation.

3.2 The client locates the Finances widget in the right sidebar or main content area.

3.3 The client clicks on "View All" or the Finances section header to expand full financial details.

3.4 The system loads the complete finances page showing all financial information.

3.5 The client views the total package price displayed prominently at the top.

3.6 The client reviews the amount already paid showing below the total.

3.7 The client checks the outstanding balance highlighted in the summary section.

3.8 The client scrolls to view the payment schedule table showing all installments.

3.9 The client identifies upcoming payment due dates with amounts in the schedule.

3.10 The client views the payment history section showing all completed transactions.

3.11 The client clicks on a specific payment entry to view transaction details.

3.12 The system displays the payment receipt with date, amount, and payment method.

3.13 The client clicks "Download Invoice" button to save the original invoice.

3.14 The system downloads the invoice PDF to the client's device.

3.15 The client decides to make a payment and clicks "Make a Payment" button.

3.16 The system opens the Stripe payment modal overlay.

3.17 The system displays the full invoice amount in the payment modal. Partial payments are not supported — the client must pay the full invoice amount.

3.18 The client selects a saved payment method from their account or enters new payment details through Stripe's secure interface.

3.19 The client enters credit card information in the Stripe-hosted fields.

3.20 The client reviews the payment summary and clicks "Pay Now" to process.

3.20a If payment fails, the system displays the Stripe error message in a red banner within the modal (e.g., "Card declined", "Insufficient funds"). The modal stays open. The client can edit payment details and retry. There is no retry limit.

3.21 The system processes the payment through Stripe and displays confirmation.

3.22 The client receives a payment receipt via email and sees success message.

3.23 The system updates the balance and payment history immediately.

3.24 The client downloads the new payment receipt for their records.

4. Functional Logic

4.1 Financial Summary Display

• The finances section displays the total package price prominently at the top with clear currency formatting.
• The system shows the cumulative amount paid to date directly below the total price.
• Outstanding balance calculates automatically as total minus paid amount and displays with emphasis.
• The summary section uses color coding to indicate payment status: green for paid, orange for pending, red for overdue.
• Tax Display: If Stripe Tax is enabled (configured at the brand level by the agency), tax is calculated in real-time at payment using the client's billing address. If Stripe Tax is not enabled, the tax amount is the fixed value set by the agency at invoice creation. Tax displays as a separate line item: "Tax: $XXX.XX".
• Service fees or additional charges display as separate line items for transparency.
• Discount amounts appear as deductions if any discounts were applied to the package.
• The currency symbol displays consistently throughout based on the contract currency.
• Numbers format with appropriate decimal places and thousand separators for readability.

4.2 Payment Schedule Management

• The payment schedule displays in a structured table format with clear column headers.
• Each payment installment shows: due date, description, amount, and status.
• Due dates display in an easily readable format (e.g., "March 15, 2024") with day of week.
• Payment descriptions clarify the purpose (e.g., "Initial Deposit", "Second Installment", "Final Payment").
• Status indicators show as badges: "Paid" (green), "Pending" (yellow), "Overdue" (red), "Due Soon" (orange).
• The system highlights the next due payment with visual emphasis for easy identification.
• Overdue payments appear at the top with red highlighting and days overdue count.
• Payments due within 7 days show warning indicators to prompt timely action.
• The schedule automatically updates when payments are made, moving items to paid status.
• Custom payment schedules display exactly as configured by the agency during contract setup.

4.3 Payment History Tracking

• The payment history section lists all completed transactions in reverse chronological order.
• Each payment entry displays: payment date, amount, payment method (last 4 digits), and status.
• Transaction IDs from Stripe appear for reference and support purposes.
• The system shows whether each payment was made online or recorded manually by the agency.
• Refunds: Refunds are initiated by the agency only (from the Invoice module in the agency portal). Clients cannot initiate refunds from the client portal. Refunded amounts display as separate entries in the payment history with a "Refunded" status badge (grey)
• Payment methods show safely with only last 4 digits of card numbers for security.
• Each payment entry includes a "View Receipt" link for accessing transaction details.
• Downloaded receipts include all necessary information for accounting and tax purposes.
• The system maintains complete history even for very old transactions without pagination limits.
• Failed payment attempts show in history with failure reason if available.

4.4 Invoice Management

• The original invoice/proposal displays as a downloadable PDF with version control.
• Invoice downloads include all service details, pricing breakdown, and terms.
• The system generates updated invoices automatically when modifications occur.
• Invoice Modifications include: changes to line items, pricing, discounts, or payment terms made by the agency after the invoice has been sent. Each modification generates a new version while preserving the original invoice ID for tracking continuity.
• Each invoice version maintains a timestamp and version number for tracking.
• The filename for downloads includes project name and date for easy filing.
• Invoices contain agency branding as configured in brand settings.
• The system allows downloading of both original and current versions if changes were made.
• Tax information appears on invoices as required by jurisdiction.
• Payment terms and conditions display clearly on all invoice documents.

4.5 Payment Processing Integration

• Empty State — No Invoices/Payments: If the project has no invoices or package assigned, the Financial Summary card still displays with Total Project Price as "$0" / Payments Completed as "$0" / Remaining Payment as "$0", and the Payments table area displays an illustration with the message: "No payments yet." The "Make a Payment" button is hidden when no invoices exist.
• The "Make a Payment" button opens a Stripe-hosted payment modal for security.
• No Partial Payments: The payment interface displays the full invoice amount. The client cannot enter a custom/partial amount. The full invoice amount must be paid in a single transaction.
• Suggested payment amounts appear based on the payment schedule (e.g., next installment due).
• The system accepts credit cards, debit cards, and ACH transfers based on agency configuration.
• Card information entry occurs in Stripe-hosted fields for PCI compliance.
• The system never stores card details directly, relying on Stripe tokenization.
• Address verification (AVS) and CVV checks run automatically during processing.
• The payment modal shows processing status with loading indicators during transaction.
• Success confirmation displays immediately upon successful payment completion.
• Failed payments show specific error messages from Stripe (e.g., "Card declined", "Insufficient funds").
• The system sends automatic email receipts through Stripe to the provided email address.

4.6 Payment Method Management

• Clients can use saved payment methods from their Account Settings (managed via Stripe) when making payments. The payment modal displays a list of the client's saved payment methods.
• Clients can also enter new payment details directly in the Stripe-hosted payment modal without saving the method.
• The system displays saved payment methods with only the card type (Visa, Mastercard) and last 4 digits for security. Bank accounts show the last 4 digits and bank name.
• Payment method details in the payment history show only the type and last 4 digits of the method used for that transaction.
• For full payment method management (add/remove/set primary), refer to the Account Settings FRD.

4.7 Automatic Calculations

• The system recalculates all totals immediately when payments are processed.
• Outstanding balance updates in real-time without requiring page refresh.

4.8 Notifications and Reminders

• Payment confirmation messages appear immediately after successful transactions.
• The system indicates when email receipts have been sent successfully.
• Overdue payment warnings display prominently when viewing finances.
• Upcoming payment reminders show for payments due within 7 days.
• The last payment received date displays for agency reference.

4.9 Security and Compliance

• All payment processing occurs through Stripe's PCI-compliant infrastructure.
• The system uses HTTPS encryption for all financial data transmission.
• Session timeouts apply to payment pages for security.
• The system logs all financial access and actions for audit purposes.
• Sensitive financial data masks appropriately in the interface.

5. Field Details & Validations

Field Name

Field Type

Validation Rules

Total Package Price

Currency

Positive decimal, 2 decimal places, with currency symbol

Amount Paid

Currency

Non-negative decimal, cannot exceed total

Outstanding Balance

Currency

Calculated field: Total - Paid

Due Date

Date

Valid date format MM/DD/YYYY

Card Number

Stripe Hosted

Handled by Stripe, 13-19 digits

CVV

Stripe Hosted

Handled by Stripe, 3-4 digits

Email Address

Email

Valid email format for receipts

Payment Description

Text

Maximum 200 characters

6. Success Message Handling

Operation

Success Message

Trigger Condition

Post-Success Action

Payment Processed

"Payment successful! Amount: $X,XXX"

Successful transaction

Update balance display

Invoice Downloaded

"Download started"

Invoice download initiated

Browser handles download

Receipt Downloaded

"Download started"

Receipt download initiated

Browser handles download

Payment Method Added

"Payment processing..."

Card details entered

Process transaction

Email Receipt Sent

"Receipt sent to [email]"

After payment success

Display confirmation

7. Error Message Handling

Error Scenario

Error Message

Trigger Condition

User Action Required

Payment Failed

"Payment declined. Please try another card."

Card declined by bank

Use different payment method

Invalid Card

"Invalid card number"

Incorrect card format

Re-enter card number

Insufficient Funds

"Transaction failed: Insufficient funds"

Bank decline

Use different card

Network Error

"Connection error. Please try again."

Network timeout

Retry payment

Session Expired

"Session expired. Please refresh and try again."

Timeout during payment

Re-authenticate

Stripe Unavailable

"Payment system temporarily unavailable"

Stripe service down

Try again later

8. Edge Cases

Scenario

System Behavior

Fallback Action

Zero balance due

Hide payment button

Show "Paid in Full" status

Multiple simultaneous payments

Stripe handles concurrency natively

First successful payment processes. If second contact's payment causes the total to exceed balance, Stripe rejects the transaction. The system displays "Payment failed. Balance may have changed. Please refresh." and auto-refreshes the page. | Stripe-managed; no custom queuing needed

Refund processing

Show negative transaction

Update balance accordingly

Payment plan modification

Update schedule display

Show modification notice

Very large number of payments

Implement pagination

Load more button

Offline payment recorded

Show manual entry

Different indicator

No invoices or package assigned to project

Financial Summary shows $0 values; Payments table shows "No payments yet" illustration; payment button hidden

Client sees the empty state; no action possible until agency creates invoices

9. Acceptance Criteria

• Financial summary must display accurate totals and balances
• Payment schedule must show all installments with correct dates and amounts
• Stripe integration must process payments securely without storing card data
• Payment history must maintain complete transaction records
• Invoices must download successfully in PDF format
• Receipts must generate automatically for all payments
• The interface must update immediately after successful payments
• All currency amounts must format consistently with proper symbols
• The system must prevent overpayments beyond outstanding balance
• Mobile responsive design must function on devices ≥320px width

10. Manual Test Cases

Test cases have been created in a separate Excel file. Access the test cases here: TestCases_ClientPortal_Overview_Finances.xlsx

11. Dependencies

Dependency

Type

Description

Fallback Behavior

Stripe Payment Gateway

External

Processes all payment transactions

Display unavailable message

Invoice Generation System

Internal

Creates and manages invoices

Show error message

Receipt Generation Service

Internal

Generates payment receipts

Email receipt only

Email Service

Internal

Sends payment confirmations

Display in-app only

Tax Calculation Service

Internal

Calculates applicable taxes

Show subtotal only

12. References

• Figma Design Files: Figma

✅ Overview Side Menu

Functional Requirements Document - Client Portal: Overview Side Menu

1. Module Overview

Module Name: Client Portal - Overview Side Menu

Purpose: The Overview Side Menu provides quick navigation and action shortcuts on the right side of the overview page, enabling clients to access frequently used features, schedule meetings, download contracts, and navigate to key project sections efficiently.

Business Goals: To enhance user experience by providing immediate access to common actions, reduce navigation time to important features, and centralize quick actions in a consistently accessible location throughout the client portal.

2. User Roles & Permissions

Role

Access Level

Permissions

Client (Primary Contact)

Full Access

Access all menu items, schedule meetings, download documents, navigate sections

Client (Additional Contacts)

Full Access

Access all menu items, schedule meetings, download documents, navigate sections

Client (View-Only)

Restricted Access

View menu items, download documents only, cannot schedule meetings

Guest/Non-authenticated Users

No Access

Cannot access the side menu

3. User Flow

3.1 The client logs into the portal and lands on the Overview tab page.

3.2 The client observes the side menu positioned on the right side of the screen.

3.3 The system displays the side menu with multiple widget sections stacked vertically.

3.4 The client views the Meeting Scheduler widget at the top of the side menu.

3.5 The client clicks on "Schedule a Meeting" button within the widget.

3.6 The system opens a meeting scheduling interface or calendar view.

3.7 The client returns to the overview and scrolls down the side menu.

3.8 The client locates the Contract/Documents widget in the side menu.

3.9 The client clicks on "Download Contract" link within the widget.

3.10 The system initiates download of the signed contract PDF file.

3.11 The client views the Questionnaires widget showing pending items.

3.12 The client clicks on a pending questionnaire link.

3.13 The system navigates to the questionnaire form for completion.

3.14 The client returns and checks the Payment widget in the side menu.

3.15 The client views the outstanding balance displayed in the widget.

3.16 The client clicks "Make a Payment" button in the payment widget.

3.17 The system opens the payment interface with Stripe integration.

3.18 The client scrolls to view the Quick Links widget section.

3.19 The client clicks on a quick link to jump to specific event information.

3.20 The system navigates directly to the selected section or event.

3.21 The client collapses the side menu using the minimize icon if desired.

4. Functional Logic

4.1 Side Menu Structure and Layout

• Each widget in the side menu displays within a card container with consistent padding and spacing.
• The system arranges widgets in a specific order: Meetings, Contract/Documents, Questionnaires, Payments, Quick Links.
• Widget cards feature clear headers with icons to indicate their function visually.
• The side menu automatically hides on screens narrower than 1024px to prioritize main content.
• On tablet and mobile devices, the side menu becomes accessible through a floating action button.
• The system remembers the menu's expanded or collapsed state across user sessions.

4.2 Meeting Scheduler Widget

• The Meeting Scheduler widget displays prominently as the first item in the side menu.
• The widget shows the next scheduled meeting date and time if one exists.
• A "Schedule a Meeting" button appears prominently for initiating new meeting requests.
• The system integrates with the agency's calendar system to show available time slots.
• When clicked, the scheduler opens in a modal or new page depending on configuration.
• The widget displays the meeting type options available (e.g., "Planning Session", "Venue Walkthrough").
• Recent meeting history shows the last 2-3 meetings with dates for reference.
• If no meetings are scheduled, the widget displays "No upcoming meetings" with a "Schedule a Meeting" button below it. If no agency team members have Calendly connected, the button is hidden and only the empty message displays.
• The system validates meeting availability against the agency team's connected calendars.
• Meeting confirmation notifications trigger automatically upon successful scheduling.

4.3 Contract/Documents Widget

• The Contract/Documents widget provides quick access to all signed agreements and important documents.
• The primary "Download Contract" button enables one-click access to the main signed contract.
• Additional documents such as amendments or addendums appear as separate download links.
• Each document link shows the document type and date for easy identification.
• The system displays document file sizes to inform users before downloading.
• Download icons appear next to each document for clear action indication.
• The widget shows the contract signing date and status (e.g., "Signed on May 15, 2024").
• If contracts are pending signature, the widget displays "Sign Contract" action button instead.
• The system tracks download attempts for agency reporting without displaying counts to clients.
• All documents download in PDF format for universal compatibility.
• Document Unavailable: If a document file is not found on the server (corrupted, deleted, or inaccessible), the system displays an inline error "Document unavailable" next to the document entry and hides the download button for that specific document. Other documents in the widget remain functional.

4.4 Questionnaires Widget

• The Questionnaires widget displays all assigned questionnaires with their completion status.
• Pending questionnaires appear at the top with clear "Complete Now" action buttons.
• Each questionnaire shows its title and estimated completion time (e.g., "~10 minutes").
• Completed questionnaires display with green checkmarks and completion dates.
• The widget shows progress for partially completed questionnaires as a percentage.
• Due dates appear for time-sensitive questionnaires with visual urgency indicators.
• The system highlights overdue questionnaires with red indicators to prompt action.
• Clicking a questionnaire opens it in the same window to maintain context.
• If no questionnaires exist, the widget displays "No questionnaires at this time."

4.5 Payment Widget

• The Payment widget displays current financial status including total, paid, and outstanding amounts.
• The outstanding balance appears prominently with appropriate currency formatting.
• A "Make a Payment" button enables quick access to the payment interface.
• The next payment due date displays with amount if payment schedule exists.
• Payment history shows the last 2-3 transactions with dates and amounts.
• The widget indicates if the account is "Paid in Full" with a green success indicator.
• Overdue payments display with red highlighting and overdue amount.
• The system integrates with Stripe for secure payment processing through popup modal.
• The widget refreshes automatically after successful payment completion.
• Zero Balance (All Paid): If the account balance is $0 and all invoices are paid, the widget displays "Account Paid in Full" with a green checkmark icon. The "Make a Payment" button is hidden.
• No Invoices: If no invoices exist for the project, the widget displays "No payments yet." The "Make a Payment" button is hidden.

4.6 Quick Links Section

• The Quick Links widget provides shortcuts to frequently accessed sections and features.
• Links organize by category such as "Event Info", "Files", "Messages", "Gallery".
• Each link displays with an appropriate icon for visual identification.
• The system highlights links to sections with new updates or pending actions.
• Custom links added by the agency appear in this section if configured.
• External links (if any) open in new tabs to maintain portal session.
• The most used links may appear at the top based on user interaction patterns.
• Links to specific events use clear labeling (e.g., "Wedding Day Info", "Engagement Photos").
• The widget maintains consistent styling with hover effects for better interactivity.

4.7 Responsive Behavior

• On screens below 1024px width, the side menu collapses to preserve main content space.
• A floating action button appears on mobile/tablet to access the side menu.
• When opened on mobile, the side menu slides in as an overlay panel.
• The mobile menu includes a close button for easy dismissal.
• Touch gestures enable swipe-to-close functionality on mobile devices.
• Widget content adjusts to fit narrower mobile menu width appropriately.
• Action buttons resize to meet minimum touch target requirements (44px).

4.8 Menu State Management

• The system maintains the side menu visibility state during the user session.
• Collapsed or expanded preference persists across page navigation.
• The minimize/expand toggle appears as a small icon at the top of the menu.
• Animation transitions smooth the collapse/expand actions for better UX.
• The main content area adjusts its width when the side menu toggles.

5. Field Details & Validations

Field Name

Field Type

Validation Rules

Meeting Date

DateTime Display

ISO 8601 format, future dates only for scheduling

Document Name

Text Display

Maximum 100 characters

Document Size

Text Display

Format: "X.X MB", calculated from file

Questionnaire Title

Text Display

Maximum 150 characters

Payment Amount

Currency Display

2 decimal places, with currency symbol

Due Date

Date Display

Format: MM/DD/YYYY

Quick Link Text

Text Display

Maximum 50 characters

Widget Title

Text Display

Maximum 30 characters

6. Success Message Handling

Operation

Success Message

Trigger Condition

Post-Success Action

Schedule Meeting

"Meeting scheduled successfully"

Meeting booking confirmed

Update widget display

Download Document

"Download started"

Document download initiated

Browser handles download

Start Questionnaire

None (Silent)

Questionnaire opened

Navigate to form

Payment Initiated

"Redirecting to payment..."

Payment button clicked

Open payment modal

Menu Collapsed

None (Silent)

Collapse button clicked

Adjust layout

7. Error Message Handling

Error Scenario

Error Message

Trigger Condition

User Action Required

Meeting Unavailable

"No available time slots"

Calendar fully booked

Try different dates

Document Download Failed

"Unable to download. Please try again."

File not accessible

Retry download

Questionnaire Load Failed

"Unable to load questionnaire"

Form service error

Refresh page

Payment System Unavailable

"Payment system temporarily unavailable"

Stripe service down

Try again later

Menu Load Error

"Unable to load menu items"

API failure

Refresh page

8. Edge Cases

Scenario

System Behavior

Fallback Action

No widgets configured

Display minimal menu

Show available items only

All questionnaires complete

Show completion message

Hide widget or show success

No payment required

Hide payment widget

Display paid status

No documents available

Show empty state

Display "No documents yet"

Calendar sync failure

Show manual contact option

Provide agency contact

Multiple contracts

List all with labels

Clear identification

Very long document names

Truncate with ellipsis

Show full name on hover

Slow loading widgets

Show skeleton loaders

Progressive loading

Document file corrupted or deleted from server

Display inline "Document unavailable" message next to the affected document; hide download button for that entry

Other documents remain downloadable; no full widget failure

9. Acceptance Criteria

• Side menu must display on right side of overview page on desktop
• All widgets must load within 2 seconds of page load
• Meeting scheduler must integrate with agency calendar system
• Documents must download successfully when clicked
• Payment widget must show accurate balance information
• Side menu must collapse appropriately on mobile devices
• Quick links must navigate to correct destinations
• Menu state must persist during session
• All action buttons must have appropriate hover states
• Widget order must remain consistent

10. Manual Test Cases

Test cases have been created in a separate Excel file. Access the test cases here: TestCases_ClientPortal_Overview_SideMenu.xlsx

11. Dependencies

Dependency

Type

Description

Fallback Behavior

Calendar Integration Service

Internal

Provides meeting scheduling

Show contact message

Document Management System

Internal

Supplies contract files

Display unavailable

Questionnaire Module

Internal

Manages forms and responses

Hide widget

Payment Processing (Stripe)

External

Handles payment transactions

Show error message

Session Management

Internal

Maintains menu state

Default to expanded

12. References

• Figma link: Figma

✅ Events - Service Tab

Functional Requirements Document - Client Portal: Events - Service Tab

1. Module Overview

Module Name: Client Portal - Events - Service Tab

Purpose: The Service tab within each event displays a read-only summary of all services included in the client's package for a specific event, showing key specifications such as package type, hours of coverage, minimum deliverable counts, and number of assigned professionals. Below the services, the tab also displays event-level custom fields configured by the agency.

Business Goals: To provide clients with clear, at-a-glance visibility into the services contracted for each event, reduce service-related inquiries to the agency, and maintain a single source of truth for service details that automatically reflects any changes made by the agency in the project details.

2. User Roles & Permissions

Role

Access Level

Permissions

Client (Primary Contact)

Read-Only Access

View all service details and custom fields for the event; cannot edit, add, or remove any service information

Client (Additional Contacts)

Read-Only Access

View all service details and custom fields for the event; cannot edit, add, or remove any service information

Guest/Non-authenticated Users

No Access

Cannot access service information

Important: All service data on this tab is read-only for clients. Clients cannot modify any service details, package information, or custom field values. Any changes must be requested through the agency. Changes made by the agency in the project details are reflected in the client portal after a page refresh.

3. User Flow

3.1 Viewing Services (Populated State)

3.1.1 The client navigates to a specific event tab (e.g., "Rehearsal Dinner", "Wedding") from the main project navigation.

3.1.2 The system loads the event interface with sub-tabs: Services, Deliverables, Files/Documents, Notes, and Info.

3.1.3 The Services sub-tab is the default active tab when an event is opened.

3.1.4 The system displays the Services page with the left/main content area showing service sections and the right sidebar showing the persistent Overview widget.

3.1.5 The client views all service types listed vertically (e.g., Photography, Videography, Content Creation), each as a separate section with key metric icons.

3.1.6 The client reviews the Photography section showing Package name, Hours Coverage, Min amount of photos, and Number of Shooters.

3.1.7 The client scrolls down to view additional service types (Videography, Content Creation, etc.), each displaying their respective metrics.

3.1.8 The client scrolls further to view the event-level custom fields section below the service sections, showing various field types with their values.

3.1.9 For long text custom fields, the client clicks "Read more" to expand the truncated content.

3.1.10 For link custom fields, the client clicks the copy icon to copy the URL to clipboard, or clicks the link directly to open it in a new tab.

4. Functional Logic

4.1 Page Layout and Structure

• The Service tab is a sub-tab under each event tab (e.g., Rehearsal Dinner, Wedding, Engagement Photoshoot), positioned first in the event sub-navigation: Services | Deliverables | Files/Documents | Notes | Info.

• The page is divided into two areas: the left/main content area containing the Services section and custom fields, and the right sidebar containing the persistent event-level Overview widget.

• The right sidebar displays across all event sub-tabs and includes: Overview metric cards (Meetings, Upcoming Payments, Received Deliverables, Pending Deliverables), Deliverables section, Upcoming Meetings section, and Payment section.

• All content on this tab is read-only for clients. There are no edit, add, or delete actions available.

4.2 Service Metric Display

Each service section displays a horizontal row of key metrics, each represented as an icon with a value label below it:

Standard metrics shown for all service types:

• Package: Displays the package name (e.g., "Basic", "Premium"). Shown with a package icon.
• Hours Coverage: Displays the total contracted hours (e.g., "8"). Shown with a clock icon.
• Number of Shooters: Displays the number of assigned professionals (e.g., "2"). Shown with a person icon.

Conditional metric (Photography only):

• Min amount of photos: Displays the minimum guaranteed photo count (e.g., "1000"). Shown with a photo/image icon. This metric is only displayed for Photography service type and is hidden for other service types.

Display rules:

• Metric values are displayed as plain numbers without units in the value area; the label below the icon provides the context (e.g., the number "8" with label "Hours Coverage").
• All metric values are read-only and sourced from the agency's project configuration.

4.3 Supported Service Types

The system supports exactly three service types:

• Photography — Shows Package, Hours Coverage, Min amount of photos, Number of Shooters
• Videography — Shows Package, Hours Coverage, Number of Shooters
• Content Creation — Shows Package, Hours Coverage, Number of Shooters

Only these three service types are available. The service sections display only for the types included in the event's package.

4.4 Event-Level Custom Fields

Below the service sections, the system displays event-level custom fields configured by the agency. Custom fields are visible in the client portal only if the agency has enabled the "Clients" visibility checkbox when creating/configuring the custom field in the agency settings.

Custom Field Visibility Logic (Agency-Side Configuration):

When the agency creates a custom field, they configure the following:

• Field Name: The label displayed to the client
• Field Type: The data type (Short Text, Long Text, Date Picker, Number, Link, Single Choice, Multiple Choice)
• Field is visible to...: Checkboxes for "Contractors" and/or "Clients". Only fields where the "Clients" checkbox is selected are displayed in the client portal. Fields without "Clients" visibility are completely hidden from the client view.
• Field will be applied to the next events...: Determines which events the field appears under (e.g., "Wedding", "Rehearsal Dinner"). The field is only shown on the Service tab of the events it is mapped to.
• ...and services: Determines which service section the field is associated with (e.g., "Photography"). The field displays below the corresponding service section, not as a generic event-level block.

Note: Custom fields apply to all future and existing projects once created by the agency.

Supported custom field types:

• Short Text Field: Displays the field label and a single-line text value below it. Read-only.

• Long Text Field: Displays the field label and multi-line text content. If the content exceeds a defined height threshold (approximately 3 lines), the text is truncated with a "Read more" link. Clicking "Read more" expands the content inline to show the full text. The expanded state shows a "Read less" or "Show less" option to collapse back.

• Date Picker Field: Displays the field label and a formatted date value (e.g., "August 5, 2025"). Read-only.

• Number Field: Displays the field label and a numeric value (e.g., "2132331313"). Read-only.

• Link Field: Displays the field label and a clickable URL. A copy icon is displayed next to the link. Clicking the copy icon copies the URL to clipboard. Clicking the link itself opens it in a new browser tab.

• Single Choice Field: Displays the field label and the selected option value (e.g., "Selected Option"). Read-only.

• Multiple Choice Field: Displays the field label and all selected option values, shown as comma-separated text or as individual tags/chips. Read-only.

Custom field display rules:

• Custom fields appear in the client portal only if the "Clients" visibility checkbox is enabled in the agency's custom field configuration. Fields with only "Contractors" visibility or no visibility selected are completely hidden.
• Custom fields appear only if they have been configured and have values for the event. Empty custom fields are not displayed.
• Custom fields are displayed under the specific service section they are associated with (based on the "...and services" mapping), not as a standalone section at the bottom.
• If a custom field is mapped to multiple events, it appears on each mapped event's Service tab independently.
• Custom fields are displayed in the order defined by the agency.
• All custom field values are read-only for clients.
• A visual separator (spacing or divider) distinguishes the custom fields from the service metrics above.

4.5 Right Sidebar (Event-Level Overview Widget)

The right sidebar displays alongside the Services content and persists across all event sub-tabs. It contains:

• Overview Metric Cards: Four cards showing Meetings count, Upcoming Payments count, Received Deliverables count, and Pending Deliverables count.

• Deliverables Section: Lists deliverables for the event with their status (Pending/Received), expected dates, and delivery links (e.g., Google Drive URLs with copy icons). Includes a "Show More (+X Deliverables)" link when the list is truncated.

• Upcoming Meetings Section: Lists the next upcoming meetings with meeting title, date, time, and participant avatars. Each meeting entry is clickable (linking to the meeting details — Refer Meetings Tab FRD).

• Payment Section: Displays payment items with due dates, statuses (Overdue in red, Upcoming in yellow), and a three-dot action menu for each payment entry.

Note: The right sidebar is shared across all event sub-tabs and may be documented in a separate shared component FRD. This section provides context for the Service tab layout only.

4.6 Data Source and Synchronization

• All service data is fetched from the agency portal's project details — specifically the order/package configuration and event service assignments.

• Any changes made by the agency (new services added, hours updated, shooters changed, package modified) are reflected in the client portal after a manual page refresh.

• Custom field values are also sourced from the agency's event configuration and follow the same refresh behavior.

• The client portal does not cache service data independently — each page load fetches the latest available data from the server.

4.8 No Empty State for Services

• The Services tab does not have an empty state. Services are always present when the event exists — the agency configures services as part of the event/project setup.

• No custom fields configured (or none with "Clients" visibility): The custom fields area is simply not rendered — no empty state message is shown. The page shows only the service sections.

• Services exist but no custom fields visible to client: Only the service sections display. No visual gap or placeholder appears where custom fields would be.

5. Field Details & Validations

5.1 Service Metric Fields

Field Name

Field Type

Validation Rules

Service Type Name

Text Display (Section Header)

Displayed as bold section header. Fixed values: "Photography", "Videography", "Content Creation" only

Package

Text Display with Icon

Package name from the agency configuration. e.g., "Basic", "Premium". Maximum 200 characters

Hours Coverage

Numeric Display with Icon

Numeric value representing contracted hours. e.g., "8". Range: 0–999

Min amount of photos

Numeric Display with Icon

Minimum guaranteed photo count. e.g., "1000". Range: 0–99,999. Displayed only for Photography service type

Number of Shooters

Numeric Display with Icon

Count of assigned professionals. e.g., "2". Range: 0–99

5.2 Custom Field Types

Field Name

Field Type

Validation Rules

Short Text Field

Text Display

Single-line text. Read-only

Long Text Field

Rich Text Display

Multi-line text with "Read more" truncation. Read-only.

Date Picker Field

Date Display

Format: "Month DD, YYYY" (e.g., "August 5, 2025"). Read-only

Number Field

Numeric Display

Numeric value. Read-only.

Link Field

URL Display

Clickable hyperlink that opens in new tab. Copy icon copies URL to clipboard. Read-only.

Single Choice Field

Text Display

Displays the single selected option value. Read-only

Multiple Choice Field

Tag/Text Display

Displays all selected option values as comma-separated text or individual tags. Read-only

5.3 Right Sidebar Fields

Field Name

Field Type

Validation Rules

Meetings Count

Numeric Display

Integer count of upcoming meetings. Displays "--" if none

Upcoming Payments Count

Numeric Display

Integer count of upcoming payments

Received Deliverables Count

Numeric Display

Integer count of received deliverables

Pending Deliverables Count

Numeric Display

Integer count of pending deliverables

Deliverable Name

Text Display

Name of the deliverable item

Deliverable Status

Status Badge

Values: "Pending" (orange), "Received" (green)

Deliverable Expected Date

Date Display

Format: "Expected by Month DD, YYYY"

Deliverable Delivered Date

Date Display

Format: "Delivered on Month DD, YYYY"

Deliverable Link

URL Display

Google Drive or external URL with copy icon

Meeting Title

Text Display

Upcoming meeting name

Meeting Date & Time

DateTime Display

Format: "Dec 17, 2024 - 09:30 AM - 9:30 AM"

Payment Description

Text Display

Invoice or payment name

Payment Due Date

Date Display

Format: "Due Date: Mon DD, YYYY"

Payment Status

Status Badge

Values: "Overdue" (red), "Upcoming" (yellow)

6. Success Message Handling

Operation

Success Message

Trigger Condition

Post-Success Action

Page Load

None (Silent)

Successful data retrieval

Display service sections and custom fields

Copy Link (Custom Field)

"Link copied to clipboard"

Click copy icon on a Link custom field

URL available in clipboard

Copy Deliverable Link (Sidebar)

"Link copied to clipboard"

Click copy icon on a deliverable link in sidebar

URL available in clipboard

Page Refresh

None (Silent)

Manual browser refresh

Display latest data from agency

7. Error Message Handling

Error Scenario

Error Message

Trigger Condition

User Action Required

Service Data Load Failure

"Unable to load service information. Please try again."

API timeout or server error

Refresh page

Custom Fields Load Failure

"Unable to load additional details. Please try again."

API error when fetching custom field data

Refresh page

Sidebar Load Failure

"Unable to load overview. Please try again."

API timeout for sidebar data

Refresh page

Copy to Clipboard Failed

"Unable to copy. Please try manually."

Browser clipboard API failure

Manually select and copy the URL

Network Error

"Please check your internet connection."

No network connectivity

Restore connection and refresh

Session Expired

"Your session has expired. Please log in again."

Invalid or expired session token

Re-authenticate

General Error

"Something went wrong."

Unexpected server error

Retry or refresh page

8. Edge Cases

Scenario

Expected Behavior

Fallback Action

Only one service type exists

Display that single service section; no visual gap for missing service types

Normal rendering

Service added by agency after client last visited

New service appears after client refreshes the page

Manual page refresh required

Service removed by agency

Service section disappears after client refreshes the page

Manual page refresh required

Agency updates hours/shooters/package

Updated values reflect after client refreshes the page

Manual page refresh required

Very long package name

Truncate with ellipsis at available width

Full name visible on hover tooltip

No custom fields visible to client (none configured or none with "Clients" visibility)

Custom fields section is not rendered at all; no placeholder or empty message

Services section displays normally without any gap below

Long Text custom field with very long content

Truncated at approximately 3 lines with "Read more" link

Click "Read more" to expand inline

Link custom field with very long URL

URL truncated with ellipsis in the display

Full URL copied on clicking copy icon; full URL used when clicking the link

Unsupported or new custom field type

Field is hidden from the client view

No error shown; field simply not rendered

Custom field exists but "Clients" visibility not enabled

Field is completely hidden from the client portal

Client never sees fields without "Clients" checkbox enabled

Agency adds custom field after client last visited

New custom field appears after client refreshes the page (if "Clients" visibility is enabled)

Manual page refresh required

Min amount of photos shown for non-Photography service

This field is only displayed for Photography type; hidden for Videography and Content Creation

Service renders with available metrics only

Client navigates between event tabs

Each event tab shows its own services and custom fields independently

No cross-event data mixing

Archived/completed project

Services tab visible in read-only mode (same as active, since everything is already read-only)

No behavioral change

Sidebar deliverables link expired or broken

Link opens in new tab; external service handles error

No client-side validation of link validity

9. Acceptance Criteria

• All services associated with the event must display as flat, non-collapsible sections. Only three service types are supported: Photography, Videography, and Content Creation.

• Each service section must show the correct Package name, Hours Coverage, and Number of Shooters; Photography must additionally show Min amount of photos.

• All service data must be read-only; no edit, add, or delete actions available to clients.

• Event-level custom fields must display below the service sections only if the agency has enabled the "Clients" visibility checkbox for the field. Fields without "Clients" visibility must be completely hidden.

• Custom fields must display under the specific service section they are mapped to, based on the agency's "...and services" configuration.

• The right sidebar must display Overview metric cards, Deliverables, Upcoming Meetings, and Payment sections.

• Service data must reflect agency-side changes after a manual page refresh.

• The copy icon on Link custom fields and deliverable links must copy the URL to clipboard with a success message.

• Custom fields with no values must not be displayed.

• The Services sub-tab must be the default active tab when navigating to an event.

10. Dependencies

Dependency

Type

Description

Fallback Behavior

Order/Package Management System

Internal

Provides service details, package names, and metric values from the agency's project configuration

Display error message

Custom Fields Module (Agency Settings)

Internal

Provides event-level custom field definitions, values, and visibility settings ("Clients" checkbox) configured by the agency

Hide custom fields; services display normally

Authentication Service

Internal

Validates client session and project/event access permissions

Redirect to login

Project Management Module

Internal

Determines event association and service-to-event mapping

Cannot display event services

Deliverables Module

Internal

Supplies deliverable data for the right sidebar

Show error in sidebar deliverables section

Meetings Module (Calendly Integration)

Internal/External

Supplies upcoming meeting data for the right sidebar

Show empty or "--" in sidebar meetings section

Payment Processing Module

Internal

Supplies payment data and statuses for the right sidebar

Show error in sidebar payment section

Brand Management Module

Internal

Provides custom branding for the portal interface

Default theme applied

Clipboard API

Browser

Enables copy-to-clipboard functionality for link fields

Show "Unable to copy" error

11. References

• Figma Design Link: Click Here

• Client Portal - Overview Side Menu FRD: Refer for the shared sidebar structure (note: the event-level sidebar extends the Overview sidebar with Upcoming Meetings and Payment sections).

• Client Portal - Meetings Tab FRD: Refer for meeting details linked from the sidebar's Upcoming Meetings section.

• Client Portal - Overview > Finances FRD: Refer for payment details linked from the sidebar's Payment section.

• Calendly Integration FRD: Refer for meeting data source and integration details.

✅ Event- Deliverables

Functional Requirements Document - Client Portal: Events - Deliverables Tab

1. Module Overview

Module Name: Client Portal - Events - Deliverables Tab

Purpose: The Deliverables tab within each event provides clients with a read-only view of all deliverables associated with the specific event, including their current status (Pending or Received), expected delivery dates, actual delivery dates, and download links for completed deliverables. Deliverable data is sourced from the agency's post-production module.

Business Goals: To provide clients with transparent visibility into deliverable progress for each event, reduce "where are my deliverables?" inquiries to the agency, and give clients self-service access to download completed deliverables directly from the portal.

2. User Roles & Permissions

Role

Access Level

Permissions

Client (Primary Contact)

Read-Only Access

View all deliverables, view statuses and dates, download/access delivered files via links, copy delivery links

Client (Additional Contacts)

Read-Only Access

View all deliverables, view statuses and dates, download/access delivered files via links, copy delivery links

Guest/Non-authenticated Users

No Access

Cannot access deliverables

Important: All deliverable data on this tab is read-only for clients. Clients cannot add, edit, or remove deliverables. Deliverables are managed by the agency through the post-production module.

3. User Flow

3.1 Viewing Deliverables (Populated State)

3.1.1 The client navigates to a specific event tab (e.g., "Rehearsal Dinner", "Wedding") from the main project navigation.

3.1.2 The client clicks on the "Deliverables" sub-tab within the event sub-navigation (Services | Deliverables | Files/Documents | Notes | Info).

3.1.3 The system loads the Deliverables page with the left/main content area showing the deliverables list and the right sidebar showing the persistent event-level Overview widget.

3.1.4 The client views all deliverables for the event, each showing the deliverable name, status, and date information.

3.1.5 The client uses the "Latest" sort dropdown to switch between Latest (default) and Oldest ordering.

3.1.6 The client identifies a deliverable with "Pending" status and notes the expected delivery date.

3.1.7 The client identifies a deliverable with "Received" status and sees the expand/collapse arrow next to the status badge indicating delivery links are available.

3.1.8 The client views the expanded delivery links section below the received deliverable (expanded by default), or clicks the arrow to expand if collapsed.

3.1.9 The client clicks on a delivery link (e.g., Google Drive URL) to access the delivered files in a new browser tab.

3.1.10 The client clicks the copy icon next to a delivery link to copy the URL to clipboard.

3.1.11 The client clicks the collapse arrow to hide the delivery links section for a cleaner view.

3.2 Empty State Flow

3.2.1 The client navigates to the Deliverables tab for an event with no deliverables.

3.2.2 The system displays an illustration with the message: "No deliverables yet — Deliverables for this event will appear here once they're added by the agency."

4. Functional Logic

4.1 Page Layout and Structure

• The Deliverables tab is a sub-tab under each event tab, positioned second in the event sub-navigation: Services | Deliverables | Files/Documents | Notes | Info.

• The page is divided into two areas: the left/main content area containing the deliverables list, and the right sidebar containing the persistent event-level Overview widget.

• All content on this tab is read-only for clients. There are no add, edit, or delete actions available.

• Deliverable data is scoped to the specific event only — deliverables from other events are not shown.

• The section header displays "Deliverables" on the left and a "Latest " sort dropdown on the right. Sort options: "Latest" (default — newest deliverables first by delivery/expected date) and "Oldest" (earliest first).

4.2 Deliverables List Display

• The system retrieves all deliverables associated with the specific event from the agency's post-production module and displays them in a vertical list format.

• Each deliverable entry displays:

  • Deliverable Name: The name of the deliverable item (e.g., "10 Hours of photo shooting", "Drone Footage")
  • Status Badge: Either "Pending" (orange) or "Received" (green)
  • Date Information:
    • For Pending deliverables: "Expected by [date]" (format: "Expected by Dec 20, 2025")
    • For Received deliverables: "Delivered on [date]" (format: "Delivered on Dec 16, 2025")
  • Delivery Links (Received only): One or more download/access links (e.g., Google Drive URLs) displayed below the date inside a collapsible section. A collapse/expand arrow (∨/∧) appears next to the "Received" status badge when delivery links exist. The links section is expanded by default. Clicking the arrow collapses/expands the delivery links area. Each link shows the URL (truncated with ellipsis if long) and a copy icon to copy the URL to clipboard.
  • No expand/collapse arrow is shown for Pending deliverables or for Received deliverables that have no delivery links attached.

• Deliverables are listed in the order defined by the agency, sorted by the selected sort option (Latest/Oldest).

• A "Show More (+X Deliverables)" link appears at the bottom when the list exceeds the initially displayed count. Clicking expands the list to show all remaining deliverables.

4.3 Deliverable Status Logic

• Pending: The deliverable has been defined by the agency but has not yet been delivered. Shows an status badge and the expected delivery date (if set by the agency). If no expected date is set, the date field shows "Expected date TBD."

• Received: The deliverable has been completed and delivered by the agency. Shows a green status badge, the actual delivery date, and one or more delivery links for the client to access the files.

• Status changes are managed by the agency in the post-production module. The client portal reflects status updates after a manual page refresh.

4.4 Delivery Links

• Delivery links are external URLs (typically Google Drive, Dropbox, or other cloud storage links) provided by the agency when marking a deliverable as received.

• Each link displays with:

  • A link icon (colored circle indicator)
  • The URL text (truncated with ellipsis if it exceeds the available width)
  • A copy icon — clicking copies the full URL to clipboard

• Clicking the link text itself opens the URL in a new browser tab.

• A single deliverable can have multiple delivery links (e.g., separate links for full-resolution photos and web-resolution photos).

• Delivery links are read-only — clients cannot add, edit, or remove links.

4.5 Right Sidebar (Event-Level Overview Widget)

The right sidebar displays alongside the Deliverables content and persists across all event sub-tabs. It contains:

• Overview Metric Cards: Four cards showing Meetings count, Upcoming Payments count, Received Deliverables count, and Pending Deliverables count.

• Deliverables Section: A compact summary of the same deliverables data displayed in the main content area, with "Show More" for additional items.

• Upcoming Meetings Section: Lists upcoming meetings.

• Payment Section: Displays payment items with status badges.

Note: The right sidebar is shared across all event sub-tabs.

4.6 Data Source and Synchronization

• All deliverable data is fetched from the agency's post-production module within the project details.

• The agency manages deliverable creation, status updates, expected dates, delivery dates, and delivery links from the agency portal.

• Any changes made by the agency (new deliverables added, status changed from Pending to Received, links added, dates updated) are reflected in the client portal after a manual page refresh.

• The client portal does not cache deliverable data independently — each page load fetches the latest available data.

4.7 Empty State

• When no deliverables exist for the event, the system displays an illustration with the message: **"No deliverables yet — Deliverables for this event will appear here once they're added by the agency."
  **
• The right sidebar remains visible and functional, with the Received/Pending Deliverables counts showing 0.

5. Field Details & Validations

Field Name

Field Type

Validation Rules

Deliverable Name

Text Display

Name of the deliverable item. Read-only.

Status Badge

Status Indicator

Values: "Pending" ( badge), "Received" (badge). Read-only

Expected Date

Date Display

Format: "Expected by Mon DD, YYYY." Shown only for Pending deliverables. Shows "Expected date TBD" if not set

Delivered Date

Date Display

Format: "Delivered on Mon DD, YYYY." Shown only for Received deliverables

Delivery Link URL

URL Display

External URL. Clickable — opens in new tab. Truncated with ellipsis if long. Read-only

Copy Icon

Icon Button

Copies the full delivery link URL to clipboard.

Expand/Collapse Arrow

Toggle Icon

Displayed next to "Received" badge only when delivery links exist. Toggles visibility of delivery links section. Default: expanded (∨). No arrow for Pending deliverables or Received without links

Sort

Dropdown

Default: "Latest." Options: "Latest" (newest first), "Oldest" (earliest first). Sorts by delivery date (Received) or expected date (Pending)

Show More Link

Link Text

Format: "Show More (+X Deliverables)." Expands the list to show remaining items

6. Success Message Handling

Operation

Success Message

Trigger Condition

Post-Success Action

Page Load

None (Silent)

Successful data retrieval

Display deliverables list

Show More Clicked

None (Silent)

Click "Show More" link

Expand list to show all deliverables

Page Refresh

None (Silent)

Manual browser refresh

Display latest data from agency

7. Error Message Handling

Error Scenario

Error Message

Trigger Condition

User Action Required

Deliverables Load Failure

"Unable to load deliverables. Please try again."

API timeout or server error

Refresh page

Network Error

"Please check your internet connection."

No network connectivity

Restore connection and refresh

General Error

"Something went wrong."

Unexpected server error

Retry or refresh page

8. Edge Cases

Scenario

Expected Behavior

Fallback Action

No deliverables for the event

Display illustration + "No deliverables yet" message

Right sidebar shows 0 counts

All deliverables pending

All items show "Pending" badge with expected dates; no delivery links shown

Client waits for agency to deliver

All deliverables received

All items show "Received" badge with delivery dates and links

Client can access all deliveries

Delivery link expired or broken

Link opens in new tab; external service (Google Drive, etc.) handles the error

Client contacts agency for updated link

Very long deliverable name

Truncate with ellipsis at available width

Full name visible on hover tooltip

Very long delivery link URL

URL truncated with ellipsis in the display

Full URL copied via copy icon; full URL used when clicking

Multiple delivery links per deliverable

All links displayed vertically inside the collapsible section

Each link has its own copy icon

Received deliverable with no delivery links

"Received" badge shown but no expand/collapse arrow displayed; no links section rendered

Client contacts agency for links

Client collapses links then navigates away and returns

Collapse/expand state resets to default (expanded) on page reload

No state persistence for collapse

Agency updates deliverable status after client last visited

Updated status appears after page refresh

Manual page refresh required

Agency adds new deliverable

New deliverable appears after page refresh

Manual page refresh required

Expected date not set by agency

Display "Expected date TBD" instead of a date

Client contacts agency for timeline

Archived/completed project

Deliverables tab visible in read-only mode (same as active, since everything is already read-only)

No behavioral change

Large number of deliverables

Initial display is limited; "Show More (+X Deliverables)" link loads remaining

Progressive display

9. Acceptance Criteria

• All deliverables associated with the event must display with correct names, statuses, and dates.

• Deliverables must show "Pending" (orange) or "Received" (green) status badges accurately reflecting the agency's post-production data.

• Pending deliverables must show "Expected by [date]" or "Expected date TBD" if no date is set.

• Received deliverables must show "Delivered on [date]" and display one or more delivery links with copy icons.

• Received deliverables with delivery links must show an expand/collapse arrow next to the status badge. Links section must be expanded by default. Clicking the arrow must toggle visibility.

• The sort dropdown must offer Latest (default) and Oldest options, sorting by delivery date or expected date.

• Clicking a delivery link must open the URL in a new browser tab.

• The "Show More" link must expand the list to display all remaining deliverables.

• All deliverable data must be read-only — clients cannot add, edit, or remove deliverables or links.

• Deliverable data must reflect agency-side changes after a manual page refresh.

• The empty state must display when no deliverables exist for the event.

• The page must load within 3 seconds under normal network conditions.

• The interface must be responsive and functional on devices ≥320px width.

10. Dependencies

Dependency

Type

Description

Fallback Behavior

Post-Production Module

Internal

Provides deliverable data, statuses, dates, and delivery links

Display error message or empty state

Event Management Module

Internal

Determines event-scoped deliverable associations

Cannot display event-specific deliverables

Authentication Service

Internal

Validates client session and permissions

Redirect to login

Clipboard API

Browser

Enables copy-to-clipboard for delivery links

Show "Unable to copy" error

Brand Management Module

Internal

Provides custom branding and event tab colors

Default theme applied

11. References

• Client Portal - Events - Service Tab FRD: Refer for the right sidebar structure shared across event sub-tabs.

• Client Portal - Overview Tabs FRD: Refer for the Overview sidebar's compact deliverables display (project-scoped summary).

• Figma : click here

✅ Events - Files/Documents Tab

Functional Requirements Document - Client Portal: Events - Files/Documents Tab

1. Module Overview

Module Name: Client Portal - Events - Files/Documents Tab

Purpose: The Files/Documents tab within each event provides clients with a centralized location to view agency-provided documents (invoices, contracts, proposals, questionnaires) and upload their own files for a specific event. The tab uses a dual inner-tab structure to separate agency-generated documents from client uploads.

Business Goals: To facilitate transparent file sharing between clients and agencies, ensure organized document management per event, and enable clients to contribute necessary files while maintaining clear separation between agency documents and client uploads.

2. User Roles & Permissions

Role

Access Level

Permissions

Client (Primary Contact)

Full Access

View all documents, download files, upload documents (PDF, DOC, DOCX, XLS, XLSX), delete own uploads

Client (Additional Contacts)

Full Access

View all documents, download files, upload documents (PDF, DOC, DOCX, XLS, XLSX), delete own uploads

Guest/Non-authenticated Users

No Access

Cannot access files or documents

3. User Flow

3.1 Viewing Documents

3.1.1 The client navigates to a specific event tab (e.g., "Rehearsal Dinner", "Wedding") from the main project navigation.

3.1.2 The client clicks on the "Files/Documents" sub-tab within the event sub-navigation (Services | Deliverables | Files/Documents | Notes | Info).

3.1.3 The system loads the Documents page with the left/main content area showing the document section and the right sidebar showing the persistent event-level Overview widget.

3.1.4 The section header displays "Documents" with a green "+" icon for uploading and a "Latest" sort dropdown.

3.1.5 The client views two inner tabs: "Documents & Forms" (default active) and "Uploaded Files."

3.1.6 The client views the "Documents & Forms" tab showing all documents related to this event in a table with columns: Name, Type, Created, Added By.

3.1.7 The client clicks on a document row or download icon to download the file.

3.1.8 The client switches to the "Uploaded Files" tab to view only files they have uploaded.

3.2 Uploading a File

3.2.1 The client clicks the green "+" icon next to the "Documents" header.

3.2.2 The system displays the "Add Local File/Documents" upload modal.

3.2.3 The client drags and drops a file into the upload zone or clicks to browse.

3.2.4 The system validates the file type and size.

3.2.5 The client clicks "Upload File" to confirm the upload.

3.2.6 The system uploads the file and adds it to both the "Documents & Forms" and "Uploaded Files" tabs with the client's name as "Added By."

3.2.7 The system sends a notification to the agency team about the new client upload.

3.3 Deleting a File

3.3.1 The client locates a file they uploaded and clicks the three-dot menu or delete icon.

3.3.2 The system displays a confirmation dialog: "Are you sure you want to delete this file?"

3.3.3 The client confirms the deletion.

3.3.4 The system removes the file from the list and displays a success message.

3.4 Empty State

3.4.1 The client navigates to the Files/Documents tab for an event with no documents.

3.4.2 The system displays an illustration with the message: "No documents yet."

4. Functional Logic

4.1 Page Layout and Structure

• The Files/Documents tab is a sub-tab under each event tab, positioned third in the event sub-navigation: Services | Deliverables | Files/Documents | Notes | Info.

• The page is divided into two areas: the left/main content area containing the Documents section, and the right sidebar containing the persistent event-level Overview widget.

• The section header displays "Documents" with a green "+" icon for uploading new files on the left, and a "Latest" sort dropdown on the right.

• Below the header, two inner tabs provide content separation: "Documents & Forms" (default active) | "Uploaded Files".

• All document data is scoped to the specific event only — documents from other events within the same project are not shown.

4.2 Documents & Forms Inner Tab

• Displays all documents associated with the event in a table format, including both agency-generated documents (invoices, contracts, proposals, questionnaires, surveys) and client-uploaded files.

• Table columns:

  • Name: File name with file type icon (color-coded by document type) + event name label below the filename
  • Type: Document type label (e.g., "Invoice", "Survey", "Doc")
  • Created: Creation date and time (format: "DD Mon YYYY, HH:MM AM/PM")
  • Added By: User avatar + name + role label (e.g., "Client", "Agency")

• The "Name" column header includes a sort arrow for alphabetical sorting (ascending/descending toggle).

• The "Latest" sort dropdown at the top-right sorts by creation date. Options: "Latest" (newest first, default), "Oldest" (earliest first).

• Pagination displays below the table: "Rows per page" dropdown (options: 10, 25, 50; default: 25) + record counter (e.g., "6-10 of 11") + previous/next arrow buttons.

• Agency-generated documents are view/download only for clients — no delete option.

• Client-uploaded documents show a three-dot menu with "Delete" option (visible only to the client who uploaded).

4.3 Uploaded Files Inner Tab

• Displays only files uploaded by the client for this event.

• Uses the same table structure, columns, sorting, and pagination as the "Documents & Forms" tab.

• Each file shows the client's name and "Client" role label in the "Added By" column.

• Three-dot menu with "Delete" option is available on all files (since all are client-owned).

4.4 File Upload Flow

• Clicking the green "+" icon opens the "Add Local File/Documents" upload modal.

• The modal contains:

  • Title: "Add Local File/Documents"
  • Subtitle: "Upload your document"
  • Drag-and-drop zone with upload icon and "Upload File" text
  • File size limit note: "Max size of 15 MB"
  • "Cancel" button (closes modal without action) and "Upload File" button (yellow, initiates upload)

• Supported file formats: PDF, DOC, DOCX, XLS, XLSX only.

• Maximum file size: 15 MB per file.

• After successful upload, the file appears in both the "Documents & Forms" tab and the "Uploaded Files" tab immediately without page refresh.

• The system sends a notification to the agency team about the new client upload.

• Duplicate filename handling: If a file with the same name already exists, the system auto-renames the new file by appending an incrementing number suffix (e.g., "Photography(1)", "Photography(2)").

4.5 File Deletion

• Clients can only delete files they have uploaded. Agency-uploaded documents cannot be deleted by clients.

• Clicking delete triggers a confirmation dialog: "Are you sure you want to delete this file?" with "Cancel" and "Delete" buttons.

• Deletion is permanent. The file is removed from both the "Documents & Forms" and "Uploaded Files" tabs.

• After deletion, a success toast displays: **"File deleted successfully."
  **

4.6 Right Sidebar (Event-Level Overview Widget)

The right sidebar displays alongside the Files/Documents content and persists across all event sub-tabs. It contains:

• Overview Metric Cards: Four cards showing Meetings count, Upcoming Payments count, Received Deliverables count, and Pending Deliverables count.

• Deliverables Section: Lists deliverables for the event with status and delivery links.

• Upcoming Meetings Section: Lists upcoming meetings with title, date/time, and participant avatars.

• Payment Section: Displays payment items with due dates and status badges.

Note: The right sidebar is shared across all event sub-tabs.

4.7 Data Source and Synchronization

• Agency-generated documents (invoices, contracts, proposals, questionnaires) are automatically added to the event's Files/Documents tab when created by the agency in the agency portal.

• Client-uploaded files appear immediately after upload without requiring page refresh.

• Agency-side additions/removals are reflected in the client portal after a manual page refresh.

• All files uploaded by the client are shared with the agency and appear in the agency portal's project files.

4.8 Empty State

• When no documents exist for the event (no agency documents and no client uploads), the system displays an illustration with the message: **"No documents yet."
  **
• The green "+" upload icon remains visible for clients to upload the first file.

5. Field Details & Validations

5.1 Document Table Fields

Field Name

Field Type

Validation Rules

Document Name

Text Display

Maximum 200 characters. Displays file type icon (color-coded). Event name label displayed below

Document Type

Text Label

Values: "Invoice", "Survey", "Doc", "Contract", "Proposal", etc.

Created Date

DateTime Display

Format: "DD Mon YYYY, HH:MM AM/PM"

Added By

Text + Avatar

User name + role label ("Client" or agency user name)

Sort (Header)

Dropdown

Default: "Latest." Options: "Latest", "Oldest"

Rows Per Page

Dropdown

Default: 25. Options: 10, 25, 50

Name Sort Arrow

Toggle

Alphabetical ascending/descending

5.2 Upload Modal Fields

Field Name

Field Type

Validation Rules

Upload Zone

Drag-and-Drop / File Picker

Accepts PDF, DOC, DOCX, XLS, XLSX only. Maximum file size: 15 MB

Cancel Button

Button

Closes modal without action

Upload File Button

Button

Yellow. Initiates upload. Disabled until a valid file is selected

6. Success Message Handling

Operation

Success Message

Trigger Condition

Post-Success Action

Page Load

None (Silent)

Successful data retrieval

Display document table

File Uploaded

"File uploaded successfully"

Successful upload

File appears in both tabs

File Deleted

"File deleted successfully"

Confirmed deletion

File removed from both tabs

File Downloaded

"Download started"

Click download

Browser handles download

7. Error Message Handling

Error Scenario

Error Message

Trigger Condition

User Action Required

Documents Load Failure

"Unable to load documents. Please try again."

API timeout or error

Refresh page

File Upload Failure

"Unable to upload file. Please try again."

Upload server error

Retry upload

File Size Exceeded

"File size exceeds the 15 MB limit."

File larger than 15 MB selected

Select a smaller file

Unsupported File Type

"File type not supported. Please upload PDF, DOC, DOCX, XLS, or XLSX."

Invalid file format

Select a supported file

File Delete Failure

"Unable to delete file. Please try again."

Server error during deletion

Retry deletion

Download Failed

"Unable to download. Please try again."

File not accessible

Retry download

Document Unavailable

"Document unavailable"

File corrupted or deleted from server

Displayed inline; download button hidden for that file

Network Error

"Please check your internet connection."

No connectivity

Restore connection and refresh

Session Expired

"Your session has expired. Please log in again."

Invalid/expired session

Re-authenticate

General Error

"Something went wrong."

Unexpected server error

Retry or refresh

8. Edge Cases

Scenario

Expected Behavior

Fallback Action

No documents for the event

Display illustration + "No documents yet." Upload button remains visible

Client can upload the first file

Duplicate filename upload

System auto-renames with incrementing suffix: "Photography(1)", "Photography(2)"

Original file unchanged

Very long document name

Truncate with ellipsis in the table

Full name on hover tooltip

Agency adds document after client last visited

New document appears after page refresh

Manual page refresh required

Client deletes file then refreshes

File remains deleted; not recoverable

Permanent deletion

File corrupted or deleted from server

Display "Document unavailable" inline; hide download button

Other documents remain functional

Large number of documents

Pagination handles display (Rows per page: 10/25/50)

Navigate pages

Client uploads in "Documents & Forms" view

File appears in both "Documents & Forms" and "Uploaded Files" tabs

Single upload, dual visibility

Archived/completed project

Files/Documents tab visible in read-only mode; upload and delete disabled

View and download only

Client removed from project

Loses access to Files/Documents entirely

Uploaded files remain visible to agency

9. Acceptance Criteria

• The Files/Documents tab must display "Documents & Forms" and "Uploaded Files" as inner tabs with "Documents & Forms" as default.

• All documents must display in a table with Name (with icon + event label), Type, Created, and Added By columns.

• File uploads must support PDF, DOC, DOCX, XLS, and XLSX formats exclusively with a 15 MB maximum file size.

• Duplicate filenames must be auto-renamed with incrementing suffix (e.g., "Photography(1)").

• Clients must be able to delete only their own uploaded files; agency documents must be view/download only.

• Delete must require confirmation dialog before execution.

• The upload modal must display drag-and-drop zone with max size note and Cancel/Upload File buttons.

• Pagination must display with Rows per page dropdown (10/25/50) and record counter.

• Sorting must work by Latest/Oldest (date) and alphabetical (Name column).

• Documents must be scoped to the specific event only.

• Empty state must display "No documents yet" with illustration when no documents exist.

• The page must load within 3 seconds under normal network conditions.

• The interface must be responsive on devices ≥320px width.

10. Dependencies

Dependency

Type

Description

Fallback Behavior

File Storage Service

Internal

Stores and retrieves uploaded files

Display upload unavailable message

Document Management System

Internal

Manages agency-generated documents (invoices, contracts, proposals)

Show error message

Notification Service

Internal

Alerts agency of client uploads

Silent failure, log error

Authentication Service

Internal

Validates user permissions

Redirect to login

Event Management Module

Internal

Determines event-scoped file associations

Cannot display event-specific documents

Brand Management Module

Internal

Provides custom branding

Default theme applied

11. References

• Figma Design Link: Click Here

• Client Portal - Overview Tabs FRD: Refer for the Overview-level Files/Documents sub-tab (project-scoped, aggregates across all events).

• Client Portal - Events - Deliverables Tab FRD: Refer for the separate Deliverables sub-tab (previously part of this FRD, now standalone).

✅ Events - Notes Tab

Functional Requirements Document - Client Portal: Events - Notes Tab

1. Module Overview

Module Name: Client Portal - Events - Notes Tab

Purpose: The Notes tab within each event enables clients to view, create, edit, and delete notes specific to that event. Notes display in a card grid layout with search and sort functionality. Clients can create public notes (visible to everyone) or private notes (visible only to themselves), and can view agency-created public notes in read-only mode.

Business Goals: To provide a transparent, event-specific communication channel between clients and agencies, maintain a documented history of client feedback and requests per event, and reduce email dependency by centralizing event-related discussions within the portal.

2. User Roles & Permissions

Role

Access Level

Permissions

Client (Primary Contact)

Full Access

View all public notes and own private notes, create new notes (public/private), edit own notes, delete own notes, search and sort notes

Client (Additional Contacts)

Full Access

View all public notes and own private notes, create new notes (public/private), edit own notes, delete own notes, search and sort notes

Client (View-Only)

Read-Only Access

View public notes only; cannot create, edit, or delete

Guest/Non-authenticated Users

No Access

Cannot access notes section

3. User Flow

3.1 Viewing Notes

3.1.1 The client navigates to a specific event tab (e.g., "Rehearsal Dinner", "Wedding") from the main project navigation.

3.1.2 The client clicks on the "Notes" sub-tab within the event sub-navigation (Services | Deliverables | Files/Documents | Notes | Info).

3.1.3 The system loads the Notes page with the left/main content area showing notes in a card grid and the right sidebar showing the persistent event-level Overview widget.

3.1.4 The client views notes displayed as cards in a 2-column grid, each showing the event name, headline, content preview, participant avatars, and timestamp.

3.1.5 The client uses the search bar to filter notes by title or keywords.

3.1.6 The client uses the "Newest" sort dropdown to switch between Newest (default) and Oldest ordering.

3.1.7 The client clicks on a note card to view the full Note Detail Preview modal.

3.1.8 The client identifies their own notes by the three-dot menu on the card, and agency notes by the absence of the menu.

3.2 Creating a Note

3.2.1 The client clicks the green "+" icon next to the "Notes" header.

3.2.2 The system displays the "Create new note" modal with the Choose Event field pre-filled and locked to the current event.

3.2.3 The client enters a headline and writes note content in the rich text editor.

3.2.4 The client selects the visibility: Public or Private.

3.2.5 The client clicks "Create Note" to save.

3.2.6 The note card appears in the grid immediately without page refresh.

3.2.7 For public notes, the system sends a notification to the agency team.

3.3 Editing a Note

3.3.1 The client clicks the three-dot menu on their own note card and selects "Edit."

3.3.2 The system displays the "Edit Note" modal pre-populated with existing content.

3.3.3 The client modifies the headline, content, or visibility and clicks "Save."

3.3.4 The note card updates in the grid with an "Edited on [date]" indicator in the detail preview.

3.4 Deleting a Note

3.4.1 The client clicks the three-dot menu on their own note card and selects "Delete."

3.4.2 The system displays a confirmation dialog: "Are you sure you want to delete this note? This action cannot be undone."

3.4.3 The client confirms, and the note is permanently removed from the grid.

3.5 Empty State

3.5.1 The client navigates to the Notes tab for an event with no notes.

3.5.2 The system displays an illustration with the message: "No notes yet."

3.5.3 The green "+" icon remains visible for creating the first note.

4. Functional Logic

4.1 Page Layout and Structure

• The Notes tab is a sub-tab under each event tab, positioned fourth in the event sub-navigation: Services | Deliverables | Files/Documents | Notes | Info.

• The page is divided into two areas: the left/main content area containing the notes section, and the right sidebar containing the persistent event-level Overview widget.

• The section header displays "Notes" with a green "+" icon for creating new notes.

• Below the header: a search bar (placeholder: "Search by title or keywords") and a "Newest" sort dropdown on the right.

• The Notes tab loads only notes associated with the specific event — notes from other events within the project are not shown. The Overview > Notes tab shows notes from all events.

4.2 Note Card Display

Each note displays as a card in the grid with the following elements:

• Event Indicator: Colored dot + event name (e.g., "● Rehearsal Dinner"). Since this is an event-scoped tab, all cards show the same event name.

• Headline: Note title displayed in bold text.

• Content Preview: Truncated note content showing approximately 2-3 lines. Full content is visible in the Note Detail Preview modal.

• Participant Avatars: Small avatar circles at the bottom-left of the card showing the note's visible-to participants.

• Timestamp: Date and time of creation displayed at the bottom-right (format: "July 19, 2024 12:33").

• Three-dot Menu (own notes only): Displayed on notes created by the client. Options: Edit, Delete. Not displayed on agency-created notes.

• Agency-created public notes use the same card design — they are distinguished only by the absence of the three-dot menu.

4.3 Note Visibility Model

• Clients can create two types of notes:

  • Public Notes: Visible to the client, all other project clients, and all project team members (agency users). Agency-created public notes are also visible to the client.
  • Private Notes: Visible only to the client. Agency team members cannot see private notes.

• The visibility is set during note creation and can be changed during editing.

• Agency-created public notes are view-only for clients — no edit or delete options.

• Client-created notes (both public and private) can be edited and deleted only by the client

4.4 Create Note Modal

Clicking the green "+" icon opens the "Create new note" modal with the following fields:

• Choose Event: Dropdown field. Pre-filled and locked to the current event (e.g., "● Rehearsal Dinner" with colored dot). Since the client is already inside a specific event tab, the event is auto-selected and cannot be changed. This differs from the Overview > Notes tab where event selection is open.

• Headline: Text input field (required). Placeholder: "Add note's headline." Maximum 200 characters.

• Note: Rich text editor with formatting toolbar:

  • Undo / Redo
  • Heading dropdown (Heading 1, etc.)
  • Bold, Italic, Underline, Strikethrough
  • Emoji picker
  • Link insertion
  • Bullet list, Numbered list
  • Indent / Outdent
  • Placeholder: "Write something awesome..."
  • Maximum 5,000 characters
  • Supports inline images

• Visibility toggle: Public / Private selection (determines who can see the note). Default: Public.

• Action buttons: "Cancel" (closes modal without saving) | "Create Note" (yellow, saves the note).

• The "Create Note" button is disabled until the headline field is filled.

4.5 Edit Note Modal

Clicking "Edit" from the three-dot menu or the Note Detail Preview opens the "Edit Note" modal:

• Same structure as the Create Note modal, pre-populated with existing values.

• Choose Event: Shows the current event, locked and non-editable (since this is the event-level tab, the event association cannot be changed from here. To move a note to a different event, the client must use the Overview > Notes tab).

• Headline: Pre-populated with the current headline.

• Note: Pre-populated with the current content in the rich text editor. Supports inline images.

• Visibility: Pre-populated with the current visibility setting (Public/Private). Can be changed.

• Action buttons: "Cancel" (discards changes) | "Save" (yellow, saves updates).

• After saving, the note displays an "Edited on [date]" indicator in the Note Detail Preview metadata.

4.6 Note Detail Preview

Clicking on a note card opens a full detail preview modal with:

• Title bar: Note headline in large text + close (X) button.

• **Metadata row 1:
  **

  • PROJECT: Project name (e.g., "Jadon & Monika Wedding")
  • EVENT: Event name with colored dot (e.g., "● Rehearsal Dinner")
  • VISIBLE TO: Participant avatars — hover reveals full list with names (e.g., "Ian Robel (You)" + team member names)

• **Metadata row 2:
  **

  • CREATED ON: Date and time (format: "July 23, 2025 · 23:12")
  • CREATED BY: Avatar + name (shows "You" if the client created it, otherwise the agency member's name)
  • EDITED ON: Date and time of last edit (format: "July 28, 2025 · 23:12"). Hidden if never edited.

• Note content: Full rich text content with formatting, links, and inline images.

• **Action buttons (client's own notes only):
  **

  • Delete (red button) — triggers the deletion confirmation dialog
  • Edit (yellow button) — opens the Edit Note modal

• Notes created by others: Same preview layout but without Delete and Edit buttons. The "CREATED BY" field shows the agency team member's name and avatar instead of "You."

4.7 Note Search

• The search bar filters notes by headline text or content keywords.

• Results update in real-time as the client types.

• Search has no character limit on input.

• If no notes match the search, display: **"No notes found matching your search."
  **

• Clearing the search field restores the full notes list.

4.8 Note Sorting

• The "Newest" sort dropdown offers two options: "Newest" (default — newest notes first) and "Oldest" (earliest notes first).

• Sorting applies to the entire notes list including search-filtered results.

4.9 Note Deletion

• Clicking "Delete" from the three-dot menu or the Note Detail Preview triggers a confirmation dialog: "Are you sure you want to delete this note? This action cannot be undone."

• Confirmed deletion permanently removes the note.

• For public notes: deletion removes the note from both the client and agency views.

• For private notes: deletion removes the note only from the client's view (since no one else could see it).

• After deletion, the note card is removed from the grid and a success toast displays: **"Note deleted successfully."
  **

4.10 "Show More" Pagination

• If the number of notes exceeds the initial display limit, a "Show More (+X Notes)" link appears at the bottom of the grid.

• Clicking "Show More" loads additional notes and appends them to the grid.

• The link updates its count after each load until all notes are displayed.

4.11 Right Sidebar (Event-Level Overview Widget)

The right sidebar displays alongside the Notes content and persists across all event sub-tabs. It contains:

• Overview Metric Cards: Four cards showing Meetings count, Upcoming Payments count, Received Deliverables count, and Pending Deliverables count.

• Deliverables Section: Lists deliverables for the event with status and delivery links.

• Upcoming Meetings Section: Lists upcoming meetings.

• Payment Section: Displays payment items with status badges.

Note: The right sidebar is shared across all event sub-tabs.

4.12 Data Synchronization

• Client-initiated actions (note creation, editing, deletion) reflect immediately without page refresh.

• Agency-created notes appear in the event's Notes tab after a manual page refresh.

• Notes created from the Overview > Notes tab for this event also appear here after a page refresh.

4.13 Empty State

• When no notes exist for the event, the system displays an illustration with the message: **"No notes yet."
  **
• The green "+" icon remains visible for creating the first note.

5. Field Details & Validations

5.1 Note Card Fields

Field Name

Field Type

Validation Rules

Event Indicator

Text Display with Colored Dot

Event name with colored dot matching event tab color. Read-only

Headline

Text Display (Bold)

Note title. Maximum 200 characters. Displayed on the card

Content Preview

Text Display

Truncated to approximately 2-3 lines. Full content in detail modal

Participant Avatars

Avatar List

Shows visible-to participants. Bottom-left of card

Timestamp

DateTime Display

Format: "Month DD, YYYY HH:MM". Bottom-right of card

Three-dot Menu

Icon Menu

Options: Edit, Delete. Displayed only on client's own notes

5.2 Create/Edit Note Modal Fields

Field Name

Field Type

Validation Rules

Choose Event

Dropdown (Locked)

Pre-filled with current event. Non-editable in event-level Notes tab

Headline

Text Input (Required)

Maximum 200 characters. Placeholder: "Add note's headline"

Note Content

Rich Text Editor

Maximum 5,000 characters. Supports: Bold, Italic, Underline, Strikethrough, Headings, Emoji, Links, Lists, Inline Images

Visibility

Toggle/Selection

Values: "Public", "Private". Default: Public

Cancel Button

Button

Closes modal without saving

Create Note / Save Button

Button (Yellow)

Disabled until headline is filled. Creates or updates the note

5.3 Note Detail Preview Fields

Field Name

Field Type

Validation Rules

Headline (Title)

Text Display (Large)

Note headline

Project Name

Text Display

Project name. Read-only

Event Name

Text Display with Colored Dot

Event name with dot. Read-only

Visible To

Avatar List

Participant avatars. Hover shows full name list

Created On

DateTime Display

Format: "Month DD, YYYY · HH:MM"

Created By

Text + Avatar

Shows "You" for own notes; shows name for others'

Edited On

DateTime Display

Format: "Month DD, YYYY · HH:MM". Hidden if never edited

Note Content (Full)

Rich Text Display

Full content with formatting, links, images

Delete Button

Button (Red)

Own notes only. Triggers confirmation dialog

Edit Button

Button (Yellow)

Own notes only. Opens Edit Note modal

5.4 Search and Sort Fields

Field Name

Field Type

Validation Rules

Search

Text Input

No character limit. Placeholder: "Search by title or keywords"

Sort

Dropdown

Default: "Newest." Options: "Newest", "Oldest"

6. Success Message Handling

Operation

Success Message

Trigger Condition

Post-Success Action

Page Load

None (Silent)

Successful data retrieval

Display notes grid

Note Created

"Note created successfully"

Successful note save

Note card appears in grid

Note Updated

"Note updated successfully"

Successful note edit

Note card updates in grid

Note Deleted

"Note deleted successfully"

Confirmed deletion

Note card removed from grid

Search Results

None (Silent)

Search executed

Display filtered results

7. Error Message Handling

Error Scenario

Error Message

Trigger Condition

User Action Required

Notes Load Failure

"Unable to load notes. Please try again."

API timeout or error

Refresh page

Note Save Failed

"Unable to save note. Please try again."

Server error during save

Retry save

Note Delete Failed

"Unable to delete note. Please try again."

Server error during deletion

Retry deletion

Empty Headline

"Please enter a headline."

Attempting to save with empty headline

Add headline text

Character Limit Exceeded

"Note exceeds 5,000 character limit."

Content exceeds 5,000 chars

Reduce content

Search Error

"Search failed. Please try again."

Search service error

Retry search

Permission Denied

"You don't have permission to perform this action."

Unauthorized edit/delete attempt

Contact admin

Network Error

"Please check your internet connection."

No connectivity

Restore connection and refresh

Session Expired

"Your session has expired. Please log in again."

Invalid/expired session

Re-authenticate

General Error

"Something went wrong."

Unexpected server error

Retry or refresh

8. Edge Cases

Scenario

Expected Behavior

Fallback Action

No notes for the event

Display illustration + "No notes yet." Green "+" icon remains visible

Client can create the first note

Search returns no results

Display: "No notes found matching your search."

Clear search to restore full list

Very long headline

Input blocked at 200 characters

Character counter shows remaining

Very long note content

Input continues until 5,000 characters; error shown if exceeded

Reduce content to save

Simultaneous edits from two browser tabs

Last save wins

No conflict resolution

Agency creates note for this event while client is viewing

New note appears after manual page refresh

Page refresh required

Client creates note from Overview > Notes tab for this event

Note appears in this event's Notes tab after page refresh

Page refresh required

Client tries to edit agency note

No Edit/Delete options available — three-dot menu not shown

View-only access to agency notes

Emoji in notes

Fully supported and displayed correctly

UTF-8 encoding

Private note search by other users

Private notes never appear in other users' search results

Privacy maintained

Archived/completed project

Notes tab visible in read-only mode; create, edit, and delete actions disabled; green "+" icon hidden

View-only access

All notes are private

Only the client sees them; other agency see empty state

"No notes yet" for others

9. Acceptance Criteria

• Notes must display in a card grid layout (2 columns on desktop) with event indicator, headline, content preview, avatars, and timestamp.

• Notes must be event-scoped — only notes for the current event are displayed.

• The green "+" icon must open the Create Note modal with the Choose Event field pre-filled and locked to the current event.

• Headline is required (max 200 chars) and note content supports rich text formatting (max 5,000 chars) with inline images.

• Notes must support Public and Private visibility. Private notes are visible only to the creating client.

• Client-created notes must show a three-dot menu with Edit and Delete options. Agency notes must have no menu (view-only).

• The Note Detail Preview must show full metadata: Project, Event, Visible To, Created On/By, Edited On.

• The "Edited on" indicator must appear in the detail preview after a note is edited.

• Search must filter notes by headline and content keywords in real-time with no input character limit.

• Sort must offer Newest (default) and Oldest options.

• "Show More (+X Notes)" must load additional notes when the list exceeds the initial display.

• Delete must require a confirmation dialog before permanent removal.

• Empty state must display "No notes yet" with illustration when no notes exist.

10. Dependencies

Dependency

Type

Description

Fallback Behavior

Notes Module

Internal

Stores and retrieves note data with visibility model

Display error or empty state

Event Management Module

Internal

Determines event-scoped note associations

Cannot display event-specific notes

Authentication Service

Internal

Validates client session and permissions

Redirect to login

Notification Service

Internal

Alerts agency of new public client notes

Silent failure, log error

Text Sanitization Library

Internal

Prevents XSS attacks in note content

Reject unsafe content

Search Service

Internal

Provides note search capability

Disable search; show all notes

Brand Management Module

Internal

Provides custom branding and event tab colors

Default theme applied

11. References

• Client Portal - Overview Tabs FRD (Section 4.7): Refer for the Overview-level Notes sub-tab which uses the same design but is project-scoped (all events) and has an unlocked Choose Event dropdown.

• Figma Design Link: Click Here

Events - info tab

Functional Requirements Document - Client Portal: Events - Info Tab

1. Module Overview

Module Name: Client Portal - Events - Info Tab

Purpose: The Info tab within each event provides a read-only summary of essential event details including the event name, start and end dates/times, primary venue location, and order/package information with included items and a la carte selections for the specific event.

Business Goals: To centralize critical event logistics in one accessible location, reduce client inquiries about basic event details, and ensure clients have a self-service reference for their event's date, venue, and contracted package information that automatically reflects any changes made by the agency.

2. User Roles & Permissions

Role

Access Level

Permissions

Client (Primary Contact)

Read-Only Access

View all event info, venue, and order details; cannot edit any information

Client (Additional Contacts)

Read-Only Access

View all event info, venue, and order details; cannot edit any information

Guest/Non-authenticated Users

No Access

Cannot access event information

Important: All data on the Info tab is read-only for clients. Clients cannot modify event dates, venue, or order details. Any changes must be requested through the agency and are reflected in the client portal after a page refresh.

3. User Flow

3.1 The client navigates to a specific event tab (e.g., "Rehearsal Dinner", "Wedding") from the main project navigation.

3.2 The client clicks on the "Info" sub-tab within the event sub-navigation (Services | Deliverables | Files/Documents | Notes | Info).

3.3 The system loads the Info page with the left/main content area showing Event Info and Order Info sections, and the right sidebar showing the persistent Overview widget.

3.4 The client views the "Event Info" section header with the event name displayed below it (e.g., "Rehearsal Dinner" with a colored dot indicator).

3.5 The client checks the "Start Date & Time" field showing the event's start date and time in a boxed date field with a calendar icon.

3.6 For multi-day events, the client also views the "End Date & Time" field displayed side by side with the start date.

3.7 The client views the "Primary Venue" field showing the venue address in a boxed text field.

3.8 The client scrolls to the "Order Info" section to view the contracted package details.

3.9 The client views the Package Name (e.g., "Photo/Video Silver").

3.10 The client reviews the "Items Included for This Event" list showing individual deliverable items (e.g., "10 hours of photoshooting", "Basic Retouch", "1 Photographer").

3.11 The client views the "A La Carte Items Included for This Event" section showing additional items as tag/chip elements (e.g., "Instagram Video", "Drone Footage", "Portrait Session").

4. Functional Logic

4.1 Page Layout and Structure

• The Info tab is a sub-tab under each event tab, positioned last in the event sub-navigation: Services | Deliverables | Files/Documents | Notes | Info.

• The page is divided into two areas: the left/main content area containing the Event Info and Order Info sections inside a bordered card container, and the right sidebar containing the persistent event-level Overview widget.

• The right sidebar displays across all event sub-tabs and includes: Overview metric cards (Meetings, Upcoming Payments, Received Deliverables, Pending Deliverables), and a Deliverables section.

• All content on this tab is read-only for clients. There are no edit, add, or delete actions available.

4.2 Event Info Section

• The section header displays as "Event Info" at the top of the content card.

• Below the header, the event name displays with a colored dot indicator (matching the event's color in the project tab navigation) followed by the event name text (e.g., "● Rehearsal Dinner").

• Start Date & Time displays below the event name as a boxed date field with a calendar icon on the left. The format is: DD/MM/YYYY HH:MM AM/PM (e.g., "19/12/2024 12:00 AM").

• End Date & Time conditionally displays based on event duration (Refer Section 4.3 — Conditional Date & Time Display Logic).

• Primary Venue displays below the date fields with the label "Primary Venue" and the full venue address in a boxed text field (e.g., "Treasure St. 148, Wedding Hall, 124 34").

4.3 Conditional Date & Time Display Logic

The system dynamically adjusts the date and time fields based on event duration:

• Single-Date Event: When the start date and end date fall on the same calendar date (or the end date is null/not set), the system displays only "Start Date & Time" spanning the full width of the content area. The "End Date & Time" field is completely hidden from the layout — no placeholder, label, or empty field is shown.

• Multi-Date Event: When the start date and end date differ, both "Start Date & Time" and "End Date & Time" display side by side in equal-width columns.

• Both fields use the same format: DD/MM/YYYY HH:MM AM/PM.

• Both fields display with a calendar icon on the left side inside a bordered input-style container (read-only, non-editable).

4.4 Order Info Section

• The Order Info section displays below the Primary Venue field within the same content card.

• The section is visible only when the event has an associated order/package. If no order exists for the event, the entire Order Info section is hidden — no placeholder or empty state message is shown for this section.

• The section header displays as "Order Info" with an information icon (ⓘ). On hover or tap, the icon shows a tooltip: "This shows the package and items assigned to this specific event."

• Package Name displays the name of the contracted package (e.g., "Photo/Video Silver") below the section header. If no package is assigned and only a la carte items exist, the field displays "Custom / A La Carte." This field is read-only.

• Items Included for This Event displays below the Package Name with the sub-heading "Items Included for This Event." Each deliverable item from the package renders as a separate row in a read-only, list-style layout (e.g., "10 hours of photoshooting", "Basic Retouch", "1 Photographer"). Items are listed in the order defined by the agency. This sub-section is hidden if no items exist.

• A La Carte Items Included for This Event displays below the items list with the sub-heading "A La Carte Items Included for This Event." A la carte items render as horizontal wrapping tags/chips (e.g., "Instagram Video", "Drone Footage", "Portrait Session", "Promo Video", "Assistant"). Tags are read-only and non-interactive. This sub-section is hidden if no a la carte items exist.

• Each event within a project displays only the order items mapped to that specific event. Changes made by the agency are reflected after a page refresh.

4.5 Right Sidebar (Event-Level Overview Widget)

The right sidebar displays alongside the Info content and persists across all event sub-tabs. It contains:

• Overview Metric Cards: Four cards showing Meetings count, Upcoming Payments count, Received Deliverables count, and Pending Deliverables count.

• Deliverables Section: Lists deliverables for the event with their status (Pending/Received), expected dates, delivery links (e.g., Google Drive URLs with copy icons), and a "Show More (+X Deliverables)" link when the list is truncated.

Note: The right sidebar is shared across all event sub-tabs and may be documented in a separate shared component FRD.

4.6 Data Source and Synchronization

• All event info data (event name, dates, venue) is fetched from the agency portal's project details — specifically the event configuration.

• Order Info data (package name, included items, a la carte items) is sourced from the order/package management system and the event-to-order mapping configured by the agency.

• Any changes made by the agency (date changes, venue updates, package modifications, item additions/removals) are reflected in the client portal after a manual page refresh.

• The client portal does not cache event info data independently — each page load fetches the latest available data from the server.

4.7 Empty States

• No event date set: The Start Date & Time field displays as an empty boxed field or shows a placeholder format. The End Date & Time field follows the conditional logic (hidden for single-date, shown for multi-date).

• No venue set: The Primary Venue field displays as an empty boxed field or shows placeholder text.

• No order/package assigned to the event: The entire Order Info section is hidden — no empty state message, no placeholder. Only the Event Info section (dates + venue) displays.

• Order exists but no package items: Package Name displays; Items Included sub-section is hidden.

• Order exists but no a la carte items: Package Name and Items Included display; A La Carte sub-section is hidden.

• Order has only a la carte items (no package): Package Name displays as "Custom / A La Carte"; Items Included sub-section is hidden; A La Carte sub-section displays.

5. Field Details & Validations

5.1 Event Info Fields

Field Name

Field Type

Validation Rules

Event Name

Text Display with Colored Dot

Event name prefixed with a colored dot matching the event tab color. Read-only. Maximum 100 characters

Start Date & Time

DateTime Display (Boxed)

Format: DD/MM/YYYY HH:MM AM/PM. Displayed in a bordered container with calendar icon. Read-only. Allows both future and past dates

End Date & Time

DateTime Display (Boxed, Conditional)

Same format as Start Date & Time. Displayed only when end date differs from start date. Hidden when same date or null. Read-only

Primary Venue

Text Display (Boxed)

Full venue address. Displayed in a bordered container. Read-only. Maximum 500 characters

5.2 Order Info Fields

Field Name

Field Type

Validation Rules

Order Info Header

Section Header with Info Icon

"Order Info" text with ⓘ icon. Tooltip on hover: "This shows the package and items assigned to this specific event."

Package Name

Text Display

Package name from the agency configuration (e.g., "Photo/Video Silver"). Displays "Custom / A La Carte" if no package but a la carte items exist. Read-only. Maximum 200 characters

Items Included for This Event

List Display

Each item renders as a separate row in list format. Read-only. Maximum 200 characters per item. Hidden if no items exist. Items listed in agency-defined order

A La Carte Items Included for This Event

Tag/Chip Display

Horizontal wrapping tags. Read-only and non-interactive. Maximum 100 characters per tag. Hidden if no a la carte items exist

5.3 Right Sidebar Fields

Field Name

Field Type

Validation Rules

Meetings Count

Numeric Display

Integer count of upcoming meetings. Displays "--" if none

Upcoming Payments Count

Numeric Display

Integer count of upcoming payments

Received Deliverables Count

Numeric Display

Integer count of received deliverables

Pending Deliverables Count

Numeric Display

Integer count of pending deliverables

Deliverable Name

Text Display

Name of the deliverable item

Deliverable Status

Status Badge

Values: "Pending" (orange), "Received" (green)

Deliverable Expected Date

Date Display

Format: "Expected by Month DD, YYYY"

Deliverable Delivered Date

Date Display

Format: "Delivered on Month DD, YYYY"

Deliverable Link

URL Display

Google Drive or external URL with copy icon

6. Success Message Handling

Operation

Success Message

Trigger Condition

Post-Success Action

Page Load

None (Silent)

Successful data retrieval

Display Event Info and Order Info

Page Refresh

None (Silent)

Manual browser refresh

Display latest data from agency

7. Error Message Handling

Error Scenario

Error Message

Trigger Condition

User Action Required

Event Info Load Failure

"Unable to load event information. Please try again."

API timeout or server error

Refresh page

Order Info Load Failure

"Unable to load order details. Please try again."

API error when fetching order/package data

Refresh page

Sidebar Load Failure

"Unable to load overview. Please try again."

API timeout for sidebar data

Refresh page

Network Error

"Please check your internet connection."

No network connectivity

Restore connection and refresh

Session Expired

"Your session has expired. Please log in again."

Invalid or expired session token

Re-authenticate

General Error

"Something went wrong."

Unexpected server error

Retry or refresh page

8. Edge Cases

Scenario

Expected Behavior

Fallback Action

Single-date event (same start and end date)

Only "Start Date & Time" displays spanning full width; "End Date & Time" is completely hidden

No visual gap where End Date field would be

Multi-date event

Both "Start Date & Time" and "End Date & Time" display side by side in equal-width columns

Both fields use same format and styling

End date is null/not set

Treated as single-date event; End Date & Time field hidden

Start Date & Time spans full width

No venue set by agency

Primary Venue field displays as empty or with placeholder text

Field container is still visible

No order/package assigned to the event

Entire Order Info section is hidden — no heading, no placeholder

Only Event Info section displays

Only a la carte items, no package

Package Name shows "Custom / A La Carte"; Items Included sub-section hidden; A La Carte tags display

Clear labeling distinguishes the state

Package assigned but no items listed

Package Name displays; Items Included sub-section hidden

Only package name visible

Very long venue address

Address wraps within the boxed container to multiple lines

No truncation — full address always visible

Very long package name

Truncate with ellipsis at available width

Full name visible on hover tooltip

Many a la carte items

Tags wrap to multiple lines horizontally

All tags remain visible

Very long a la carte item name

Tag truncates with ellipsis if exceeding available width

Full name visible on hover tooltip

Agency updates event dates/venue/order

Updated values reflect after client refreshes the page

Manual page refresh required

Agency removes order from event

Order Info section disappears after client refreshes

Only Event Info remains

Client navigates between event tabs

Each event tab shows its own Event Info and Order Info independently

No cross-event data mixing

Archived/completed project

Info tab visible in read-only mode (same as active, since everything is already read-only)

No behavioral change

9. Acceptance Criteria

• The Event Info section must display the event name with colored dot, Start Date & Time in DD/MM/YYYY HH:MM AM/PM format, and Primary Venue.

• End Date & Time must display only when the end date differs from the start date; it must be hidden for single-date events or when end date is null.

• For multi-date events, Start and End Date & Time must display side by side in equal-width columns.

• All event info data must be read-only; no edit, add, or delete actions available to clients.

• The Order Info section must display only when the event has an associated order/package; it must be completely hidden otherwise.

• The Order Info ⓘ icon must show a tooltip on hover: "This shows the package and items assigned to this specific event."

• Package Name must show the correct package name or "Custom / A La Carte" when applicable.

• Items Included must render as individual rows in list format, in the agency-defined order.

• A La Carte Items must render as horizontal wrapping tags/chips, hidden when none exist.

• Each event must display only the order items mapped to that specific event.

• Event info data must reflect agency-side changes after a manual page refresh.

• The right sidebar must display Overview metric cards and Deliverables section.

• The page must load within 3 seconds under normal network conditions.

• The interface must be responsive and functional on devices with screen width ≥320px.

10. Dependencies

Dependency

Type

Description

Fallback Behavior

Event Management System

Internal

Provides event name, dates/times, and venue information

Display error message

Order Management System

Internal

Provides package name, included items, and a la carte items mapped to each event

Hide Order Info section

Authentication Service

Internal

Validates client session and project/event access permissions

Redirect to login

Project Management Module

Internal

Determines event association and project context

Cannot display event info

Deliverables Module

Internal

Supplies deliverable data for the right sidebar

Show error in sidebar deliverables section

Brand Management Module

Internal

Provides custom branding and event tab colors

Default theme applied

11. References

• Figma Design Link: Click Here

• Client Portal - Events - Service Tab FRD: Refer for the shared event sub-navigation structure and right sidebar details.

• Client Portal - Overview Side Menu FRD: Refer for the base sidebar structure.

• Meeting Transcript (Dec 17, 2025): Info tab discussion at timestamp 33:02 ("start, end date and primary venue of this event").

✅ Account Setting

Functional Requirements Document (FRD) - Account Settings Module

1. Module Overview

• Module Name: Account Settings
• Purpose: Allows logged-in clients to view and update their personal information, including profile photo, contact details, address information, password management (creation or change), and payment method management within the client portal.
• Business Goal: Enable clients to maintain accurate and up-to-date personal information and payment methods, ensuring effective communication, personalized service delivery, and seamless payment processing while maintaining data security through password management.

2. User Roles & Permissions

Role

Description

Key Permissions

Client

Logged-in portal user

View and edit own account settings, create/change password, upload profile photo, manage payment methods (add/remove)

3. User Flow

Critical Path: Edit Personal Information

Password Management Flow (Conditional):

Create Password Flow (for users without an existing password):

Change Password Flow (for users with existing password):

Profile Photo Upload Flow:

Payment Method Management Flow:

Add Payment Method Flow:

Remove Payment Method Flow:

4. Functional Logic

4.1 Auto Populated Information

• Full Name, Email Address, and Phone Number: Auto-populated from client management
• Address Fields (Country, State, City): Auto-populated if address was provided during client creation by agency. If the address was not added during client creation, the fields remain empty and can be filled by the client

4.2 Profile Picture

• Default Picture Display: The System displays a default pic with initials (i.e., John Doe - JD) when no profile photo is uploaded
• Upload/Update Profile Photo: Client can upload or update a profile photo by clicking on the “+ Update Photo”. For validations - Click Here
• Profile Photo Sync: When the profile photo is updated, it automatically displays in the agency portal modules defined below
  • Client Management list and detailed profile view
  • Project/Event listing > users
  • Global Search
  • Dashboard > Event Management
  • Project details
    • Event tab
    • Activity tab
    • Files/Document tab
    • Meetings tab > Participants
    • Notes tab > Public notes
    • Email center

4.3 Personal Information

• Editable Fields: Full Name, Phone Number, Country, State, City
• Read-only Field: Email Address (can only be changed by an Agency user from the Client Management module)
• Impact on Agency System: When the client updates personal information, it automatically updates the client's details in the Client Management of the agency portal and in the following modules
  • Client Management list and detailed profile view
  • Project/Event listing > users
  • Project details
    • Event tab
    • Activity tab
    • Files/Document tab
    • Meetings tab > Participants
    • Notes tab > Public notes
    • Email center

4.4 Change Password

4.4.1 Create Password (For users without an existing password)

• System displays the "Create Password" section for users who have not created a password manually and log in using a magic link
• Validation messages are shown progressively as the user types (one at a time) to guide the user through each requirement
• New passwords must meet all specified requirements (as defined in the validation in field details - Refer - Click Here)
• After successful password creation, the system immediately updates the interface to show the "Change Password" section instead of the "Create Password" section for future access
• Users can continue to use both magic link authentication and email/password authentication even after creating a password

4.4.2 Change Password (For users with existing password)

• System displays the "Change Password" section for users with existing passwords
• Users must enter their current password to change to a new password
• New passwords must meet all specified complexity requirements (as defined in the validation table)
• After a password change, if the user tries to log in using the old password, it will display the error message, and the user will not be able to log in
• Session Behavior After Password Change: The current session (where the password was changed) remains active. Other active sessions on different devices/browsers remain valid until their tokens naturally expire. Only new login attempts using the old password are rejected.
• Field details, Refer - Click Here

4.5 Manage Payment Method

4.5.1 Add a New Payment Method

• The client will use the payment method to pay invoices generated by the agency for any project with which the client is associated
• Users can add both credit/debit cards and bank account payment methods
• All payment method validation and processing is handled through Stripe Integration.
• Payment methods are stored and handled by Stripe, not in the Pixally database.
• Duplicate Detection: Stripe prevents duplicate payment methods. If the client attempts to add a card or bank account that is already saved, Stripe returns an error. The system displays: "This payment method is already saved." No duplicate entry is created.
• The first payment method added automatically becomes the primary method
• Payment Method Display:
  • Credit/debit cards display masked card numbers (e.g., ****7458) and card processor name (Visa, Mastercard, etc.)
  • Bank accounts display masked account numbers (e.g., ********6021) and full bank name (e.g., "AMERICAN BUSINESS BANK")

4.5.2 Remove Payment Method

• Payment methods cannot be edited once saved - users must remove and re-add to make changes
• Users can remove all payment methods from their accounts except the primary payment method
  • If a user wants to delete their primary payment method, they need to first assign another method as primary before deletion
  • If the user clicks Remove on the primary method while 2 or more methods exist, the system displays an error: "Cannot remove primary method. Set another method as primary first." The removal is blocked. The user must click "Make Default" on a different payment method, and then retry removing the original primary method.
• If there is only one payment method, it cannot be deleted

4.5.3 Make Default (Primary)

• Users can manually change which payment method is set as primary
• By default, the primary method will be used for all payments

4.5.4 Payment Method Expiration:

• If a payment method expires, it is marked as expired in the system
• The system sends an email notification to the client that the payment method has expired
• Expired payment methods remain in the account until manually removed by the client

5. Field Details & Validations

Personal Information Fields

Field Name

Type

Validation Rules

Profile Photo

File Upload

JPEG, JPG, PNG, WebP format, Max 15 MB, Only from the local system

Full Name

Text

Max 100 characters

Email Address

Email

Read-only field, not editable by the user

Phone Number

Text with Dropdown

Country code dropdown (default US), valid phone format, max 15 digits, numbers only

Street Address

Text

Max 200 characters

Country

Dropdown

Country Dropdown

State

Text

Max 200 characters

City

Text

Max 200 characters

Zip/Postal Code

Text

Allows Alphanumeric

Password Management Fields

For Change Password (existing password users):

Field Name

Type

Validation Rules

Old Password

Password

Current user password verification

New Password

Password

Min 6 - Max 20 chars, 1 uppercase, 1 lowercase, 1 number, 1 special char, no spaces

Repeat New Password

Password

Must match the new password

Eye Icon

Toggle

Eye toggle on click, it will hide/display the password

For Create Password (no existing password users):

Field Name

Type

Validation Rules

Password

Password

6-20 characters, must contain: uppercase, lowercase, number, special character

Repeat Password

Password

Must match the Password field exactly

Create Password Button

Button

Triggers password creation and validation

Eye Icon

Button

- Eye toggle on click, it will display the password

Payment Method Fields

For the Customer Billing Address for both methods

Field Name

Type

Required

Validation Rules

Name

Text

Yes

Max 100 characters

Country

Dropdpwn

Yes

From a predefined list of countries

Address line 1

Text

Yes

Max 200 Characters, No Numbers

Address line 2

Text

No

Max 200 Characters, No Numbers

City

Text

Yes

Max 200 Characters, No Numbers

State

Text

Yes

Max 200 Characters, No Numbers

Zip Code

Input

No

Valid alphanumeric zip format

For Credit/Debit Card:

Field Name

Type

Required

Validation Rules

Card Number

Text

Yes

Handled by Stripe validation

Expiration Date

Text

Yes

MM/YY format, handled by Stripe validation

Security Code (CVC)

Text

Yes

3-4 digits, handled by Stripe validation

Name on Card

Text

Yes

Handled by Stripe validation

For Bank Account:

Field Name

Type

Required

Validation Rules

Bank Selection

Various

Yes

Handled by Stripe validation
On click, it will redirect to the bank details page and be handled by Stripe

5. Success Message Handling

Validation Scenario

Success Message

Personal information updated successfully

"Your account information has been updated successfully."

Password changed successfully

"Your password has been changed successfully."

Password created successfully

"Your password has been created successfully."

Profile photo updated successfully

"Your profile photo has been updated successfully."

Payment method added successfully

"Your payment method has been added successfully."

Payment method removed successfully

"Your payment method has been removed successfully."

6. Error Message Handling

Profile Photo Validation

Field

Validation Scenario

Error Message

Profile Photo

Invalid format

"Please upload a valid JPEG or JPG image."

Profile Photo

File size exceeds 15MB

"Image size cannot exceed 15MB"

Profile Photo

Upload failed

"Failed to upload image. Please try again."

Payment Method

Duplicate card/bank already saved

"This payment method is already saved."

Payment Method

Remove primary while 2+ methods exist

"Cannot remove primary method. Set another method as primary first."

Personal Information Validation

Field

Validation Scenario

Error Message

Full Name

Empty submission

"Please enter the full name."

Full Name

Length > 100 characters

"Full name cannot exceed 100 characters."

Phone Number

Empty submission

"Please enter a phone number."

Phone Number

Invalid format

"Please enter a valid phone number."

Phone Number

Exceeds 15 digits

"Phone number cannot exceed 15 digits."

Street Address

Length > 200 characters

"Street address cannot exceed 200 characters."

State

Length > 200 characters

"State cannot exceed 200 characters"

City

Length > 200 characters

"City cannot exceed 200 characters."

Zip/Postal Code

Invalid format

"Please enter a valid zip/postal code."

Change Password Validation (existing password users)

Field

Validation Scenario

Error Message

Old Password

Empty submission

"Please enter your current password."

Old Password

Incorrect password

"Current password is incorrect."

New Password

Empty submission

"Please enter a new password."

New Password

Length < 6 characters

"Password must be at least 6 characters."

New Password

Length > 20 characters

"Password cannot exceed 20 characters."

New Password

Missing uppercase

"Password must contain at least one uppercase letter."

New Password

Missing lowercase

"Password must contain at least one lowercase letter."

New Password

Missing number

"Password must contain at least one number."

New Password

Missing special character

"Password must contain at least one special character."

New Password

Contains spaces

"Password cannot contain spaces."

Repeat New Password

Passwords don't match

"Passwords do not match."

Create Password Validation (no existing password users)

• Refer - Click Here

Payment Method Validation

Field

Validation Scenario

Error Message

Payment Method Form

Stripe validation errors

Display Stripe-provided error messages for invalid card/bank details

Payment Method

Failed to add payment method

"Failed to add payment method. Please try again."

Payment Method

Failed to remove payment method

"Failed to remove payment method. Please try again."

Remove Confirmation

User cancels removal

Return to the payment methods list without changes

General Error Handling

Field

Validation Scenario

Error Message

General

Server timeout

"Something went wrong."

8. Edge Cases

Scenario

Expected Behavior

User navigates away with unsaved changes

No confirmation dialog - changes are lost

Password change with the same old and new passwords

Display error "New password must be different from current password"

User creates a password and stays in the same session

System immediately updates the interface to show the "Change Password" section instead of the "Create Password"

User with password continues using the magic link

The system allows both authentication methods - magic link and email/password login

Stripe service is unavailable during payment method addition

Display an error message and allow a retry

Client uploads photo while agency updates client name simultaneously

Both changes saved independently. Photo upload does not overwrite name changes and vice versa. If the same field is modified simultaneously by both client and agency, last successful save wins.

Primary payment method expires and no other methods exist

Client can still add new payment methods. The expired method remains as primary until a new method is added and set as primary. Client cannot process payments using the expired method — Stripe rejects the transaction and the system displays: "Payment failed: payment method expired. Please add a new payment method."

9. Test Cases

• Link

10. Acceptance Criteria

• Auto-Populated Info: Full name, email, phone auto-filled from client management; address fields pre-filled if available, else editable by client.
• Profile Picture: Default initials shown if no photo; clients can upload/update; updated photo syncs across agency modules (client list, projects, events, dashboard, notes, emails, etc.).
• Personal Info Edit: Clients can edit name, phone, country, state, city; email read-only (editable only by agency); changes auto-update in agency’s client management.
• Create Password: Shown for magic link users without a password; must meet complexity rules with live validation; once set, section changes to “Change Password”; supports dual login (magic link + email/password).
• Change Password: Existing password required; new password must meet complexity rules; old password invalid after change.
• Add Payment Method: Clients can add cards or bank accounts via Stripe; first method auto-sets as primary; masked details are displayed for stored methods.
• Remove Payment Method: Saved methods cannot be edited; users must remove/re-add; the primary method cannot be removed until another is set. If the user clicks Remove on the primary method while 2+ methods exist, the system displays "Cannot remove primary method. Set another method as primary first." and blocks the deletion.
• Set Primary Method: Clients can change which method is primary; primary is always used for payments by default.
• Expired Payment Method: Expired methods flagged in the system; client notified by email; remain visible until removed manually. If the client attempts to process a payment using an expired primary method, Stripe rejects the transaction and the system displays "Payment failed: payment method expired. Please add a new payment method." The invoice remains unpaid.

11. Dependencies

Module/System

Dependency Type

Impact if Unavailable

User Authentication

Service dependency

Cannot verify user identity, current password, or authentication method

Email Service

Integration dependency

Cannot send email change notifications

File Storage Service

Service dependency

Cannot save or retrieve profile photos

Agency Admin System

Data sync dependency

Email changes are not reflected in the admin system

Location Data Service

Data dependency

Country/State/City dropdowns not populated

Stripe Payment Service

Service dependency

Cannot process payment method additions or validations

Authentication Service

Service dependency

Cannot determine if the user has an existing password or uses magic link authentication

12. References

• Figma Design Link: Click Here

✅ Email Center

Client Portal Email Center Module

Functional Requirement Document

BA & Ideation: Dakshraj Jhala

Reviewed By: KG (Project Manager)

Updated Date: 29 September 2025
Status: Approved

Version 1.0

Email Center (Client Portal)

Functional Requirement Document

1. Module Overview

• Module Name: Email Center (Client Portal)
• Purpose: Enables clients from the client portal to manage project-specific email communications with agency users, providing a centralized view of all email interactions between the client and the selected agency user across their associated projects
• Business Goal: Streamline client agency users' communication management by providing a client portal email center interface that maintains project context while enabling efficient correspondence tracking and management

2. User Roles & Permissions

Role

Description

Key Permissions

Client

Client portal user

- View emails where they are a participant (To/Cc/Bcc)

- Send emails to project team members and clients attached to the same project only

- Reply to email threads

- Attach files from the local system only

- Search, delete, and manage their email threads

3. User Flow

4. Functional Logic

4.1 Projectwise Email Center and access

• The Email Center is always tied to a project.
• Clients can access the emails of a project only if they are invited by the agency owner, an admin, or team members.
• If they are part of multiple projects, they will have a separate Email Center for each project. Clients can view only those email threads in which they are participants, either as a sender or a recipient.
• If multiple clients are attached to a project, each will have individual access to the Email Center through their respective client portal

4.2 Default Emails

• Emails sent from the agency portal within the project (e.g., contracts, proposals, questionnaires, invoices, client portal links, and lead forms) also appear in the Client Portal Email Center for the client as received emails
• Sender Display: System-generated emails display the sender as "[User Name] sent you a [document type]" (e.g., "Mary Jane sent you an Invoice", "Ian Robel sent you a Contract").
• Read Status: System-generated emails arrive as unread with the blue dot indicator, following the same read/unread logic as regular emails.
• Attachments: Any documents attached to system-generated emails (contracts, invoices, proposals) are downloadable by the client directly from the email thread.

4.3 New Email

The client can compose a new email using the “New Email” button, which opens the compose email screen. Most functionalities remain consistent with the Agency side Email center (Refer- Click Here), with the following restrictions applied:

• Recipients: Clients can send emails or reply to emails only to project members (agency users added to the project) and other clients within the same project. They cannot send emails to contractors.
• Not Available for Clients: Ask AI, Smart Fields, Email Templates, and Brand-Specific Signatures are completely removed from the client portal UI — these elements are not rendered at all (not hidden or disabled). The compose screen shows only the basic editor without these features.
• Attachments: Clients can only attach files directly from their local system; Library access is not provided. Multiple files are allowed, with a combined total attachment size limit of 15 MB per email
• Attachment Size Validation: If the total combined attachment size exceeds 15 MB, the system displays an inline error: "Total attachment size exceeds 15 MB. Please remove some files." The Send button is disabled until the client removes attachments to bring the total under the 15 MB limit.
• Subject Line: Maximum 250 characters. If the client exceeds 250 characters, further input is blocked. The subject field is optional — the system shows a warning "Send without subject?" if left empty, but does not block sending.
• Body Content: Maximum 10,000 characters of body content. If the client exceeds 10,000 characters, the system displays an inline error: "Message body exceeds 10,000 character limit." and disables the Send button until reduced.
• Total Message Size Limit: The total message size — including body content, attachments, and email headers combined — must not exceed 15 MB. If the total exceeds 15 MB, the system displays: "Total message size exceeds 15 MB. Please reduce content or remove attachments." and disables the Send button.

4.4 Email Delivery & Reply Logic

• When the client sends the email to project participants (Project members, other clients) they will receive the email in TWO places:
  • Their external email inbox (e.g., xyz@gmail.com), which is the email address registered in their profile
  • Their portal's project-specific Email Center
• Recipients (Project members, client) can reply from EITHER location:
  • Reply from Gmail/external email: automatically routed back to the client portal’s Email Center
  • Reply from their portal Email Center: directly appears in the client portal’s Email Center
  • Reply All Behavior: When the client uses Reply All, the system pre-fills all original To/Cc recipients from the email being replied to, excluding the client's own email address. T

Relay Email Routing - Click Here

4.5 Email Threading

• Refer - Click Here

4.6 Conversation Display

• Refer - Click Here

4.7 Read/Unread Status Logic

• The read/unread status will be maintained at the user level for both threads and individual emails
• New emails or any new email reply to the thread are marked as unread with a blue dot indicator
• Emails are marked as read when opened in the thread view or single email view
• The project header "Emails" button displays an unread email count badge

4.8 Search Logic

• Refer - Click Here

4.9 Delete Email

• When a client deletes a thread, it is deleted only for that client. The agency and other participants still retain access
• Refer - Click Here

4.10 Additional Logic

• Refer - Click Here

5. Success Message Handling

Validation Scenario

Success Message

Email sent successfully

"Email sent successfully."

Email Deleted successfully

“Email deleted successfully.”

6. Error Message Handling

• Refer - Click Here

7. Edge Case

• Refer - Click Here
• Client removed from project after participating in threads: The removed client loses access to the Email Center entirely. Existing threads remain visible to the agency and other project participants. The removed client's name displays as "[Name] (Not a Member)" in thread participant lists visible to others.
• Agency user removed from project after sending emails: The email thread is no longer visible to the client in the Email Center. If the client had the thread open, it is removed on next page refresh.

8. Acceptance Criteria

• Project-Level Access: Email Center shows only emails from the client's associated project
• Participant-Only Visibility: Clients see emails only where they are the sender or recipient
• Limited Recipient Selection: To/Cc/Bcc fields display a dropdown of project participants only (project team members and other project clients). Free text email entry is not allowed — clients can only select from the dropdown. For Reply All, the system auto-populates from original recipients
• Restricted Features: No access to Smart Fields, Ask AI, Email Templates, Brand Signatures, or the Library Module for attachment.
• Send Validation: Checks for recipients, subject (max 250 chars), body (max 10,000 chars), attachment limits (15 MB per email), and total message size (15 MB including body + attachments + headers). Shows warning for empty subject/body. Disables Send button when any limit is exceeded. Displays success message after sending.
• Dual Delivery: Emails appear in both the portal and the external inbox (Gmail/Outlook)
• Smart Threading: Conversations grouped with full history; newest at top; external non-member replies labeled "(Not a Member)".
• Read Status Tracking: Blue dot for unread; auto-marks read when opened; unread count badge on Email Center button.
• Clear Conversation Display: Shows sender, recipients (+count on hover), subject, preview, and timestamp; project name as header.
• Real-Time Search: Instantly filters by sender, recipient, subject, or content; shows "No conversation found" if empty.
• Personal Delete Only: Deleting removes the conversation for that client only; others keep their copy; requires confirmation.
• Easy Downloads: Download attachments with original filename; error shown if failed.
• Activity Tracking: Newly received emails are logged in the Activity tab and Notification Center with sender info and reply option.

9. Dependencies

Module/System

Dependency Type

Impact if Unavailable

Project Management

Data dependency

Cannot determine project association; Email Center access fails; participant list unavailable

User Authentication

Service dependency

Cannot identify client sender; access restrictions fail; unable to verify project association

Client Portal

Platform dependency

Email Center interface unavailable; navigation and context switching fail

Agency Portal

Integration dependency

Cannot sync emails with agency users; team member information unavailable; cross-portal threading fails

Relay Email Service

External service

External email routing fails; threading breaks; cross-platform integration lost; replies from Gmail/Outlook not routed to the portal

Smart Text Editor

Component dependency

Email composition unavailable; formatting features (bold, italic, lists, etc.) not functional

Notification System

Service dependency

Real-time email notifications unavailable; read/unread status sync fails; notification center integration breaks

File Storage Service

External service

Attachment upload/download fails; file size validation unavailable; file management broken

Database Service

Data dependency

Email storage/retrieval fails; conversation threading breaks; read/unread status not persisted

Agency Settings

Configuration dependency

Timezone formatting unavailable; global settings cannot be applied; date/time display inconsistent

Activity Log System

Integration dependency

Email activity tracking fails; activity section entries not created; activity-based navigation unavailable

Email Delivery Service (SMTP)

External service

Emails cannot be sent to external inboxes; delivery to Gmail/Outlook fails; communication breakdown

Project Participant Management

Data dependency

Cannot retrieve or validate project participants; recipient selection fails; access control breaks

10. Reference

• Figma Link: Click Here

❌ Overview Tabs

Functional Requirements Document - Client Portal: Overview Tabs

1. Module Overview

Module Name: Client Portal - Overview Tabs

Purpose: The Overview tab serves as the primary dashboard for clients, providing a comprehensive summary of their project status, recent activities, key metrics, and quick access to important project elements in a fixed layout structure.

Business Goals: To deliver a centralized view that enables clients to quickly understand project progress, access critical information, and navigate to detailed sections efficiently, reducing the need for agency support and improving client satisfaction through transparent project visibility.

2. User Roles & Permissions

Role

Access Level

Permissions

Client (Primary Contact)

Full View Access

View all overview widgets, access all linked content, view complete activity history, see all project notes

Client (Additional Contacts)

Full View Access

View all overview widgets, access all linked content, view complete activity history, see all project notes

Client (View-Only)

Restricted View

View overview content but cannot access payment information or sensitive documents

Guest/Non-authenticated Users

No Access

Cannot access the overview or any project information

3. User Flow

1. Upon successful login to the client portal, the system automatically loads the Overview tab as the default landing page.
2. The client sees the project header with the wedding couple's names (e.g., "Jadon & Monika Wedding") and navigation tabs below.
3. The system displays the main hero banner with the couple's image and event title prominently featured.
4. Below the banner, the client views four key metric cards showing Services count, Deliverables status, Meetings scheduled, and Engagement/Professional metrics.
5. The client scrolls down to see the left column containing the Overview section with recent activities and notes from all events.
6. On the right side, the client views the Deliverables widget showing document status and download options.
7. Further down the right column, the client sees the Payment summary widget displaying total cost, paid amount, and outstanding balance.
8. The client can click on any metric card to navigate directly to that specific section for detailed information.
9. When clicking "View More" links within widgets, the system navigates to the corresponding detailed view or event tab.
10. The client can always return to this overview by clicking the Overview tab in the main navigation.

4. Functional Logic

4.1 Page Load and Data Aggregation

• When the Overview tab loads, the system fetches data from all associated project events and consolidates it for display.
• The system calculates totals for services, deliverables, and meetings across all events within the project.
• Loading occurs asynchronously with progressive rendering, showing the header and structure immediately while data populates.
• If data retrieval takes longer than 3 seconds, the system displays a loading indicator in the affected widget.
• The page maintains its layout structure even when individual widgets are still loading data.

4.2 Hero Banner Section

• The system displays the project hero image as configured by the agency in brand settings.
• The banner includes the project title overlaid on the image with appropriate contrast for readability.
• If no custom image is set, the system displays a default elegant background appropriate for the event type.
• The banner height is fixed at 300px on desktop and scales proportionally on mobile devices.
• Any "Announcement" or important message from the agency appears as a dismissible banner below the hero section.

4.3 Metrics Cards Display

4.3.1 Services Card

• The system counts all active services across all project events and displays the total number.
• Each service type (Photography, Videography, Planning) is counted separately if multiple exist.
• The card displays an appropriate icon and the numeric count prominently.
• Clicking the card navigates to the first event's Services tab.

4.3.2 Deliverables Card

• The system aggregates all deliverables from all events and calculates completion percentage.
• The display shows "X of Y completed" format where X is completed deliverables and Y is total.
• A progress indicator visualizes the completion percentage using a circular or linear progress bar.
• Clicking navigates to the detailed deliverables view.

4.3.3 Meetings Card

• The system displays the count of upcoming meetings scheduled through the portal.
• Past meetings are excluded from this count but available in the meetings history.
• The card shows the next meeting date if one is scheduled.
• Clicking opens the meetings scheduling interface.

4.3.4 Engagement/Professional Card

• The system displays relevant metrics based on the project type (e.g., "2 Engagement Sessions" for wedding projects).
• The count reflects contracted services specific to pre-event or professional sessions.
• The card uses appropriate iconography for the service type.

4.4 Overview Content Section (Left Column)

4.4.1 Recent Activities

• The system displays the 10 most recent activities across all project events in reverse chronological order.
• Each activity entry includes timestamp, activity type icon, and description of the action.
• Activities include: document uploads, payment updates, note additions, service status changes, and meeting schedules.
• The timestamp displays in relative format (e.g., "2 hours ago") for recent activities and absolute dates for older items.
• If no activities exist, the system displays an empty state message: "No recent activities yet."

4.4.2 Notes Aggregation

• The system collects all notes from all event tabs and displays them in the overview.
• Each note shows the event context (e.g., "[Wedding] Note content here").
• Notes display with the author name, timestamp, and content preview (first 200 characters).
• Client-created notes show an edit option, while agency notes are read-only.
• The system displays the 5 most recent notes with a "View All Notes" link to see more.

4.5 Deliverables Widget (Right Column)

• The system lists all deliverables with their current status using visual indicators (icons and colors).
• Each deliverable shows: name, status (Pending/In Progress/Completed), and action buttons.
• Completed deliverables display a download button for direct file access.
• The widget groups deliverables by event if multiple events exist.
• The system shows a progress bar indicating overall deliverables completion percentage.
• Empty state displays: "No deliverables have been added to your project yet."

4.6 Payment Widget

• The system displays the financial summary with clear formatting and currency symbols.
• The widget shows: Total Package Price, Amount Paid, Outstanding Balance, and Next Payment Due.
• Each payment line item is clickable and opens the detailed invoice view.
• The "Make a Payment" button is prominently displayed when balance is outstanding.
• The system calculates and displays the payment progress as a percentage bar.
• If fully paid, the widget displays a green checkmark with "Paid in Full" status.

4.7 Data Refresh Behavior

• The system requires manual page refresh to load updated data from the agency side.
• A subtle "Last updated" timestamp appears at the top of the overview section.
• The browser's refresh button or F5 key triggers a complete data reload.
• During refresh, the system maintains scroll position when possible.
• Cache headers prevent serving stale data older than 5 minutes.

4.8 Empty States and Error Handling

• Each widget implements specific empty state messaging when no data exists.
• Empty states include helpful context about what will appear once data is available.
• If a widget fails to load, it displays an error message with a "Try Again" button.
• The system logs widget loading failures for troubleshooting without exposing technical details to clients.

5. Field Details & Validations

Field Name

Field Type

Validation Rules

Project Title

Text Display

Maximum 100 characters, HTML-escaped

Service Count

Numeric Display

Integer, minimum 0, maximum 999

Deliverables Count

Text Display

Format: "X of Y", where X ≤ Y

Meeting Count

Numeric Display

Integer, minimum 0

Activity Description

Text Display

Maximum 500 characters per entry

Note Preview

Text Display

Maximum 200 characters, truncated with ellipsis

Payment Amount

Currency Display

2 decimal places, with currency symbol

Relative Timestamp

Calculated Text

Format: "X minutes/hours/days ago"

Progress Percentage

Numeric Display

0-100, displayed with % symbol

6. Success Message Handling

Operation

Success Message

Trigger Condition

Post-Success Action

Page Load

None (Silent)

Successful data retrieval

Display populated dashboard

Navigate to Section

None (Silent)

Click on metric card

Load target section

Download Deliverable

"Download started"

Click download button

Initiate file download

Refresh Page

"Content updated"

Manual refresh with new data

Display updated information

7. Error Message Handling

Error Scenario

Error Message

Trigger Condition

User Action Required

Widget Load Failure

"Unable to load [widget name]. Please try again."

API timeout or error

Click "Try Again" button

Deliverable Download Failure

"Unable to download file. Please try again later."

File not accessible

Contact agency or retry

Payment Widget Error

"Unable to load payment information."

Payment service unavailable

Refresh page or contact support

Notes Load Failure

"Notes are temporarily unavailable."

Database connection error

Refresh page

Network Error

"Please check your internet connection."

No network connectivity

Check connection and refresh

8. Edge Cases

Scenario

System Behavior

Fallback Action

No events in project

Display overview with zero counts

Show message: "Your project is being set up"

All deliverables completed

Show 100% completion with green indicator

Display "All deliverables completed!" message

No payment required

Hide payment widget or show "No payment required"

Display confirmation of paid status

Very long note content

Truncate at 200 characters with "Read more" link

Expand inline or navigate to notes section

Over 100 recent activities

Paginate after 10 with "Load more" button

Implement pagination controls

Mixed currency payments

Display in client's primary currency

Show currency conversion note if applicable

Slow network connection

Show skeleton loaders for widgets

Progressive content loading

Multiple simultaneous refreshes

Process first refresh, ignore others

Queue subsequent refresh requests

9. Acceptance Criteria

• The Overview tab must load as the default landing page after client login
• All widgets must appear in the fixed order as specified in the design
• Metric cards must accurately reflect real-time counts from all project events
• The page must load initial structure within 2 seconds on standard broadband
• All clickable elements must have appropriate hover states and cursor changes
• Empty states must display for all widgets when no data exists
• The layout must be responsive and functional on devices ≥320px width
• Payment calculations must be accurate to 2 decimal places
• All timestamps must display in the client's timezone
• Data refresh must complete within 5 seconds under normal conditions

10. Manual Test Cases

Test cases have been created in a separate Excel file. Access the test cases here: TestCases_ClientPortal_Overview_Tabs.xlsx

11. Dependencies

Dependency

Type

Description

Fallback Behavior

Event Management Module

Internal

Provides event data for aggregation

Display error in affected widgets

Payment Processing Module

Internal

Supplies payment and invoice data

Hide payment widget

Document Management System

Internal

Provides deliverables and files

Show "Unable to load files" message

Notes Module

Internal

Supplies notes from all events

Display empty state for notes

Activity Logging Service

Internal

Provides activity feed data

Show "No recent activities"

Meeting Scheduler

Internal

Supplies meeting information

Display zero meetings count

Brand Settings Module

Internal

Provides custom branding/imagery

Use default theme and images

12. References

• Figma Design Files: Figma