-
This is a React.js/Node.js app generated by the Flatlogic Web App Generator
-
For guides and documentation please check
- your local README.md and the Flatlogic documentation
+
+
Track leads, contacts, companies, deals, and activity reminders from one focused workspace for your internal sales team.
+
+
Pipeline visibility
+
Deal ownership
+
Follow-up rhythm
+
diff --git a/frontend/src/pages/sales-command-center.tsx b/frontend/src/pages/sales-command-center.tsx
new file mode 100644
index 0000000..d04a751
--- /dev/null
+++ b/frontend/src/pages/sales-command-center.tsx
@@ -0,0 +1,753 @@
+import * as icon from '@mdi/js';
+import axios from 'axios';
+import Head from 'next/head';
+import Link from 'next/link';
+import React, { ReactElement } from 'react';
+import BaseButton from '../components/BaseButton';
+import CardBox from '../components/CardBox';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import { getPageTitle } from '../config';
+import { hasPermission } from '../helpers/userPermissions';
+import { useAppSelector } from '../stores/hooks';
+
+type UserRef = {
+ id?: string;
+ firstName?: string;
+ lastName?: string;
+ email?: string;
+};
+
+type EntityRef = {
+ id?: string;
+ name?: string;
+ lead_name?: string;
+ first_name?: string;
+ last_name?: string;
+ email?: string;
+ sort_order?: number;
+ win_probability?: number;
+};
+
+type Deal = {
+ id: string;
+ name?: string;
+ amount?: string | number | null;
+ forecast_category?: string | null;
+ expected_close_at?: string | null;
+ next_follow_up_at?: string | null;
+ priority?: string | null;
+ description?: string | null;
+ stage?: EntityRef | null;
+ company?: EntityRef | null;
+ primary_contact?: EntityRef | null;
+ lead?: EntityRef | null;
+ owner?: UserRef | null;
+};
+
+type Activity = {
+ id: string;
+ activity_type?: string | null;
+ subject?: string | null;
+ due_at?: string | null;
+ scheduled_at?: string | null;
+ completed_at?: string | null;
+ status?: string | null;
+ deal?: Deal | null;
+ lead?: EntityRef | null;
+ contact?: EntityRef | null;
+ assigned_to?: UserRef | null;
+};
+
+type FollowUpForm = {
+ dealId: string;
+ activity_type: string;
+ due_at: string;
+ subject: string;
+ details: string;
+ is_reminder_enabled: boolean;
+};
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ maximumFractionDigits: 0,
+});
+
+function labelize(value?: string | null) {
+ if (!value) return 'Unstaged';
+
+ return value
+ .split('_')
+ .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+ .join(' ');
+}
+
+function formatCurrency(value?: string | number | null) {
+ const amount = Number(value || 0);
+
+ if (Number.isNaN(amount)) return '$0';
+
+ return currencyFormatter.format(amount);
+}
+
+function formatDate(value?: string | null) {
+ if (!value) return 'Not set';
+
+ const date = new Date(value);
+
+ if (Number.isNaN(date.getTime())) return 'Not set';
+
+ return date.toLocaleDateString(undefined, {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ });
+}
+
+function formatDateTime(value?: string | null) {
+ if (!value) return 'Not scheduled';
+
+ const date = new Date(value);
+
+ if (Number.isNaN(date.getTime())) return 'Not scheduled';
+
+ return date.toLocaleString(undefined, {
+ month: 'short',
+ day: 'numeric',
+ hour: 'numeric',
+ minute: '2-digit',
+ });
+}
+
+function dateTimeInputValue(date: Date) {
+ const local = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
+ return local.toISOString().slice(0, 16);
+}
+
+function defaultDueAt() {
+ const date = new Date();
+ date.setDate(date.getDate() + 1);
+ date.setHours(9, 0, 0, 0);
+ return dateTimeInputValue(date);
+}
+
+function getOwnerName(owner?: UserRef | null) {
+ const name = [owner?.firstName, owner?.lastName].filter(Boolean).join(' ');
+ return name || owner?.email || 'Unassigned';
+}
+
+function getContactName(contact?: EntityRef | null) {
+ const name = [contact?.first_name, contact?.last_name].filter(Boolean).join(' ');
+ return name || contact?.email || 'No primary contact';
+}
+
+function isOpenDeal(deal: Deal) {
+ return !['closed_won', 'closed_lost'].includes(deal.forecast_category || '');
+}
+
+function getApiErrorMessage(error: any) {
+ const response = error?.response?.data;
+
+ if (typeof response === 'string') return response;
+ if (response?.message) return response.message;
+
+ return error?.message || 'Something went wrong. Please try again.';
+}
+
+const badgeStyles: Record
= {
+ urgent: 'bg-rose-100 text-rose-700 ring-1 ring-rose-200',
+ high: 'bg-orange-100 text-orange-700 ring-1 ring-orange-200',
+ medium: 'bg-blue-100 text-blue-700 ring-1 ring-blue-200',
+ low: 'bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200',
+};
+
+const SalesCommandCenter = () => {
+ const { currentUser } = useAppSelector((state) => state.auth);
+ const [deals, setDeals] = React.useState([]);
+ const [activities, setActivities] = React.useState([]);
+ const [selectedDealId, setSelectedDealId] = React.useState('');
+ const [loading, setLoading] = React.useState(true);
+ const [submitting, setSubmitting] = React.useState(false);
+ const [errorMessage, setErrorMessage] = React.useState('');
+ const [successMessage, setSuccessMessage] = React.useState('');
+ const [form, setForm] = React.useState({
+ dealId: '',
+ activity_type: 'task',
+ due_at: defaultDueAt(),
+ subject: '',
+ details: '',
+ is_reminder_enabled: true,
+ });
+
+ const canScheduleFollowUp =
+ hasPermission(currentUser, 'CREATE_ACTIVITIES') &&
+ hasPermission(currentUser, 'UPDATE_DEALS');
+
+ const loadData = React.useCallback(async () => {
+ if (!currentUser) return;
+
+ setLoading(true);
+ setErrorMessage('');
+
+ try {
+ const [dealsResponse, activitiesResponse] = await Promise.all([
+ axios.get('/deals', {
+ params: { limit: 100, page: 0, field: 'next_follow_up_at', sort: 'asc' },
+ }),
+ axios.get('/activities', {
+ params: { limit: 100, page: 0, field: 'due_at', sort: 'asc' },
+ }),
+ ]);
+
+ const nextDeals = Array.isArray(dealsResponse.data?.rows)
+ ? dealsResponse.data.rows
+ : [];
+ const nextActivities = Array.isArray(activitiesResponse.data?.rows)
+ ? activitiesResponse.data.rows
+ : [];
+
+ setDeals(nextDeals);
+ setActivities(nextActivities);
+ setSelectedDealId((current) => current || nextDeals[0]?.id || '');
+ setForm((current) => ({
+ ...current,
+ dealId: current.dealId || nextDeals[0]?.id || '',
+ }));
+ } catch (error) {
+ console.error('Failed to load sales command center data', error);
+ setErrorMessage(getApiErrorMessage(error));
+ } finally {
+ setLoading(false);
+ }
+ }, [currentUser]);
+
+ React.useEffect(() => {
+ loadData().then();
+ }, [loadData]);
+
+ React.useEffect(() => {
+ if (!selectedDealId && deals[0]?.id) {
+ setSelectedDealId(deals[0].id);
+ }
+ }, [deals, selectedDealId]);
+
+ const selectedDeal = React.useMemo(
+ () => deals.find((deal) => deal.id === selectedDealId) || deals[0],
+ [deals, selectedDealId],
+ );
+
+ const pipelineColumns = React.useMemo(() => {
+ const columns = deals.reduce>(
+ (acc, deal) => {
+ const label = deal.stage?.name || labelize(deal.forecast_category);
+ const order = deal.stage?.sort_order || 999;
+
+ if (!acc[label]) {
+ acc[label] = { label, order, deals: [] };
+ }
+
+ acc[label].deals.push(deal);
+ acc[label].order = Math.min(acc[label].order, order);
+
+ return acc;
+ },
+ {},
+ );
+
+ return Object.values(columns).sort((a, b) => a.order - b.order || a.label.localeCompare(b.label));
+ }, [deals]);
+
+ const openDeals = React.useMemo(() => deals.filter(isOpenDeal), [deals]);
+
+ const plannedActivities = React.useMemo(
+ () =>
+ activities
+ .filter((activity) => !['completed', 'canceled'].includes(activity.status || ''))
+ .sort(
+ (a, b) =>
+ new Date(a.due_at || a.scheduled_at || 0).getTime() -
+ new Date(b.due_at || b.scheduled_at || 0).getTime(),
+ ),
+ [activities],
+ );
+
+ const metrics = React.useMemo(() => {
+ const now = new Date();
+ const weekFromNow = new Date();
+ weekFromNow.setDate(now.getDate() + 7);
+
+ const pipelineValue = openDeals.reduce(
+ (sum, deal) => sum + Number(deal.amount || 0),
+ 0,
+ );
+ const dueThisWeek = plannedActivities.filter((activity) => {
+ const due = new Date(activity.due_at || activity.scheduled_at || 0);
+ return due >= now && due <= weekFromNow;
+ }).length;
+ const overdue = plannedActivities.filter((activity) => {
+ const due = new Date(activity.due_at || activity.scheduled_at || 0);
+ return due < now;
+ }).length;
+ const ownedDeals = deals.filter((deal) => deal.owner?.id === currentUser?.id).length;
+
+ return {
+ pipelineValue,
+ openDealCount: openDeals.length,
+ dueThisWeek,
+ overdue,
+ ownedDeals,
+ };
+ }, [currentUser?.id, deals, openDeals, plannedActivities]);
+
+ const handleFieldChange = (
+ event: React.ChangeEvent,
+ ) => {
+ const { name, value, type } = event.target;
+ const checked = 'checked' in event.target ? event.target.checked : false;
+
+ setForm((current) => ({
+ ...current,
+ [name]: type === 'checkbox' ? checked : value,
+ }));
+ };
+
+ const handleDealSelect = (dealId: string) => {
+ setSelectedDealId(dealId);
+ setForm((current) => ({ ...current, dealId }));
+ setSuccessMessage('');
+ };
+
+ const handleSubmit = async (event: React.FormEvent) => {
+ event.preventDefault();
+ setErrorMessage('');
+ setSuccessMessage('');
+
+ if (!form.dealId) {
+ setErrorMessage('Choose a deal before scheduling a follow-up.');
+ return;
+ }
+
+ if (!form.subject.trim()) {
+ setErrorMessage('Add a clear subject so the follow-up is actionable.');
+ return;
+ }
+
+ if (!form.due_at) {
+ setErrorMessage('Choose when the follow-up is due.');
+ return;
+ }
+
+ const payload = {
+ ...form,
+ subject: form.subject.trim(),
+ details: form.details.trim(),
+ };
+
+ setSubmitting(true);
+
+ try {
+ await axios.post('/sales-workflow/follow-up', payload);
+ const dealName = deals.find((deal) => deal.id === form.dealId)?.name || 'the deal';
+ setSuccessMessage(`Follow-up scheduled for ${dealName}.`);
+ setForm((current) => ({
+ ...current,
+ due_at: defaultDueAt(),
+ subject: '',
+ details: '',
+ }));
+ await loadData();
+ } catch (error) {
+ console.error('Failed to schedule follow-up', { payload, error });
+ setErrorMessage(getApiErrorMessage(error));
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ const upcomingForSelectedDeal = plannedActivities.filter(
+ (activity) => activity.deal?.id === selectedDeal?.id,
+ );
+
+ return (
+ <>
+
+ {getPageTitle('Sales Command Center')}
+
+
+
+ loadData().then()}
+ disabled={loading}
+ />
+
+
+
+
+
+
+
+
+ Pipeline visibility + follow-ups
+
+
+ Know what is moving, who owns it, and what needs follow-up next.
+
+
+ A focused sales workspace layered on top of your existing Leads, Deals,
+ Contacts, Companies, and Activities data.
+
+
+
+
Rep focus
+
+ {metrics.dueThisWeek} follow-ups due this week
+
+
+ {metrics.overdue} overdue · {metrics.ownedDeals} owned by you
+
+
+
+
+
+ {errorMessage}
+
+ )}
+ {successMessage && (
+
+ {successMessage}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Pipeline board
+
+ Grouped by stage when available, with forecast fallback.
+
+
+
+
+ Loading the pipeline...
+
+ ) : pipelineColumns.length === 0 ? (
+
+
No deals yet
+
+ Create your first deal, then schedule follow-ups from this workspace.
+
+
+
+ {pipelineColumns.map((column) => {
+ const columnValue = column.deals.reduce(
+ (sum, deal) => sum + Number(deal.amount || 0),
+ 0,
+ );
+
+ return (
+
+
+
+
{column.label}
+
+ {column.deals.length} deals · {formatCurrency(columnValue)}
+
+
+
+
+ {column.deals.map((deal) => {
+ const isSelected = selectedDeal?.id === deal.id;
+ return (
+
+ );
+ })}
+
+
+ );
+ })}
+
+
+
+
+
+
Next follow-ups
+
+ Planned calls, emails, meetings, demos, notes, and tasks.
+
+
+
+
+ No planned follow-ups. Select a deal and schedule one to keep momentum.
+
+ ) : (
+
+ {plannedActivities.slice(0, 8).map((activity) => (
+
+ ))}
+
+
+
+
+
+
+
{label}
+
{value}
+
{helper}
+
+
+
+ {label}
+ {value}
+
+);
+
+SalesCommandCenter.getLayout = function getLayout(page: ReactElement) {
+ return {page};
+};
+
+export default SalesCommandCenter;
diff --git a/permissions-page-screenshot.png b/permissions-page-screenshot.png
new file mode 100644
index 0000000..9d2d8f0
Binary files /dev/null and b/permissions-page-screenshot.png differ