Repository: ballerine-io/ballerine
Pull request #3313: feat: demo mock dashboard
Author: login: r4zendev
Created: 2025-05-20T09:18:32Z | Merged: 2025-05-20T10:42:30Z

<img width="866" alt="image" src="https://github.com/user-attachments/assets/7ee6c8d0-5522-4d9b-a5f4-57b63f972227" />
<img width="838" alt="image" src="https://github.com/user-attachments/assets/41003117-8b16-4053-b2e9-3973e119299c" />
<img width="852" alt="image" src="https://github.com/user-attachments/assets/9e227274-854c-4c57-a8b6-77bb3354b4f7" />
<img width="850" alt="image" src="https://github.com/user-attachments/assets/1e8f2d27-ade0-442f-8028-2b058599e762" />


<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a new "Analytics Dashboard" layout for select users, featuring sections for portfolio status, operational overview, dynamic metrics, risk and alerts, and portfolio risk statistics.
  - Added new dashboard components: Current Portfolio Status, Operational Overview, and Risk and Alerts Overview, each displaying detailed statistics and charts.
- **Enhancements**
  - Stats cards now support trend indicators, alert icons, and flexible value formatting.
  - Pie chart cards can now have customizable title alignment.
- **Other**
  - Updated internal feature flag and schema to support conditional dashboard display.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts
