chore: update CI

.github/workflows/CI.yml

@@ -45,7 +45,7 @@ jobs:
           cache: npm
       - run: npm ci
 
-      - name: Build Next.js for E2E tests
+      - name: Build Next.js for tests
         run: npm run build
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
@@ -68,48 +68,5 @@ jobs:
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
-      - name: Install Playwright (used for Storybook and E2E tests)
-        run: npx playwright install --with-deps
-
       - name: Run storybook tests
         run: npm run test-storybook:ci
-
-      - name: Run E2E tests
-        run: npx percy exec -- npm run test:e2e
-        env:
-          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
-          CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
-
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: test-results
-          path: test-results/
-          retention-days: 7
-
-  synchronize-with-crowdin:
-    name: GitHub PR synchronize with Crowdin
-    runs-on: ubuntu-latest
-
-    needs: [build, test]
-    if: github.event_name == 'pull_request'
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha }} # Crowdin Actions needs to push commits to the PR branch, checkout HEAD commit instead of merge commit
-          fetch-depth: 0
-
-      - name: crowdin action
-        uses: crowdin/github-action@v2
-        with:
-          upload_sources: true
-          upload_translations: true
-          download_translations: true
-          create_pull_request: false
-          localization_branch_name: ${{ github.head_ref || github.ref_name }} # explanation here: https://stackoverflow.com/a/71158878
-          commit_message: 'chore: new Crowdin translations by GitHub Action'
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
-          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

package.json

@@ -40,6 +40,7 @@
     "@spotlightjs/spotlight": "^2.12.0",
     "@t3-oss/env-nextjs": "^0.12.0",
     "chart.js": "^4.4.9",
+    "daisyui": "^5.0.27",
     "drizzle-orm": "^0.41.0",
     "next": "^15.3.0",
     "next-intl": "^3.26.5",

src/app/[locale]/page.tsx

@@ -1,16 +1,7 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
+import VisualSplitwise from '@/components/VisualSplitwise';
+import { useEffect, useState } from 'react';
 
 type Member = {
   id: number;
@@ -31,23 +22,8 @@ type Group = {
 export default function Home() {
   const [groups, setGroups] = useState<Group[]>([]);
   const [selectedGroup, setSelectedGroup] = useState<Group | null>(null);
-
-  const processChartData = (group: Group) => {
-    return group.members.map((member) => {
-      const balance = member.balance.find(b => b.currency_code === 'CAD');
-      return {
-        name: member.first_name,
-        amount: balance ? Number.parseFloat(balance.amount) : 0,
-      };
-    });
-  };
-
-  const chartData = useMemo(() => {
-    if (!selectedGroup) {
-      return [];
-    }
-    return processChartData(selectedGroup);
-  }, [selectedGroup]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -61,102 +37,30 @@ export default function Home() {
         }
       } catch (error) {
         console.error('Error fetching data:', error);
+        setError('Failed to fetch data');
+      } finally {
+        setIsLoading(false);
       }
     };
 
     fetchData();
   }, []);
 
-  const CustomTooltip = ({ active, payload, label }: any) => {
-    if (active && payload && payload.length) {
-      return (
-        <div>
-          <p>{label}</p>
-          <p>
-            {payload[0].value > 0 ? 'To Receive' : 'To Pay'}
-            : $
-            {Math.abs(payload[0].value).toFixed(2)}
-          </p>
-        </div>
-      );
-    }
-    return null;
-  };
+  if (isLoading) {
+    return <div className="flex items-center justify-center h-screen">Loading...</div>;
+  }
+
+  if (error) {
+    return <div className="flex items-center justify-center h-screen text-red-500">{error}</div>;
+  }
 
   return (
     <main>
-
-      <h1 className="flex justify-center items-center text-2xl text-shadow font-bold">Visual Splitwise</h1>
-
-      <div className="flex justify-center items-center my-4">
-        <select
-          value={selectedGroup?.id}
-          onChange={(e) => {
-            const group = groups.find(g => g.id === Number.parseInt(e.target.value));
-            setSelectedGroup(group || null);
-          }}
-        >
-          {groups.map(group => (
-            <option key={group.id} value={group.id}>
-              {group.name}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      {selectedGroup && (
-        <div>
-          <div className="h-[400px] w-full">
-            {chartData.length > 0
-              ? (
-                  <ResponsiveContainer width="100%" height="100%">
-                    <BarChart
-                      data={chartData}
-                      layout="vertical"
-                      margin={{ top: 20, right: 20, left: 20, bottom: 20 }}
-                      barGap={8}
-                      barSize={40}
-                    >
-                      <CartesianGrid strokeDasharray="3 3" />
-                      <XAxis type="number" />
-                      <YAxis
-                        dataKey="name"
-                        type="category"
-                        width={0}
-                        tick={false}
-                        axisLine={false}
-                        tickLine={false}
-                        interval={0}
-                      />
-                      <Tooltip content={<CustomTooltip />} />
-                      <Bar
-                        dataKey="amount"
-                        radius={[0, 4, 4, 0]}
-                        barSize={40}
-                        label={{
-                          position: 'inside',
-                          fill: '#fff',
-                          fontSize: 20,
-                          fontWeight: 'bold',
-                          formatter: (value: any) => {
-                            const data = chartData.find(d => d.amount === value);
-                            return data ? `${data.name} ($${Math.abs(value).toFixed(2)})` : '';
-                          },
-                        }}
-                      >
-                        {chartData.map((entry, index) => (
-                          <Cell key={`cell-${index}`} fill={entry.amount >= 0 ? '#4CAF50' : '#FF5252'} />
-                        ))}
-                      </Bar>
-                    </BarChart>
-                  </ResponsiveContainer>
-                )
-              : (
-                  <div>No data available</div>
-                )}
-          </div>
-        </div>
-      )}
+      <VisualSplitwise
+        groups={groups}
+        selectedGroup={selectedGroup}
+        onGroupChange={group => setSelectedGroup(group)}
+      />
     </main>
   );
 }