fix: 178 Handle the case when we are not included in group expense

src/pages/activity.tsx

@@ -1,16 +1,15 @@
-import Head from 'next/head';
-import MainLayout from '~/components/Layout/MainLayout';
 import { SplitType } from '@prisma/client';
-import { api } from '~/utils/api';
 import { format } from 'date-fns';
-import { UserAvatar } from '~/components/ui/avatar';
-import { toUIString } from '~/utils/numbers';
-import Link from 'next/link';
-import { type NextPageWithUser } from '~/types';
 import { type User } from 'next-auth';
-import { BalanceSkeleton } from '~/components/ui/skeleton';
-import useEnableAfter from '~/hooks/useEnableAfter';
+import Head from 'next/head';
+import Link from 'next/link';
+import MainLayout from '~/components/Layout/MainLayout';
+import { UserAvatar } from '~/components/ui/avatar';
 import { LoadingSpinner } from '~/components/ui/spinner';
+import useEnableAfter from '~/hooks/useEnableAfter';
+import { type NextPageWithUser } from '~/types';
+import { api } from '~/utils/api';
+import { toUIString } from '~/utils/numbers';
 
 function getPaymentString(
   user: User,
@@ -23,6 +22,8 @@ function getPaymentString(
 ) {
   if (isDeleted) {
     return null;
+  } else if (expenseUserAmt === 0) {
+    return <div className="text-sm text-gray-400">Not involved</div>;
   } else if (isSettlement) {
     return (
       <div className={`${user.id === paidBy ? ' text-emerald-500' : 'text-orange-500'} text-sm`}>
@@ -52,7 +53,7 @@ const ActivityPage: NextPageWithUser = ({ user }) => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <MainLayout title="Activity">
-        <div className=" h-full px-4">
+        <div className="px-4">
           <div className="flex flex-col gap-4">
             {expensesQuery.isLoading ? (
               showProgress ? (
@@ -117,7 +118,6 @@ const ActivityPage: NextPageWithUser = ({ user }) => {
               </>
             )}
           </div>
-          <div className="h-28"></div>
         </div>
       </MainLayout>
     </>

src/pages/groups/[groupId].tsx

@@ -1,34 +1,28 @@
-import Head from 'next/head';
-import MainLayout from '~/components/Layout/MainLayout';
+import { SplitType } from '@prisma/client';
 import Avatar from 'boring-avatars';
 import clsx from 'clsx';
-import { Button } from '~/components/ui/button';
-import { SplitType } from '@prisma/client';
-import { api } from '~/utils/api';
-import { useRouter } from 'next/router';
+import { format } from 'date-fns';
+import { motion } from 'framer-motion';
 import {
+  BarChartHorizontal,
   Check,
   ChevronLeft,
   DoorOpen,
+  Info,
   Share,
   Trash2,
   UserPlus,
-  BarChartHorizontal,
-  Info,
 } from 'lucide-react';
-import { AppDrawer } from '~/components/ui/drawer';
-import { UserAvatar } from '~/components/ui/avatar';
-import NoMembers from '~/components/group/NoMembers';
-import { format } from 'date-fns';
-import AddMembers from '~/components/group/AddMembers';
+import Head from 'next/head';
 import Image from 'next/image';
-import { toUIString } from '~/utils/numbers';
 import Link from 'next/link';
-import { CategoryIcon } from '~/components/ui/categoryIcons';
-import { env } from '~/env';
+import { useRouter } from 'next/router';
 import { useState } from 'react';
-import { type NextPageWithUser } from '~/types';
-import { motion } from 'framer-motion';
+import { toast } from 'sonner';
+import AddMembers from '~/components/group/AddMembers';
+import GroupMyBalance from '~/components/group/GroupMyBalance';
+import NoMembers from '~/components/group/NoMembers';
+import MainLayout from '~/components/Layout/MainLayout';
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -39,8 +33,14 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '~/components/ui/alert-dialog';
-import { toast } from 'sonner';
-import GroupMyBalance from '~/components/group/GroupMyBalance';
+import { UserAvatar } from '~/components/ui/avatar';
+import { Button } from '~/components/ui/button';
+import { CategoryIcon } from '~/components/ui/categoryIcons';
+import { AppDrawer } from '~/components/ui/drawer';
+import { env } from '~/env';
+import { type NextPageWithUser } from '~/types';
+import { api } from '~/utils/api';
+import { toUIString } from '~/utils/numbers';
 
 const BalancePage: NextPageWithUser<{
   enableSendingInvites: boolean;
@@ -416,15 +416,25 @@ const BalancePage: NextPageWithUser<{
               </div>
               {isSettlement ? null : (
                 <div className="min-w-10 shrink-0">
-                  <div
-                    className={`text-right text-xs ${youPaid ? 'text-emerald-500' : 'text-orange-600'}`}
-                  >
-                    {youPaid ? 'You lent' : 'You owe'}
-                  </div>
-                  <div className={`text-right ${youPaid ? 'text-emerald-500' : 'text-orange-600'}`}>
-                    <span className="font-light ">{e.currency}</span>{' '}
-                    {toUIString(yourExpenseAmount)}
-                  </div>
+                  {youPaid || yourExpenseAmount !== 0 ? (
+                    <>
+                      <div
+                        className={`text-right text-xs ${youPaid ? 'text-emerald-500' : 'text-orange-600'}`}
+                      >
+                        {youPaid ? 'You lent' : 'You owe'}
+                      </div>
+                      <div
+                        className={`text-right ${youPaid ? 'text-emerald-500' : 'text-orange-600'}`}
+                      >
+                        <span className="font-light ">{e.currency}</span>{' '}
+                        {toUIString(yourExpenseAmount)}
+                      </div>
+                    </>
+                  ) : (
+                    <div>
+                      <p className="text-xs text-gray-400">Not involved</p>
+                    </div>
+                  )}
                 </div>
               )}
             </Link>