index 30392a4b93..484c3c7ac3 100644
--- a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts
+++ b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts
@@ -176,6 +176,7 @@ export const useHomeLogic = () => {
     avatarUrl,
     locale,
 
+    shouldShowDashboardV1: !!customer?.features?.mockDashboardV1,
     isMerchantMonitoringEnabled,
     isOngoingMonitoringEnabled,
     isCasesOnboardingEnabled,
diff --git a/apps/backoffice-v2/src/domains/customer/fetchers.ts b/apps/backoffice-v2/src/domains/customer/fetchers.ts
index b73ea08b77..ffe04fea53 100644
--- a/apps/backoffice-v2/src/domains/customer/fetchers.ts
+++ b/apps/backoffice-v2/src/domains/customer/fetchers.ts
@@ -31,6 +31,7 @@ const CustomerSchema = z.object({
         .object({ enabled: z.boolean().default(false), options: createBusinessReportOptions })
         .optional(),
       isDocumentOcrEnabled: z.boolean().default(false).optional(),
+      mockDashboardV1: z.boolean().default(false).optional(),
     })
     .nullable(),
   config: z
diff --git a/apps/backoffice-v2/src/pages/Home/Home.page.tsx b/apps/backoffice-v2/src/pages/Home/Home.page.tsx
index a79210dd76..3692d2788d 100644
--- a/apps/backoffice-v2/src/pages/Home/Home.page.tsx
+++ b/apps/backoffice-v2/src/pages/Home/Home.page.tsx
@@ -3,9 +3,12 @@ import { FunctionComponent } from 'react';
 import { FullScreenLoader } from '@/common/components/molecules/FullScreenLoader/FullScreenLoader';
 import { DemoAccessWrapper } from '@/common/components/organisms/DemoAccessWrapper/DemoAccessWrapper';
 import { useHomeLogic } from '@/common/hooks/useHomeLogic/useHomeLogic';
+import { CurrentPortfolioStatus } from './components/CurrentPortfolioStatus/CurrentPortfolioStatus';
 import { DynamicMetricsSection } from './components/DynamicMetricsSection/DynamicMetricsSection';
 import { OnboardingCasesRiskAnalytics } from './components/OnboardingCasesRiskAnalytics/OnboardingCasesRiskAnalytics';
+import { OperationalOverviewSection } from './components/OperationalOverviewSection/OperationalOverviewSection';
 import { PortfolioRiskStatistics } from './components/PortfolioRiskStatistics/PortfolioRiskStatistics';
+import { RiskAndAlertsOverviewSection } from './components/RiskAndAlertsOverviewSection/RiskAndAlertsOverviewSection';
 import { StaticMetricsSection } from './components/StaticMetricsSection/StaticMetricsSection';
 import { WelcomeSvg } from './components/WelcomeSvg/WelcomeSvg';
 
@@ -16,6 +19,7 @@ export const Home: FunctionComponent = () => {
     avatarUrl,
     locale,
 
+    shouldShowDashboardV1,
     isMerchantMonitoringEnabled,
     isOngoingMonitoringEnabled,
     isCasesOnboardingEnabled,
@@ -68,6 +72,56 @@ export const Home: FunctionComponent = () => {
     );
   }
 
+  if (shouldShowDashboardV1) {
+    return (
+      <div className={`space-y-10 p-10`}>
+        <div className="space-y-4">
+          <h1 className="text-3xl font-semibold">Analytics Dashboard</h1>
+          <p className="">
+            Get an overview of your portfolio&apos;s activity, risk levels, monitoring alerts, and
+            case analytics.
+          </p>
+        </div>
+
+        <div className="flex flex-col space-y-8">
+          <CurrentPortfolioStatus />
+
+          <OperationalOverviewSection from={mmFrom} to={mmTo} setDate={() => {}} />
+
+          <RiskAndAlertsOverviewSection />
+
+          <DynamicMetricsSection
+            locale={locale}
+            from={mmFrom}
+            to={mmTo}
+            setDate={() => {}}
+            isMerchantMonitoringEnabled={true}
+            isOngoingMonitoringEnabled={true}
+            addedMerchantsCount={13}
+            removedMerchantsCount={5}
+          />
+
+          <PortfolioRiskStatistics
+            from={mmFrom}
+            to={mmTo}
+            riskLevelCounts={{ low: 10, medium: 30, high: 25, critical: 15 }}
+            violationCounts={[
+              { name: 'Drop Shipping', id: 'drop-shipping', count: 15 },
+              { name: 'IP Rights Infringement', id: 'ip-rights-infringement', count: 12 },
+              {
+                name: 'Pharmaceuticals/Prescription Drugs',
+                id: 'pharmaceuticals-prescription-drugs',
+                count: 10,
+              },
+              { name: 'Gambling', id: 'gambling', count: 8 },
+              { name: 'Marijuana', id: 'marijuana', count: 4 },
+            ]}
+          />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <DemoAccessWrapper firstName={firstName} fullName={fullName} avatarUrl={avatarUrl}>
       <div className={`space-y-10 p-10 pt-0`}>
diff --git a/apps/backoffice-v2/src/pages/Home/components/CurrentPortfolioStatus/CurrentPortfolioStatus.tsx b/apps/backoffice-v2/src/pages/Home/components/CurrentPortfolioStatus/CurrentPortfolioStatus.tsx
new file mode 100644
index 0000000000..48a6794a3a
--- /dev/null
+++ b/apps/backoffice-v2/src/pages/Home/components/CurrentPortfolioStatus/CurrentPortfolioStatus.tsx
@@ -0,0 +1,156 @@
+import { ReactNode } from 'react';
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { Card } from '@/common/components/atoms/Card/Card';
+import { CardHeader } from '@/common/components/atoms/Card/Card.Header';
+import { ctw } from '@/common/utils/ctw/ctw';
+import { StatsCard } from '@/pages/Home/components/StatsCard/StatsCard';
+
+export const CurrentPortfolioStatus = () => {
+  // if (!isMerchantMonitoringEnabled && !isOngoingMonitoringEnabled) {
+  //   return null;
+  // }
+
+  const activeCasesByStageData = [
+    { stage: 'Collection In Progress', count: 76 },
+    { stage: 'Awaiting 3rd Party Data', count: 17 },
+    { stage: 'Awaiting ID Verification', count: 1 },
+    { stage: 'Revisions', count: 34 },
+    { stage: 'Manual Review', count: 41 },
+  ];
+
+  return (
+    <>
+      <h3 className={'text-xl font-medium'}>Current Portfolio Status</h3>
+
+      <div className="grid grid-cols-12 gap-6">
+        <div className="col-span-7 grid grid-cols-3 gap-6">
+          <StatsCard
+            value={628}
+            title="Overall Active Onboarding Cases "
+            description="All time cases that haven’t reached a decision"
+          />
+
+          <StatsCard
+            value={1021}
+            title="Overall Active Merchants in Portfolio"
+            description="Active merchants in your portfolio"
+          />
+
+          <StatsCard
+            value={25}
+            title="Overall Active Monitoring Alerts"
+            description="Cases that haven’t reached a decision, in selected time range"
+          />
+
+          <div className="col-span-3 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
+            <h3 className="mb-2 text-lg font-medium">Active Cases by Onboarding Stage</h3>
+            <p className="mb-4 text-sm text-gray-500">
+              Number of cases that haven't reached a final decision, by onboarding stage.
+            </p>
+            <div className="h-[200px] w-full">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart
+                  data={activeCasesByStageData}
+                  layout="horizontal"
+                  margin={{ top: 0, right: 0, left: 0, bottom: -40 }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis
+                    type="category"
+                    dataKey="stage"
+                    tick={{ fontSize: 11 }}
+                    height={70}
+                    interval={0}
+                  />
+                  <YAxis type="number" />
+                  <Tooltip />
+                  <Bar
+                    dataKey="count"
+                    name="Active Cases"
+                    fill="#4F46E5"
+                    radius={[4, 4, 0, 0]}
+                    barSize={35}
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        </div>
+
+        <div className="col-span-5 w-full">
+          <Card
+            className="border border-wp-primary"
+            style={{
+              background:
+                'linear-gradient(45deg, rgba(113, 100, 255, 0.22) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 92%)',
+            }}
+          >
+            <CardHeader className="flex-row items-center gap-2 pb-0">
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle cx="12" cy="12" r="12" fill="#968FDE" />
+                <path
+                  d="M10.6248 14.3332C10.5653 14.1025 10.445 13.8919 10.2765 13.7234C10.1081 13.5549 9.8975 13.4347 9.66679 13.3752L5.57679 12.3205C5.50701 12.3007 5.4456 12.2587 5.40186 12.2008C5.35813 12.1429 5.33447 12.0724 5.33447 11.9998C5.33447 11.9273 5.35813 11.8567 5.40186 11.7989C5.4456 11.741 5.50701 11.699 5.57679 11.6792L9.66679 10.6238C9.89742 10.5644 10.1079 10.4442 10.2764 10.2759C10.4449 10.1075 10.5652 9.8971 10.6248 9.66651L11.6795 5.57651C11.6991 5.50645 11.741 5.44474 11.799 5.40077C11.857 5.35681 11.9277 5.33301 12.0005 5.33301C12.0732 5.33301 12.144 5.35681 12.2019 5.40077C12.2599 5.44474 12.3019 5.50645 12.3215 5.57651L13.3755 9.66651C13.435 9.89722 13.5552 10.1078 13.7237 10.2763C13.8922 10.4447 14.1027 10.565 14.3335 10.6245L18.4235 11.6785C18.4938 11.6979 18.5558 11.7398 18.6 11.7979C18.6442 11.8559 18.6682 11.9269 18.6682 11.9998C18.6682 12.0728 18.6442 12.1437 18.6 12.2018C18.5558 12.2598 18.4938 12.3018 18.4235 12.3212L14.3335 13.3752C14.1027 13.4347 13.8922 13.5549 13.7237 13.7234C13.5552 13.8919 13.435 14.1025 13.3755 14.3332L12.3208 18.4232C12.3012 18.4932 12.2592 18.5549 12.2012 18.5989C12.1433 18.6429 12.0725 18.6667 11.9998 18.6667C11.927 18.6667 11.8563 18.6429 11.7983 18.5989C11.7404 18.5549 11.6984 18.4932 11.6788 18.4232L10.6248 14.3332Z"
+                  fill="white"
+                />
+              </svg>
+
+              <h3 className="!mt-0 text-lg font-medium">90 Day AI Insights</h3>
+            </CardHeader>
+
+            <div className="flex flex-col gap-4 p-3">
+              <InsightCard>
+                <h4 className="font-medium">Manual Review Under-Assigned</h4>
+                <p className="text-sm">21 of 41 reviews are unassigned.</p>
+              </InsightCard>
+
+              <InsightCard>
+                <h4 className="font-medium">Slower Intake Flow</h4>
+                <p className="text-sm">Collection-to-review time up 40% vs. last week.</p>
+              </InsightCard>
+
+              <InsightCard>
+                <h4 className="font-medium">Faster Revision Handling</h4>
+                <p className="text-sm">Revisions reviewed 20% faster vs. last month.</p>
+              </InsightCard>
+
+              <InsightCard>
+                <h4 className="font-medium">Review Load Imbalance</h4>
+                <p className="text-sm">Nitzan handles 45% of assigned currently active reviews.</p>
+              </InsightCard>
+
+              <InsightCard>
+                <h4 className="font-medium">Early Stage Pile-Up</h4>
+                <p className="text-sm">
+                  91 cases (40%) are still in collection or waiting on data.
+                </p>
+              </InsightCard>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const InsightCard = ({ children, className }: { children: ReactNode; className?: string }) => {
+  return (
+    <div className={ctw('relative overflow-hidden rounded-md px-6 py-4', className)}>
+      {children}
+
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'linear-gradient(75deg, rgba(113, 100, 255, 0.22) 0%,  rgba(88, 78, 197, 0.22) 92%)',
+        }}
+      />
+    </div>
+  );
+};
diff --git a/apps/backoffice-v2/src/pages/Home/components/DynamicMetricsSection/DynamicMetricsSection.tsx b/apps/backoffice-v2/src/pages/Home/components/DynamicMetricsSection/DynamicMetricsSection.tsx
index 011c817866..b05ebebb97 100644
--- a/apps/backoffice-v2/src/pages/Home/components/DynamicMetricsSection/DynamicMetricsSection.tsx
+++ b/apps/backoffice-v2/src/pages/Home/components/DynamicMetricsSection/DynamicMetricsSection.tsx
@@ -61,7 +61,7 @@ export const DynamicMetricsSection = ({
               from: from ?? undefined,
               to: to ?? undefined,
             })}`}
-            count={addedMerchantsCount}
+            value={addedMerchantsCount}
             title="New Merchants"
             description="Merchants added within the selected time range"
           />
@@ -69,7 +69,7 @@ export const DynamicMetricsSection = ({
 
         {isOngoingMonitoringEnabled && (
           <StatsCard
-            count={removedMerchantsCount}
+            value={removedMerchantsCount}
             title="Merchants Removed"
             description="Merchants removed from monitoring within the selected time range"
           />
diff --git a/apps/backoffice-v2/src/pages/Home/components/OperationalOverviewSection/OperationalOverviewSection.tsx b/apps/backoffice-v2/src/pages/Home/components/OperationalOverviewSection/OperationalOverviewSection.tsx
new file mode 100644
index 0000000000..da9a0794e4
--- /dev/null
+++ b/apps/backoffice-v2/src/pages/Home/components/OperationalOverviewSection/OperationalOverviewSection.tsx
@@ -0,0 +1,308 @@
+import { Separator } from '@radix-ui/react-separator';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  LabelList,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+} from 'recharts';
+
+import { Card } from '@/common/components/atoms/Card/Card';
+import { CardContent } from '@/common/components/atoms/Card/Card.Content';
+import { CardDescription } from '@/common/components/atoms/Card/Card.Description';
+import { CardHeader } from '@/common/components/atoms/Card/Card.Header';
+import { CardTitle } from '@/common/components/atoms/Card/Card.Title';
+import { DateRangePicker } from '@/common/components/organisms/DateRangePicker/DateRangePicker';
+import { useHomeLogic } from '@/common/hooks/useHomeLogic/useHomeLogic';
+import { StatsCard } from '@/pages/Home/components/StatsCard/StatsCard';
+import { CasePieChart } from '../CasePieChart/CasePieChart';
+
+export const OperationalOverviewSection = ({
+  from,
+  to,
+  setDate,
+}: {
+  from: ReturnType<typeof useHomeLogic>['mmFrom'];
+  to: ReturnType<typeof useHomeLogic>['mmTo'];
+  setDate: ReturnType<typeof useHomeLogic>['setMMDate'];
+}) => {
+  const caseByStatusData = [
+    { status: 'Collection In Progress', count: 76 },
+    { status: 'Manual Review', count: 41 },
+    { status: 'Approved', count: 109 },
+    { status: 'Revisions', count: 34 },
+    { status: 'Rejected', count: 82 },
+  ];
+
+  const totalActiveCases = 228;
+  const manualReviewCasesAssignmentData = {
+    unassigned: {
+      count: 21,
+    },
+    assigned: {
+      count: 20,
+      reviewers: [
+        { name: 'Nitzan Guy', count: 9 },
+        { name: 'Alon Peretz', count: 8 },
+        { name: 'Adi Nir', count: 3 },
+      ],
+    },
+  };
+
+  return (
+    <>
+      <Separator className="mb-6 h-[1px] w-full bg-gray-300" />
+
+      <div className="mb-6 flex items-center justify-between">
+        <h3 className="text-xl font-medium text-gray-900">Operational Overview</h3>
+
+        <DateRangePicker
+          toDate={new Date()}
+          value={{
+            from: from ? new Date(from) : undefined,
+            to: to ? new Date(to) : undefined,
+          }}
+          onChange={setDate}
+          className="justify-end"
+        />
+      </div>
+
+      <div className="mb-8 grid grid-cols-3 gap-6">
+        <StatsCard
+          value={'38.4%'}
+          title="Merchant Onboarding Conversion Rate"
+          description="Based on application to decision data in selected time range"
+          className="border border-purple-300"
+          style={{
+            background:
+              'linear-gradient(30deg, rgba(198, 193, 248, 0.44) 0%, rgba(255, 255, 255, 1) 52%',
+          }}
+          tendency={{
+            kind: 'positive',
+            direction: 'up',
+            value: '25%',
+          }}
+        />
+
+        <StatsCard
+          value={'27 hr'}
+          title="AVG. Time to Onboarded Merchants"
+          description="Based on application to decision data in selected time range"
+          className="border border-pink-300"
+          style={{
+            background:
+              'linear-gradient(30deg, rgba(242, 177, 255, 0.44) 0%, rgba(255, 255, 255, 1) 50%',
+          }}
+          tendency={{
+            kind: 'neutral',
+            direction: 'up',
+            value: '10%',
+          }}
+        />
+
+        <StatsCard
+          value={'$24.3'}
+          title="AVG. Vendor Cost per Onboarding"
+          description="Based on vendor and checks cost in selected time range"
+          className="border border-blue-300"
+          style={{
+            background:
+              'linear-gradient(30deg, rgba(174, 213, 255, 0.44) 0%, rgba(255, 255, 255, 1) 50%',
+          }}
+          tendency={{
+            kind: 'negative',
+            direction: 'up',
+            value: '15%',
+          }}
+        />
+
+        <Card className="mx-auto w-full max-w-3xl">
+          <CardHeader>
+            <CardTitle className="text-xl font-medium">New Cases vs. Completed Cases</CardTitle>
+            <CardDescription className="text-muted-foreground">
+              Number of cases that haven&apos;t reached a final decision, by Status, in selected
+              time range
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="h-[400px] w-full">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart
+                  data={[
+                    { period: 'APR 1-7', completed: 35, new: 10 },
+                    { period: 'APR 8-13', completed: 27, new: 6 },
+                    { period: 'APR 14-21', completed: 20, new: 9 },
+                    { period: 'APR 22-28', completed: 7, new: 13 },
+                    { period: 'APR 28-MAY 1', completed: 24, new: 5 },
+                  ]}
+                  margin={{
+                    top: 20,
+                    right: 30,
+                    left: 20,
+                    bottom: 20,
+                  }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                  <XAxis dataKey="period" />
+                  <Tooltip
+                    formatter={(value, name) => {
+                      return [value, name === 'completed' ? 'Completed Cases' : 'New Cases'];
+                    }}
+                  />
+                  <Bar dataKey="completed" stackId="a" fill="#6366f1" radius={[0, 0, 4, 4]}>
+                    <LabelList
+                      dataKey="completed"
+                      position="inside"
+                      formatter={value => value}
+                      style={{ fill: 'white', fontSize: '12px' }}
+                    />
+                  </Bar>
+                  <Bar dataKey="new" stackId="a" fill="#3b82f6" radius={[4, 4, 0, 0]}>
+                    <LabelList
+                      dataKey="new"
+                      position="inside"
+                      formatter={value => value}
+                      style={{ fill: 'white', fontSize: '12px' }}
+                    />
+                  </Bar>
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-5 shadow-sm">
+          <h3 className="mb-2 text-xl font-medium text-gray-900">All Cases by Status</h3>
+          <p className="mb-4 text-sm text-gray-500">Distribution of all active cases by status</p>
+          <div className={'flex flex-col items-center space-y-4 pt-3'}>
+            <CasePieChart
+              totalValue={totalActiveCases}
+              data={caseByStatusData.map(item => ({
+                status: item.status,
+                count: item.count,
+              }))}
+              getDefinition={status => {
+                const statusMap = {
+                  'Collection In Progress': { color: '#936AF6', text: 'Collection In Progress' },
+                  'Manual Review': { color: '#007AFF', text: 'Manual Review' },
+                  Approved: { color: '#4CAF50', text: 'Approved' },
+                  Revisions: { color: '#FFB74D', text: 'Revisions' },
+                  Rejected: { color: '#F44336', text: 'Rejected' },
+                };
+                return statusMap[status] || { color: '#65AFFF', text: status };
+              }}
+              nameKey="status"
+              valueKey="count"
+              config={caseByStatusData.reduce((acc, curr) => {
+                const statusMap = {
+                  'Collection In Progress': { color: '#936AF6' },
+                  'Manual Review': { color: '#007AFF' },
+                  Approved: { color: '#4CAF50' },
+                  Revisions: { color: '#FFB74D' },
+                  Rejected: { color: '#F44336' },
+                };
+
+                return {
+                  ...acc,
+                  [curr.status]: {
+                    label: curr.status,
+                    color: statusMap[curr.status]?.color || '#65AFFF',
+                  },
+                };
+              }, {})}
+            />
+          </div>
+        </div>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-5 shadow-sm">
+          <h3 className="mb-2 text-xl font-medium text-gray-900">Overall Active Cases</h3>
+          <p className="mb-4 text-sm text-gray-500">
+            Cases that haven't reached a decision, in selected time range
+          </p>
+          <div className="mb-6 flex items-center justify-center">
+            <span className="text-4xl font-semibold text-indigo-600">{totalActiveCases}</span>
+          </div>
+
+          <div className="mt-6">
+            <h4 className="mb-3 font-medium text-gray-700">Manual Review Cases</h4>
+            <div className="mb-4 grid grid-cols-2 gap-3">
+              <div className="rounded-md bg-gray-50 p-3">
+                <p className="text-sm text-gray-500">Unassigned</p>
+                <p className="text-xl font-medium text-gray-900">
+                  {manualReviewCasesAssignmentData.unassigned.count}
+                </p>
+              </div>
+              <div className="rounded-md bg-gray-50 p-3">
+                <p className="text-sm text-gray-500">Assigned</p>
+                <p className="text-xl font-medium text-gray-900">
+                  {manualReviewCasesAssignmentData.assigned.count}
+                </p>
+              </div>
+            </div>
+
+            <h5 className="mb-2 text-sm font-medium text-gray-700">Assignment breakdown:</h5>
+            <div className="space-y-2">
+              {manualReviewCasesAssignmentData.assigned.reviewers.map((reviewer, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-between rounded-md bg-gray-50 px-3 py-2"
+                >
+                  <span className="text-sm text-gray-700">{reviewer.name}</span>
+                  <span className="rounded bg-indigo-100 px-2 py-1 text-sm font-medium text-indigo-800">
+                    {reviewer.count}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <StatsCard
+          value={'33 hr 4 min'}
+          title="Overall Onboarding Time"
+          description="Time from application to final decision, in selected time range"
+          tendency={{
+            kind: 'negative',
+            direction: 'up',
+            value: '25%',
+          }}
+        />
+
+        <StatsCard
+          value={'3 hr 21 min'}
+          title="AVG. Time from Review to Decision"
+          description="Time from Manual Review readiness to final decision, in selected time range"
+          tendency={{
+            kind: 'neutral',
+            direction: 'up',
+            value: '10%',
+          }}
+        />
+
+        <StatsCard
+          value={'16 hr 32 min'}
+          title="AVG. Time from Collection to Review"
+          description="Time from collection flow initiation to submission, in selected time range"
+          tendency={{
+            kind: 'negative',
+            direction: 'up',
+            value: '40%',
+          }}
+        />
+
+        <StatsCard
+          value={'12 hr 7 min'}
+          title="AVG. Time from Revisions to Review"
+          description="Time from asking for revisions until provided, in selected time range"
+          tendency={{
+            kind: 'positive',
+            direction: 'down',
+            value: '20%',
+          }}
+        />
+      </div>
+    </>
+  );
+};
diff --git a/apps/backoffice-v2/src/pages/Home/components/PieChartCard/PieChartCard.tsx b/apps/backoffice-v2/src/pages/Home/components/PieChartCard/PieChartCard.tsx
index 7ddd93c1e4..1564fe45a8 100644
--- a/apps/backoffice-v2/src/pages/Home/components/PieChartCard/PieChartCard.tsx
+++ b/apps/backoffice-v2/src/pages/Home/components/PieChartCard/PieChartCard.tsx
@@ -1,15 +1,19 @@
 import { Card } from '@/common/components/atoms/Card/Card';
 import { CardContent } from '@/common/components/atoms/Card/Card.Content';
 import { CardHeader } from '@/common/components/atoms/Card/Card.Header';
+import { ctw } from '@/common/utils/ctw/ctw';
 import { CasePieChart, CasePieChartProps } from '../CasePieChart/CasePieChart';
 
 export const PieChartCard = ({
   title,
+  centeredTitle = true,
   ...pieChartProps
-}: CasePieChartProps & { title: string }) => {
+}: CasePieChartProps & { title: string; centeredTitle?: boolean }) => {
   return (
     <Card className={'flex h-full flex-col px-3'}>
-      <CardHeader className={'pb-1 text-center font-bold'}>{title}</CardHeader>
+      <CardHeader className={ctw('pb-1 font-bold', centeredTitle && 'text-center')}>
+        {title}
+      </CardHeader>
       <CardContent>
         <div className={'flex flex-col items-center space-y-4 pt-3'}>
           <CasePieChart {...pieChartProps} />
diff --git a/apps/backoffice-v2/src/pages/Home/components/RiskAndAlertsOverviewSection/RiskAndAlertsOverviewSection.tsx b/apps/backoffice-v2/src/pages/Home/components/RiskAndAlertsOverviewSection/RiskAndAlertsOverviewSection.tsx
new file mode 100644
index 0000000000..9160f6416d
--- /dev/null
+++ b/apps/backoffice-v2/src/pages/Home/components/RiskAndAlertsOverviewSection/RiskAndAlertsOverviewSection.tsx
@@ -0,0 +1,113 @@
+import { StatsCard } from '@/pages/Home/components/StatsCard/StatsCard';
+import { PieChartCard } from '../PieChartCard/PieChartCard';
+
+export const RiskAndAlertsOverviewSection = () => {
+  const activeCasesByRiskLevelData = [
+    { riskLevel: 'Low', count: 76 },
+    { riskLevel: 'Medium', count: 17 },
+    { riskLevel: 'High', count: 32 },
+    { riskLevel: 'Critical', count: 34 },
+  ];
+  const approvedCasesByRiskLevelData = [
+    { riskLevel: 'Low', count: 45 },
+    { riskLevel: 'Medium', count: 12 },
+    { riskLevel: 'High', count: 8 },
+    { riskLevel: 'Critical', count: 3 },
+  ];
+
+  return (
+    <>
+      <h3 className={'text-xl font-medium'}>Risk and Alerts Overview</h3>
+
+      <div className="grid grid-cols-5 gap-6">
+        <PieChartCard
+          title="Active Cases by Risk Level"
+          centeredTitle={false}
+          data={activeCasesByRiskLevelData}
+          getDefinition={riskLevel => {
+            const riskLevelMap = {
+              Low: { color: '#4CAF50', text: 'Low' },
+              Medium: { color: '#FFB74D', text: 'Medium' },
+              High: { color: '#FF9800', text: 'High' },
+              Critical: { color: '#F44336', text: 'Critical' },
+            };
+            return riskLevelMap[riskLevel] || { color: '#65AFFF', text: riskLevel };
+          }}
+          nameKey="riskLevel"
+          config={activeCasesByRiskLevelData.reduce((acc, curr) => {
+            const riskLevelMap = {
+              Low: { color: '#4CAF50' },
+              Medium: { color: '#FFB74D' },
+              High: { color: '#FF9800' },
+              Critical: { color: '#F44336' },
+            };
+
+            return {
+              ...acc,
+              [curr.riskLevel]: {
+                label: curr.riskLevel,
+                color: riskLevelMap[curr.riskLevel]?.color || '#65AFFF',
+              },
+            };
+          }, {})}
+        />
+
+        <PieChartCard
+          title="Approved Cases by Risk Level"
+          centeredTitle={false}
+          data={approvedCasesByRiskLevelData}
+          getDefinition={riskLevel => {
+            const riskLevelMap = {
+              Low: { color: '#4CAF50', text: 'Low' },
+              Medium: { color: '#FFB74D', text: 'Medium' },
+              High: { color: '#FF9800', text: 'High' },
+              Critical: { color: '#F44336', text: 'Critical' },
+            };
+            return riskLevelMap[riskLevel] || { color: '#65AFFF', text: riskLevel };
+          }}
+          nameKey="riskLevel"
+          config={approvedCasesByRiskLevelData.reduce((acc, curr) => {
+            const riskLevelMap = {
+              Low: { color: '#4CAF50' },
+              Medium: { color: '#FFB74D' },
+              High: { color: '#FF9800' },
+              Critical: { color: '#F44336' },
+            };
+
+            return {
+              ...acc,
+              [curr.riskLevel]: {
+                label: curr.riskLevel,
+                color: riskLevelMap[curr.riskLevel]?.color || '#65AFFF',
+              },
+            };
+          }, {})}
+        />
+
+        <StatsCard
+          centered={true}
+          alert={true}
+          title="Unresolved Individuals Sanction Screening Alerts"
+          description="Currently unresolved sanctions screening matches"
+          value={7}
+        />
+
+        <StatsCard
+          centered={true}
+          alert={true}
+          title="Unresolved WP Ongoing Monitoring Alerts"
+          description="Currently unresolved web presence ongoing monitoring alerts"
+          value={12}
+        />
+
+        <StatsCard
+          centered={true}
+          alert={true}
+          title="Unresolved Transaction Monitoring Alerts"
+          description="Currently unresolved transaction monitoring alerts"
+          value={28}
+        />
+      </div>
+    </>
+  );
+};
diff --git a/apps/backoffice-v2/src/pages/Home/components/StaticMetricsSection/StaticMetricsSection.tsx b/apps/backoffice-v2/src/pages/Home/components/StaticMetricsSection/StaticMetricsSection.tsx
index 2d5c8e474b..a0e55a7e44 100644
--- a/apps/backoffice-v2/src/pages/Home/components/StaticMetricsSection/StaticMetricsSection.tsx
+++ b/apps/backoffice-v2/src/pages/Home/components/StaticMetricsSection/StaticMetricsSection.tsx
@@ -34,7 +34,7 @@ export const StaticMetricsSection = ({
     <div className="grid grid-cols-4 gap-6 2xl:grid-cols-6">
       {isOngoingMonitoringEnabled && (
         <StatsCard
-          count={totalActiveMerchants}
+          value={totalActiveMerchants}
           centered={true}
           title="Total Active Merchants"
           description="Merchants currently subscribed to monitoring"
diff --git a/apps/backoffice-v2/src/pages/Home/components/StatsCard/StatsCard.tsx b/apps/backoffice-v2/src/pages/Home/components/StatsCard/StatsCard.tsx
index d02be97420..17c3214ed7 100644
--- a/apps/backoffice-v2/src/pages/Home/components/StatsCard/StatsCard.tsx
+++ b/apps/backoffice-v2/src/pages/Home/components/StatsCard/StatsCard.tsx
@@ -1,3 +1,4 @@
+import { ArrowDownRightIcon, ArrowUpRightIcon } from 'lucide-react';
 import type { FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -5,25 +6,38 @@ import { Card } from '@/common/components/atoms/Card/Card';
 import { CardContent } from '@/common/components/atoms/Card/Card.Content';
 import { CardHeader } from '@/common/components/atoms/Card/Card.Header';
 import { ctw } from '@/common/utils/ctw/ctw';
+import { WarningSvg } from '@/common/components/atoms/icons';
+import { WarningFilledSvg } from '@ballerine/ui';
 
 type StatsCardProps = {
   prefix?: string;
   href?: string;
-  count: number;
+  value: number | string;
   title: string;
   description: string;
   className?: string;
   valueClassName?: string;
   centered?: boolean;
+  style?: React.CSSProperties;
+  alert?: boolean;
+  tendency?: {
+    value: number | string;
+    direction: 'up' | 'down';
+    kind: 'positive' | 'negative' | 'neutral';
+  };
 };
 
 export const StatsCard: FunctionComponent<StatsCardProps> = ({
   prefix = '',
-  count,
+  value,
   title,
   description,
   href,
   centered,
+  tendency,
+  className,
+  style,
+  alert,
 }) => {
   const Content = (
     <>
@@ -33,12 +47,41 @@ export const StatsCard: FunctionComponent<StatsCardProps> = ({
           centered && 'flex min-h-60 flex-col items-center justify-between',
         )}
       >
-        <CardHeader className={ctw('p-0 font-medium', centered && 'text-center')}>
+        <CardHeader
+          className={ctw(
+            'flex-row justify-between gap-4 p-0 font-medium',
+            centered && 'text-center',
+          )}
+        >
           {title}
+          {tendency && (
+            <div>
+              <div
+                className={ctw(
+                  'flex items-center gap-0.5 rounded-sm px-1 py-0 text-sm font-medium',
+                  tendency.kind === 'positive' && 'bg-green-100 text-green-600',
+                  tendency.kind === 'negative' && 'bg-red-100 text-red-600',
+                  tendency.kind === 'neutral' && 'bg-gray-100 text-gray-600',
+                )}
+              >
+                <span>{tendency.value}</span>
+                {tendency.direction === 'up' ? (
+                  <ArrowUpRightIcon className="d-4" />
+                ) : (
+                  <ArrowDownRightIcon className="d-4" />
+                )}
+              </div>
+            </div>
+          )}
         </CardHeader>
-        <p className={ctw('text-3xl font-bold', centered && 'text-center text-5xl')}>
-          {count > 0 ? `${prefix}${Intl.NumberFormat('en').format(count)}` : 0}
-        </p>
+        <div className="flex items-center gap-4">
+          {alert && <WarningFilledSvg className={'mt-1 d-10'} />}
+          <p className={ctw('text-3xl font-bold', centered && 'text-center text-5xl')}>
+            {typeof value === 'number' && value > 0
+              ? `${prefix}${Intl.NumberFormat('en').format(value)}`
+              : value ?? 0}
+          </p>
+        </div>
         <p className="text-sm text-muted-foreground">{description}</p>
       </CardContent>
     </>
@@ -46,11 +89,15 @@ export const StatsCard: FunctionComponent<StatsCardProps> = ({
 
   if (href) {
     return (
-      <Card className="shadow-md">
+      <Card className={ctw('shadow-md', className)} style={style}>
         <Link to={href}>{Content}</Link>
       </Card>
     );
   }
 
-  return <Card className="shadow-md">{Content}</Card>;
+  return (
+    <Card className={ctw('shadow-md', className)} style={style}>
+      {Content}
+    </Card>
+  );
 };
diff --git a/services/workflows-service/src/customer/types.ts b/services/workflows-service/src/customer/types.ts
index 7c5bd584ef..9e4d5792e1 100644
--- a/services/workflows-service/src/customer/types.ts
+++ b/services/workflows-service/src/customer/types.ts
@@ -13,6 +13,7 @@ export type TAuthenticationConfiguration = {
 export const FEATURE_LIST = {
   ONGOING_MERCHANT_REPORT: 'ONGOING_MERCHANT_REPORT',
   DOCUMENT_OCR: 'isDocumentOcrEnabled',
+  MOCK_DASHBOARD: 'mockDashboardV1',
 } as const;
 
 export type TOngoingMerchantReportOptions = {


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 12**

<details>
<summary>🧹 Nitpick comments (6)</summary><blockquote>

<details>
<summary>apps/backoffice-v2/src/pages/Home/components/RiskAndAlertsOverviewSection/RiskAndAlertsOverviewSection.tsx (1)</summary><blockquote>

`87-93`: **Extract alert card creation to reduce repetition**

The three StatsCard components share similar props and structure. Consider extracting this to a helper function to reduce repetition.

```diff
+const AlertStatsCard = ({ title, description, value }) => (
+  <StatsCard
+    centered={true}
+    alert={true}
+    title={title}
+    description={description}
+    value={value}
+  />
+);

// Then use it like:
<AlertStatsCard
  title="Unresolved Individuals Sanction Screening Alerts"
  description="Currently unresolved sanctions screening matches"
  value={7}
/>
```


Also applies to: 95-101, 103-109

</blockquote></details>
<details>
<summary>apps/backoffice-v2/src/pages/Home/Home.page.tsx (1)</summary><blockquote>

`104-119`: **Hardcoded risk statistics in mock dashboard**

Risk statistics are hardcoded in the mock dashboard version but use actual state variables in the original implementation. Consider using the actual state values to ensure consistent behavior.

```diff
           <PortfolioRiskStatistics
             from={mmFrom}
             to={mmTo}
-            riskLevelCounts={{ low: 10, medium: 30, high: 25, critical: 15 }}
-            violationCounts={[
-              { name: 'Drop Shipping', id: 'drop-shipping', count: 15 },
-              { name: 'IP Rights Infringement', id: 'ip-rights-infringement', count: 12 },
-              {
-                name: 'Pharmaceuticals/Prescription Drugs',
-                id: 'pharmaceuticals-prescription-drugs',
-                count: 10,
-              },
-              { name: 'Gambling', id: 'gambling', count: 8 },
-              { name: 'Marijuana', id: 'marijuana', count: 4 },
-            ]}
+            riskLevelCounts={riskLevelCounts}
+            violationCounts={violationCounts}
```

</blockquote></details>
<details>
<summary>apps/backoffice-v2/src/pages/Home/components/StatsCard/StatsCard.tsx (1)</summary><blockquote>

`77-84`: **Consider locale configuration for number formatting**

The number formatting is currently hardcoded to use the 'en' locale. Consider making this configurable or using the user's browser locale for better internationalization support.

```diff
- {typeof value === 'number' && value > 0
-   ? `${prefix}${Intl.NumberFormat('en').format(value)}`
-   : value ?? 0}
+ {typeof value === 'number' && value > 0
+   ? `${prefix}${Intl.NumberFormat(navigator.language || 'en').format(value)}`
+   : value ?? 0}
```

</blockquote></details>
<details>
<summary>apps/backoffice-v2/src/pages/Home/components/CurrentPortfolioStatus/CurrentPortfolioStatus.tsx (1)</summary><blockquote>

`46-78`: **Consider accessibility improvements for the chart**

The bar chart implementation could benefit from accessibility improvements. Consider adding ARIA attributes and ensuring the chart is navigable by keyboard.

Add appropriate ARIA attributes to the chart container:

```diff
- <div className="h-[200px] w-full">
+ <div 
+   className="h-[200px] w-full" 
+   role="figure" 
+   aria-label="Bar chart showing active cases by onboarding stage"
+ >
```

Also consider adding a visually hidden table with the same data for screen readers.

</blockquote></details>
<details>
<summary>apps/backoffice-v2/src/pages/Home/components/OperationalOverviewSection/OperationalOverviewSection.tsx (2)</summary><blockquote>

`31-37`: **Consider moving mock data out of the component**

Hardcoded data is mixed with component logic, which could make future maintenance harder. Consider extracting this mock data to a separate file or module to improve separation of concerns.

Create a separate file (e.g., `mockData.ts`) for all hardcoded data and import it:

```typescript
// mockData.ts
export const caseByStatusData = [
  { status: 'Collection In Progress', count: 76 },
  { status: 'Manual Review', count: 41 },
  // ...
];

export const totalActiveCases = 228;
// ...
```

Then import it in the component:
```diff
+ import { caseByStatusData, totalActiveCases, manualReviewCasesAssignmentData } from './mockData';

export const OperationalOverviewSection = ({
  // ...
}) => {
-  const caseByStatusData = [ ... ];
-  const totalActiveCases = 228;
-  const manualReviewCasesAssignmentData = { ... };
```

---

`149-153`: **Add tooltip labels directly in dataset rather than formatter**

The formatter function in the Tooltip maps cryptic data keys to human-readable labels. Consider adding these labels directly in your dataset to improve maintainability.

```diff
data={[
-  { period: 'APR 1-7', completed: 35, new: 10 },
+  { 
+    period: 'APR 1-7', 
+    completed: 35, 
+    new: 10,
+    // Add labels directly in dataset
+    completedLabel: 'Completed Cases',
+    newLabel: 'New Cases'
+  },
  // ... other data points
]}

// Then in the Tooltip
<Tooltip
-  formatter={(value, name) => {
-    return [value, name === 'completed' ? 'Completed Cases' : 'New Cases'];
-  }}
+  formatter={(value, name, entry) => {
+    return [value, entry.payload[`${name}Label`]];
+  }}
/>
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**
**Cache: Disabled due to data retention organization setting**
**Knowledge Base: Disabled due to data retention organization setting**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 19e6498824a8d01f96b7283682ee90f03e829ddc and 9fa7ef16012b4f0d0c136f5537c2f71a9900c6b8.

</details>

<details>
<summary>📒 Files selected for processing (12)</summary>

* `apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts` (1 hunks)
* `apps/backoffice-v2/src/domains/customer/fetchers.ts` (1 hunks)
* `apps/backoffice-v2/src/pages/Home/Home.page.tsx` (3 hunks)
* `apps/backoffice-v2/src/pages/Home/components/CurrentPortfolioStatus/CurrentPortfolioStatus.tsx` (1 hunks)
* `apps/backoffice-v2/src/pages/Home/components/DynamicMetricsSection/DynamicMetricsSection.tsx` (1 hunks)
* `apps/backoffice-v2/src/pages/Home/components/OperationalOverviewSection/OperationalOverviewSection.tsx` (1 hunks)
* `apps/backoffice-v2/src/pages/Home/components/PieChartCard/PieChartCard.tsx` (1 hunks)
* `apps/backoffice-v2/src/pages/Home/components/RiskAndAlertsOverviewSection/RiskAndAlertsOverviewSection.tsx` (1 hunks)
* `apps/backoffice-v2/src/pages/Home/components/StaticMetricsSection/StaticMetricsSection.tsx` (1 hunks)
* `apps/backoffice-v2/src/pages/Home/components/StatsCard/StatsCard.tsx` (2 hunks)
* `services/workflows-service/prisma/data-migrations` (1 hunks)
* `services/workflows-service/src/customer/types.ts` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (2)</summary>

<details>
<summary>apps/backoffice-v2/src/pages/Home/components/DynamicMetricsSection/DynamicMetricsSection.tsx (1)</summary><blockquote>

<details>
<summary>apps/backoffice-v2/src/pages/Home/components/StatsCard/StatsCard.tsx (1)</summary>

* `StatsCard` (30-103)

</details>

</blockquote></details>
<details>
<summary>apps/backoffice-v2/src/pages/Home/components/PieChartCard/PieChartCard.tsx (2)</summary><blockquote>

<details>
<summary>apps/backoffice-v2/src/pages/Home/components/CasePieChart/CasePieChart.tsx (1)</summary>

* `CasePieChartProps` (10-15)

</details>
<details>
<summary>packages/ui/src/components/atoms/Card/Card.tsx (2)</summary>

* `Card` (61-61)
* `CardHeader` (61-61)

</details>

</blockquote></details>

</details><details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>apps/backoffice-v2/src/pages/Home/components/RiskAndAlertsOverviewSection/RiskAndAlertsOverviewSection.tsx</summary>

[error] 46-46: Avoid the use of spread (`...`) syntax on accumulators.

Spread syntax should be avoided on accumulators (like those in `.reduce`) because it causes a time complexity of `O(n^2)`.
Consider methods such as .splice or .push instead.

(lint/performance/noAccumulatingSpread)

---

[error] 78-78: Avoid the use of spread (`...`) syntax on accumulators.

Spread syntax should be avoided on accumulators (like those in `.reduce`) because it causes a time complexity of `O(n^2)`.
Consider methods such as .splice or .push instead.

(lint/performance/noAccumulatingSpread)

</details>
<details>
<summary>apps/backoffice-v2/src/pages/Home/components/OperationalOverviewSection/OperationalOverviewSection.tsx</summary>

[error] 208-208: Avoid the use of spread (`...`) syntax on accumulators.

Spread syntax should be avoided on accumulators (like those in `.reduce`) because it causes a time complexity of `O(n^2)`.
Consider methods such as .splice or .push instead.

(lint/performance/noAccumulatingSpread)

</details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (2)</summary>

* GitHub Check: Analyze (javascript)
* GitHub Check: test_linux

</details>

<details>
<summary>🔇 Additional comments (13)</summary><blockquote>

<details>
<summary>apps/backoffice-v2/src/pages/Home/components/DynamicMetricsSection/DynamicMetricsSection.tsx (2)</summary>

`64-64`: **Property name updated to match component API.**

The prop name has been updated from `count` to `value` to align with the StatsCard component's API changes, maintaining consistency across the application.

---

`72-72`: **Property name updated to match component API.**

The prop name has been updated from `count` to `value` to align with the StatsCard component's API changes, maintaining consistency across the application.

</details>
<details>
<summary>apps/backoffice-v2/src/pages/Home/components/StaticMetricsSection/StaticMetricsSection.tsx (1)</summary>

`37-37`: **Property name updated to match component API.**

The prop name has been updated from `count` to `value` to align with the StatsCard component's API changes, maintaining consistency across the application.

</details>
<details>
<summary>services/workflows-service/src/customer/types.ts (1)</summary>

`16-16`: **New feature flag added for mock dashboard feature.**

The `MOCK_DASHBOARD` feature flag has been introduced with the value 'mockDashboardV1', which will enable conditional rendering of the new dashboard variant in the application.

</details>
<details>
<summary>apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts (1)</summary>

`179-179`: **New flag for dashboard variant.**

The `shouldShowDashboardV1` boolean is derived from the feature flag and will control the conditional rendering of the new dashboard layout in the Home page.

</details>
<details>
<summary>apps/backoffice-v2/src/domains/customer/fetchers.ts (1)</summary>

`34-34`: **Feature flag correctly implemented**

The `mockDashboardV1` feature flag is properly added to the customer schema following the same pattern as other feature flags in the object, with a default value of `false` and marked as optional.

</details>
<details>
<summary>apps/backoffice-v2/src/pages/Home/components/PieChartCard/PieChartCard.tsx (1)</summary>

`4-4`: **Enhanced component with flexible title alignment**

The addition of the `centeredTitle` prop with a default value of `true` provides flexibility in title alignment without breaking existing implementations. The `ctw` utility is correctly applied to conditionally add the `text-center` class.



Also applies to: 9-11, 14-16

</details>
<details>
<summary>apps/backoffice-v2/src/pages/Home/Home.page.tsx (1)</summary>

`6-6`: **New imports and props match feature implementation**

The new imports and `shouldShowDashboardV1` prop from `useHomeLogic` properly support the mock dashboard feature.



Also applies to: 9-9, 11-11, 22-22

</details>
<details>
<summary>apps/backoffice-v2/src/pages/Home/components/StatsCard/StatsCard.tsx (4)</summary>

`15-15`: **Props API enhancement looks good!**

Great improvement changing from `count` to `value` which now accepts both numbers and strings, making the component more flexible.

---

`22-27`: **Well-structured tendency prop!**

The tendency prop is well-defined with clear options for direction and kind. This adds valuable context to the metrics being displayed.

---

`50-75`: **Good implementation of the tendency indicator**

The conditional rendering and styling of the tendency indicator is well implemented. The color coding (green for positive, red for negative, gray for neutral) provides clear visual cues to users.

---

`92-101`: **Good code reuse for Card styles**

Nice implementation of consistent styling between the linked and non-linked versions of the card. Using the same className and style props in both cases ensures consistency.

</details>
<details>
<summary>apps/backoffice-v2/src/pages/Home/components/CurrentPortfolioStatus/CurrentPortfolioStatus.tsx (1)</summary>

`142-156`: **Excellent implementation of the InsightCard component**

The `InsightCard` component is a great example of a reusable UI component. It encapsulates styling logic and provides a consistent look for insight items while keeping the implementation simple.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-20T09:24:29Z
user: login: tomer-shvadron
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-20T10:16:07Z
user: login: alonp99
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-20T10:41:14Z

Review comments:
diff_hunk: @@ -1 +1 @@
-Subproject commit 3e9e02f290b9fb3910558d47ceb58c21961d1cbe
+Subproject commit 30093008bd7bc1808b6d801137350725c4d1e130
path: services/workflows-service/prisma/data-migrations
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Verify updated submodule commit and migrations**  
Ensure that the new submodule pointer `30093008bd7bc1808b6d801137350725c4d1e130` exists in the remote repo and contains the necessary Prisma migrations for the `mockDashboardV1` feature flag.

---

🏁 Script executed:

```shell
#!/bin/bash
# Verify submodule commit exists and migrations are applied
git submodule update --init services/workflows-service/prisma/data-migrations
cd services/workflows-service/prisma/data-migrations
git rev-parse --verify 30093008bd7bc1808b6d801137350725c4d1e130
```

Length of output: 1342

---

🏁 Script executed:

```shell
#!/bin/bash
set -e
# Verify commit exists on remote
git ls-remote https://github.com/ballerine-io/wf-data-migration.git 30093008bd7bc1808b6d801137350725c4d1e130

# Shallow‐clone that exact commit and inspect migration files
git clone --depth 1 --branch 30093008bd7bc1808b6d801137350725c4d1e130 https://github.com/ballerine-io/wf-data-migration.git tmp-migrations
cd tmp-migrations

# List all migration files
echo "Migration files:"
find migrations -type f

# Specifically look for mockDashboardV1 entries
echo "Looking for mockDashboardV1 references:"
grep -R "mockDashboardV1" -n migrations || echo "No mockDashboardV1 references found"
```

Length of output: 234

---



</details>

**Submodule repository not found – please correct the remote URL and retry**  
The configured submodule URL `git@github.com:ballerine-io/wf-data-migration.git` (and its HTTPS equivalent) returns 404. Before verifying the migration commit, ensure the repository exists (and you have access) at the correct path.

• Check `.gitmodules` (entry for `services/workflows-service/prisma/data-migrations`) and update the `url` to the valid GitHub repo.  
• Commit and push the corrected submodule reference.  
• Then verify that commit `30093008bd7bc1808b6d801137350725c4d1e130` is present and includes the Prisma migrations for the `mockDashboardV1` feature flag.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In services/workflows-service/prisma/data-migrations at line 1, the submodule
remote URL is incorrect and leads to a 404 error. Update the URL in the
.gitmodules file for this submodule to the correct and accessible GitHub
repository path. After updating, commit and push the changes, then verify that
the commit 30093008bd7bc1808b6d801137350725c4d1e130 exists in the updated
submodule and contains the required Prisma migrations for the mockDashboardV1
feature flag.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-20T09:24:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,113 @@
+import { StatsCard } from '@/pages/Home/components/StatsCard/StatsCard';
+import { PieChartCard } from '../PieChartCard/PieChartCard';
+
+export const RiskAndAlertsOverviewSection = () => {
+  const activeCasesByRiskLevelData = [
+    { riskLevel: 'Low', count: 76 },
+    { riskLevel: 'Medium', count: 17 },
+    { riskLevel: 'High', count: 32 },
+    { riskLevel: 'Critical', count: 34 },
+  ];
+  const approvedCasesByRiskLevelData = [
+    { riskLevel: 'Low', count: 45 },
+    { riskLevel: 'Medium', count: 12 },
+    { riskLevel: 'High', count: 8 },
+    { riskLevel: 'Critical', count: 3 },
+  ];
+
+  return (
+    <>
+      <h3 className={'text-xl font-medium'}>Risk and Alerts Overview</h3>
+
+      <div className="grid grid-cols-5 gap-6">
+        <PieChartCard
+          title="Active Cases by Risk Level"
+          centeredTitle={false}
+          data={activeCasesByRiskLevelData}
+          getDefinition={riskLevel => {
+            const riskLevelMap = {
+              Low: { color: '#4CAF50', text: 'Low' },
+              Medium: { color: '#FFB74D', text: 'Medium' },
+              High: { color: '#FF9800', text: 'High' },
+              Critical: { color: '#F44336', text: 'Critical' },
+            };
+            return riskLevelMap[riskLevel] || { color: '#65AFFF', text: riskLevel };
+          }}
path: apps/backoffice-v2/src/pages/Home/components/RiskAndAlertsOverviewSection/RiskAndAlertsOverviewSection.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Extract risk level mapping to prevent duplication**

The risk level color mapping is duplicated in multiple places. Extract it to a constant or utility function to improve maintainability.

```diff
+const riskLevelColorMap = {
+  Low: { color: '#4CAF50', text: 'Low' },
+  Medium: { color: '#FFB74D', text: 'Medium' },
+  High: { color: '#FF9800', text: 'High' },
+  Critical: { color: '#F44336', text: 'Critical' },
+};
+
+const getRiskLevelDefinition = (riskLevel: string) => {
+  return riskLevelColorMap[riskLevel] || { color: '#65AFFF', text: riskLevel };
+};

export const RiskAndAlertsOverviewSection = () => {
  // ...

  return (
    <>
      {/* ... */}
      <PieChartCard
        title="Active Cases by Risk Level"
        centeredTitle={false}
        data={activeCasesByRiskLevelData}
-        getDefinition={riskLevel => {
-          const riskLevelMap = {
-            Low: { color: '#4CAF50', text: 'Low' },
-            Medium: { color: '#FFB74D', text: 'Medium' },
-            High: { color: '#FF9800', text: 'High' },
-            Critical: { color: '#F44336', text: 'Critical' },
-          };
-          return riskLevelMap[riskLevel] || { color: '#65AFFF', text: riskLevel };
-        }}
+        getDefinition={getRiskLevelDefinition}
        nameKey="riskLevel"
        config={/* ... */}
      />

      <PieChartCard
        title="Approved Cases by Risk Level"
        centeredTitle={false}
        data={approvedCasesByRiskLevelData}
-        getDefinition={riskLevel => {
-          const riskLevelMap = {
-            Low: { color: '#4CAF50', text: 'Low' },
-            Medium: { color: '#FFB74D', text: 'Medium' },
-            High: { color: '#FF9800', text: 'High' },
-            Critical: { color: '#F44336', text: 'Critical' },
-          };
-          return riskLevelMap[riskLevel] || { color: '#65AFFF', text: riskLevel };
-        }}
+        getDefinition={getRiskLevelDefinition}
        nameKey="riskLevel"
        config={/* ... */}
      />
```


Also applies to: 59-67

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In
apps/backoffice-v2/src/pages/Home/components/RiskAndAlertsOverviewSection/RiskAndAlertsOverviewSection.tsx
around lines 28-35 and 59-67, the risk level color mapping is duplicated.
Extract this mapping object into a shared constant or utility function outside
the component to avoid duplication and improve maintainability. Replace the
inline mappings with references to this extracted constant or function.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-20T09:24:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,113 @@
+import { StatsCard } from '@/pages/Home/components/StatsCard/StatsCard';
+import { PieChartCard } from '../PieChartCard/PieChartCard';
+
+export const RiskAndAlertsOverviewSection = () => {
+  const activeCasesByRiskLevelData = [
+    { riskLevel: 'Low', count: 76 },
+    { riskLevel: 'Medium', count: 17 },
+    { riskLevel: 'High', count: 32 },
+    { riskLevel: 'Critical', count: 34 },
+  ];
+  const approvedCasesByRiskLevelData = [
+    { riskLevel: 'Low', count: 45 },
+    { riskLevel: 'Medium', count: 12 },
+    { riskLevel: 'High', count: 8 },
+    { riskLevel: 'Critical', count: 3 },
+  ];
+
+  return (
+    <>
+      <h3 className={'text-xl font-medium'}>Risk and Alerts Overview</h3>
+
+      <div className="grid grid-cols-5 gap-6">
+        <PieChartCard
+          title="Active Cases by Risk Level"
+          centeredTitle={false}
+          data={activeCasesByRiskLevelData}
+          getDefinition={riskLevel => {
+            const riskLevelMap = {
+              Low: { color: '#4CAF50', text: 'Low' },
+              Medium: { color: '#FFB74D', text: 'Medium' },
+              High: { color: '#FF9800', text: 'High' },
+              Critical: { color: '#F44336', text: 'Critical' },
+            };
+            return riskLevelMap[riskLevel] || { color: '#65AFFF', text: riskLevel };
+          }}
+          nameKey="riskLevel"
+          config={activeCasesByRiskLevelData.reduce((acc, curr) => {
+            const riskLevelMap = {
+              Low: { color: '#4CAF50' },
+              Medium: { color: '#FFB74D' },
+              High: { color: '#FF9800' },
+              Critical: { color: '#F44336' },
+            };
+
+            return {
+              ...acc,
+              [curr.riskLevel]: {
+                label: curr.riskLevel,
+                color: riskLevelMap[curr.riskLevel]?.color || '#65AFFF',
+              },
+            };
+          }, {})}
path: apps/backoffice-v2/src/pages/Home/components/RiskAndAlertsOverviewSection/RiskAndAlertsOverviewSection.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Performance issue in reduce operation**

The static analysis tool correctly identifies a performance issue with spread operator usage in reducers, which can cause O(n²) complexity. Additionally, this logic is duplicated.

```diff
+const generateRiskLevelConfig = (data) => {
+  const config = {};
+  data.forEach(item => {
+    const color = riskLevelColorMap[item.riskLevel]?.color || '#65AFFF';
+    config[item.riskLevel] = {
+      label: item.riskLevel,
+      color: color,
+    };
+  });
+  return config;
+};

// Then replace both reduce operations with:
-          config={activeCasesByRiskLevelData.reduce((acc, curr) => {
-            const riskLevelMap = {
-              Low: { color: '#4CAF50' },
-              Medium: { color: '#FFB74D' },
-              High: { color: '#FF9800' },
-              Critical: { color: '#F44336' },
-            };
-
-            return {
-              ...acc,
-              [curr.riskLevel]: {
-                label: curr.riskLevel,
-                color: riskLevelMap[curr.riskLevel]?.color || '#65AFFF',
-              },
-            };
-          }, {})}
+          config={generateRiskLevelConfig(activeCasesByRiskLevelData)}

// And similarly for the second PieChartCard
```


Also applies to: 69-84

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 46-46: Avoid the use of spread (`...`) syntax on accumulators.

Spread syntax should be avoided on accumulators (like those in `.reduce`) because it causes a time complexity of `O(n^2)`.
Consider methods such as .splice or .push instead.

(lint/performance/noAccumulatingSpread)

</details>

</details>

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In
apps/backoffice-v2/src/pages/Home/components/RiskAndAlertsOverviewSection/RiskAndAlertsOverviewSection.tsx
around lines 37 to 52 and 69 to 84, the reduce function uses the spread operator
inside the loop, causing O(n²) complexity and duplicated logic. Refactor by
defining the riskLevelMap outside the reduce, then mutate the accumulator object
directly within the reduce without spreading. This will improve performance and
avoid duplication by extracting the mapping logic into a reusable constant or
function.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-20T09:24:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,113 @@
+import { StatsCard } from '@/pages/Home/components/StatsCard/StatsCard';
+import { PieChartCard } from '../PieChartCard/PieChartCard';
+
+export const RiskAndAlertsOverviewSection = () => {
+  const activeCasesByRiskLevelData = [
+    { riskLevel: 'Low', count: 76 },
+    { riskLevel: 'Medium', count: 17 },
+    { riskLevel: 'High', count: 32 },
+    { riskLevel: 'Critical', count: 34 },
+  ];
+  const approvedCasesByRiskLevelData = [
+    { riskLevel: 'Low', count: 45 },
+    { riskLevel: 'Medium', count: 12 },
+    { riskLevel: 'High', count: 8 },
+    { riskLevel: 'Critical', count: 3 },
+  ];
path: apps/backoffice-v2/src/pages/Home/components/RiskAndAlertsOverviewSection/RiskAndAlertsOverviewSection.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Consider making risk level data dynamic**

The hardcoded risk level data should eventually be replaced with data from an API or props for real-world usage.

```diff
-export const RiskAndAlertsOverviewSection = () => {
-  const activeCasesByRiskLevelData = [
-    { riskLevel: 'Low', count: 76 },
-    { riskLevel: 'Medium', count: 17 },
-    { riskLevel: 'High', count: 32 },
-    { riskLevel: 'Critical', count: 34 },
-  ];
-  const approvedCasesByRiskLevelData = [
-    { riskLevel: 'Low', count: 45 },
-    { riskLevel: 'Medium', count: 12 },
-    { riskLevel: 'High', count: 8 },
-    { riskLevel: 'Critical', count: 3 },
-  ];
+export const RiskAndAlertsOverviewSection = ({
+  activeCasesByRiskLevelData = [],
+  approvedCasesByRiskLevelData = []
+}: {
+  activeCasesByRiskLevelData?: Array<{ riskLevel: string; count: number }>;
+  approvedCasesByRiskLevelData?: Array<{ riskLevel: string; count: number }>;
+}) => {
+  // Use default mock data for the demo if none provided
+  const activeData = activeCasesByRiskLevelData.length ? activeCasesByRiskLevelData : [
+    { riskLevel: 'Low', count: 76 },
+    { riskLevel: 'Medium', count: 17 },
+    { riskLevel: 'High', count: 32 },
+    { riskLevel: 'Critical', count: 34 },
+  ];
+  const approvedData = approvedCasesByRiskLevelData.length ? approvedCasesByRiskLevelData : [
+    { riskLevel: 'Low', count: 45 },
+    { riskLevel: 'Medium', count: 12 },
+    { riskLevel: 'High', count: 8 },
+    { riskLevel: 'Critical', count: 3 },
+  ];
```

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In
apps/backoffice-v2/src/pages/Home/components/RiskAndAlertsOverviewSection/RiskAndAlertsOverviewSection.tsx
around lines 5 to 16, the risk level data arrays are currently hardcoded. To fix
this, refactor the component to accept this data as props or fetch it from an
API, replacing the static arrays with dynamic data sources to support real-world
usage and improve maintainability.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-20T09:24:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -68,6 +72,56 @@ export const Home: FunctionComponent = () => {
     );
   }
 
+  if (shouldShowDashboardV1) {
+    return (
+      <div className={`space-y-10 p-10`}>
+        <div className="space-y-4">
+          <h1 className="text-3xl font-semibold">Analytics Dashboard</h1>
+          <p className="">
+            Get an overview of your portfolio&apos;s activity, risk levels, monitoring alerts, and
+            case analytics.
+          </p>
+        </div>
+
+        <div className="flex flex-col space-y-8">
+          <CurrentPortfolioStatus />
+
+          <OperationalOverviewSection from={mmFrom} to={mmTo} setDate={() => {}} />
path: apps/backoffice-v2/src/pages/Home/Home.page.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Missing functionality for date range controls**

The date range control isn't functional in the mock dashboard since empty functions are passed as setDate handlers and actual date state isn't used properly.

```diff
-          <OperationalOverviewSection from={mmFrom} to={mmTo} setDate={() => {}} />
+          <OperationalOverviewSection from={mmFrom} to={mmTo} setDate={setMMDate} />

-            setDate={() => {}}
+            setDate={setMMDate}
```


Also applies to: 95-96

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In apps/backoffice-v2/src/pages/Home/Home.page.tsx at lines 89 and 95-96, the
date range controls are non-functional because empty functions are passed as
setDate handlers and the actual date state is not used. To fix this, implement
proper state management for the date range using React useState hooks, pass the
state setters as setDate handlers to the components, and ensure the components
use the current date state values for from and to props to enable interactive
date range control.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-20T09:24:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -68,6 +72,56 @@ export const Home: FunctionComponent = () => {
     );
   }
 
+  if (shouldShowDashboardV1) {
+    return (
+      <div className={`space-y-10 p-10`}>
+        <div className="space-y-4">
+          <h1 className="text-3xl font-semibold">Analytics Dashboard</h1>
+          <p className="">
+            Get an overview of your portfolio&apos;s activity, risk levels, monitoring alerts, and
+            case analytics.
+          </p>
+        </div>
+
+        <div className="flex flex-col space-y-8">
+          <CurrentPortfolioStatus />
+
+          <OperationalOverviewSection from={mmFrom} to={mmTo} setDate={() => {}} />
+
+          <DynamicMetricsSection
+            locale={locale}
+            from={mmFrom}
+            to={mmTo}
+            setDate={() => {}}
+            isMerchantMonitoringEnabled={true}
+            isOngoingMonitoringEnabled={true}
+            addedMerchantsCount={13}
path: apps/backoffice-v2/src/pages/Home/Home.page.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Hardcoded feature flags inconsistent with original implementation**

The feature flags are hardcoded to `true` in the mock dashboard version but use actual state variables in the original implementation, which could lead to inconsistencies in behavior.

```diff
-            isMerchantMonitoringEnabled={true}
-            isOngoingMonitoringEnabled={true}
+            isMerchantMonitoringEnabled={isMerchantMonitoringEnabled}
+            isOngoingMonitoringEnabled={isOngoingMonitoringEnabled}
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
            isMerchantMonitoringEnabled={isMerchantMonitoringEnabled}
            isOngoingMonitoringEnabled={isOngoingMonitoringEnabled}
            addedMerchantsCount={13}
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In apps/backoffice-v2/src/pages/Home/Home.page.tsx around lines 96 to 98, the
feature flags isMerchantMonitoringEnabled and isOngoingMonitoringEnabled are
hardcoded to true, which differs from the original implementation that uses
state variables. Replace these hardcoded true values with the corresponding
state variables or props used in the original implementation to ensure
consistent behavior.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-20T09:24:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -68,6 +72,56 @@ export const Home: FunctionComponent = () => {
     );
   }
 
+  if (shouldShowDashboardV1) {
+    return (
+      <div className={`space-y-10 p-10`}>
+        <div className="space-y-4">
+          <h1 className="text-3xl font-semibold">Analytics Dashboard</h1>
+          <p className="">
+            Get an overview of your portfolio&apos;s activity, risk levels, monitoring alerts, and
+            case analytics.
+          </p>
+        </div>
+
+        <div className="flex flex-col space-y-8">
+          <CurrentPortfolioStatus />
+
+          <OperationalOverviewSection from={mmFrom} to={mmTo} setDate={() => {}} />
+
+          <DynamicMetricsSection
+            locale={locale}
+            from={mmFrom}
+            to={mmTo}
+            setDate={() => {}}
+            isMerchantMonitoringEnabled={true}
+            isOngoingMonitoringEnabled={true}
+            addedMerchantsCount={13}
+            removedMerchantsCount={5}
+          />
+
+          <RiskAndAlertsOverviewSection />
+
+          <PortfolioRiskStatistics
+            from={mmFrom}
+            to={mmTo}
+            riskLevelCounts={{ low: 10, medium: 30, high: 25, critical: 15 }}
+            violationCounts={[
+              { name: 'Drop Shipping', id: 'drop-shipping', count: 15 },
+              { name: 'IP Rights Infringement', id: 'ip-rights-infringement', count: 12 },
+              {
+                name: 'Pharmaceuticals/Prescription Drugs',
+                id: 'pharmaceuticals-prescription-drugs',
+                count: 10,
+              },
+              { name: 'Gambling', id: 'gambling', count: 8 },
+              { name: 'Marijuana', id: 'marijuana', count: 4 },
+            ]}
+          />
+        </div>
+      </div>
+    );
+  }
path: apps/backoffice-v2/src/pages/Home/Home.page.tsx
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Mock dashboard implementation with hardcoded values**

The new dashboard implementation uses hardcoded values which is acceptable for a demo, but should be replaced with real data for production use.

Also, the `setDate` functions are empty, which will make the date range controls non-functional.

---

🏁 Script executed:

```shell
#!/bin/bash
# Verify if the useHomeLogic hook provides appropriate date-related functions
rg -t ts "setMMDate|setCasesDate" ./apps/backoffice-v2/src/common/hooks/useHomeLogic/
```

Length of output: 291

---



</details>

**Wire up real data and date handlers in Home.page.tsx**

The dashboard is currently using hardcoded demo values and no-op date setters. Update the following in apps/backoffice-v2/src/pages/Home/Home.page.tsx (lines 75–123):

- Replace hardcoded counts and stats with data fetched from your hook or API.
- Pass the actual date-change handlers from useHomeLogic (instead of `() => {}`):
  - For merchant monitoring: `setDate={setMMDate}`
  - For case analytics: `setDate={setCasesDate}`

This will ensure the date-range controls work and the dashboard displays real data.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In apps/backoffice-v2/src/pages/Home/Home.page.tsx between lines 75 and 123,
replace all hardcoded counts and statistics with real data fetched from the
appropriate hook or API. Also, update the empty setDate handlers by passing the
actual date-change functions from useHomeLogic: use setDate={setMMDate} for
merchant monitoring components and setDate={setCasesDate} for case analytics
components. This will enable functional date-range controls and display dynamic
data on the dashboard.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-20T09:24:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,156 @@
+import { ReactNode } from 'react';
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { Card } from '@/common/components/atoms/Card/Card';
+import { CardHeader } from '@/common/components/atoms/Card/Card.Header';
+import { ctw } from '@/common/utils/ctw/ctw';
+import { StatsCard } from '@/pages/Home/components/StatsCard/StatsCard';
+
+export const CurrentPortfolioStatus = () => {
+  // if (!isMerchantMonitoringEnabled && !isOngoingMonitoringEnabled) {
+  //   return null;
+  // }
+
+  const activeCasesByStageData = [
+    { stage: 'Collection In Progress', count: 76 },
+    { stage: 'Awaiting 3rd Party Data', count: 17 },
+    { stage: 'Awaiting ID Verification', count: 1 },
+    { stage: 'Revisions', count: 34 },
+    { stage: 'Manual Review', count: 41 },
+  ];
path: apps/backoffice-v2/src/pages/Home/components/CurrentPortfolioStatus/CurrentPortfolioStatus.tsx
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Replace hardcoded data with API calls**

Currently, the component uses hardcoded mock data. Ensure there's a plan to replace this with actual API calls in a production implementation.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check for existing API calls patterns in other components

echo "Searching for existing API call patterns related to cases data..."
rg -A 3 "useQuery.*cases|fetcher.*cases|fetch.*cases" --type=tsx --type=ts
```

Length of output: 245

---

I wasn’t able to detect any existing cases‐related API usage—the `rg` invocation failed to recognize `.tsx` files. Let’s try again using glob patterns:

---

🏁 Script executed:

```shell
#!/bin/bash
echo "Searching for existing API call patterns related to cases data..."
rg -A3 "useQuery.*cases|fetcher.*cases|fetch.*cases" apps/backoffice-v2/src --glob '*.ts' --glob '*.tsx'
```

Length of output: 247

---



</details>

**Implement data fetching for active cases**  
The `CurrentPortfolioStatus` component currently uses hardcoded counts:

File:  
• apps/backoffice-v2/src/pages/Home/components/CurrentPortfolioStatus/CurrentPortfolioStatus.tsx  
Lines 14–20

```ts
const activeCasesByStageData = [
  { stage: 'Collection In Progress', count: 76 },
  { stage: 'Awaiting 3rd Party Data', count: 17 },
  { stage: 'Awaiting ID Verification', count: 1 },
  { stage: 'Revisions', count: 34 },
  { stage: 'Manual Review', count: 41 },
];
```

• Replace this mock array with a real API call (e.g. fetch or useQuery) to your “cases by stage” endpoint.  
• If you have an existing data‐fetching service or React Query/SWR hook, reuse it; otherwise, create a `useGetCasesByStage()` hook.  
• Don’t forget to handle loading and error states in the UI.  
• Update any dependent types or interfaces to reflect the API response shape.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In
apps/backoffice-v2/src/pages/Home/components/CurrentPortfolioStatus/CurrentPortfolioStatus.tsx
around lines 14 to 20, replace the hardcoded activeCasesByStageData array with a
real API call to fetch cases by stage. If a data-fetching hook like useQuery or
SWR exists for cases, reuse it; otherwise, create a new custom hook named
useGetCasesByStage() to fetch this data. Update the component to handle loading
and error states appropriately, and adjust any related types or interfaces to
match the API response structure.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-20T09:24:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,156 @@
+import { ReactNode } from 'react';
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { Card } from '@/common/components/atoms/Card/Card';
+import { CardHeader } from '@/common/components/atoms/Card/Card.Header';
+import { ctw } from '@/common/utils/ctw/ctw';
+import { StatsCard } from '@/pages/Home/components/StatsCard/StatsCard';
+
+export const CurrentPortfolioStatus = () => {
+  // if (!isMerchantMonitoringEnabled && !isOngoingMonitoringEnabled) {
+  //   return null;
+  // }
path: apps/backoffice-v2/src/pages/Home/components/CurrentPortfolioStatus/CurrentPortfolioStatus.tsx
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Uncomment or remove the feature flag logic**

There's commented-out feature flag logic that should either be implemented or removed. If this is meant to be conditionally rendered based on feature flags, ensure this logic is properly implemented before merging.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if feature flags are defined elsewhere

echo "Searching for feature flag definitions related to merchant monitoring..."
rg -A 2 "isMerchantMonitoringEnabled|isOngoingMonitoringEnabled" --type=tsx --type=ts
```

Length of output: 270

---

🏁 Script executed:

```shell
#!/bin/bash
echo "Searching for feature flag definitions for merchant monitoring..."
rg -n "isMerchantMonitoringEnabled" -A2
echo ""
echo "Searching for feature flag definitions for ongoing monitoring..."
rg -n "isOngoingMonitoringEnabled" -A2
```

Length of output: 17388

---

🏁 Script executed:

```shell
#!/bin/bash
# Display the CurrentPortfolioStatus component to verify feature flag usage
sed -n '1,200p' apps/backoffice-v2/src/pages/Home/components/CurrentPortfolioStatus/CurrentPortfolioStatus.tsx
```

Length of output: 6939

---

🏁 Script executed:

```shell
#!/bin/bash
echo "Finding CurrentPortfolioStatus usage in Home.page.tsx"
rg -n "CurrentPortfolioStatus" -A3 -B3 apps/backoffice-v2/src/pages/Home/Home.page.tsx
```

Length of output: 1137

---



</details>

**Remove stale feature-flag guard in CurrentPortfolioStatus**

The `CurrentPortfolioStatus` component contains commented-out logic for `isMerchantMonitoringEnabled`/`isOngoingMonitoringEnabled` but never imports or uses those flags. You should either:

- Import and call `useHomeLogic()` at the top of `CurrentPortfolioStatus.tsx`, then uncomment and update the guard to:
  ```ts
  const { isMerchantMonitoringEnabled, isOngoingMonitoringEnabled } = useHomeLogic();
  if (!isMerchantMonitoringEnabled && !isOngoingMonitoringEnabled) {
    return null;
  }
  ```
  ensuring the component only renders when one of the monitoring features is enabled.

- Or simply remove lines 9–12 (the commented guard) to clean up dead code if this component should always render regardless of feature-flag state.

File needing attention:
- apps/backoffice-v2/src/pages/Home/components/CurrentPortfolioStatus/CurrentPortfolioStatus.tsx (lines 9–12)

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In
apps/backoffice-v2/src/pages/Home/components/CurrentPortfolioStatus/CurrentPortfolioStatus.tsx
around lines 9 to 12, the commented-out feature flag guard for
isMerchantMonitoringEnabled and isOngoingMonitoringEnabled is stale and unused.
Fix this by either importing and calling useHomeLogic() at the top of the
component, then uncommenting and updating the guard to conditionally return null
when both flags are false, or remove the commented lines entirely to clean up
dead code if the component should always render.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-20T09:24:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,308 @@
+import { Separator } from '@radix-ui/react-separator';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  LabelList,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+} from 'recharts';
+
+import { Card } from '@/common/components/atoms/Card/Card';
+import { CardContent } from '@/common/components/atoms/Card/Card.Content';
+import { CardDescription } from '@/common/components/atoms/Card/Card.Description';
+import { CardHeader } from '@/common/components/atoms/Card/Card.Header';
+import { CardTitle } from '@/common/components/atoms/Card/Card.Title';
+import { DateRangePicker } from '@/common/components/organisms/DateRangePicker/DateRangePicker';
+import { useHomeLogic } from '@/common/hooks/useHomeLogic/useHomeLogic';
+import { StatsCard } from '@/pages/Home/components/StatsCard/StatsCard';
+import { CasePieChart } from '../CasePieChart/CasePieChart';
+
+export const OperationalOverviewSection = ({
+  from,
+  to,
+  setDate,
+}: {
+  from: ReturnType<typeof useHomeLogic>['mmFrom'];
+  to: ReturnType<typeof useHomeLogic>['mmTo'];
+  setDate: ReturnType<typeof useHomeLogic>['setMMDate'];
+}) => {
+  const caseByStatusData = [
+    { status: 'Collection In Progress', count: 76 },
+    { status: 'Manual Review', count: 41 },
+    { status: 'Approved', count: 109 },
+    { status: 'Revisions', count: 34 },
+    { status: 'Rejected', count: 82 },
+  ];
+
+  const totalActiveCases = 228;
+  const manualReviewCasesAssignmentData = {
+    unassigned: {
+      count: 21,
+    },
+    assigned: {
+      count: 20,
+      reviewers: [
+        { name: 'Nitzan Guy', count: 9 },
+        { name: 'Alon Peretz', count: 8 },
+        { name: 'Adi Nir', count: 3 },
+      ],
+    },
+  };
+
+  return (
+    <>
+      <Separator className="mb-6 h-[1px] w-full bg-gray-300" />
+
+      <div className="mb-6 flex items-center justify-between">
+        <h3 className="text-xl font-medium text-gray-900">Operational Overview</h3>
+
+        <DateRangePicker
+          toDate={new Date()}
+          value={{
+            from: from ? new Date(from) : undefined,
+            to: to ? new Date(to) : undefined,
+          }}
+          onChange={setDate}
+          className="justify-end"
+        />
+      </div>
+
+      <div className="mb-8 grid grid-cols-3 gap-6">
+        <StatsCard
+          value={'38.4%'}
+          title="Merchant Onboarding Conversion Rate"
+          description="Based on application to decision data in selected time range"
+          className="border border-purple-300"
+          style={{
+            background:
+              'linear-gradient(30deg, rgba(198, 193, 248, 0.44) 0%, rgba(255, 255, 255, 1) 52%',
+          }}
+          tendency={{
+            kind: 'positive',
+            direction: 'up',
+            value: '25%',
+          }}
+        />
+
+        <StatsCard
+          value={'27 hr'}
+          title="AVG. Time to Onboarded Merchants"
+          description="Based on application to decision data in selected time range"
+          className="border border-pink-300"
+          style={{
+            background:
+              'linear-gradient(30deg, rgba(242, 177, 255, 0.44) 0%, rgba(255, 255, 255, 1) 50%',
+          }}
+          tendency={{
+            kind: 'neutral',
+            direction: 'up',
+            value: '10%',
+          }}
+        />
+
+        <StatsCard
+          value={'$24.3'}
+          title="AVG. Vendor Cost per Onboarding"
+          description="Based on vendor and checks cost in selected time range"
+          className="border border-blue-300"
+          style={{
+            background:
+              'linear-gradient(30deg, rgba(174, 213, 255, 0.44) 0%, rgba(255, 255, 255, 1) 50%',
+          }}
+          tendency={{
+            kind: 'negative',
+            direction: 'up',
+            value: '15%',
+          }}
+        />
+
+        <Card className="mx-auto w-full max-w-3xl">
+          <CardHeader>
+            <CardTitle className="text-xl font-medium">New Cases vs. Completed Cases</CardTitle>
+            <CardDescription className="text-muted-foreground">
+              Number of cases that haven&apos;t reached a final decision, by Status, in selected
+              time range
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="h-[400px] w-full">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart
+                  data={[
+                    { period: 'APR 1-7', completed: 35, new: 10 },
+                    { period: 'APR 8-13', completed: 27, new: 6 },
+                    { period: 'APR 14-21', completed: 20, new: 9 },
+                    { period: 'APR 22-28', completed: 7, new: 13 },
+                    { period: 'APR 28-MAY 1', completed: 24, new: 5 },
+                  ]}
+                  margin={{
+                    top: 20,
+                    right: 30,
+                    left: 20,
+                    bottom: 20,
+                  }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                  <XAxis dataKey="period" />
+                  <Tooltip
+                    formatter={(value, name) => {
+                      return [value, name === 'completed' ? 'Completed Cases' : 'New Cases'];
+                    }}
+                  />
+                  <Bar dataKey="completed" stackId="a" fill="#6366f1" radius={[0, 0, 4, 4]}>
+                    <LabelList
+                      dataKey="completed"
+                      position="inside"
+                      formatter={value => value}
+                      style={{ fill: 'white', fontSize: '12px' }}
+                    />
+                  </Bar>
+                  <Bar dataKey="new" stackId="a" fill="#3b82f6" radius={[4, 4, 0, 0]}>
+                    <LabelList
+                      dataKey="new"
+                      position="inside"
+                      formatter={value => value}
+                      style={{ fill: 'white', fontSize: '12px' }}
+                    />
+                  </Bar>
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-5 shadow-sm">
+          <h3 className="mb-2 text-xl font-medium text-gray-900">All Cases by Status</h3>
+          <p className="mb-4 text-sm text-gray-500">Distribution of all active cases by status</p>
+          <div className={'flex flex-col items-center space-y-4 pt-3'}>
+            <CasePieChart
+              totalValue={totalActiveCases}
+              data={caseByStatusData.map(item => ({
+                status: item.status,
+                count: item.count,
+              }))}
+              getDefinition={status => {
+                const statusMap = {
+                  'Collection In Progress': { color: '#936AF6', text: 'Collection In Progress' },
+                  'Manual Review': { color: '#007AFF', text: 'Manual Review' },
+                  Approved: { color: '#4CAF50', text: 'Approved' },
+                  Revisions: { color: '#FFB74D', text: 'Revisions' },
+                  Rejected: { color: '#F44336', text: 'Rejected' },
+                };
+                return statusMap[status] || { color: '#65AFFF', text: status };
+              }}
+              nameKey="status"
+              valueKey="count"
+              config={caseByStatusData.reduce((acc, curr) => {
+                const statusMap = {
+                  'Collection In Progress': { color: '#936AF6' },
+                  'Manual Review': { color: '#007AFF' },
+                  Approved: { color: '#4CAF50' },
+                  Revisions: { color: '#FFB74D' },
+                  Rejected: { color: '#F44336' },
+                };
+
+                return {
+                  ...acc,
+                  [curr.status]: {
+                    label: curr.status,
+                    color: statusMap[curr.status]?.color || '#65AFFF',
+                  },
+                };
+              }, {})}
+            />
+          </div>
+        </div>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-5 shadow-sm">
+          <h3 className="mb-2 text-xl font-medium text-gray-900">Overall Active Cases</h3>
+          <p className="mb-4 text-sm text-gray-500">
+            Cases that haven't reached a decision, in selected time range
+          </p>
+          <div className="mb-6 flex items-center justify-center">
+            <span className="text-4xl font-semibold text-indigo-600">{totalActiveCases}</span>
+          </div>
+
+          <div className="mt-6">
+            <h4 className="mb-3 font-medium text-gray-700">Manual Review Cases</h4>
+            <div className="mb-4 grid grid-cols-2 gap-3">
+              <div className="rounded-md bg-gray-50 p-3">
+                <p className="text-sm text-gray-500">Unassigned</p>
+                <p className="text-xl font-medium text-gray-900">
+                  {manualReviewCasesAssignmentData.unassigned.count}
+                </p>
+              </div>
+              <div className="rounded-md bg-gray-50 p-3">
+                <p className="text-sm text-gray-500">Assigned</p>
+                <p className="text-xl font-medium text-gray-900">
+                  {manualReviewCasesAssignmentData.assigned.count}
+                </p>
+              </div>
+            </div>
+
+            <h5 className="mb-2 text-sm font-medium text-gray-700">Assignment breakdown:</h5>
+            <div className="space-y-2">
+              {manualReviewCasesAssignmentData.assigned.reviewers.map((reviewer, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-between rounded-md bg-gray-50 px-3 py-2"
+                >
+                  <span className="text-sm text-gray-700">{reviewer.name}</span>
+                  <span className="rounded bg-indigo-100 px-2 py-1 text-sm font-medium text-indigo-800">
+                    {reviewer.count}
+                  </span>
+                </div>
+              ))}
+            </div>
path: apps/backoffice-v2/src/pages/Home/components/OperationalOverviewSection/OperationalOverviewSection.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add key based on reviewer name instead of index**

Using array index as a React key can lead to issues when the list changes. Since reviewer names appear to be unique, use those as keys instead.

```diff
{manualReviewCasesAssignmentData.assigned.reviewers.map((reviewer, index) => (
  <div
-   key={index}
+   key={reviewer.name}
    className="flex items-center justify-between rounded-md bg-gray-50 px-3 py-2"
  >
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
              {manualReviewCasesAssignmentData.assigned.reviewers.map((reviewer, index) => (
                <div
                  key={reviewer.name}
                  className="flex items-center justify-between rounded-md bg-gray-50 px-3 py-2"
                >
                  <span className="text-sm text-gray-700">{reviewer.name}</span>
                  <span className="rounded bg-indigo-100 px-2 py-1 text-sm font-medium text-indigo-800">
                    {reviewer.count}
                  </span>
                </div>
              ))}
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In
apps/backoffice-v2/src/pages/Home/components/OperationalOverviewSection/OperationalOverviewSection.tsx
around lines 247 to 258, replace the React key currently using the array index
with the reviewer's name to ensure stable and unique keys. Update the key prop
in the map function to use reviewer.name instead of index, assuming reviewer
names are unique identifiers.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-20T09:24:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,308 @@
+import { Separator } from '@radix-ui/react-separator';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  LabelList,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+} from 'recharts';
+
+import { Card } from '@/common/components/atoms/Card/Card';
+import { CardContent } from '@/common/components/atoms/Card/Card.Content';
+import { CardDescription } from '@/common/components/atoms/Card/Card.Description';
+import { CardHeader } from '@/common/components/atoms/Card/Card.Header';
+import { CardTitle } from '@/common/components/atoms/Card/Card.Title';
+import { DateRangePicker } from '@/common/components/organisms/DateRangePicker/DateRangePicker';
+import { useHomeLogic } from '@/common/hooks/useHomeLogic/useHomeLogic';
+import { StatsCard } from '@/pages/Home/components/StatsCard/StatsCard';
+import { CasePieChart } from '../CasePieChart/CasePieChart';
+
+export const OperationalOverviewSection = ({
+  from,
+  to,
+  setDate,
+}: {
+  from: ReturnType<typeof useHomeLogic>['mmFrom'];
+  to: ReturnType<typeof useHomeLogic>['mmTo'];
+  setDate: ReturnType<typeof useHomeLogic>['setMMDate'];
+}) => {
+  const caseByStatusData = [
+    { status: 'Collection In Progress', count: 76 },
+    { status: 'Manual Review', count: 41 },
+    { status: 'Approved', count: 109 },
+    { status: 'Revisions', count: 34 },
+    { status: 'Rejected', count: 82 },
+  ];
+
+  const totalActiveCases = 228;
+  const manualReviewCasesAssignmentData = {
+    unassigned: {
+      count: 21,
+    },
+    assigned: {
+      count: 20,
+      reviewers: [
+        { name: 'Nitzan Guy', count: 9 },
+        { name: 'Alon Peretz', count: 8 },
+        { name: 'Adi Nir', count: 3 },
+      ],
+    },
+  };
+
+  return (
+    <>
+      <Separator className="mb-6 h-[1px] w-full bg-gray-300" />
+
+      <div className="mb-6 flex items-center justify-between">
+        <h3 className="text-xl font-medium text-gray-900">Operational Overview</h3>
+
+        <DateRangePicker
+          toDate={new Date()}
+          value={{
+            from: from ? new Date(from) : undefined,
+            to: to ? new Date(to) : undefined,
+          }}
+          onChange={setDate}
+          className="justify-end"
+        />
+      </div>
+
+      <div className="mb-8 grid grid-cols-3 gap-6">
+        <StatsCard
+          value={'38.4%'}
+          title="Merchant Onboarding Conversion Rate"
+          description="Based on application to decision data in selected time range"
+          className="border border-purple-300"
+          style={{
+            background:
+              'linear-gradient(30deg, rgba(198, 193, 248, 0.44) 0%, rgba(255, 255, 255, 1) 52%',
+          }}
+          tendency={{
+            kind: 'positive',
+            direction: 'up',
+            value: '25%',
+          }}
+        />
+
+        <StatsCard
+          value={'27 hr'}
+          title="AVG. Time to Onboarded Merchants"
+          description="Based on application to decision data in selected time range"
+          className="border border-pink-300"
+          style={{
+            background:
+              'linear-gradient(30deg, rgba(242, 177, 255, 0.44) 0%, rgba(255, 255, 255, 1) 50%',
+          }}
+          tendency={{
+            kind: 'neutral',
+            direction: 'up',
+            value: '10%',
+          }}
+        />
+
+        <StatsCard
+          value={'$24.3'}
+          title="AVG. Vendor Cost per Onboarding"
+          description="Based on vendor and checks cost in selected time range"
+          className="border border-blue-300"
+          style={{
+            background:
+              'linear-gradient(30deg, rgba(174, 213, 255, 0.44) 0%, rgba(255, 255, 255, 1) 50%',
+          }}
+          tendency={{
+            kind: 'negative',
+            direction: 'up',
+            value: '15%',
+          }}
+        />
+
+        <Card className="mx-auto w-full max-w-3xl">
+          <CardHeader>
+            <CardTitle className="text-xl font-medium">New Cases vs. Completed Cases</CardTitle>
+            <CardDescription className="text-muted-foreground">
+              Number of cases that haven&apos;t reached a final decision, by Status, in selected
+              time range
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="h-[400px] w-full">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart
+                  data={[
+                    { period: 'APR 1-7', completed: 35, new: 10 },
+                    { period: 'APR 8-13', completed: 27, new: 6 },
+                    { period: 'APR 14-21', completed: 20, new: 9 },
+                    { period: 'APR 22-28', completed: 7, new: 13 },
+                    { period: 'APR 28-MAY 1', completed: 24, new: 5 },
+                  ]}
+                  margin={{
+                    top: 20,
+                    right: 30,
+                    left: 20,
+                    bottom: 20,
+                  }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                  <XAxis dataKey="period" />
+                  <Tooltip
+                    formatter={(value, name) => {
+                      return [value, name === 'completed' ? 'Completed Cases' : 'New Cases'];
+                    }}
+                  />
+                  <Bar dataKey="completed" stackId="a" fill="#6366f1" radius={[0, 0, 4, 4]}>
+                    <LabelList
+                      dataKey="completed"
+                      position="inside"
+                      formatter={value => value}
+                      style={{ fill: 'white', fontSize: '12px' }}
+                    />
+                  </Bar>
+                  <Bar dataKey="new" stackId="a" fill="#3b82f6" radius={[4, 4, 0, 0]}>
+                    <LabelList
+                      dataKey="new"
+                      position="inside"
+                      formatter={value => value}
+                      style={{ fill: 'white', fontSize: '12px' }}
+                    />
+                  </Bar>
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-5 shadow-sm">
+          <h3 className="mb-2 text-xl font-medium text-gray-900">All Cases by Status</h3>
+          <p className="mb-4 text-sm text-gray-500">Distribution of all active cases by status</p>
+          <div className={'flex flex-col items-center space-y-4 pt-3'}>
+            <CasePieChart
+              totalValue={totalActiveCases}
+              data={caseByStatusData.map(item => ({
+                status: item.status,
+                count: item.count,
+              }))}
+              getDefinition={status => {
+                const statusMap = {
+                  'Collection In Progress': { color: '#936AF6', text: 'Collection In Progress' },
+                  'Manual Review': { color: '#007AFF', text: 'Manual Review' },
+                  Approved: { color: '#4CAF50', text: 'Approved' },
+                  Revisions: { color: '#FFB74D', text: 'Revisions' },
+                  Rejected: { color: '#F44336', text: 'Rejected' },
+                };
+                return statusMap[status] || { color: '#65AFFF', text: status };
+              }}
+              nameKey="status"
+              valueKey="count"
+              config={caseByStatusData.reduce((acc, curr) => {
+                const statusMap = {
+                  'Collection In Progress': { color: '#936AF6' },
+                  'Manual Review': { color: '#007AFF' },
+                  Approved: { color: '#4CAF50' },
+                  Revisions: { color: '#FFB74D' },
+                  Rejected: { color: '#F44336' },
+                };
+
+                return {
+                  ...acc,
+                  [curr.status]: {
+                    label: curr.status,
+                    color: statusMap[curr.status]?.color || '#65AFFF',
+                  },
+                };
+              }, {})}
path: apps/backoffice-v2/src/pages/Home/components/OperationalOverviewSection/OperationalOverviewSection.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix O(n²) time complexity with spread operator in reduce**

Using spread syntax (`...acc`) in the reducer creates a new object on each iteration, leading to O(n²) time complexity. While the dataset is small now, this can be inefficient for larger datasets.

```diff
config={
-  caseByStatusData.reduce((acc, curr) => {
-    const statusMap = {
-      'Collection In Progress': { color: '#936AF6' },
-      'Manual Review': { color: '#007AFF' },
-      Approved: { color: '#4CAF50' },
-      Revisions: { color: '#FFB74D' },
-      Rejected: { color: '#F44336' },
-    };
-
-    return {
-      ...acc,
-      [curr.status]: {
-        label: curr.status,
-        color: statusMap[curr.status]?.color || '#65AFFF',
-      },
-    };
-  }, {})
+  caseByStatusData.reduce((acc, curr) => {
+    // Mutate the accumulator directly instead of spreading
+    acc[curr.status] = {
+      label: curr.status,
+      color: statusColorMap[curr.status]?.color || '#65AFFF',
+    };
+    return acc;
+  }, {})
}
```


> Committable suggestion skipped: line range outside the PR's diff.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 208-208: Avoid the use of spread (`...`) syntax on accumulators.

Spread syntax should be avoided on accumulators (like those in `.reduce`) because it causes a time complexity of `O(n^2)`.
Consider methods such as .splice or .push instead.

(lint/performance/noAccumulatingSpread)

</details>

</details>

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In
apps/backoffice-v2/src/pages/Home/components/OperationalOverviewSection/OperationalOverviewSection.tsx
around lines 198 to 214, the reduce function uses the spread operator to create
a new object on each iteration, causing O(n²) time complexity. To fix this,
avoid using the spread operator inside the reducer; instead, mutate the
accumulator object directly by assigning the new key-value pair to it and return
the same accumulator at the end of each iteration. This will improve performance
by maintaining O(n) complexity.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-20T09:24:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,308 @@
+import { Separator } from '@radix-ui/react-separator';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  LabelList,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+} from 'recharts';
+
+import { Card } from '@/common/components/atoms/Card/Card';
+import { CardContent } from '@/common/components/atoms/Card/Card.Content';
+import { CardDescription } from '@/common/components/atoms/Card/Card.Description';
+import { CardHeader } from '@/common/components/atoms/Card/Card.Header';
+import { CardTitle } from '@/common/components/atoms/Card/Card.Title';
+import { DateRangePicker } from '@/common/components/organisms/DateRangePicker/DateRangePicker';
+import { useHomeLogic } from '@/common/hooks/useHomeLogic/useHomeLogic';
+import { StatsCard } from '@/pages/Home/components/StatsCard/StatsCard';
+import { CasePieChart } from '../CasePieChart/CasePieChart';
+
+export const OperationalOverviewSection = ({
+  from,
+  to,
+  setDate,
+}: {
+  from: ReturnType<typeof useHomeLogic>['mmFrom'];
+  to: ReturnType<typeof useHomeLogic>['mmTo'];
+  setDate: ReturnType<typeof useHomeLogic>['setMMDate'];
+}) => {
+  const caseByStatusData = [
+    { status: 'Collection In Progress', count: 76 },
+    { status: 'Manual Review', count: 41 },
+    { status: 'Approved', count: 109 },
+    { status: 'Revisions', count: 34 },
+    { status: 'Rejected', count: 82 },
+  ];
+
+  const totalActiveCases = 228;
+  const manualReviewCasesAssignmentData = {
+    unassigned: {
+      count: 21,
+    },
+    assigned: {
+      count: 20,
+      reviewers: [
+        { name: 'Nitzan Guy', count: 9 },
+        { name: 'Alon Peretz', count: 8 },
+        { name: 'Adi Nir', count: 3 },
+      ],
+    },
+  };
+
+  return (
+    <>
+      <Separator className="mb-6 h-[1px] w-full bg-gray-300" />
+
+      <div className="mb-6 flex items-center justify-between">
+        <h3 className="text-xl font-medium text-gray-900">Operational Overview</h3>
+
+        <DateRangePicker
+          toDate={new Date()}
+          value={{
+            from: from ? new Date(from) : undefined,
+            to: to ? new Date(to) : undefined,
+          }}
+          onChange={setDate}
+          className="justify-end"
+        />
+      </div>
+
+      <div className="mb-8 grid grid-cols-3 gap-6">
+        <StatsCard
+          value={'38.4%'}
+          title="Merchant Onboarding Conversion Rate"
+          description="Based on application to decision data in selected time range"
+          className="border border-purple-300"
+          style={{
+            background:
+              'linear-gradient(30deg, rgba(198, 193, 248, 0.44) 0%, rgba(255, 255, 255, 1) 52%',
+          }}
+          tendency={{
+            kind: 'positive',
+            direction: 'up',
+            value: '25%',
+          }}
+        />
+
+        <StatsCard
+          value={'27 hr'}
+          title="AVG. Time to Onboarded Merchants"
+          description="Based on application to decision data in selected time range"
+          className="border border-pink-300"
+          style={{
+            background:
+              'linear-gradient(30deg, rgba(242, 177, 255, 0.44) 0%, rgba(255, 255, 255, 1) 50%',
+          }}
+          tendency={{
+            kind: 'neutral',
+            direction: 'up',
+            value: '10%',
+          }}
+        />
+
+        <StatsCard
+          value={'$24.3'}
+          title="AVG. Vendor Cost per Onboarding"
+          description="Based on vendor and checks cost in selected time range"
+          className="border border-blue-300"
+          style={{
+            background:
+              'linear-gradient(30deg, rgba(174, 213, 255, 0.44) 0%, rgba(255, 255, 255, 1) 50%',
+          }}
+          tendency={{
+            kind: 'negative',
+            direction: 'up',
+            value: '15%',
+          }}
+        />
+
+        <Card className="mx-auto w-full max-w-3xl">
+          <CardHeader>
+            <CardTitle className="text-xl font-medium">New Cases vs. Completed Cases</CardTitle>
+            <CardDescription className="text-muted-foreground">
+              Number of cases that haven&apos;t reached a final decision, by Status, in selected
+              time range
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="h-[400px] w-full">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart
+                  data={[
+                    { period: 'APR 1-7', completed: 35, new: 10 },
+                    { period: 'APR 8-13', completed: 27, new: 6 },
+                    { period: 'APR 14-21', completed: 20, new: 9 },
+                    { period: 'APR 22-28', completed: 7, new: 13 },
+                    { period: 'APR 28-MAY 1', completed: 24, new: 5 },
+                  ]}
+                  margin={{
+                    top: 20,
+                    right: 30,
+                    left: 20,
+                    bottom: 20,
+                  }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                  <XAxis dataKey="period" />
+                  <Tooltip
+                    formatter={(value, name) => {
+                      return [value, name === 'completed' ? 'Completed Cases' : 'New Cases'];
+                    }}
+                  />
+                  <Bar dataKey="completed" stackId="a" fill="#6366f1" radius={[0, 0, 4, 4]}>
+                    <LabelList
+                      dataKey="completed"
+                      position="inside"
+                      formatter={value => value}
+                      style={{ fill: 'white', fontSize: '12px' }}
+                    />
+                  </Bar>
+                  <Bar dataKey="new" stackId="a" fill="#3b82f6" radius={[4, 4, 0, 0]}>
+                    <LabelList
+                      dataKey="new"
+                      position="inside"
+                      formatter={value => value}
+                      style={{ fill: 'white', fontSize: '12px' }}
+                    />
+                  </Bar>
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-5 shadow-sm">
+          <h3 className="mb-2 text-xl font-medium text-gray-900">All Cases by Status</h3>
+          <p className="mb-4 text-sm text-gray-500">Distribution of all active cases by status</p>
+          <div className={'flex flex-col items-center space-y-4 pt-3'}>
+            <CasePieChart
+              totalValue={totalActiveCases}
+              data={caseByStatusData.map(item => ({
+                status: item.status,
+                count: item.count,
+              }))}
+              getDefinition={status => {
+                const statusMap = {
+                  'Collection In Progress': { color: '#936AF6', text: 'Collection In Progress' },
+                  'Manual Review': { color: '#007AFF', text: 'Manual Review' },
+                  Approved: { color: '#4CAF50', text: 'Approved' },
+                  Revisions: { color: '#FFB74D', text: 'Revisions' },
+                  Rejected: { color: '#F44336', text: 'Rejected' },
+                };
+                return statusMap[status] || { color: '#65AFFF', text: status };
+              }}
+              nameKey="status"
+              valueKey="count"
+              config={caseByStatusData.reduce((acc, curr) => {
+                const statusMap = {
+                  'Collection In Progress': { color: '#936AF6' },
+                  'Manual Review': { color: '#007AFF' },
+                  Approved: { color: '#4CAF50' },
+                  Revisions: { color: '#FFB74D' },
+                  Rejected: { color: '#F44336' },
+                };
+
+                return {
+                  ...acc,
+                  [curr.status]: {
+                    label: curr.status,
+                    color: statusMap[curr.status]?.color || '#65AFFF',
+                  },
+                };
+              }, {})}
+            />
path: apps/backoffice-v2/src/pages/Home/components/OperationalOverviewSection/OperationalOverviewSection.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Avoid duplicate color mapping definitions**

There are two separate color mapping definitions - one in `getDefinition` and another in `config`. This duplication could lead to inconsistencies if one is updated but not the other.

Extract the color mapping to a single constant:

```diff
+ const statusColorMap = {
+   'Collection In Progress': { color: '#936AF6', text: 'Collection In Progress' },
+   'Manual Review': { color: '#007AFF', text: 'Manual Review' },
+   Approved: { color: '#4CAF50', text: 'Approved' },
+   Revisions: { color: '#FFB74D', text: 'Revisions' },
+   Rejected: { color: '#F44336', text: 'Rejected' },
+ };

<CasePieChart
  totalValue={totalActiveCases}
  data={caseByStatusData.map(item => ({
    status: item.status,
    count: item.count,
  }))}
  getDefinition={status => {
-    const statusMap = {
-      'Collection In Progress': { color: '#936AF6', text: 'Collection In Progress' },
-      'Manual Review': { color: '#007AFF', text: 'Manual Review' },
-      Approved: { color: '#4CAF50', text: 'Approved' },
-      Revisions: { color: '#FFB74D', text: 'Revisions' },
-      Rejected: { color: '#F44336', text: 'Rejected' },
-    };
-    return statusMap[status] || { color: '#65AFFF', text: status };
+    return statusColorMap[status] || { color: '#65AFFF', text: status };
  }}
  nameKey="status"
  valueKey="count"
  config={caseByStatusData.reduce((acc, curr) => {
-    const statusMap = {
-      'Collection In Progress': { color: '#936AF6' },
-      'Manual Review': { color: '#007AFF' },
-      Approved: { color: '#4CAF50' },
-      Revisions: { color: '#FFB74D' },
-      Rejected: { color: '#F44336' },
-    };

    return {
      ...acc,
      [curr.status]: {
        label: curr.status,
-        color: statusMap[curr.status]?.color || '#65AFFF',
+        color: statusColorMap[curr.status]?.color || '#65AFFF',
      },
    };
  }, {})}
/>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
// extract once, at the top of your component (or in module scope)
const statusColorMap = {
  'Collection In Progress': { color: '#936AF6', text: 'Collection In Progress' },
  'Manual Review':            { color: '#007AFF', text: 'Manual Review' },
  Approved:                   { color: '#4CAF50', text: 'Approved' },
  Revisions:                  { color: '#FFB74D', text: 'Revisions' },
  Rejected:                   { color: '#F44336', text: 'Rejected' },
};

<CasePieChart
  totalValue={totalActiveCases}
  data={caseByStatusData.map(item => ({
    status: item.status,
    count:  item.count,
  }))}
  getDefinition={status => {
    return statusColorMap[status] || { color: '#65AFFF', text: status };
  }}
  nameKey="status"
  valueKey="count"
  config={caseByStatusData.reduce((acc, curr) => {
    return {
      ...acc,
      [curr.status]: {
        label: curr.status,
        color: statusColorMap[curr.status]?.color || '#65AFFF',
      },
    };
  }, {})}
/>
```

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 208-208: Avoid the use of spread (`...`) syntax on accumulators.

Spread syntax should be avoided on accumulators (like those in `.reduce`) because it causes a time complexity of `O(n^2)`.
Consider methods such as .splice or .push instead.

(lint/performance/noAccumulatingSpread)

</details>

</details>

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In
apps/backoffice-v2/src/pages/Home/components/OperationalOverviewSection/OperationalOverviewSection.tsx
between lines 180 and 215, there are two separate color mapping objects defined
inside getDefinition and config props, causing duplication and risk of
inconsistency. To fix this, extract the color mapping into a single constant
object outside the component or function scope, then reference this constant in
both getDefinition and config to ensure a single source of truth for color
mappings.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-20T09:24:28Z
author_association: CONTRIBUTOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-05-20T09:18:41Z
body: ###  ⚠️  No Changeset found

Latest commit: 8fa6e8f849b893aa1716eafe44df2f1373c8f9d5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/ballerine-io/ballerine/new/bal-4161?filename=.changeset/nervous-games-worry.md&value=---%0A%22%40ballerine%2Fbackoffice-v2%22%3A%20patch%0A%22%40ballerine%2Fworkflows-service%22%3A%20patch%0A---%0A%0Afeat%3A%20demo%20mock%20dashboard%0A)


author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-05-20T09:18:44Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

This update introduces a new feature flag, `mockDashboardV1`, to the customer schema and feature list, enabling conditional rendering of a new dashboard layout in the Home page. Several new React components are added for dashboard sections, and the `StatsCard` component is enhanced with new props and display options. Minor prop renaming and alignment options are also included.

## Changes

| File(s)                                                                                                          | Change Summary |
|------------------------------------------------------------------------------------------------------------------|---------------|
| `apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts`                                               | Added a new boolean property `shouldShowDashboardV1` to the return object of the `useHomeLogic` hook, based on the presence of the `mockDashboardV1` feature flag. |
| `apps/backoffice-v2/src/domains/customer/fetchers.ts`                                                            | Added an optional boolean property `mockDashboardV1` (default: false) to the `features` object in the `CustomerSchema` Zod schema. |
| `apps/backoffice-v2/src/pages/Home/Home.page.tsx`                                                                | Added a new conditional rendering branch for a distinct "Analytics Dashboard" layout, shown when `shouldShowDashboardV1` is true. Integrates new dashboard section components. |
| `apps/backoffice-v2/src/pages/Home/components/CurrentPortfolioStatus/CurrentPortfolioStatus.tsx`<br>`.../OperationalOverviewSection/OperationalOverviewSection.tsx`<br>`.../RiskAndAlertsOverviewSection/RiskAndAlertsOverviewSection.tsx` | Introduced three new exported React components: `CurrentPortfolioStatus`, `OperationalOverviewSection`, and `RiskAndAlertsOverviewSection`, each rendering a dashboard section with stats, charts, and insights. |
| `apps/backoffice-v2/src/pages/Home/components/StatsCard/StatsCard.tsx`                                           | Enhanced `StatsCard` component: replaced `count` prop with `value`, added `style`, `alert`, and `tendency` props, updated layout and display logic for trend and alert indicators. |
| `apps/backoffice-v2/src/pages/Home/components/DynamicMetricsSection/DynamicMetricsSection.tsx`<br>`.../StaticMetricsSection/StaticMetricsSection.tsx` | Renamed prop from `count` to `value` when passing metrics to `StatsCard`. |
| `apps/backoffice-v2/src/pages/Home/components/PieChartCard/PieChartCard.tsx`                                     | Added optional `centeredTitle` prop (default: true) to control title alignment in `PieChartCard`. |
| `services/workflows-service/prisma/data-migrations`                                                              | Updated subproject commit reference. |
| `services/workflows-service/src/customer/types.ts`                                                               | Added `MOCK_DASHBOARD: 'mockDashboardV1'` to the exported `FEATURE_LIST` constant. |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant HomePage
    participant useHomeLogic
    participant CustomerData

    User->>HomePage: Visits Home page
    HomePage->>useHomeLogic: Call hook for data and flags
    useHomeLogic->>CustomerData: Fetch customer features
    useHomeLogic-->>HomePage: Return { shouldShowDashboardV1, ... }
    HomePage->>HomePage: Check shouldShowDashboardV1
    alt shouldShowDashboardV1 is true
        HomePage->>CurrentPortfolioStatus: Render section
        HomePage->>OperationalOverviewSection: Render section
        HomePage->>DynamicMetricsSection: Render section
        HomePage->>RiskAndAlertsOverviewSection: Render section
        HomePage->>PortfolioRiskStatistics: Render section
    else
        HomePage->>HomePage: Render existing dashboard or welcome screen
    end
```

## Poem

> 🐇  
> A dashboard new, with charts so bright,  
> Stats and trends now take the light.  
> Feature flags unlock the view,  
> Cards and pies with insights new.  
> With every hop, the data grows—  
> This rabbit loves how progress shows!  
> 📊🌟

<!-- walkthrough_end -->

<!-- announcements_start -->

> [!NOTE]
> <details>
> <summary>⚡️ AI Code Reviews for VS Code, Cursor, Windsurf</summary>
> 
> CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
> Learn more [here](http://coderabbit.ai/ide).
> 
> </details>

---

> [!NOTE]
> <details>
> <summary>⚡️ Faster reviews with caching</summary>
> 
> CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure `Review - Disable Cache` at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the `Data Retention` setting under your Organization Settings.
> Enjoy the performance boost—your workflow just got faster.
> 
> </details>

<!-- announcements_end -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**
**Cache: Disabled due to data retention organization setting**
**Knowledge Base: Disabled due to data retention organization setting**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 9fa7ef16012b4f0d0c136f5537c2f71a9900c6b8 and cff6ac760a809bc1a27bd19c1aeb785d4477a68f.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `apps/backoffice-v2/src/pages/Home/Home.page.tsx` (3 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* apps/backoffice-v2/src/pages/Home/Home.page.tsx

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (6)</summary>

* GitHub Check: test_linux
* GitHub Check: spell_check
* GitHub Check: Analyze (javascript)
* GitHub Check: build (ubuntu-latest)
* GitHub Check: format
* GitHub Check: lint

</details>

</details>
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=ballerine-io/ballerine&utm_content=3313):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR