feat: add bill creation, sharing, and notifications

app/contacts/components/ContactDetailsPanel.tsx

@@ -294,7 +294,8 @@ export function ContactDetailsPanel({ contact, isOpen, onClose }: ContactDetails
                                                         ? "text-gray-900 dark:text-white"
                                                         : "text-brand-green dark:text-brand-gold"
                                                 )}>
-                                                    {txn.senderWallet?.userId === userId ? '-' : '+'}RWF {parseFloat(txn.amount).toLocaleString()}
+                                                    {/* A covered split share came from their wallet, not yours: no +/- */}
+                                                    {txn.coveredShare ? '' : txn.senderWallet?.userId === userId ? '-' : '+'}RWF {parseFloat(txn.amount).toLocaleString()}
                                                 </span>
                                             </button>
                                         ))

app/home/bills/[billId]/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+import React from "react";
+import { useParams } from "next/navigation";
+import Navigation from "@/components/Navigation";
+import { Header } from "@/components/Header";
+import BillDetail from "@/components/bills/BillDetail";
+import { useSidebar } from "@/context/SidebarContext";
+import { cn } from "@/lib/utils";
+import { useAccent } from "@/hooks/use-accent";
+
+const BillDetailPage = () => {
+    const { isExpanded } = useSidebar();
+    const accent = useAccent();
+    const params = useParams<{ billId: string }>();
+
+    return (
+        <div className={`flex flex-col min-h-screen bg-gray-50 ${accent.darkBgPage}`}>
+            <Navigation hideBottomNav />
+            <main
+                className={cn(
+                    "flex-1 flex flex-col p-4 sm:p-6 lg:p-8 transition-all duration-300",
+                    isExpanded ? "lg:ml-64" : "lg:ml-20"
+                )}
+            >
+                <div className="flex-1 overflow-y-auto pb-4 sm:pb-6 lg:pb-8">
+                    <Header showBackButton />
+                    <div className="max-w-2xl mx-auto mt-6">
+                        {params?.billId && <BillDetail billId={params.billId} />}
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+};
+
+export default BillDetailPage;

app/home/bills/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import Navigation from "@/components/Navigation";
+import { Header } from "@/components/Header";
+import BillsList from "@/components/bills/BillsList";
+import { useSidebar } from "@/context/SidebarContext";
+import { cn } from "@/lib/utils";
+import { useAccent } from "@/hooks/use-accent";
+
+const BillsPage = () => {
+    const { isExpanded } = useSidebar();
+    const accent = useAccent();
+
+    return (
+        <div className={`flex flex-col min-h-screen bg-gray-50 ${accent.darkBgPage}`}>
+            <Navigation hideBottomNav />
+            <main
+                className={cn(
+                    "flex-1 flex flex-col p-4 sm:p-6 lg:p-8 transition-all duration-300",
+                    isExpanded ? "lg:ml-64" : "lg:ml-20"
+                )}
+            >
+                <div className="flex-1 overflow-y-auto pb-4 sm:pb-6 lg:pb-8">
+                    <Header showBackButton />
+                    <div className="max-w-2xl mx-auto mt-6">
+                        <BillsList />
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+};
+
+export default BillsPage;

app/home/requests/page.tsx

@@ -13,7 +13,7 @@ import { Card } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { HandCoins, ArrowUpRight, ArrowDownLeft, Clock, CheckCircle2, XCircle, ChevronRight } from "lucide-react"
+import { HandCoins, ArrowUpRight, ArrowDownLeft, Clock, CheckCircle2, XCircle, ChevronRight, Receipt } from "lucide-react"
 import { formatDistanceToNow } from "date-fns"
 import { UserAvatar } from "@/components/UserAvatar"
 import type { PaymentRequest } from "@/types/dashboard"
@@ -194,10 +194,16 @@ export default function RequestsPage() {
                                 <div className={`p-2 ${accent.lightIconBg} rounded-lg ${accent.lightIconColor}`}>
                                     <HandCoins size={24} />
                                 </div>
-                                <div>
+                                <div className="flex-1">
                                     <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Money Requests</h1>
                                     <p className="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-medium">Manage your pending payments</p>
                                 </div>
+                                <button
+                                    onClick={() => router.push("/home/bills")}
+                                    className={`inline-flex items-center gap-1.5 text-xs font-semibold px-3 py-2 rounded-lg ${accent.lightIconBg} ${accent.lightIconColor} hover:opacity-80 transition-opacity`}
+                                >
+                                    <Receipt className="w-3.5 h-3.5" /> Split payments
+                                </button>
                             </div>
                         </div>
 
@@ -236,7 +242,7 @@ export default function RequestsPage() {
                                         {sentRequests.length === 0 ? (
                                             <div className="text-center py-12 bg-white dark:bg-darkBg-card rounded-xl border border-dashed border-gray-200 dark:border-darkBorder-light">
                                                 <ArrowUpRight size={48} className="mx-auto text-gray-300 dark:text-gray-600 mb-3" />
-                                                <p className="text-gray-500 dark:text-gray-400">You haven't sent any payment requests yet</p>
+                                                <p className="text-gray-500 dark:text-gray-400">You haven&apos;t sent any payment requests yet</p>
                                             </div>
                                         ) : (
                                             sentRequests.map(req => (

app/home/transfer/amount/page.tsx

@@ -28,7 +28,8 @@ import StepIndicator from "@/components/transfer/StepIndicator";
 import RequestLoadingSkeleton from "@/components/transfer/RequestLoadingSkeleton";
 import { PinSetupModal } from "@/components/PinSetupModal";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Loader2, AlertCircle, ScanLine, CalendarClock } from "lucide-react";
+import SplitBillComposer from "@/components/bills/SplitBillComposer";
+import { Loader2, AlertCircle, ScanLine, CalendarClock, Split } from "lucide-react";
 import { isTokenExpired, getUserIdFromToken } from "@/utils/jwtUtils";
 import { useAccent } from "@/hooks/use-accent";
 
@@ -97,6 +98,7 @@ const AmountPageInner = () => {
     const [selectedCategory, setSelectedCategory] = useState<any>(null);
     const [applyConstraints, setApplyConstraints] = useState(false);
     const [schedule, setSchedule] = useState<ScheduleState>(defaultScheduleState);
+    const [splitEnabled, setSplitEnabled] = useState(false);
 
     const [isOrganization, setIsOrganization] = useState(false);
     const [organizationCategory, setOrganizationCategory] = useState<any>(null);
@@ -222,7 +224,9 @@ const AmountPageInner = () => {
             setError("Minimum amount is RWF 100");
             return;
         }
-        if (currentBalance !== null && numAmount > currentBalance) {
+        // A split doesn't move money yet, and each person pays only their own share,
+        // so the full amount needn't fit in the organizer's balance.
+        if (!splitEnabled && currentBalance !== null && numAmount > currentBalance) {
             setError("Insufficient balance");
             return;
         }
@@ -402,7 +406,7 @@ const AmountPageInner = () => {
                                 <AlertCircle className="text-red-500" size={26} />
                             </div>
                             <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
-                                Couldn't load request
+                                Couldn&apos;t load request
                             </h3>
                             <p className="text-sm text-red-600 dark:text-red-400 mb-6">
                                 {error || "No request details found. The link may be invalid or expired."}
@@ -434,6 +438,17 @@ const AmountPageInner = () => {
     const isQRFlow = !!requestId && !!requestMeta;
     const allowEditAmount = requestMeta ? requestMeta.allowEditAmount : true;
 
+    // Splitting is a person-to-person/business feature: not for payment requests, scheduled
+    // transfers, raw wallet ids, or when sending from an organization/sub-action wallet.
+    const selectedSender = getSelectedSenderFromSession();
+    const canSplit =
+        !isQRFlow &&
+        !schedule.enabled &&
+        recipient.type !== "wallet" &&
+        !recipient.walletId &&
+        (!selectedSender || selectedSender.type === "user");
+    const splitActive = splitEnabled && canSplit;
+
     return (
         <div className={`flex flex-col min-h-screen bg-gray-50 ${accent.darkBgPage}`}>
             <Navigation hideBottomNav />
@@ -464,7 +479,7 @@ const AmountPageInner = () => {
                                             {" "}is requesting payment
                                         </p>
                                         {requestMeta.note && (
-                                            <p className="text-xs text-gray-400 dark:text-gray-500 truncate italic">"{requestMeta.note}"</p>
+                                            <p className="text-xs text-gray-400 dark:text-gray-500 truncate italic">&ldquo;{requestMeta.note}&rdquo;</p>
                                         )}
                                     </div>
                                 </div>
@@ -516,17 +531,55 @@ const AmountPageInner = () => {
                                     />
                                 )}
 
+                                {canSplit && (
+                                    <button
+                                        type="button"
+                                        onClick={() => setSplitEnabled((v) => !v)}
+                                        className={cn(
+                                            "w-full flex items-center justify-between gap-3 rounded-2xl border px-4 py-3 mb-6 text-left transition",
+                                            splitEnabled
+                                                ? "border-brand-green dark:border-brand-gold bg-brand-green/5 dark:bg-brand-gold/5"
+                                                : "border-gray-100 dark:border-darkBorder-light bg-white dark:bg-darkBg-card"
+                                        )}
+                                    >
+                                        <span className="flex items-center gap-3">
+                                            <span className="w-9 h-9 rounded-xl bg-brand-green/10 dark:bg-brand-gold/10 flex items-center justify-center">
+                                                <Split className="w-4 h-4 text-brand-green dark:text-brand-gold" />
+                                            </span>
+                                            <span>
+                                                <span className="block text-sm font-semibold text-gray-900 dark:text-white">Split this payment</span>
+                                                <span className="block text-xs text-gray-500 dark:text-gray-400">
+                                                    Everyone pays their own share directly to {recipient.name}
+                                                </span>
+                                            </span>
+                                        </span>
+                                        <span
+                                            className={cn(
+                                                "w-10 h-6 rounded-full transition relative shrink-0",
+                                                splitEnabled ? "bg-brand-green dark:bg-brand-gold" : "bg-gray-200 dark:bg-gray-700"
+                                            )}
+                                        >
+                                            <span
+                                                className={cn(
+                                                    "absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all",
+                                                    splitEnabled ? "left-[18px]" : "left-0.5"
+                                                )}
+                                            />
+                                        </span>
+                                    </button>
+                                )}
+
                                 {/* Scheduling — hidden for request flows, which need immediate fulfillment */}
-                                {!isQRFlow && (
+                                {!isQRFlow && !splitActive && (
                                     <SchedulePicker
                                         schedule={schedule}
                                         onChange={setSchedule}
                                         minDate={new Date().toISOString().slice(0, 10)}
                                     />
                                 )}
 
-                                {/* Category selector — hidden for request flows */}
-                                {!isQRFlow && (
+                                {/* Category selector — hidden for request flows and splits */}
+                                {!isQRFlow && !splitActive && (
                                     <CategorySelector
                                         categories={categories}
                                         selectedCategoryId={selectedCategory?.id}
@@ -549,7 +602,7 @@ const AmountPageInner = () => {
                                     onClick={handleContinue}
                                     className="w-full bg-brand-green dark:bg-brand-gold text-white dark:text-darkBg-main font-bold py-4 rounded-2xl shadow-lg hover:opacity-90 transition-all flex items-center justify-center gap-2"
                                 >
-                                    Continue to PIN
+                                    {splitActive ? "Continue to split" : "Continue to PIN"}
                                 </button>
 
                                 {isQRFlow && (
@@ -561,6 +614,12 @@ const AmountPageInner = () => {
                                     </button>
                                 )}
                             </div>
+                        ) : splitActive ? (
+                            <SplitBillComposer
+                                recipient={{ id: recipient.id, name: recipient.name, type: recipient.type }}
+                                total={parseFloat(amount)}
+                                onBack={() => setStep(1)}
+                            />
                         ) : (
                             <div className="animate-fadeIn">
                                 {/* Summary card above PIN */}