Flow Page – Full Visual Explanation, Purpose, Process, and Internal Workings
 

This document explains the Flow Page in biz1 in full depth:
What it is, how the screen looks, what actions users perform, how data moves behind the scenes, and how it connects to other modules.
 

1. What is the Flow Page (Conceptual View)
 

The Flow Page is a Customer Journey Board.
 

Think of it this way:
 

• Each Flow = one business process
  (For example: Sales Pipeline, Loan Processing, Recruitment, Customer Onboarding)
   

• Each Column = one stage in this process
  (For example: TO DO → TEST → PATIDAR → FINAL)
   

• Each Card = one customer
  (from the contactus table)
   

The Flow Page allows you to:
 

• See where each customer currently is

• Move customers between stages using drag and drop

• Filter customers by date, team, or name

• Visually track progress instead of reading lists
   

2. How to Access the Flow Page
 

You reach the Flow Page when:
 

• You click on "Flow" in the left sidebar
   

• The URL becomes:

  • dashboard/flow

  • or dashboard/admin/#customer when the flow is active
     

Access depends on:
 

• Organization module: Customer Flow Enabled

• User permission: module_sidebarmenu_flow
   

If the module or permission is disabled, the Flow menu is hidden.
 

3. Full Visual Description of the Screen
 

3.1 Header (Global)
 

At the very top, you see the standard biz1 header:
 

• Main navigation (Customers, Projects, Products, Expenses, Articles, User, Advance)

• User profile and notifications

• Time clock / "Start Work"
   

This header is global and not specific to the flow logic.
 

3.2 Left Sidebar (Navigation)
 

• Flow is highlighted when this page is active

• Other sidebar items remain visible:
  Customers, Tasks, Calendar, Tickets, Email, WhatsApp, Files, Reports, etc.
   

The sidebar simply determines which module is active.
 

3.3 Left Panel – Flow Management Area
 

This panel controls which flow you are viewing.
 

You will see:
 

• A title like "Flows"

• A search field to filter flow names

• Tabs such as:
   

  • Loan Customers

  • Open Jobs

  • Employees
    These tabs switch the context/flow type, not the customers themselves.
     

• Informational text such as:
  "Create your flow and track your progress"

• An Add Flow button
  This opens a modal where you define a new flow.
   

This panel is only about:
 

• Creating flows

• Selecting flows

• Switching between flow categories
   

3.4 Main Content Area – The Actual Flow Board
 

This is where most of the work happens.

At the top of the main area, you see:
 

• Flow title (e.g., "Loan Customers")

• Export button

• Import button

• Add Product / Add Record

• Help icon

• Search field (searches customers, not flows)

• Filters button

• Field selector

• Refresh button

• Flow selection dropdown

• Start date / End date filters

• Team member filter

• Information icon
   

Everything shown here controls which customers are displayed and how.
 

4. The Heart of the Page: Columns and Cards
 

4.1 Columns
 

Each flow is divided into vertical columns.
 

Examples of column names:
 

• TO DO

• 1

• PATIDAR

• TEST

• HELLO_TEST

• EMKKK

• CXSDFC
   

Important points:
 

• Columns are defined for each flow

• Each column has:

  • A name

  • A colored underline

  • An order (left to right)

• The order of columns is important and configurable
   

When you switch flows, the entire column structure changes.
 

4.2 Customer Cards
 

Within each column, you see customer cards.
 

Each card represents:
 

• One row from contactus

• Associated with:

  • A specific flow

  • A specific column
     

Cards typically display:
 

• Customer name

• Basic identifiers

• Action icons (call, message, open profile)
   

4.3 Drag and Drop Behavior
 

This is the most important interaction.
 

When you:
 

• Click on a customer card

• Drag it to another column

• Release it
   

The system immediately:
 

• Saves the new column

• Saves who moved it

• Saves the date and time
   

Visually:
 

• The card snaps to the new column

• No page reload is needed
   

Conceptually:
 

"This customer has moved to the next stage"

5. Alternative View: Table Mode
 

Some flows support or display a table layout.
 

In this mode:
 

• Customers are displayed in rows
   

• The columns are fixed fields such as:
   

  • Customer Name

  • ID

  • Team

  • Data Collection

  • Bank Data

  • Personal Data

  • Property Data

  • Documents

  • Transaction

  • Final Stage

  • Action Icons
     

This view is useful for:
 

• Data-intensive processes

• Compliance workflows

• Reporting scenarios
   

The same underlying data is used for both views.
 

6. Step by Step: What Happens When the Page Loads
 

1. The user clicks on Flow in the sidebar.

2. Flow::index() is triggered.

3. Permission module_sidebarmenu_flow is checked.

4. The view flow_page.php is loaded.

5. JavaScript initiates AJAX calls to load:

   • Available flows

   • Default flow (if set)

6. Columns for the selected flow are loaded.

7. Customers are retrieved and grouped by column.

8. The Kanban board is rendered.
    

At this point, the user can interact.