UI: Remove and replace Tremor from the codebase (#3627)

- Removes a dependency - Tremor - from PeerDB UI. 
- Charts: Introduces [chart.js](https://www.chartjs.org/docs/latest/)
and implements the bar and line charts we have using it.
- Tabs in CDC overview now done using [Radix
tabs](https://www.radix-ui.com/primitives/docs/components/tabs)
- Adds date-fns library as we are using it in a file
- Fixes mirror editing in UI where it asks you to select atleast one
table

<img width="1820" height="1171" alt="Screenshot 2025-10-27 at 3 14
16 PM"
src="https://github.com/user-attachments/assets/f3eb2dfa-92ae-41e9-9cf4-756d99384ebe"
/>


<br></br>
<img width="1504" height="422" alt="Screenshot 2025-10-27 at 3 22 12 PM"
src="https://github.com/user-attachments/assets/5cd42447-f195-4f43-b657-20fe9732e3ab"
/>

Author: Amogh-Bharadwaj

ui/app/mirrors/[mirrorId]/cdc.tsx

@@ -1,19 +1,29 @@
 'use client';
 import useLocalStorage from '@/app/utils/useLocalStorage';
 import { MirrorStatusResponse } from '@/grpc_generated/route';
+import { useTheme } from '@/lib/AppTheme';
 import { Label } from '@/lib/Label';
 import { ProgressCircle } from '@/lib/ProgressCircle';
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@tremor/react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@radix-ui/react-tabs';
 import { useEffect, useState } from 'react';
+import styled from 'styled-components';
 import CdcDetails from './cdcDetails';
 import { SnapshotStatusTable } from './snapshot';
+import { TabListStyle, TabsRootStyle } from './styles/tab.styles';
+
+const StyledTabTrigger = styled(TabsTrigger)`
+  &[data-state='active'] {
+    font-weight: bold;
+  }
+`;
 
 type CDCMirrorStatusProps = {
   status: MirrorStatusResponse;
   syncStatusChild?: React.ReactNode;
 };
 export function CDCMirror({ status, syncStatusChild }: CDCMirrorStatusProps) {
   const LocalStorageTabKey = 'cdctab';
+  const theme = useTheme();
   const [selectedTab, setSelectedTab] = useLocalStorage(LocalStorageTabKey, 0);
   const [mounted, setMounted] = useState(false);
   const handleTab = (index: number) => {
@@ -39,31 +49,32 @@ export function CDCMirror({ status, syncStatusChild }: CDCMirrorStatusProps) {
     );
   }
   return (
-    <TabGroup
-      index={selectedTab}
-      onIndexChange={handleTab}
-      style={{ marginTop: '1rem' }}
+    <Tabs
+      style={TabsRootStyle}
+      className='TabsRoot'
+      defaultValue={selectedTab.toString()}
+      onValueChange={(value) => handleTab(Number(value))}
     >
-      <TabList
-        color='neutral'
-        style={{ display: 'flex', justifyContent: 'space-around' }}
-        className='[&_button]:text-gray-600 dark:[&_button]:text-gray-300 [&_button:hover]:text-gray-900 dark:[&_button:hover]:text-white [&_button[data-state=active]]:text-gray-900 dark:[&_button[data-state=active]]:text-white'
-      >
-        <Tab>Overview</Tab>
-        <Tab>Sync Status</Tab>
-        <Tab>Initial Copy</Tab>
-      </TabList>
-      <TabPanels>
-        <TabPanel>
-          <CdcDetails
-            createdAt={status.createdAt}
-            mirrorConfig={status.cdcStatus!}
-            mirrorStatus={status.currentFlowState}
-          />
-        </TabPanel>
-        <TabPanel>{syncStatusChild}</TabPanel>
-        <TabPanel>{snapshot}</TabPanel>
-      </TabPanels>
-    </TabGroup>
+      <TabsList style={TabListStyle(theme.theme)} className='TabsList'>
+        <StyledTabTrigger className='TabsTrigger' value='0'>
+          Overview
+        </StyledTabTrigger>
+        <StyledTabTrigger value='1'>Sync Status</StyledTabTrigger>
+        <StyledTabTrigger value='2'>Initial Copy</StyledTabTrigger>
+      </TabsList>
+      <TabsContent className='TabsContent' value='0'>
+        <CdcDetails
+          createdAt={status.createdAt}
+          mirrorConfig={status.cdcStatus!}
+          mirrorStatus={status.currentFlowState}
+        />
+      </TabsContent>
+      <TabsContent className='TabsContent' value='1'>
+        {syncStatusChild}
+      </TabsContent>
+      <TabsContent className='TabsContent' value='2'>
+        {snapshot}
+      </TabsContent>
+    </Tabs>
   );
 }

ui/app/mirrors/[mirrorId]/cdcGraph.tsx

@@ -2,44 +2,115 @@
 import SelectTheme from '@/app/styles/select';
 import { formatGraphLabel, timeOptions } from '@/app/utils/graph';
 import { TimeAggregateType } from '@/grpc_generated/route';
+import { useTheme } from '@/lib/AppTheme';
+import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
-import { BarChart } from '@tremor/react';
-import { useEffect, useState } from 'react';
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  ChartOptions,
+  Legend,
+  LinearScale,
+  Title,
+  Tooltip,
+} from 'chart.js';
+import { useState } from 'react';
+import { Bar } from 'react-chartjs-2';
 import ReactSelect from 'react-select';
+import { BarLoader } from 'react-spinners';
+import useSWR from 'swr';
+
+const CdcSyncingLoader = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        rowGap: '1rem',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
+      Loading sync data...
+      <BarLoader />
+    </div>
+  );
+};
+
+const CdcSyncHistoryError = () => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', columnGap: '0.5rem' }}>
+      <Icon name='error' /> Failed to load sync history
+    </div>
+  );
+};
 
 type CdcGraphProps = { mirrorName: string };
 
 export default function CdcGraph({ mirrorName }: CdcGraphProps) {
   const [aggregateType, setAggregateType] = useState<TimeAggregateType>(
     TimeAggregateType.TIME_AGGREGATE_TYPE_ONE_HOUR
   );
-  const [graphValues, setGraphValues] = useState<
-    { name: string; 'Rows synced at a point in time': number }[]
-  >([]);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      const req: any = {
-        flowJobName: mirrorName,
-        aggregateType,
-      };
+  ChartJS.register(
+    BarElement,
+    CategoryScale,
+    LinearScale,
+    Title,
+    Tooltip,
+    Legend
+  );
+  const theme = useTheme();
+  const isDarkMode = theme.theme === 'dark';
+  const chartOptions: ChartOptions<'bar'> = {
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        grid: { display: false },
+      },
+      y: {
+        grid: {
+          color: isDarkMode ? '#333333' : '#e5e7eb',
+        },
+      },
+    },
+  };
+  const fetcher = async ([mirrorName, aggregateType]: [
+    string,
+    TimeAggregateType,
+  ]) => {
+    const req = {
+      flowJobName: mirrorName,
+      aggregateType,
+    };
+    const res = await fetch('/api/v1/mirrors/cdc/graph', {
+      method: 'POST',
+      cache: 'no-store',
+      body: JSON.stringify(req),
+    });
+    const data: { data: { time: number; rows: number }[] } = await res.json();
 
-      const res = await fetch('/api/v1/mirrors/cdc/graph', {
-        method: 'POST',
-        cache: 'no-store',
-        body: JSON.stringify(req),
-      });
-      const data: { data: { time: number; rows: number }[] } = await res.json();
-      setGraphValues(
-        data.data.map(({ time, rows }) => ({
-          name: formatGraphLabel(new Date(time), aggregateType),
-          'Rows synced at a point in time': Number(rows),
-        }))
-      );
+    const chartData = {
+      labels: data.data.map(({ time }) =>
+        formatGraphLabel(new Date(time), aggregateType)
+      ),
+      datasets: [
+        {
+          label: 'Rows synced at a point in time',
+          data: data.data.map(({ rows }) => rows),
+          backgroundColor: 'rgba(75, 192, 192, 0.2)',
+          borderColor: 'rgba(75, 192, 192, 1)',
+          borderWidth: 1,
+        },
+      ],
     };
+    return chartData;
+  };
 
-    fetchData();
-  }, [mirrorName, aggregateType]);
+  const { data, isLoading, error } = useSWR(
+    [mirrorName, aggregateType],
+    fetcher
+  );
 
   return (
     <div>
@@ -56,12 +127,21 @@ export default function CdcGraph({ mirrorName }: CdcGraphProps) {
       <div style={{ height: '3rem' }}>
         <Label variant='headline'>Sync history</Label>
       </div>
-      <BarChart
-        className='mt-3'
-        data={graphValues}
-        index='name'
-        categories={['Rows synced at a point in time']}
-      />
+      <div
+        style={{
+          height: '320px',
+          alignItems: 'center',
+          justifyContent: 'center',
+          display: 'flex',
+          width: '100%',
+        }}
+      >
+        {isLoading && <CdcSyncingLoader />}
+        {error && <CdcSyncHistoryError />}
+        {data && !isLoading && !error && (
+          <Bar data={data} options={chartOptions} />
+        )}
+      </div>
     </div>
   );
 }