├── .eslintrc.json
├── app
    ├── favicon.ico
    ├── fonts
    │   ├── GeistVF.woff
    │   └── GeistMonoVF.woff
    ├── sign-in
    │   └── [[...sign-in]]
    │   │   └── page.tsx
    ├── sign-up
    │   └── [[...sign-up]]
    │   │   └── page.tsx
    ├── layout.tsx
    ├── page.tsx
    ├── globals.css
    ├── groups
    │   └── page.tsx
    ├── actions.ts
    ├── group
    │   ├── page.tsx
    │   └── [id]
    │   │   └── page.tsx
    └── expense
    │   └── page.tsx
├── public
    └── og-image.png
├── next.config.mjs
├── next.config.js
├── .env.example
├── postcss.config.mjs
├── lib
    └── utils.ts
├── components.json
├── .gitignore
├── middleware.ts
├── tsconfig.json
├── components
    ├── FeatureCard.tsx
    ├── ui
    │   ├── label.tsx
    │   ├── textarea.tsx
    │   ├── toaster.tsx
    │   ├── input.tsx
    │   ├── button.tsx
    │   ├── card.tsx
    │   ├── toast.tsx
    │   └── select.tsx
    ├── Banner.tsx
    └── Navigation.tsx
├── package.json
├── tailwind.config.ts
├── README.md
└── hooks
    └── use-toast.ts


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals", "next/typescript"]
3 | }
4 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kulkarniankita/splitwise-clone-app-ai/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/public/og-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kulkarniankita/splitwise-clone-app-ai/HEAD/public/og-image.png


