How to Create a Custom CRM System in FlutterFlow

Create a contacts collection with fields: name (String), email (String), phone (String), company (String), status (String: 'lead', 'prospect', 'customer', 'churned'), source (String: 'website', 'referral', 'cold_outreach', 'social'), notes (String), assignedTo (String: user UID of the team member), createdAt (Timestamp), and lastContactedAt (Timestamp). Create an activities collection with fields: contactId (String), type (String: 'call', 'email', 'meeting', 'note'), description (String), timestamp (Timestamp), and userId (String: who logged the activity). Set Firestore rules so any authenticated team member can read and write contacts and activities. Create composite indexes for: status + assignedTo + lastContactedAt (for filtered and sorted contact queries).

Create a ContactsListPage. At the top, add a TextField with a search icon prefix for searching by name or company. Below, add a Row of ChoiceChips for status filtering: All, Lead, Prospect, Customer, Churned. Add a DropDown for sorting: by name (alphabetical), by lastContactedAt (most recent first), or by createdAt (newest first). Below the filters, add a ListView bound to a Backend Query on the contacts collection. Apply filters dynamically: if a status chip is selected (not 'All'), filter where status equals the selected value. For search, use whereGreaterThanOrEqualTo on the name field. If an assignee filter is active, add where assignedTo equals the selected team member. Each list item is a Component showing: name (bold), company, email, a colored status badge Container (green for customer, blue for prospect, amber for lead, red for churned), and the lastContactedAt date. Tap navigates to ContactDetailPage.

Create a ContactDetailPage receiving the contact document reference as a parameter. Display a header Card with the contact's name, company, email, phone, status badge, assigned team member, and source. Add an Edit IconButton that navigates to a ContactEditPage with pre-filled fields. Below the header, add an 'Activity Timeline' section with a ListView bound to a Backend Query on activities where contactId equals this contact's ID, ordered by timestamp descending. Each activity row shows: an icon based on type (Icons.phone for call, Icons.email for email, Icons.meeting_room for meeting, Icons.note for note), the description text, the timestamp, and who logged it. At the bottom, add a Row of quick-action buttons: Log Call, Log Email, Log Meeting, Add Note. Each opens a BottomSheet with a description TextField and a Save button that creates an activity doc and updates the contact's lastContactedAt timestamp.

Create a PipelinePage with a horizontal ScrollView containing four Column widgets side by side, one for each status: Lead, Prospect, Customer, Churned. Each column has a header Container showing the status name and the count of contacts in that status. Below the header, add a ListView bound to a Backend Query on contacts where status equals the column's status value, ordered by lastContactedAt descending. Each item is a compact card showing name, company, and days since last contact. To move a contact between columns, add a long-press action on each card that shows a PopupMenu with status options. Selecting a new status updates the contact's status field and the card moves to the appropriate column on the next query refresh. Set the horizontal ScrollView to scroll so all four columns are accessible on mobile screens.

On the ContactsListPage, add a multi-select mode. Add a Checkbox to each contact row and a Page State selectedContactIds (List of Strings). When one or more contacts are selected, show a bulk action bar at the bottom with buttons: Change Status (DropDown selection applies to all selected), Change Assignee (DropDown of team members), and Delete (with confirmation dialog). Each bulk action loops through selectedContactIds and updates the corresponding documents. Above the contact list, add a summary Row showing KPI cards: Total Contacts, Leads This Month, Contacts Without Activity in 7+ Days (stale leads), and Conversion Rate (customers / total contacts). Bind each to Backend Queries with appropriate filters and Custom Functions for calculations.