--------------------------------------------------------------------------------
/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kulkarniankita/splitwise-clone-app-ai/HEAD/app/fonts/GeistVF.woff


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kulkarniankita/splitwise-clone-app-ai/HEAD/app/fonts/GeistMonoVF.woff


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | module.exports = nextConfig;
5 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
2 | CLERK_SECRET_KEY=
3 | NEXT_PUBLIC_CLERK_SIGN_IN_URL=
4 | NEXT_PUBLIC_CLERK_SIGN_UP_URL=
5 | DATABASE_URL=


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/app/sign-in/[[...sign-in]]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { SignIn } from '@clerk/nextjs';
 2 | 
 3 | export default function Page() {
 4 |   return (
 5 |     <div className="flex min-h-screen p-12 justify-center">
 6 |       <SignIn />
 7 |     </div>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/app/sign-up/[[...sign-up]]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { SignUp } from '@clerk/nextjs';
 2 | 
 3 | export default function Page() {
 4 |   return (
 5 |     <div className="flex min-h-screen p-12 justify-center">
 6 |       <SignUp />
 7 |     </div>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   }
20 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
 2 | 
 3 | const isPublicRoute = createRouteMatcher(['/sign-in(.*)', '/sign-up(.*)', '/']);
 4 | 
 5 | export default clerkMiddleware((auth, request) => {
 6 |   if (!isPublicRoute(request)) {
 7 |     auth().protect();
 8 |   }
 9 | });
10 | 
11 | export const config = {
12 |   matcher: [
13 |     // Skip Next.js internals and all static files, unless found in search params
14 |     '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
15 |     // Always run for API routes
16 |     '/(api|trpc)(.*)',
17 |   ],
18 | };
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/components/FeatureCard.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | interface FeatureCardProps {
 4 |   Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
 5 |   title: string;
 6 |   description: string;
 7 | }
 8 | 
 9 | export default function FeatureCard({
10 |   Icon,
11 |   title,
12 |   description,
13 | }: FeatureCardProps) {
14 |   return (
15 |     <div className="p-6 bg-white rounded-lg shadow-md text-gray-900 text-center">
16 |       {' '}
17 |       {/* Center text */}
18 |       <div className="flex items-center justify-center mb-4">
19 |         <Icon className="h-12 w-12 text-purple-600" /> {/* Update icon color */}
20 |       </div>
21 |       <h3 className="text-xl font-bold mb-2">{title}</h3>
22 |       <p>{description}</p>
23 |     </div>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { ClerkProvider } from '@clerk/nextjs';
 2 | import './globals.css';
 3 | import Navigation from '@/components/Navigation';
 4 | import { Montserrat } from 'next/font/google';
 5 | import { Toaster } from '@/components/ui/toaster';
 6 | 
 7 | const montserrat = Montserrat({ subsets: ['latin'] });
 8 | 
 9 | export const metadata = {
10 |   title: 'Split',
11 |   description: 'Split your expenses with your friends',
12 | };
13 | 
14 | export default function RootLayout({
15 |   children,
16 | }: {
17 |   children: React.ReactNode;
18 | }) {
19 |   return (
20 |     <ClerkProvider>
21 |       <html lang="en">
22 |         <body className={montserrat.className}>
23 |           <Navigation />
24 |           {children}
25 |           <Toaster />
26 |         </body>
27 |       </html>
28 |     </ClerkProvider>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import { cn } from '@/lib/utils';
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
 7 |   // Add a placeholder member as an example
 8 |   placeholder?: string; // Optional member
 9 | }
10 | 
11 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
12 |   ({ className, ...props }, ref) => {
13 |     return (
14 |       <textarea
15 |         className={cn(
16 |           'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
17 |           className
18 |         )}
19 |         ref={ref}
20 |         {...props}
21 |       />
22 |     );
23 |   }
24 | );
25 | Textarea.displayName = 'Textarea';
26 | 
27 | export { Textarea };
28 | 


--------------------------------------------------------------------------------
/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import {
 4 |   Toast,
 5 |   ToastClose,
 6 |   ToastDescription,
 7 |   ToastProvider,
 8 |   ToastTitle,
 9 |   ToastViewport,
10 | } from '@/components/ui/toast';
11 | import { useToast } from '@/hooks/use-toast';
12 | 
13 | export function Toaster() {
14 |   const { toasts } = useToast();
15 | 
16 |   return (
17 |     <ToastProvider>
18 |       {toasts.map(function ({ id, title, description, action, ...props }) {
19 |         return (
20 |           <Toast key={id} {...props}>
21 |             <div className="grid gap-1">
22 |               {title && <ToastTitle>{title}</ToastTitle>}
23 |               {description && (
24 |                 <ToastDescription>{description}</ToastDescription>
25 |               )}
26 |             </div>
27 |             {action}
28 |             <ToastClose />
29 |           </Toast>
30 |         );
31 |       })}
32 |       <ToastViewport />
33 |     </ToastProvider>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import { cn } from '@/lib/utils';
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {
 7 |   // Add a placeholder member as an example
 8 |   placeholder?: string; // Optional member
 9 | }
10 | 
11 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
12 |   ({ className, type, ...props }, ref) => {
13 |     return (
14 |       <input
15 |         type={type}
16 |         className={cn(
17 |           'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
18 |           className
19 |         )}
20 |         ref={ref}
21 |         {...props}
22 |       />
23 |     );
24 |   }
25 | );
26 | Input.displayName = 'Input';
27 | 
28 | export { Input };
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "split-ai-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@clerk/nextjs": "^5.6.2",
13 |     "@neondatabase/serverless": "^0.9.5",
14 |     "@radix-ui/react-icons": "^1.3.0",
15 |     "@radix-ui/react-label": "^2.1.0",
16 |     "@radix-ui/react-select": "^2.1.1",
17 |     "@radix-ui/react-slot": "^1.1.0",
18 |     "@radix-ui/react-toast": "^1.2.1",
19 |     "class-variance-authority": "^0.7.0",
20 |     "clsx": "^2.1.1",
21 |     "lucide-react": "^0.446.0",
22 |     "next": "14.2.13",
23 |     "react": "^18",
24 |     "react-dom": "^18",
25 |     "tailwind-merge": "^2.5.2",
26 |     "tailwindcss-animate": "^1.0.7"
27 |   },
28 |   "devDependencies": {
29 |     "@types/node": "^20",
30 |     "@types/react": "^18",
31 |     "@types/react-dom": "^18",
32 |     "eslint": "^8",
33 |     "eslint-config-next": "14.2.13",
34 |     "postcss": "^8",
35 |     "tailwindcss": "^3.4.1",
36 |     "typescript": "^5"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/components/Banner.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Button } from '@/components/ui/button';
 3 | import Link from 'next/link';
 4 | 
 5 | export default function Banner() {
 6 |   return (
 7 |     <div className="relative">
 8 |       <div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-pink-600" />
 9 |       <div className="relative flex flex-col items-center justify-center py-32 px-6 sm:py-40 sm:px-12 text-center">
10 |         <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-4 text-gray-900 p-4">
11 |           Split expenses with friends in seconds
12 |         </h1>
13 |         <p className="text-lg sm:text-xl md:text-2xl lg:text-3xl mb-8 text-gray-900 p-4">
14 |           Whether it&apos;s a group trip or dinner, Split makes it easy to track
15 |           shared expenses and settle up in a single tap.
16 |         </p>
17 |         <Link href="/group">
18 |           <Button
19 |             size="lg"
20 |             className="bg-purple-600 text-white text-lg sm:text-xl md:text-2xl lg:text-3xl p-8"
21 |           >
22 |             Get Started
23 |           </Button>
24 |         </Link>
25 |       </div>
26 |     </div>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/components/Navigation.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { UserButton } from '@clerk/nextjs';
 3 | import Link from 'next/link';
 4 | 
 5 | export default function Navigation() {
 6 |   return (
 7 |     <nav className="flex justify-between items-center p-4 bg-gray-100">
 8 |       <Link href="/" className="flex items-center space-x-2">
 9 |         <svg
10 |           viewBox="0 0 24 24"
11 |           className="h-6 w-6 fill-current"
12 |           style={{ fill: '#6200EA' }}
13 |         >
14 |           <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
15 |         </svg>
16 |         <span className="font-bold text-xl" style={{ color: '#6200EA' }}>
17 |           Split
18 |         </span>
19 |       </Link>
20 | 
21 |       <div className="flex items-center space-x-12">
22 |         {/* Added new link for 'Your Groups' */}
23 |         <Link
24 |           href="/groups"
25 |           className="text-gray-700 hover:text-gray-900 hover:underline"
26 |         >
27 |           Your Groups
28 |         </Link>
29 |         <Link
30 |           href="/group"
31 |           className="text-gray-700 hover:text-gray-900 hover:underline"
32 |         >
33 |           Create Group
34 |         </Link>
35 |         <Link
36 |           href="/expense"
37 |           className="text-gray-700 hover:text-gray-900 hover:underline"
38 |         >
39 |           Add Expense
40 |         </Link>
41 |         <UserButton />
42 |       </div>
43 |     </nav>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import React from 'react';
 4 | import { Users, UserPlus, LineChart } from 'lucide-react';
 5 | import Banner from '@/components/Banner';
 6 | import FeatureCard from '@/components/FeatureCard';
 7 | 
 8 | export default function LandingPage() {
 9 |   return (
10 |     <div className="min-h-screen text-gray-900">
11 |       {/* Hero Section */}
12 |       <Banner />
13 |       {/* Features Section */}
14 |       <div className="container mx-auto px-4 py-16 sm:px-6 lg:px-8">
15 |         <h2 className="text-3xl font-bold mb-12 text-center text-gray-900">
16 |           Why use Split?
17 |         </h2>
18 |         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
19 |           <FeatureCard
20 |             Icon={Users}
21 |             title="Group expense tracking"
22 |             description="Easily add group members to your expense. All the expenses are added up and divided by the number of people in the group."
23 |           />
24 |           <FeatureCard
25 |             Icon={UserPlus}
26 |             title="Individual expense addition"
27 |             description="Add expenses to your group. You can add your expenses, and they will be automatically added to your group's expenses."
28 |           />
29 |           <FeatureCard
30 |             Icon={LineChart}
31 |             title="Expense viewing"
32 |             description="View all your expenses in one place. You can see how much you've spent and how much you owe."
33 |           />
34 |         </div>
35 |       </div>
36 |       {/* Footer */}
37 |       <footer className="container mx-auto px-4 py-6 sm:px-6 lg:px-8 text-center text-sm text-gray-400">
38 |         By using Split, you agree to our Terms of Service and Privacy Policy
39 |       </footer>
40 |     </div>
41 |   );
42 | }
43 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { Slot } from '@radix-ui/react-slot';
 3 | import { cva, type VariantProps } from 'class-variance-authority';
 4 | 
 5 | import { cn } from '@/lib/utils';
 6 | 
 7 | const buttonVariants = cva(
 8 |   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           'bg-purple-600 text-primary-foreground shadow hover:bg-purple-500',
14 |         destructive:
15 |           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
16 |         outline:
17 |           'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
18 |         secondary:
19 |           'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
20 |         ghost: 'hover:bg-accent hover:text-accent-foreground',
21 |         link: 'text-primary underline-offset-4 hover:underline',
22 |       },
23 |       size: {
24 |         default: 'h-9 px-4 py-2',
25 |         sm: 'h-8 rounded-md px-3 text-xs',
26 |         lg: 'h-10 rounded-md px-8',
27 |         icon: 'h-9 w-9',
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: 'default',
32 |       size: 'default',
33 |     },
34 |   }
35 | );
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean;
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : 'button';
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     );
53 |   }
54 | );
55 | Button.displayName = 'Button';
56 | 
57 | export { Button, buttonVariants };
58 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | body {
 6 |   font-family: Arial, Helvetica, sans-serif;
 7 |   @apply bg-background text-gray-900; /* Update text color */
 8 | }
 9 | 
10 | @layer utilities {
11 |   .text-balance {
12 |     text-wrap: balance;
13 |   }
14 | }
15 | 
16 | @layer base {
17 |   :root {
18 |     --background: 0 0% 100%;
19 |     --foreground: 0 0% 3.9%;
20 |     --card: 0 0% 100%;
21 |     --card-foreground: 0 0% 3.9%;
22 |     --popover: 0 0% 100%;
23 |     --popover-foreground: 0 0% 3.9%;
24 |     --primary: 0 0% 9%;
25 |     --primary-foreground: 0 0% 98%;
26 |     --secondary: 0 0% 96.1%;
27 |     --secondary-foreground: 0 0% 9%;
28 |     --muted: 0 0% 96.1%;
29 |     --muted-foreground: 0 0% 45.1%;
30 |     --accent: 0 0% 96.1%;
31 |     --accent-foreground: 0 0% 9%;
32 |     --destructive: 0 84.2% 60.2%;
33 |     --destructive-foreground: 0 0% 98%;
34 |     --border: 0 0% 89.8%;
35 |     --input: 0 0% 89.8%;
36 |     --ring: 0 0% 3.9%;
37 |     --chart-1: 12 76% 61%;
38 |     --chart-2: 173 58% 39%;
39 |     --chart-3: 197 37% 24%;
40 |     --chart-4: 43 74% 66%;
41 |     --chart-5: 27 87% 67%;
42 |     --radius: 0.5rem;
43 |   }
44 |   .dark {
45 |     --background: 0 0% 3.9%;
46 |     --foreground: 0 0% 98%;
47 |     --card: 0 0% 3.9%;
48 |     --card-foreground: 0 0% 98%;
49 |     --popover: 0 0% 3.9%;
50 |     --popover-foreground: 0 0% 98%;
51 |     --primary: 0 0% 98%;
52 |     --primary-foreground: 0 0% 9%;
53 |     --secondary: 0 0% 14.9%;
54 |     --secondary-foreground: 0 0% 98%;
55 |     --muted: 0 0% 14.9%;
56 |     --muted-foreground: 0 0% 63.9%;
57 |     --accent: 0 0% 14.9%;
58 |     --accent-foreground: 0 0% 98%;
59 |     --destructive: 0 62.8% 30.6%;
60 |     --destructive-foreground: 0 0% 98%;
61 |     --border: 0 0% 14.9%;
62 |     --input: 0 0% 14.9%;
63 |     --ring: 0 0% 83.1%;
64 |     --chart-1: 220 70% 50%;
65 |     --chart-2: 160 60% 45%;
66 |     --chart-3: 30 80% 55%;
67 |     --chart-4: 280 65% 60%;
68 |     --chart-5: 340 75% 55%;
69 |   }
70 | }
71 | 
72 | @layer base {
73 |   * {
74 |     @apply border-border;
75 |   }
76 |   body {
77 |     @apply bg-background text-foreground;
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card text-card-foreground shadow",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ))
42 | CardTitle.displayName = "CardTitle"
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLParagraphElement,
46 |   React.HTMLAttributes<HTMLParagraphElement>
47 | >(({ className, ...props }, ref) => (
48 |   <p
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61 | ))
62 | CardContent.displayName = "CardContent"
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 | 
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'tailwindcss';
 2 | 
 3 | const config: Config = {
 4 |   darkMode: 'media', // Use 'media' or 'class' for dark mode
 5 |   content: [
 6 |     './pages/**/*.{js,ts,jsx,tsx,mdx}',
 7 |     './components/**/*.{js,ts,jsx,tsx,mdx}',
 8 |     './app/**/*.{js,ts,jsx,tsx,mdx}',
 9 |   ],
10 |   theme: {
11 |     extend: {
12 |       colors: {
13 |         background: 'hsl(var(--background))',
14 |         foreground: 'hsl(var(--foreground))',
15 |         card: {
16 |           DEFAULT: 'hsl(var(--card))',
17 |           foreground: 'hsl(var(--card-foreground))',
18 |         },
19 |         popover: {
20 |           DEFAULT: 'hsl(var(--popover))',
21 |           foreground: 'hsl(var(--popover-foreground))',
22 |         },
23 |         primary: {
24 |           DEFAULT: 'hsl(var(--primary))',
25 |           foreground: 'hsl(var(--primary-foreground))',
26 |         },
27 |         secondary: {
28 |           DEFAULT: 'hsl(var(--secondary))',
29 |           foreground: 'hsl(var(--secondary-foreground))',
30 |         },
31 |         muted: {
32 |           DEFAULT: 'hsl(var(--muted))',
33 |           foreground: 'hsl(var(--muted-foreground))',
34 |         },
35 |         accent: {
36 |           DEFAULT: 'hsl(var(--accent))',
37 |           foreground: 'hsl(var(--accent-foreground))',
38 |         },
39 |         destructive: {
40 |           DEFAULT: 'hsl(var(--destructive))',
41 |           foreground: 'hsl(var(--destructive-foreground))',
42 |         },
43 |         border: 'hsl(var(--border))',
44 |         input: 'hsl(var(--input))',
45 |         ring: 'hsl(var(--ring))',
46 |         chart: {
47 |           '1': 'hsl(var(--chart-1))',
48 |           '2': 'hsl(var(--chart-2))',
49 |           '3': 'hsl(var(--chart-3))',
50 |           '4': 'hsl(var(--chart-4))',
51 |           '5': 'hsl(var(--chart-5))',
52 |         },
53 |       },
54 |       borderRadius: {
55 |         lg: 'var(--radius)',
56 |         md: 'calc(var(--radius) - 2px)',
57 |         sm: 'calc(var(--radius) - 4px)',
58 |       },
59 |     },
60 |   },
61 |   // eslint-disable-next-line @typescript-eslint/no-require-imports
62 |   plugins: [require('tailwindcss-animate')],
63 | };
64 | export default config;
65 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Split - Easily split expenses with friends and groups (A Splitwise Clone)
 2 | 
 3 | Built with Next.js 14 App Router, Clerk for Authentication, React, NeonDb for database management, ShadCN UI library for components, TypeScript, and TailwindCSS. Utilizing Cursor AI, Claude AI and Galileo AI.
 4 | 
 5 | ![Project Image](https://splitai.vercel.app/og-image.png)
 6 | 
 7 | ## Features
 8 | 
 9 | - 🌐 Next.js 14 App Router & Server Actions
10 | - 🔐 Authentication with Clerk (Passkeys, Github, and Google Sign-in)
11 | - 👥 Create and manage groups for expense sharing
12 | - 💰 Add and track expenses within groups
13 | - 🧮 Automatic expense splitting and balance calculation
14 | - 📊 View balances and settle up with group members
15 | - 💅 TailwindCSS for styling
16 | - 📱 Responsive design for mobile and desktop
17 | - 🎨 Beautiful UI components with ShadCN UI library
18 | - 💾 NeonDb for efficient database management
19 | - 📜 TypeScript for enhanced type safety
20 | - 💅 TailwindCSS for flexible and responsive styling
21 | - 🔔 Toast notifications for user feedback
22 | - 🚀 Deployment-ready
23 | 
24 | ## Getting started
25 | 
26 | To get started with this project, follow these steps:
27 | 
28 | 1. Fork the repository
29 | 2. Clone your forked repository
30 | 3. Copy the `.env.example` variables into a new `.env.local` file
31 | 4. Install the required dependencies
32 | 5. Run the development server
33 | 
34 | ## How to fork and clone
35 | 
36 | 1. Click the "Fork" button in the top right corner of this GitHub repository to create a copy in your account.
37 | 2. Clone your forked repository to your local machine using:
38 |    ```
39 |    git clone https://github.com/kulkarniankita/split-app.git
40 |    ```
41 | 3. Navigate to the project directory:
42 |    ```
43 |    cd split-app
44 |    ```
45 | 
46 | ## Setting up the environment
47 | 
48 | 1. Copy the `.env.example` file to `.env.local`:
49 |    ```
50 |    cp .env.example .env.local
51 |    ```
52 | 2. Open `.env.local` and fill in the required credentials for Clerk, NeonDb, and any other services used in the project.
53 | 
54 | ## Running the application
55 | 
56 | 1. Install the dependencies:
57 |    ```
58 |    npm install
59 |    ```
60 | 2. Run the development server:
61 |    ```
62 |    npm run dev
63 |    ```
64 | 3. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
65 | 
66 | ## Acknowledgements
67 | 
68 | - [Clerk](https://go.clerk.com/5qOWrFA) for making this project possible
69 | 
70 | ## License
71 | 
72 | [MIT](https://choosealicense.com/licenses/mit/)
73 | 


--------------------------------------------------------------------------------
/app/groups/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import React, { useEffect, useState } from 'react';
  4 | import { Plus } from 'lucide-react';
  5 | import { Button } from '@/components/ui/button';
  6 | import Link from 'next/link';
  7 | import { useOrganizationList, useUser } from '@clerk/nextjs';
  8 | 
  9 | // Define the type for group
 10 | type Group = {
 11 |   id: string; // Add id property
 12 |   name: string;
 13 |   role: string;
 14 |   initials: string;
 15 | };
 16 | 
 17 | const GroupItem = ({
 18 |   name,
 19 |   role,
 20 |   initials,
 21 |   id,
 22 | }: {
 23 |   name: string;
 24 |   role: string;
 25 |   initials: string;
 26 |   id: string;
 27 | }) => (
 28 |   <Link href={`/group/${id}`}>
 29 |     <div className="flex items-center space-x-4 p-4 bg-white rounded-lg shadow mb-4">
 30 |       {' '}
 31 |       {/* Added margin-bottom for spacing */}
 32 |       <div className="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold">
 33 |         {initials}
 34 |       </div>
 35 |       <div className="flex-grow">
 36 |         <h3 className="font-semibold">{name}</h3>
 37 |         <p className="text-gray-500 text-sm">
 38 |           {role === 'org:admin' ? 'Admin' : 'Member'}
 39 |         </p>
 40 |       </div>
 41 |     </div>
 42 |   </Link>
 43 | );
 44 | 
 45 | const YourGroups = () => {
 46 |   const [groups, setGroups] = useState<Array<Group>>([]);
 47 |   const { userMemberships, isLoaded } = useOrganizationList({
 48 |     userMemberships: true,
 49 |   });
 50 |   const { user } = useUser();
 51 | 
 52 |   useEffect(() => {
 53 |     if (isLoaded && userMemberships.data) {
 54 |       const userGroups = userMemberships.data.map((membership) => {
 55 |         const name = membership.organization.name;
 56 |         const role = membership.role;
 57 |         const initials = name
 58 |           .split(' ')
 59 |           .map((n) => n[0])
 60 |           .join('')
 61 |           .toUpperCase();
 62 |         return {
 63 |           id: membership.organization.id, // Add this line
 64 |           name,
 65 |           role,
 66 |           initials,
 67 |         };
 68 |       });
 69 |       setGroups(userGroups);
 70 |     }
 71 |   }, [isLoaded, userMemberships.data]);
 72 | 
 73 |   if (!isLoaded || !user) {
 74 |     return <div>Loading...</div>;
 75 |   }
 76 | 
 77 |   return (
 78 |     <div className="max-w-2xl mx-auto p-4">
 79 |       <h1 className="text-3xl font-bold mb-4">Your Groups</h1>
 80 |       <p className="text-gray-600 mb-6">
 81 |         View and manage all your groups in one place. You can see the groups
 82 |         you&apos;re a part of, your role in each group, and easily access each
 83 |         group&apos;s details.
 84 |       </p>
 85 |       <div className="space-y-8">
 86 |         {groups.map((group, index) => (
 87 |           <GroupItem key={index} {...group} id={group.id} />
 88 |         ))}
 89 |       </div>
 90 |       <Link href="/group">
 91 |         <Button className="mt-6 bg-purple-600 hover:bg-purple-700 text-white flex items-center justify-center p-4 rounded-lg shadow mb-4">
 92 |           {' '}
 93 |           {/* Added margin-bottom for spacing */}
 94 |           <Plus className="w-4 h-4 mr-2" />
 95 |           Create New Group
 96 |         </Button>
 97 |       </Link>
 98 |     </div>
 99 |   );
100 | };
101 | 
102 | export default YourGroups;
103 | 


--------------------------------------------------------------------------------
/app/actions.ts:
--------------------------------------------------------------------------------
  1 | 'use server';
  2 | 
  3 | import { neon } from '@neondatabase/serverless';
  4 | 
  5 | const sql = neon(process.env.DATABASE_URL!);
  6 | 
  7 | interface SplitMember {
  8 |   id: string;
  9 |   name: string;
 10 | }
 11 | 
 12 | interface ExpenseData {
 13 |   amount: number;
 14 |   description: string;
 15 |   groupId: string;
 16 |   splitPercentage: number;
 17 |   splitWith: SplitMember[];
 18 |   createdBy: string;
 19 | }
 20 | 
 21 | interface Balance {
 22 |   name: string;
 23 |   amount: number;
 24 |   owes: boolean;
 25 | }
 26 | 
 27 | interface Expense {
 28 |   id: string;
 29 |   amount: number;
 30 |   description: string;
 31 |   created_by: string;
 32 |   split_with: {
 33 |     id: string;
 34 |     name: string;
 35 |     splitAmount: number;
 36 |   }[];
 37 | }
 38 | 
 39 | export async function addExpense(expenseData: ExpenseData) {
 40 |   const {
 41 |     amount,
 42 |     description,
 43 |     groupId,
 44 |     splitPercentage,
 45 |     splitWith,
 46 |     createdBy,
 47 |   } = expenseData;
 48 | 
 49 |   try {
 50 |     // Calculate split amount for each member
 51 |     const splitAmount = (amount * (splitPercentage / 100)) / splitWith.length;
 52 | 
 53 |     // Create a JSON object with member information and split amounts
 54 |     const splitWithInfo = splitWith.map((member) => ({
 55 |       id: member.id,
 56 |       name: member.name,
 57 |       splitAmount: splitAmount,
 58 |     }));
 59 | 
 60 |     // Insert the expense
 61 |     await sql`
 62 |       INSERT INTO expenses (
 63 |         amount, description, group_id, split_percentage, created_by, split_with
 64 |       )
 65 |       VALUES (
 66 |         ${amount}, ${description}, ${groupId}, ${splitPercentage}, ${createdBy}, ${JSON.stringify(
 67 |       splitWithInfo
 68 |     )}
 69 |       )
 70 |     `;
 71 | 
 72 |     return { success: true };
 73 |   } catch (error) {
 74 |     console.error('Error adding expense:', error);
 75 |     return { success: false };
 76 |   }
 77 | }
 78 | 
 79 | export async function getGroupData(groupId: string, userName: string) {
 80 |   try {
 81 |     const expenses = (await sql`
 82 |       SELECT id, amount, description, created_by, split_with
 83 |       FROM expenses
 84 |       WHERE group_id = ${groupId}
 85 |       ORDER BY created_at DESC
 86 |     `) as Expense[];
 87 | 
 88 |     const balances: Balance[] = [];
 89 |     const balanceMap = new Map<string, { amount: number; name: string }>();
 90 | 
 91 |     expenses.forEach((expense) => {
 92 |       const creatorSplit =
 93 |         expense.amount -
 94 |         expense.split_with.reduce(
 95 |           (sum: number, member: { splitAmount: number }) =>
 96 |             sum + member.splitAmount,
 97 |           0
 98 |         );
 99 | 
100 |       // Get creator's name from split_with
101 |       const creatorName =
102 |         expense.split_with.find(
103 |           (m: { name: string }) => m.name === expense.created_by
104 |         )?.name || 'Unknown';
105 | 
106 |       // Update creator's balance
107 |       const creatorBalance = balanceMap.get(expense.created_by) || {
108 |         amount: 0,
109 |         name: creatorName,
110 |       };
111 |       creatorBalance.amount += creatorSplit;
112 |       balanceMap.set(expense.created_by, creatorBalance);
113 |       // Update split members' balances
114 |       expense.split_with.forEach(
115 |         (member: { name: string; splitAmount: number }) => {
116 |           const memberBalance = balanceMap.get(member.name) || {
117 |             amount: 0,
118 |             name: member.name,
119 |           };
120 |           memberBalance.amount -= member.splitAmount;
121 |           balanceMap.set(member.name, memberBalance);
122 |         }
123 |       );
124 |     });
125 | 
126 |     balanceMap.forEach(({ amount, name }) => {
127 |       if (name !== userName && amount < 0) {
128 |         balances.push({
129 |           name,
130 |           amount: Math.abs(amount),
131 |           owes: true,
132 |         });
133 |       }
134 |     });
135 | 
136 |     return { expenses, balances };
137 |   } catch (error) {
138 |     console.error('Error fetching group data:', error);
139 |     return { expenses: [], balances: [] };
140 |   }
141 | }
142 | 
143 | export async function deleteExpense(expenseId: string) {
144 |   try {
145 |     await sql`
146 |       DELETE FROM expenses
147 |       WHERE id = ${expenseId}
148 |     `;
149 |     return { success: true };
150 |   } catch (error) {
151 |     console.error('Error deleting expense:', error);
152 |     return { success: false };
153 |   }
154 | }
155 | 


--------------------------------------------------------------------------------
/app/group/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { Button } from '@/components/ui/button';
  4 | import { Input } from '@/components/ui/input';
  5 | import { useToast } from '@/hooks/use-toast';
  6 | import { useOrganizationList, useUser } from '@clerk/nextjs';
  7 | import { PlusCircle } from 'lucide-react';
  8 | import React, { useState } from 'react';
  9 | import { useRouter } from 'next/navigation';
 10 | 
 11 | export default function CreateGroup() {
 12 |   const [groupName, setGroupName] = useState('');
 13 |   const [inviteEmail, setInviteEmail] = useState('');
 14 |   const [invitedMembers, setInvitedMembers] = useState<string[]>([]);
 15 |   const [isLoading, setIsLoading] = useState(false);
 16 |   const { user } = useUser();
 17 |   const { createOrganization } = useOrganizationList();
 18 |   const { toast } = useToast();
 19 |   const router = useRouter();
 20 | 
 21 |   const handleCreateGroup = async (e: React.FormEvent) => {
 22 |     e.preventDefault();
 23 |     if (!user) {
 24 |       toast({
 25 |         variant: 'destructive',
 26 |         title: 'Authentication Error',
 27 |         description: 'You must be logged in to create a group',
 28 |       });
 29 |       return;
 30 |     }
 31 | 
 32 |     setIsLoading(true);
 33 |     try {
 34 |       if (!createOrganization) {
 35 |         throw new Error('createOrganization function is undefined');
 36 |       }
 37 |       const organization = await createOrganization({ name: groupName });
 38 | 
 39 |       // Invite members
 40 |       for (const email of invitedMembers) {
 41 |         await organization.inviteMember({
 42 |           emailAddress: email,
 43 |           role: 'org:member',
 44 |         });
 45 |       }
 46 | 
 47 |       toast({
 48 |         title: 'Success',
 49 |         description: 'Group created successfully!',
 50 |       });
 51 | 
 52 |       // Redirect to the new group page
 53 |       router.push(`/group/${organization.id}`);
 54 |     } catch (error) {
 55 |       console.error('Error creating group:', error);
 56 |       toast({
 57 |         variant: 'destructive',
 58 |         title: 'Error',
 59 |         description: 'Failed to create group. Please try again.',
 60 |       });
 61 |     } finally {
 62 |       setIsLoading(false);
 63 |     }
 64 |   };
 65 | 
 66 |   const handleInvite = () => {
 67 |     if (inviteEmail && !invitedMembers.includes(inviteEmail)) {
 68 |       setInvitedMembers([...invitedMembers, inviteEmail]);
 69 |       setInviteEmail('');
 70 |     }
 71 |   };
 72 | 
 73 |   return (
 74 |     <div className="container mx-auto px-4 py-8 sm:px-6 lg:px-8 max-w-2xl">
 75 |       <h1 className="text-2xl font-bold mb-2">Create a group</h1>
 76 |       <p className="text-gray-600 mb-6">
 77 |         Split expenses with friends, roommates, and more.
 78 |       </p>
 79 | 
 80 |       <form onSubmit={handleCreateGroup} className="space-y-6">
 81 |         <div>
 82 |           <label
 83 |             htmlFor="groupName"
 84 |             className="block text-sm font-medium text-gray-700 mb-1"
 85 |           >
 86 |             Group name
 87 |           </label>
 88 |           <Input
 89 |             id="groupName"
 90 |             name="groupName"
 91 |             type="text"
 92 |             placeholder="Enter group name"
 93 |             className="w-full"
 94 |             value={groupName}
 95 |             onChange={(e) => setGroupName(e.target.value)}
 96 |             required
 97 |           />
 98 |         </div>
 99 | 
100 |         <div>
101 |           <label
102 |             htmlFor="inviteEmail"
103 |             className="block text-sm font-medium text-gray-700 mb-1"
104 |           >
105 |             Invite members
106 |           </label>
107 |           <div className="flex space-x-2">
108 |             <Input
109 |               id="inviteEmail"
110 |               name="inviteEmail"
111 |               type="email"
112 |               placeholder="Enter email address"
113 |               value={inviteEmail}
114 |               onChange={(e) => setInviteEmail(e.target.value)}
115 |               className="flex-grow"
116 |             />
117 |             <Button type="button" onClick={handleInvite} disabled={isLoading}>
118 |               <PlusCircle className="mr-2 h-4 w-4" />
119 |               Invite
120 |             </Button>
121 |           </div>
122 |         </div>
123 | 
124 |         {invitedMembers.length > 0 && (
125 |           <div>
126 |             <h3 className="text-sm font-medium text-gray-700 mb-2">
127 |               Invited members:
128 |             </h3>
129 |             <ul className="list-disc pl-5">
130 |               {invitedMembers.map((email, index) => (
131 |                 <li key={index}>{email}</li>
132 |               ))}
133 |             </ul>
134 |           </div>
135 |         )}
136 | 
137 |         <Button className="w-full" type="submit" disabled={isLoading}>
138 |           {isLoading ? 'Creating...' : 'Create Group'}
139 |         </Button>
140 |       </form>
141 |     </div>
142 |   );
143 | }
144 | 


--------------------------------------------------------------------------------
/hooks/use-toast.ts:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | // Inspired by react-hot-toast library
  4 | import * as React from 'react';
  5 | 
  6 | import type { ToastActionElement, ToastProps } from '@/components/ui/toast';
  7 | 
  8 | const TOAST_LIMIT = 1;
  9 | const TOAST_REMOVE_DELAY = 5000; // 5 seconds
 10 | 
 11 | type ToasterToast = ToastProps & {
 12 |   id: string;
 13 |   title?: React.ReactNode;
 14 |   description?: React.ReactNode;
 15 |   action?: ToastActionElement;
 16 | };
 17 | 
 18 | const actionTypes = {
 19 |   ADD_TOAST: 'ADD_TOAST',
 20 |   UPDATE_TOAST: 'UPDATE_TOAST',
 21 |   DISMISS_TOAST: 'DISMISS_TOAST',
 22 |   REMOVE_TOAST: 'REMOVE_TOAST',
 23 | } as const;
 24 | 
 25 | let count = 0;
 26 | 
 27 | function genId() {
 28 |   count = (count + 1) % Number.MAX_SAFE_INTEGER;
 29 |   return count.toString();
 30 | }
 31 | 
 32 | type ActionType = typeof actionTypes;
 33 | 
 34 | type Action =
 35 |   | {
 36 |       type: ActionType['ADD_TOAST'];
 37 |       toast: ToasterToast;
 38 |     }
 39 |   | {
 40 |       type: ActionType['UPDATE_TOAST'];
 41 |       toast: Partial<ToasterToast>;
 42 |     }
 43 |   | {
 44 |       type: ActionType['DISMISS_TOAST'];
 45 |       toastId?: ToasterToast['id'];
 46 |     }
 47 |   | {
 48 |       type: ActionType['REMOVE_TOAST'];
 49 |       toastId?: ToasterToast['id'];
 50 |     };
 51 | 
 52 | interface State {
 53 |   toasts: ToasterToast[];
 54 | }
 55 | 
 56 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 57 | 
 58 | const addToRemoveQueue = (toastId: string) => {
 59 |   if (toastTimeouts.has(toastId)) {
 60 |     return;
 61 |   }
 62 | 
 63 |   const timeout = setTimeout(() => {
 64 |     toastTimeouts.delete(toastId);
 65 |     dispatch({
 66 |       type: 'REMOVE_TOAST',
 67 |       toastId: toastId,
 68 |     });
 69 |   }, TOAST_REMOVE_DELAY);
 70 | 
 71 |   toastTimeouts.set(toastId, timeout);
 72 | };
 73 | 
 74 | export const reducer = (state: State, action: Action): State => {
 75 |   switch (action.type) {
 76 |     case 'ADD_TOAST':
 77 |       return {
 78 |         ...state,
 79 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 80 |       };
 81 | 
 82 |     case 'UPDATE_TOAST':
 83 |       return {
 84 |         ...state,
 85 |         toasts: state.toasts.map((t) =>
 86 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 87 |         ),
 88 |       };
 89 | 
 90 |     case 'DISMISS_TOAST': {
 91 |       const { toastId } = action;
 92 | 
 93 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 94 |       // but I'll keep it here for simplicity
 95 |       if (toastId) {
 96 |         addToRemoveQueue(toastId);
 97 |       } else {
 98 |         state.toasts.forEach((toast) => {
 99 |           addToRemoveQueue(toast.id);
100 |         });
101 |       }
102 | 
103 |       return {
104 |         ...state,
105 |         toasts: state.toasts.map((t) =>
106 |           t.id === toastId || toastId === undefined
107 |             ? {
108 |                 ...t,
109 |                 open: false,
110 |               }
111 |             : t
112 |         ),
113 |       };
114 |     }
115 |     case 'REMOVE_TOAST':
116 |       if (action.toastId === undefined) {
117 |         return {
118 |           ...state,
119 |           toasts: [],
120 |         };
121 |       }
122 |       return {
123 |         ...state,
124 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
125 |       };
126 |   }
127 | };
128 | 
129 | const listeners: Array<(state: State) => void> = [];
130 | 
131 | let memoryState: State = { toasts: [] };
132 | 
133 | function dispatch(action: Action) {
134 |   memoryState = reducer(memoryState, action);
135 |   listeners.forEach((listener) => {
136 |     listener(memoryState);
137 |   });
138 | }
139 | 
140 | type Toast = Omit<ToasterToast, 'id'>;
141 | 
142 | function toast({ ...props }: Toast) {
143 |   const id = genId();
144 | 
145 |   const update = (props: ToasterToast) =>
146 |     dispatch({
147 |       type: 'UPDATE_TOAST',
148 |       toast: { ...props, id },
149 |     });
150 |   const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
151 | 
152 |   dispatch({
153 |     type: 'ADD_TOAST',
154 |     toast: {
155 |       ...props,
156 |       id,
157 |       open: true,
158 |       onOpenChange: (open) => {
159 |         if (!open) dismiss();
160 |       },
161 |     },
162 |   });
163 | 
164 |   return {
165 |     id: id,
166 |     dismiss,
167 |     update,
168 |   };
169 | }
170 | 
171 | function useToast() {
172 |   const [state, setState] = React.useState<State>(memoryState);
173 | 
174 |   React.useEffect(() => {
175 |     listeners.push(setState);
176 |     return () => {
177 |       const index = listeners.indexOf(setState);
178 |       if (index > -1) {
179 |         listeners.splice(index, 1);
180 |       }
181 |     };
182 |   }, [state]);
183 | 
184 |   return {
185 |     ...state,
186 |     toast,
187 |     dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
188 |   };
189 | }
190 | 
191 | export { useToast, toast };
192 | 


--------------------------------------------------------------------------------
/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import * as ToastPrimitives from '@radix-ui/react-toast';
  3 | import { cva, type VariantProps } from 'class-variance-authority';
  4 | import { X } from 'lucide-react';
  5 | 
  6 | import { cn } from '@/lib/utils';
  7 | 
  8 | const ToastProvider = ToastPrimitives.Provider;
  9 | 
 10 | const ToastViewport = React.forwardRef<
 11 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 12 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 13 | >(({ className, ...props }, ref) => (
 14 |   <ToastPrimitives.Viewport
 15 |     ref={ref}
 16 |     className={cn(
 17 |       'fixed top-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:max-w-[420px]',
 18 |       className
 19 |     )}
 20 |     {...props}
 21 |   />
 22 | ));
 23 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 24 | 
 25 | const toastVariants = cva(
 26 |   'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-right-full',
 27 |   {
 28 |     variants: {
 29 |       variant: {
 30 |         default: 'border bg-background text-foreground',
 31 |         destructive:
 32 |           'destructive group border-destructive bg-destructive text-destructive-foreground',
 33 |       },
 34 |     },
 35 |     defaultVariants: {
 36 |       variant: 'default',
 37 |     },
 38 |   }
 39 | );
 40 | 
 41 | const Toast = React.forwardRef<
 42 |   React.ElementRef<typeof ToastPrimitives.Root>,
 43 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 44 |     VariantProps<typeof toastVariants>
 45 | >(({ className, variant, ...props }, ref) => {
 46 |   return (
 47 |     <ToastPrimitives.Root
 48 |       ref={ref}
 49 |       className={cn(toastVariants({ variant }), className)}
 50 |       {...props}
 51 |     />
 52 |   );
 53 | });
 54 | Toast.displayName = ToastPrimitives.Root.displayName;
 55 | 
 56 | const ToastAction = React.forwardRef<
 57 |   React.ElementRef<typeof ToastPrimitives.Action>,
 58 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 59 | >(({ className, ...props }, ref) => (
 60 |   <ToastPrimitives.Action
 61 |     ref={ref}
 62 |     className={cn(
 63 |       'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
 64 |       className
 65 |     )}
 66 |     {...props}
 67 |   />
 68 | ));
 69 | ToastAction.displayName = ToastPrimitives.Action.displayName;
 70 | 
 71 | const ToastClose = React.forwardRef<
 72 |   React.ElementRef<typeof ToastPrimitives.Close>,
 73 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 74 | >(({ className, ...props }, ref) => (
 75 |   <ToastPrimitives.Close
 76 |     ref={ref}
 77 |     className={cn(
 78 |       'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
 79 |       className
 80 |     )}
 81 |     toast-close=""
 82 |     {...props}
 83 |   >
 84 |     <X className="h-4 w-4" />
 85 |   </ToastPrimitives.Close>
 86 | ));
 87 | ToastClose.displayName = ToastPrimitives.Close.displayName;
 88 | 
 89 | const ToastTitle = React.forwardRef<
 90 |   React.ElementRef<typeof ToastPrimitives.Title>,
 91 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 92 | >(({ className, ...props }, ref) => (
 93 |   <ToastPrimitives.Title
 94 |     ref={ref}
 95 |     className={cn('text-sm font-semibold', className)}
 96 |     {...props}
 97 |   />
 98 | ));
 99 | ToastTitle.displayName = ToastPrimitives.Title.displayName;
100 | 
101 | const ToastDescription = React.forwardRef<
102 |   React.ElementRef<typeof ToastPrimitives.Description>,
103 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
104 | >(({ className, ...props }, ref) => (
105 |   <ToastPrimitives.Description
106 |     ref={ref}
107 |     className={cn('text-sm opacity-90', className)}
108 |     {...props}
109 |   />
110 | ));
111 | ToastDescription.displayName = ToastPrimitives.Description.displayName;
112 | 
113 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
114 | 
115 | type ToastActionElement = React.ReactElement<typeof ToastAction>;
116 | 
117 | export {
118 |   type ToastProps,
119 |   type ToastActionElement,
120 |   ToastProvider,
121 |   ToastViewport,
122 |   Toast,
123 |   ToastTitle,
124 |   ToastDescription,
125 |   ToastClose,
126 |   ToastAction,
127 | };
128 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import {
  5 |   CaretSortIcon,
  6 |   CheckIcon,
  7 |   ChevronDownIcon,
  8 |   ChevronUpIcon,
  9 | } from "@radix-ui/react-icons"
 10 | import * as SelectPrimitive from "@radix-ui/react-select"
 11 | 
 12 | import { cn } from "@/lib/utils"
 13 | 
 14 | const Select = SelectPrimitive.Root
 15 | 
 16 | const SelectGroup = SelectPrimitive.Group
 17 | 
 18 | const SelectValue = SelectPrimitive.Value
 19 | 
 20 | const SelectTrigger = React.forwardRef<
 21 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 22 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 23 | >(({ className, children, ...props }, ref) => (
 24 |   <SelectPrimitive.Trigger
 25 |     ref={ref}
 26 |     className={cn(
 27 |       "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 28 |       className
 29 |     )}
 30 |     {...props}
 31 |   >
 32 |     {children}
 33 |     <SelectPrimitive.Icon asChild>
 34 |       <CaretSortIcon className="h-4 w-4 opacity-50" />
 35 |     </SelectPrimitive.Icon>
 36 |   </SelectPrimitive.Trigger>
 37 | ))
 38 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 39 | 
 40 | const SelectScrollUpButton = React.forwardRef<
 41 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 42 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 43 | >(({ className, ...props }, ref) => (
 44 |   <SelectPrimitive.ScrollUpButton
 45 |     ref={ref}
 46 |     className={cn(
 47 |       "flex cursor-default items-center justify-center py-1",
 48 |       className
 49 |     )}
 50 |     {...props}
 51 |   >
 52 |     <ChevronUpIcon />
 53 |   </SelectPrimitive.ScrollUpButton>
 54 | ))
 55 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 56 | 
 57 | const SelectScrollDownButton = React.forwardRef<
 58 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 59 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 60 | >(({ className, ...props }, ref) => (
 61 |   <SelectPrimitive.ScrollDownButton
 62 |     ref={ref}
 63 |     className={cn(
 64 |       "flex cursor-default items-center justify-center py-1",
 65 |       className
 66 |     )}
 67 |     {...props}
 68 |   >
 69 |     <ChevronDownIcon />
 70 |   </SelectPrimitive.ScrollDownButton>
 71 | ))
 72 | SelectScrollDownButton.displayName =
 73 |   SelectPrimitive.ScrollDownButton.displayName
 74 | 
 75 | const SelectContent = React.forwardRef<
 76 |   React.ElementRef<typeof SelectPrimitive.Content>,
 77 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 78 | >(({ className, children, position = "popper", ...props }, ref) => (
 79 |   <SelectPrimitive.Portal>
 80 |     <SelectPrimitive.Content
 81 |       ref={ref}
 82 |       className={cn(
 83 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 84 |         position === "popper" &&
 85 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 86 |         className
 87 |       )}
 88 |       position={position}
 89 |       {...props}
 90 |     >
 91 |       <SelectScrollUpButton />
 92 |       <SelectPrimitive.Viewport
 93 |         className={cn(
 94 |           "p-1",
 95 |           position === "popper" &&
 96 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 97 |         )}
 98 |       >
 99 |         {children}
100 |       </SelectPrimitive.Viewport>
101 |       <SelectScrollDownButton />
102 |     </SelectPrimitive.Content>
103 |   </SelectPrimitive.Portal>
104 | ))
105 | SelectContent.displayName = SelectPrimitive.Content.displayName
106 | 
107 | const SelectLabel = React.forwardRef<
108 |   React.ElementRef<typeof SelectPrimitive.Label>,
109 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
110 | >(({ className, ...props }, ref) => (
111 |   <SelectPrimitive.Label
112 |     ref={ref}
113 |     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
114 |     {...props}
115 |   />
116 | ))
117 | SelectLabel.displayName = SelectPrimitive.Label.displayName
118 | 
119 | const SelectItem = React.forwardRef<
120 |   React.ElementRef<typeof SelectPrimitive.Item>,
121 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
122 | >(({ className, children, ...props }, ref) => (
123 |   <SelectPrimitive.Item
124 |     ref={ref}
125 |     className={cn(
126 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
127 |       className
128 |     )}
129 |     {...props}
130 |   >
131 |     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
132 |       <SelectPrimitive.ItemIndicator>
133 |         <CheckIcon className="h-4 w-4" />
134 |       </SelectPrimitive.ItemIndicator>
135 |     </span>
136 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
137 |   </SelectPrimitive.Item>
138 | ))
139 | SelectItem.displayName = SelectPrimitive.Item.displayName
140 | 
141 | const SelectSeparator = React.forwardRef<
142 |   React.ElementRef<typeof SelectPrimitive.Separator>,
143 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
144 | >(({ className, ...props }, ref) => (
145 |   <SelectPrimitive.Separator
146 |     ref={ref}
147 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
148 |     {...props}
149 |   />
150 | ))
151 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
152 | 
153 | export {
154 |   Select,
155 |   SelectGroup,
156 |   SelectValue,
157 |   SelectTrigger,
158 |   SelectContent,
159 |   SelectLabel,
160 |   SelectItem,
161 |   SelectSeparator,
162 |   SelectScrollUpButton,
163 |   SelectScrollDownButton,
164 | }
165 | 


--------------------------------------------------------------------------------
/app/group/[id]/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | import React, { useEffect, useState } from 'react';
  3 | import { Card, CardContent } from '@/components/ui/card';
  4 | import { Trash2 } from 'lucide-react';
  5 | import { useParams } from 'next/navigation';
  6 | import { useOrganizationList, useUser } from '@clerk/nextjs';
  7 | import { getGroupData, deleteExpense } from '@/app/actions';
  8 | import { useRouter } from 'next/navigation';
  9 | import Link from 'next/link';
 10 | import { Button } from '@/components/ui/button';
 11 | import { useToast } from '@/hooks/use-toast';
 12 | 
 13 | // Define interfaces for Balance and Expense
 14 | interface Balance {
 15 |   name: string;
 16 |   amount: number;
 17 |   owes: boolean;
 18 | }
 19 | 
 20 | interface Expense {
 21 |   id: string;
 22 |   amount: number;
 23 |   description: string;
 24 |   created_by: string;
 25 |   split_with: {
 26 |     id: string;
 27 |     name: string;
 28 |     splitAmount: number;
 29 |   }[];
 30 | }
 31 | 
 32 | // Add this utility function at the top of the file, outside the component
 33 | const formatAmount = (amount: number | string) => {
 34 |   const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
 35 |   return numAmount.toFixed(2);
 36 | };
 37 | 
 38 | function GroupPage() {
 39 |   const { id } = useParams();
 40 |   const { userMemberships, isLoaded: orgLoaded } = useOrganizationList({
 41 |     userMemberships: {
 42 |       infinite: true,
 43 |     },
 44 |   });
 45 |   const { user, isLoaded: userLoaded } = useUser();
 46 |   const router = useRouter();
 47 | 
 48 |   const [expenses, setExpenses] = useState<Expense[]>([]);
 49 |   const [balances, setBalances] = useState<Balance[]>([]);
 50 |   const [loading, setLoading] = useState(true);
 51 |   const { toast } = useToast();
 52 | 
 53 |   useEffect(() => {
 54 |     async function fetchData() {
 55 |       if (id && user) {
 56 |         const { expenses, balances } = await getGroupData(
 57 |           id as string,
 58 |           user.fullName || 'You'
 59 |         );
 60 |         setExpenses(expenses);
 61 |         setBalances(balances);
 62 |         setLoading(false);
 63 |       }
 64 |     }
 65 |     if (userLoaded) {
 66 |       fetchData();
 67 |     }
 68 |   }, [id, user, userLoaded]);
 69 | 
 70 |   if (!orgLoaded || !userLoaded || loading) {
 71 |     return (
 72 |       <div className="flex justify-center items-center h-screen">
 73 |         <p className="text-xl text-gray-600">Loading...</p>
 74 |       </div>
 75 |     );
 76 |   }
 77 | 
 78 |   const selectedOrganization = userMemberships.data?.find(
 79 |     (membership) => membership.organization.id === id
 80 |   );
 81 | 
 82 |   if (!selectedOrganization) {
 83 |     return <div>Organization not found</div>;
 84 |   }
 85 | 
 86 |   // Update the isAdmin check to match the groups page
 87 |   const isAdmin = selectedOrganization?.role === 'org:admin';
 88 | 
 89 |   console.log('Selected Organization:', selectedOrganization);
 90 |   console.log('Is Admin:', isAdmin);
 91 | 
 92 |   const groupDescription =
 93 |     "View and manage the details of your group. You can see the group's name, balances, and expenses. As an admin, you can also delete expenses.";
 94 | 
 95 |   const getInitials = (name: string): string => {
 96 |     return name
 97 |       .split(' ')
 98 |       .map((word) => word[0])
 99 |       .join('')
100 |       .toUpperCase()
101 |       .slice(0, 2);
102 |   };
103 | 
104 |   const getRandomColor = (): string => {
105 |     const colors = [
106 |       'bg-blue-500',
107 |       'bg-green-500',
108 |       'bg-yellow-500',
109 |       'bg-red-500',
110 |       'bg-purple-500',
111 |     ];
112 |     return colors[Math.floor(Math.random() * colors.length)];
113 |   };
114 | 
115 |   const handleDeleteExpense = async (expenseId: string) => {
116 |     if (!isAdmin) {
117 |       toast({
118 |         title: 'Error 🚨',
119 |         description: 'Only admins can delete expenses. 🚫',
120 |         variant: 'destructive',
121 |       });
122 |       return;
123 |     }
124 | 
125 |     const confirmed = window.confirm(
126 |       'Are you sure you want to delete this expense?'
127 |     );
128 |     if (confirmed) {
129 |       const result = await deleteExpense(expenseId);
130 |       if (result.success) {
131 |         // Refresh the page data
132 |         const { expenses: updatedExpenses, balances: updatedBalances } =
133 |           await getGroupData(id as string, user?.fullName || 'You');
134 |         setExpenses(updatedExpenses);
135 |         setBalances(updatedBalances);
136 |         router.refresh(); // Refresh the page to update any server-side rendered content
137 |       } else {
138 |         toast({ title: 'Failed to delete expense. Please try again.' });
139 |       }
140 |     }
141 |   };
142 | 
143 |   return (
144 |     <div className="p-6 max-w-4xl mx-auto">
145 |       <div className="flex justify-between items-center mb-6">
146 |         <h1 className="text-3xl font-bold mb-4">
147 |           {selectedOrganization.organization.name}
148 |         </h1>
149 | 
150 |         <Link href="/groups">
151 |           <Button className="bg-purple-600 text-white px-4 py-2 rounded-md">
152 |             All Groups
153 |           </Button>
154 |         </Link>
155 |       </div>
156 | 
157 |       <p className="text-gray-600 mb-8">{groupDescription}</p>
158 | 
159 |       <h2 className="text-2xl font-semibold mb-4">Balances</h2>
160 |       {balances.length > 0 ? (
161 |         balances.map((balance, index) => (
162 |           <Card key={index} className="mb-8">
163 |             <CardContent className="flex items-center p-6">
164 |               <div
165 |                 className={`h-10 w-10 ${getRandomColor()} rounded-full mr-4 flex items-center justify-center text-white font-semibold`}
166 |               >
167 |                 {getInitials(balance.name)}
168 |               </div>
169 |               <div>
170 |                 <h3 className="font-semibold">{balance.name}</h3>
171 |                 <p className="text-sm text-gray-600">
172 |                   Owes you ${formatAmount(balance.amount)}
173 |                 </p>
174 |               </div>
175 |             </CardContent>
176 |           </Card>
177 |         ))
178 |       ) : (
179 |         <p className="text-gray-600 mb-8">
180 |           🌟 No outstanding balances. Everyone&apos;s all squared up! 🎉
181 |         </p>
182 |       )}
183 | 
184 |       <h2 className="text-2xl font-semibold mb-4">Expenses</h2>
185 |       {expenses.length > 0 ? (
186 |         expenses.map((expense) => (
187 |           <Card key={expense.id} className="mb-4">
188 |             <CardContent className="flex items-center justify-between p-6">
189 |               <div className="flex items-center">
190 |                 <div
191 |                   className={`h-10 w-10 ${getRandomColor()} rounded-full mr-4 flex items-center justify-center text-white font-semibold`}
192 |                 >
193 |                   {getInitials(expense.description)}
194 |                 </div>
195 |                 <div>
196 |                   <h3 className="font-semibold">{expense.description}</h3>
197 |                   <p className="text-sm text-gray-600">
198 |                     ${formatAmount(expense.amount)} ·
199 |                     {expense.split_with.map((s) => s.name).join(', ')}
200 |                   </p>
201 |                   <p className="text-xs text-gray-500">
202 |                     Split type: Percentage{' '}
203 |                     {(
204 |                       (expense.split_with[0]?.splitAmount / expense.amount) *
205 |                       100
206 |                     ).toFixed(2)}
207 |                     %
208 |                   </p>
209 |                 </div>
210 |               </div>
211 |               <Trash2
212 |                 className="text-red-500 cursor-pointer"
213 |                 size={20}
214 |                 onClick={() => handleDeleteExpense(expense.id)}
215 |               />
216 |             </CardContent>
217 |           </Card>
218 |         ))
219 |       ) : (
220 |         <p className="text-gray-600 mb-8">
221 |           💸 No expenses yet. Time to split some bills! 🧾
222 |         </p>
223 |       )}
224 |     </div>
225 |   );
226 | }
227 | 
228 | export default GroupPage;
229 | 


--------------------------------------------------------------------------------
/app/expense/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { Button } from '@/components/ui/button';
  4 | import { Input } from '@/components/ui/input';
  5 | import { Label } from '@/components/ui/label';
  6 | import {
  7 |   Select,
  8 |   SelectContent,
  9 |   SelectItem,
 10 |   SelectTrigger,
 11 |   SelectValue,
 12 | } from '@/components/ui/select';
 13 | import { useToast } from '@/hooks/use-toast';
 14 | import { useOrganization, useOrganizationList, useUser } from '@clerk/nextjs';
 15 | import React, { useEffect, useState } from 'react';
 16 | import { addExpense } from '../actions';
 17 | 
 18 | // ... (rest of the code remains unchanged)
 19 | 
 20 | interface Organization {
 21 |   id: string;
 22 |   name: string;
 23 | }
 24 | 
 25 | interface Member {
 26 |   id: string;
 27 |   name: string;
 28 | }
 29 | 
 30 | interface SplitMember {
 31 |   id: string;
 32 |   name: string;
 33 | }
 34 | 
 35 | export default function AddExpense() {
 36 |   const [amount, setAmount] = useState('');
 37 |   const [description, setDescription] = useState('');
 38 |   const [group, setGroup] = useState('');
 39 |   const [splitPercentage, setSplitPercentage] = useState('');
 40 |   const [splitWith, setSplitWith] = useState<SplitMember[]>([]);
 41 |   const [organizations, setOrganizations] = useState<Organization[]>([]);
 42 |   const [members, setMembers] = useState<Member[]>([]);
 43 | 
 44 |   const { user, isLoaded: isUserLoaded } = useUser();
 45 |   const { userMemberships, isLoaded: isOrgListLoaded } = useOrganizationList({
 46 |     userMemberships: true,
 47 |   });
 48 |   const { isLoaded: isOrgLoaded } = useOrganization();
 49 |   const { toast } = useToast();
 50 | 
 51 |   useEffect(() => {
 52 |     if (isOrgListLoaded && userMemberships.data) {
 53 |       const orgs = userMemberships.data.map((membership) => ({
 54 |         id: membership.organization.id,
 55 |         name: membership.organization.name,
 56 |       }));
 57 |       console.log('Organizations fetched:', orgs);
 58 |       setOrganizations(orgs);
 59 | 
 60 |       // Set the first organization as default and fetch its members
 61 |       if (orgs.length > 0 && !group) {
 62 |         const defaultOrgId = orgs[0].id;
 63 |         setGroup(defaultOrgId);
 64 |         fetchMembers(defaultOrgId);
 65 |       }
 66 |     }
 67 |     // eslint-disable-next-line react-hooks/exhaustive-deps
 68 |   }, [isOrgListLoaded, userMemberships.data, group]);
 69 | 
 70 |   const fetchMembers = async (orgId: string) => {
 71 |     try {
 72 |       const org = await userMemberships.data?.find(
 73 |         (membership) => membership.organization.id === orgId
 74 |       )?.organization;
 75 |       if (org) {
 76 |         const memberships = await org.getMemberships();
 77 |         const membersList = memberships.data.map((membership) => ({
 78 |           id: membership.publicUserData.userId ?? '',
 79 |           name: `${membership.publicUserData.firstName ?? ''} ${
 80 |             membership.publicUserData.lastName ?? ''
 81 |           }`.trim(),
 82 |         }));
 83 |         setMembers(membersList);
 84 |         console.log('Members fetched:', membersList);
 85 |       }
 86 |     } catch (error) {
 87 |       console.error('Error fetching members:', error);
 88 |       toast({
 89 |         title: 'Error',
 90 |         description: 'Failed to fetch group members. Please try again.',
 91 |         variant: 'destructive',
 92 |       });
 93 |     }
 94 |   };
 95 | 
 96 |   const handleGroupChange = (orgId: string) => {
 97 |     setGroup(orgId);
 98 |     fetchMembers(orgId);
 99 |     setSplitWith([]); // Reset split with when group changes
100 |   };
101 | 
102 |   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
103 |     e.preventDefault();
104 |     if (!isUserLoaded || !user) {
105 |       toast({
106 |         title: 'Oops! 😅',
107 |         description:
108 |           "You need to be logged in to add an expense. Let's get you signed in!",
109 |         variant: 'destructive',
110 |       });
111 |       return;
112 |     }
113 | 
114 |     const expenseData = {
115 |       amount: parseFloat(amount),
116 |       description,
117 |       groupId: group,
118 |       splitPercentage: parseFloat(splitPercentage),
119 |       splitWith: splitWith.map((member) => ({
120 |         id: member.id,
121 |         name: member.name,
122 |       })),
123 |       createdBy: user.id,
124 |     };
125 | 
126 |     try {
127 |       const result = await addExpense(expenseData);
128 |       if (result.success) {
129 |         toast({
130 |           title: 'Expense Added! 🎉',
131 |           description:
132 |             'Your expense has been successfully recorded. Great job!',
133 |         });
134 | 
135 |         // Reset form
136 |         setAmount('');
137 |         setDescription('');
138 |         setGroup('');
139 |         setSplitPercentage('');
140 |         setSplitWith([]);
141 |       } else {
142 |         throw new Error('Failed to add expense');
143 |       }
144 |     } catch (error: unknown) {
145 |       console.error('Error adding expense:', error);
146 |       toast({
147 |         title: 'Uh-oh! 😟',
148 |         description: "We couldn't add your expense. Let's give it another try!",
149 |         variant: 'destructive',
150 |       });
151 |     }
152 |   };
153 | 
154 |   if (!isUserLoaded || !isOrgListLoaded || !isOrgLoaded) {
155 |     return <div>Loading...</div>;
156 |   }
157 | 
158 |   return (
159 |     <div className="container mx-auto px-4 py-8 sm:px-6 lg:px-8 max-w-2xl">
160 |       <h1 className="text-2xl font-bold mb-2">Add an expense</h1>
161 |       <p className="text-gray-600 mb-6">
162 |         Record your expenses and split them with your group.
163 |       </p>
164 | 
165 |       <form onSubmit={handleSubmit} className="space-y-6">
166 |         <div>
167 |           <Label
168 |             htmlFor="amount"
169 |             className="block text-sm font-medium text-gray-700 mb-1"
170 |           >
171 |             Amount
172 |           </Label>
173 |           <Input
174 |             id="amount"
175 |             type="number"
176 |             placeholder="$0.00"
177 |             value={amount}
178 |             onChange={(e) => setAmount(e.target.value)}
179 |             required
180 |             className="w-full"
181 |           />
182 |         </div>
183 | 
184 |         <div>
185 |           <Label
186 |             htmlFor="description"
187 |             className="block text-sm font-medium text-gray-700 mb-1"
188 |           >
189 |             Description
190 |           </Label>
191 |           <Input
192 |             id="description"
193 |             placeholder="What did you pay for?"
194 |             value={description}
195 |             onChange={(e) => setDescription(e.target.value)}
196 |             required
197 |             className="w-full"
198 |           />
199 |         </div>
200 | 
201 |         <div>
202 |           <Label
203 |             htmlFor="group"
204 |             className="block text-sm font-medium text-gray-700 mb-1"
205 |           >
206 |             Group
207 |           </Label>
208 |           {organizations.length > 0 ? (
209 |             <Select onValueChange={handleGroupChange} value={group} required>
210 |               <SelectTrigger id="group" className="w-full">
211 |                 <SelectValue placeholder="Select a group" />
212 |               </SelectTrigger>
213 |               <SelectContent>
214 |                 {organizations.map((org) => (
215 |                   <SelectItem key={org.id} value={org.id}>
216 |                     {org.name}
217 |                   </SelectItem>
218 |                 ))}
219 |               </SelectContent>
220 |             </Select>
221 |           ) : (
222 |             <p className="text-sm text-gray-500">
223 |               No groups available. Please create or join a group first.
224 |             </p>
225 |           )}
226 |         </div>
227 | 
228 |         <div>
229 |           <Label
230 |             htmlFor="splitPercentage"
231 |             className="block text-sm font-medium text-gray-700 mb-1"
232 |           >
233 |             Split Percentage
234 |           </Label>
235 |           <Input
236 |             id="splitPercentage"
237 |             type="number"
238 |             placeholder="Enter percentage to split"
239 |             value={splitPercentage}
240 |             onChange={(e) => setSplitPercentage(e.target.value)}
241 |             className="w-full"
242 |           />
243 |         </div>
244 | 
245 |         <div>
246 |           <Label
247 |             htmlFor="splitWith"
248 |             className="block text-sm font-medium text-gray-700 mb-1"
249 |           >
250 |             Split with
251 |           </Label>
252 |           <Select
253 |             onValueChange={(value) => {
254 |               const selectedMember = members.find(
255 |                 (member) => member.id === value
256 |               );
257 |               if (selectedMember) {
258 |                 if (
259 |                   splitWith.some((member) => member.id === selectedMember.id)
260 |                 ) {
261 |                   setSplitWith(
262 |                     splitWith.filter(
263 |                       (member) => member.id !== selectedMember.id
264 |                     )
265 |                   );
266 |                 } else {
267 |                   setSplitWith([
268 |                     ...splitWith,
269 |                     { id: selectedMember.id, name: selectedMember.name },
270 |                   ]);
271 |                 }
272 |               }
273 |             }}
274 |             disabled={!group}
275 |           >
276 |             <SelectTrigger id="splitWith" className="w-full">
277 |               <SelectValue placeholder="Select members to split with" />
278 |             </SelectTrigger>
279 |             <SelectContent>
280 |               {members.map((member) => (
281 |                 <SelectItem key={member.id} value={member.id}>
282 |                   {member.name}
283 |                 </SelectItem>
284 |               ))}
285 |             </SelectContent>
286 |           </Select>
287 |         </div>
288 | 
289 |         <Button type="submit" className="w-full">
290 |           Save Expense
291 |         </Button>
292 |       </form>
293 |     </div>
294 |   );
295 | }
296 | 


--------------------------------------------------------------------------------