@myrjfa/ui 0.3.1

package/dist/chat/ExpensePanel.js

@@ -0,0 +1,282 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { chatApi } from "@myrjfa/state/dist/lib/actions/chat";
+import { chatActorKey, isSameChatActor, } from "@myrjfa/state/dist/lib/models/chat";
+import { Receipt, Plus, Trash2, Pencil, CreditCard, Users, MapPin, Image as ImageIcon, Navigation, Lock, Unlock, ReceiptText, BarChart3, CheckCircle, X, ChevronDown, PiggyBankIcon } from "lucide-react";
+import { Button } from "../misc/button";
+import { Input } from "../misc/input";
+import { Textarea } from "../misc/textarea";
+import { confirmActions, deleteActions, showAlert } from "../misc/alertdialogclaude";
+import { ExpenseAnalyticsDialog } from "./dialogs/ExpenseAnalyticsDialog";
+import { SplitTypeSelector } from "./components/SplitTypeSelector";
+import { SplitInputs } from "./components/SplitInputs";
+import { ParticipantSelector } from "./components/ParticipantSelector";
+import { Label } from "../misc/label";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../misc/dialog";
+import { useChatContext } from "@myrjfa/state/dist/lib/context/ChatContext";
+export function ExpensePanel({ conversationId, currentUserId, currentActorModel, participants, isFullScreen = false, isFeatureEnabled = false, isAdmin = false, onEnableFeature }) {
+    const { paymentRevision } = useChatContext();
+    const [expenses, setExpenses] = useState([]);
+    const [paymentIntents, setPaymentIntents] = useState([]);
+    const [showPaymentActivity, setShowPaymentActivity] = useState(false);
+    const [confirmingPaymentId, setConfirmingPaymentId] = useState(null);
+    const [balances, setBalances] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [isAdding, setIsAdding] = useState(false);
+    const [showSettleMode, setShowSettleMode] = useState(false);
+    const [newTitle, setNewTitle] = useState("");
+    const [newAmount, setNewAmount] = useState("");
+    const [newCategory, setNewCategory] = useState("");
+    const [newDescription, setNewDescription] = useState("");
+    const [newLocation, setNewLocation] = useState(null);
+    const [receiptFile, setReceiptFile] = useState(null);
+    const [uploading, setUploading] = useState(false);
+    const [gettingLocation, setGettingLocation] = useState(false);
+    const [categories, setCategories] = useState([]);
+    const [showAnalytics, setShowAnalytics] = useState(false);
+    const [settling, setSettling] = useState(null);
+    const [expenseId, setExpenseId] = useState(null);
+    const [showMoreOptions, setShowMoreOptions] = useState(false);
+    const [splitType, setSplitType] = useState("equal");
+    const [splitParticipants, setSplitParticipants] = useState([]);
+    const [splits, setSplits] = useState([]);
+    const [expandedExpenseId, setExpandedExpenseId] = useState(null);
+    const [showSplitModal, setShowSplitModal] = useState(false);
+    const [selectedExpenseForSplit, setSelectedExpenseForSplit] = useState(null);
+    const [showBalances, setShowBalances] = useState(false);
+    const fetchData = async () => {
+        setLoading(true);
+        const [expData, balData, paymentData] = await Promise.all([
+            chatApi.getExpenses(conversationId),
+            chatApi.getBalances(conversationId),
+            chatApi.getPaymentIntents(conversationId),
+        ]);
+        setExpenses(expData);
+        setBalances(balData);
+        setPaymentIntents(paymentData);
+        setLoading(false);
+    };
+    useEffect(() => {
+        fetchData();
+        fetchCategories();
+    }, [conversationId, paymentRevision]);
+    const currentActor = { actorId: currentUserId, actorModel: currentActorModel };
+    const participantLabel = (actor) => {
+        const participant = participants.find((item) => (actor === null || actor === void 0 ? void 0 : actor.actorModel)
+            ? isSameChatActor(item, actor)
+            : item.actorId === (actor === null || actor === void 0 ? void 0 : actor.actorId));
+        return (participant === null || participant === void 0 ? void 0 : participant.displayName) || (participant === null || participant === void 0 ? void 0 : participant.username) || "Trippeaze member";
+    };
+    const participantLabels = Object.fromEntries(participants.map((participant) => [
+        chatActorKey(participant),
+        participant.displayName || participant.username || "Trippeaze member",
+    ]));
+    const paymentActorLabel = (actor) => (actor === null || actor === void 0 ? void 0 : actor.actorId) ? participantLabel(actor) : "External payee";
+    const handlePaymentConfirmation = async (paymentIntentId, disputed) => {
+        setConfirmingPaymentId(paymentIntentId);
+        try {
+            await chatApi.confirmPaymentIntent(paymentIntentId, disputed);
+            await fetchData();
+        }
+        catch (error) {
+            await showAlert(error instanceof Error ? error.message : "Could not update this payment.", "Payment activity");
+        }
+        finally {
+            setConfirmingPaymentId(null);
+        }
+    };
+    const fetchCategories = async () => {
+        try {
+            const cats = await chatApi.getExpenseCategories(conversationId);
+            setCategories(cats || []);
+        }
+        catch (error) {
+            console.error("Failed to fetch categories:", error);
+        }
+    };
+    const userOwesAmount = () => {
+        if (!balances)
+            return 0;
+        const userBalance = balances.balances.find((balance) => isSameChatActor(balance, currentActor));
+        return userBalance && userBalance.netBalance < -0.01 ? Math.abs(userBalance.netBalance) : 0;
+    };
+    const getUserSettlements = () => {
+        if (!(balances === null || balances === void 0 ? void 0 : balances.settlements))
+            return { owes: [], isOwed: [] };
+        const owes = balances.settlements.filter((settlement) => isSameChatActor(settlement.from, currentActor));
+        const isOwed = balances.settlements.filter((settlement) => isSameChatActor(settlement.to, currentActor));
+        return { owes, isOwed };
+    };
+    const handleGetLocation = () => {
+        if (!navigator.geolocation) {
+            void showAlert("Geolocation is not supported by this browser.", "Location unavailable");
+            return;
+        }
+        setGettingLocation(true);
+        navigator.geolocation.getCurrentPosition(async (position) => {
+            const { latitude, longitude } = position.coords;
+            const mapLink = `https://www.google.com/maps?q=${latitude},${longitude}`;
+            setNewLocation(mapLink);
+            setGettingLocation(false);
+        }, (error) => {
+            console.error("Error getting location:", error);
+            showAlert("Could not get location.");
+            setGettingLocation(false);
+        });
+    };
+    const resetForm = () => {
+        setNewTitle("");
+        setNewAmount("");
+        setNewCategory("");
+        setNewDescription("");
+        setNewLocation(null);
+        setReceiptFile(null);
+        setShowMoreOptions(false);
+        setIsAdding(false);
+        setExpenseId(null);
+        setSplitType("equal");
+        setSplitParticipants([]);
+        setSplits([]);
+    };
+    const handleCreate = async () => {
+        var _a, _b;
+        if (!newTitle.trim() || !newAmount)
+            return;
+        const amount = parseFloat(newAmount);
+        if (amount <= 0) {
+            showAlert("Amount must be greater than 0");
+            return;
+        }
+        setUploading(true);
+        try {
+            let receiptUrl = undefined;
+            if (receiptFile) {
+                const formData = new FormData();
+                formData.append("chatFiles", receiptFile);
+                const res = await chatApi.uploadFiles(formData);
+                if ((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) {
+                    receiptUrl = res.data.files[0].url;
+                }
+            }
+            const expenseData = {
+                title: newTitle.trim(),
+                amount,
+                category: newCategory.trim() || "General",
+                description: newDescription.trim() || undefined,
+                paidBy: [{ ...currentActor, amount }],
+                splitType,
+                splits: splitType != "equal" && splits,
+                location: newLocation || undefined,
+                receipt: receiptUrl
+            };
+            const expenseResponse = expenseId
+                ? await chatApi.updateExpense(expenseId, expenseData)
+                : await chatApi.createExpense(conversationId, expenseData);
+            if (expenseResponse.error) {
+                console.error("Failed to create expense:", expenseResponse.error);
+                await showAlert(expenseResponse.error, "Failed to create expense");
+                return;
+            }
+            else {
+                if (expenseResponse.data) {
+                    await fetchData();
+                    resetForm();
+                }
+            }
+        }
+        catch (err) {
+            console.error("Failed to create expense:", err);
+            showAlert(err, "Failed to create expense");
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    const handleDelete = async (id) => {
+        let confirmDelete = true;
+        await showAlert("Are you sure you want to delete this expense?", undefined, deleteActions(() => confirmDelete = false));
+        if (confirmDelete) {
+            const response = await chatApi.deleteExpense(id);
+            if (response.error) {
+                console.log("Unable to delete expense:" + id + "Error: " + response.error);
+                await showAlert("Unable to delete expense");
+                return;
+            }
+            setExpenses(prev => prev.filter(e => e._id !== id));
+            const balData = await chatApi.getBalances(conversationId);
+            setBalances(balData);
+        }
+    };
+    const handleEdit = async (expense) => {
+        setExpenseId(expense._id);
+        setNewTitle(expense.title);
+        setNewAmount(expense.amount.toString());
+        setNewCategory(expense.category || "");
+        setNewDescription(expense.description || "");
+        setNewLocation(expense.location || null);
+        setSplitType(expense.splitType);
+        setSplitParticipants(expense.splits.map(({ actorId, actorModel }) => ({
+            actorId,
+            actorModel,
+        })));
+        setSplits(expense.splits);
+        setIsAdding(true);
+    };
+    const handleSettleSplit = async (payment) => {
+        setSettling(`${chatActorKey(payment.from)}:${chatActorKey(payment.to)}`);
+        let confirmPayment = true;
+        await showAlert(`Pay ₹${payment.amount.toFixed(0)} to ${participantLabel(payment.to)}`, undefined, confirmActions(() => confirmPayment = false));
+        if (confirmPayment) {
+            const response = await chatApi.settleSplit(conversationId, payment.to.actorId, payment.amount, payment.to.actorModel);
+            if (response.error) {
+                console.log("Error recording payment: " + response.error);
+                showAlert("Error recording payment");
+            }
+            else {
+                setExpenses(prev => [response.data, ...prev]);
+            }
+        }
+        setSettling(null);
+    };
+    const panelClasses = isFullScreen
+        ? "w-full h-full flex flex-col"
+        : "flex flex-col h-full w-full md:w-80 border-l border-gray-200 dark:border-gray-700";
+    return (_jsxs("div", { className: `bg-white dark:bg-gray-900 ${panelClasses}`, children: [_jsxs("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0 flex items-center justify-between", children: [_jsx("h3", { className: "font-semibold text-gray-900 dark:text-white", children: "Expenses" }), expenses.length > 0 && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setShowAnalytics(prev => !prev), className: "text-teal-600 hover:text-teal-700 dark:text-teal-400", children: [_jsx(BarChart3, { className: "w-4 h-4 mr-1" }), "Analytics"] }))] }), !isAdding && paymentIntents.length > 0 && (_jsxs("div", { className: "mx-3 mt-3 flex-shrink-0 overflow-hidden rounded-xl border border-indigo-100 bg-indigo-50/70 dark:border-indigo-900/50 dark:bg-indigo-950/20", children: [_jsxs("button", { type: "button", onClick: () => setShowPaymentActivity((open) => !open), className: "flex w-full items-center justify-between gap-3 p-3 text-left hover:bg-indigo-100/60 dark:hover:bg-indigo-900/30", children: [_jsxs("span", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-indigo-700 dark:text-indigo-300", children: [_jsx(CreditCard, { className: "h-4 w-4" }), "Payment activity"] }), _jsxs("span", { className: "flex items-center gap-1 text-xs text-indigo-700 dark:text-indigo-300", children: [paymentIntents.length, _jsx(ChevronDown, { className: `h-4 w-4 transition-transform ${showPaymentActivity ? "rotate-180" : ""}` })] })] }), showPaymentActivity && (_jsx("div", { className: "max-h-64 space-y-2 overflow-y-auto border-t border-indigo-100 p-2 dark:border-indigo-900/50", children: paymentIntents.map((intent) => {
+                            var _a, _b;
+                            const isPayee = ((_a = intent.payee) === null || _a === void 0 ? void 0 : _a.actorId) && isSameChatActor(intent.payee, currentActor);
+                            const needsConfirmation = intent.status === "reported" && isPayee;
+                            const statusLabel = intent.status === "captured"
+                                ? "Verified by Razorpay"
+                                : intent.status === "confirmed"
+                                    ? "Confirmed by payee"
+                                    : intent.status === "reported"
+                                        ? "Awaiting payee confirmation"
+                                        : intent.status === "disputed"
+                                            ? "Disputed"
+                                            : intent.status;
+                            return (_jsxs("div", { className: "rounded-lg border bg-white p-2.5 text-xs dark:bg-gray-900", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate font-semibold text-gray-900 dark:text-white", children: intent.title }), _jsxs("p", { className: "mt-0.5 text-gray-500", children: [paymentActorLabel(intent.payer), " paid ", ((_b = intent.externalPayee) === null || _b === void 0 ? void 0 : _b.label) || paymentActorLabel(intent.payee)] })] }), _jsxs("span", { className: "whitespace-nowrap font-semibold", children: [intent.currency, " ", intent.amount.toFixed(2)] })] }), _jsx("p", { className: `mt-1.5 font-medium ${intent.status === "captured" || intent.status === "confirmed" ? "text-emerald-600" : intent.status === "disputed" || intent.status === "failed" ? "text-red-600" : "text-amber-600"}`, children: statusLabel }), needsConfirmation && (_jsxs("div", { className: "mt-2 flex gap-2", children: [_jsx(Button, { size: "sm", className: "h-7 flex-1 text-xs", disabled: confirmingPaymentId === intent._id, onClick: () => void handlePaymentConfirmation(intent._id, false), children: "Confirm received" }), _jsx(Button, { size: "sm", variant: "outline", className: "h-7 flex-1 text-xs text-red-600", disabled: confirmingPaymentId === intent._id, onClick: () => void handlePaymentConfirmation(intent._id, true), children: "Dispute" })] }))] }, intent._id));
+                        }) }))] })), !isAdding && balances && (_jsxs("div", { className: "bg-teal-50 dark:bg-teal-900/20 mx-3 mt-3 rounded-xl border border-teal-100 dark:border-teal-800 flex-shrink-0 overflow-hidden", children: [_jsxs("button", { type: "button", onClick: () => setShowBalances((open) => !open), className: "flex w-full items-center justify-between gap-3 p-3 text-left hover:bg-teal-100/60 dark:hover:bg-teal-900/35", children: [_jsxs("span", { className: "flex items-center gap-2 text-xs font-semibold text-teal-700 dark:text-teal-300 uppercase tracking-wider", children: [_jsx(Users, { className: "w-4 h-4 text-teal-500" }), "Group Balance"] }), _jsxs("span", { className: "flex items-center gap-1 text-xs font-medium text-teal-700 dark:text-teal-300", children: [showBalances ? "Hide balances" : `View ${balances.balances.length} balances`, _jsx(ChevronDown, { className: `h-4 w-4 transition-transform ${showBalances ? "rotate-180" : ""}` })] })] }), showBalances && _jsx("div", { className: "border-t border-teal-100 px-3 pb-3 dark:border-teal-800", children: balances.balances.map((b) => (_jsxs("div", { className: "flex justify-between text-xs py-1", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: participantLabel(b) }), _jsxs("span", { className: `font-medium ${b.netBalance >= 0 ? "text-green-600" : "text-red-500"}`, children: [b.netBalance >= 0 ? "+" : "", "\u20B9", b.netBalance.toFixed(2)] })] }, b.actorId))) })] })), showSettleMode && balances && (_jsxs("div", { className: "p-3 bg-teal-50 dark:bg-teal-900/20 mx-3 mt-3 rounded-xl border border-teal-100 dark:border-teal-800 flex-shrink-0", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 mb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Users, { className: "w-4 h-4 text-teal-500" }), _jsx("span", { className: "text-xs font-semibold text-teal-700 dark:text-teal-300 uppercase tracking-wider", children: "Your Settlements" })] }), _jsx(Button, { onClick: () => setShowSettleMode(false), variant: "ghost", size: "sm", className: "h-6 w-6 p-0", children: _jsx(X, { className: "w-4 h-4" }) })] }), (() => {
+                        const { owes, isOwed } = getUserSettlements();
+                        const hasSettlements = owes.length > 0 || isOwed.length > 0;
+                        return !hasSettlements ? (_jsx("p", { className: "text-xs text-gray-500 text-center py-4", children: "All settled up! \uD83C\uDF89" })) : (_jsxs("div", { className: "space-y-3", children: [owes.length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "text-[10px] font-semibold text-red-600 dark:text-red-400 uppercase tracking-wider mb-2", children: "You Owe" }), _jsx("div", { className: "space-y-2", children: owes.map((s, i) => (_jsxs("div", { className: "flex items-center justify-between p-2.5 bg-white dark:bg-gray-800 rounded-lg border border-red-100 dark:border-red-900/30 hover:border-red-200 dark:hover:border-red-800 transition-colors", children: [_jsx("div", { className: "flex-1", children: _jsxs("p", { className: "text-xs text-gray-700 dark:text-gray-300", children: ["Pay ", _jsxs("span", { className: "font-semibold text-red-600 dark:text-red-400", children: ["\u20B9", s.amount.toFixed(0)] }), " to ", _jsx("span", { className: "font-semibold", children: participantLabel(s.to) })] }) }), _jsxs(Button, { size: "sm", onClick: () => handleSettleSplit(s), disabled: settling === s.from + s.to, className: "text-[10px] text-white bg-red-500 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 h-6 px-2 ml-2 flex-shrink-0", children: [_jsx(CheckCircle, { className: "w-3 h-3 mr-1" }), settling === s.from + s.to ? "..." : "Settle"] })] }, i))) })] })), isOwed.length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "text-[10px] font-semibold text-green-600 dark:text-green-400 uppercase tracking-wider mb-2", children: "You Are Owed" }), _jsx("div", { className: "space-y-2", children: isOwed.map((s, i) => (_jsx("div", { className: "flex items-center justify-between p-2.5 bg-white dark:bg-gray-800 rounded-lg border border-green-100 dark:border-green-900/30 hover:border-green-200 dark:hover:border-green-800 transition-colors", children: _jsxs("p", { className: "text-xs text-gray-700 dark:text-gray-300", children: [_jsx("span", { className: "font-semibold", children: participantLabel(s.from) }), " owes you", " ", _jsxs("span", { className: "font-semibold text-green-600 dark:text-green-400", children: ["\u20B9", s.amount.toFixed(0)] })] }) }, i))) })] }))] }));
+                    })()] })), _jsx("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 pt-0 mt-3", children: !isFeatureEnabled ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full py-12 px-6 text-center", children: [_jsx("div", { className: "mb-4 p-4 bg-teal-50 dark:bg-teal-900/20 rounded-full", children: _jsx(ReceiptText, { className: "w-12 h-12 text-teal-500" }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-2", children: "Expenses Feature" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-4 max-w-sm", children: "Split costs fairly, track who owes whom, analyse expenses and settle balances easily. Perfect for shared trip expenses and group activities." }), isAdmin ? (_jsxs(Button, { onClick: onEnableFeature, className: "bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white", children: [_jsx(Unlock, { className: "w-4 h-4 mr-2" }), "Enable Feature"] })) : (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [_jsx(Lock, { className: "w-4 h-4" }), "Ask admin to enable this feature"] }))] })) : loading ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx("div", { className: "animate-spin w-5 h-5 border-2 border-teal-500 border-t-transparent rounded-full" }) })) : !showSettleMode && expenses.length === 0 && !isAdding ? (_jsx("div", { className: "text-center py-8 text-gray-400 text-sm", children: "No expenses yet" })) : (_jsxs(_Fragment, { children: [!showSettleMode && isAdding && (_jsxs("div", { className: "bg-teal-50 dark:bg-teal-900/20 p-3 rounded-xl border border-teal-100 dark:border-teal-800 space-y-3", children: [_jsx(Input, { autoFocus: true, value: newTitle, onChange: (e) => setNewTitle(e.target.value), placeholder: "What for?", className: "w-full bg-white dark:bg-gray-800 border-none outline-none rounded-lg p-2 text-sm text-gray-900 dark:text-white shadow-sm" }), _jsx("div", { className: "grid grid-cols-3 gap-2", children: _jsxs("div", { className: "col-span-2 relative", children: [_jsx("span", { className: "absolute left-2 top-2 text-gray-400 text-sm", children: "\u20B9" }), _jsx(Input, { type: "number", step: "0.01", value: newAmount, onChange: (e) => setNewAmount(e.target.value), placeholder: "0.00", className: "w-full bg-white dark:bg-gray-800 border-none outline-none rounded-lg p-2 pl-6 text-sm text-gray-900 dark:text-white shadow-sm" })] }) }), _jsxs(Button, { onClick: () => setShowMoreOptions(!showMoreOptions), variant: "secondary", className: "w-full flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider", children: "More Options" }), _jsx(ChevronDown, { className: `w-4 h-4 text-gray-400 transition-transform ${showMoreOptions ? "rotate-180" : ""}` })] }), showMoreOptions && (_jsxs("div", { className: "bg-white dark:bg-gray-800 p-3 rounded-lg border border-gray-200 dark:border-gray-700 space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider block mb-1", children: "Category" }), _jsx(Input, { placeholder: "Section (e.g., Day 1, Transport)", value: newCategory, onChange: (e) => setNewCategory(e.target.value), list: "section-suggestions", className: "text-sm" }), _jsx("datalist", { id: "section-suggestions", children: categories.map(category => (_jsx("option", { value: category }, category))) })] }), _jsx(SplitTypeSelector, { value: splitType, onChange: (type) => setSplitType(type) }), splitType !== "equal" && (_jsx(ParticipantSelector, { participants: splitParticipants, onChange: setSplitParticipants, onSplitsChange: setSplits, availableUsers: participants })), _jsx(SplitInputs, { splitType: splitType, totalAmount: parseFloat(newAmount) || 0, participants: splitParticipants, participantLabels: participantLabels, splits: splits, onChange: setSplits }), _jsxs("div", { children: [_jsx(Button, { onClick: handleGetLocation, loading: gettingLocation, autoLoading: false, disabled: gettingLocation || uploading, className: "w-full flex items-center justify-center gap-2 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-200 dark:border-gray-600 rounded-lg p-2 text-sm text-gray-600 dark:text-gray-300 transition-colors", children: gettingLocation ? (_jsx("span", { children: "Getting..." })) : (_jsxs(_Fragment, { children: [_jsx(Navigation, { className: "w-4 h-4" }), _jsx("span", { children: "Add Location" })] })) }), newLocation && (_jsxs("div", { className: "mt-2 p-2 bg-white dark:bg-gray-700 rounded-lg border border-teal-200 dark:border-teal-800 flex items-center justify-between gap-2", children: [_jsxs("a", { href: newLocation, target: "_blank", rel: "noopener noreferrer", className: "text-xs text-blue-500 hover:underline truncate flex-1", children: [_jsx(MapPin, { className: "w-4 h-4 inline mr-1" }), "View Location"] }), _jsx("button", { onClick: () => setNewLocation(null), className: "text-red-500 hover:text-red-600", children: _jsx(X, { className: "w-4 h-4" }) })] }))] }), _jsxs("div", { children: [_jsxs("label", { className: "flex items-center gap-2 text-xs text-gray-500 cursor-pointer hover:text-teal-500 transition-colors bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-2", children: [_jsx(ImageIcon, { className: "w-4 h-4" }), receiptFile ? (_jsx("span", { className: "text-teal-500 truncate max-w-[150px]", children: receiptFile.name })) : ("Add Receipt"), _jsx(Input, { type: "file", className: "hidden", accept: "image/*", onChange: (e) => { var _a; return setReceiptFile(((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null); } })] }), receiptFile && (_jsxs(Button, { onClick: () => setReceiptFile(null), className: "mt-2 w-full text-red-500 hover:text-red-600 text-xs flex items-center justify-center gap-2", variant: "ghost", children: [_jsx(Trash2, { className: "w-3 h-3" }), "Remove Receipt"] }))] }), _jsxs("div", { children: [_jsx("label", { className: "text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider block mb-1", children: "Description" }), _jsx(Textarea, { value: newDescription, onChange: (e) => setNewDescription(e.target.value), placeholder: "Add details...", className: "w-full bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-2 text-xs text-gray-900 dark:text-white outline-none focus:border-teal-500 resize-none h-16" })] })] })), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: resetForm, disabled: uploading || gettingLocation, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleCreate, loading: uploading, autoLoading: false, disabled: uploading || gettingLocation, className: "bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white", children: expenseId ? "Update" : "Add" })] })] })), !showSettleMode &&
+                            expenses.map((e) => {
+                                return e.title == "Internal_Settlement" ?
+                                    (_jsxs("div", { className: "w-full p-3 flex items-start gap-3 hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors group text-left", children: [_jsx("div", { className: "mt-1 p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg text-teal-500 flex-shrink-0", children: _jsx(PiggyBankIcon, { className: "w-4 h-4" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("p", { className: "text-sm font-semibold text-gray-800 dark:text-gray-200 truncate", children: ["Paid to ", participantLabel(e.splits[0])] }), _jsxs("p", { className: "text-sm font-bold text-gray-900 dark:text-white flex-shrink-0 ml-2", children: ["\u20B9", e.amount, " ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: e.currency })] })] }), _jsxs("div", { className: "text-[10px] text-gray-500 mt-1", children: ["by ", participantLabel(e.paidBy[0]), " \u2022 ", new Date(e.date).toLocaleDateString()] })] })] }))
+                                    : (_jsxs("div", { className: "bg-gray-50 dark:bg-gray-800/30 border border-gray-100 dark:border-gray-800 rounded-xl transition-colors overflow-hidden", children: [_jsxs("button", { onClick: () => setExpandedExpenseId(expandedExpenseId === e._id ? null : e._id), className: "w-full p-3 flex items-start gap-3 hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors group text-left", children: [_jsx("div", { className: "mt-1 p-2 bg-teal-100 dark:bg-teal-900/30 rounded-lg text-teal-500 flex-shrink-0", children: _jsx(Receipt, { className: "w-4 h-4" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800 dark:text-gray-200 truncate", children: e.title }), _jsxs("p", { className: "text-sm font-bold text-gray-900 dark:text-white flex-shrink-0 ml-2", children: ["\u20B9", e.amount, " ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: e.currency })] })] }), _jsxs("div", { className: "text-[10px] text-gray-500 mt-1", children: ["by ", participantLabel(e.paidBy[0]), " \u2022 ", new Date(e.date).toLocaleDateString()] })] }), _jsx(ChevronDown, { className: `w-4 h-4 text-gray-400 transition-transform flex-shrink-0 ${expandedExpenseId === e._id ? "rotate-180" : ""}` })] }), expandedExpenseId === e._id && (_jsxs("div", { className: "bg-white dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-700 p-3 space-y-3", children: [e.category && (_jsxs("div", { children: [_jsx("p", { className: "text-[10px] font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-1", children: "Category" }), _jsx("p", { className: "text-xs text-gray-700 dark:text-gray-300", children: e.category })] })), (e.location || e.receipt) && _jsxs("div", { className: "flex flex-col w-full gap-3", children: [e.location && (_jsxs("div", { children: [_jsx("p", { className: "text-[10px] font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-1", children: "Location" }), _jsxs("a", { href: e.location.startsWith("http")
+                                                                            ? e.location
+                                                                            : `https://maps.google.com/?q=${e.location}`, target: "_blank", rel: "noopener noreferrer", className: "text-xs text-blue-500 hover:underline flex items-center gap-1", children: [_jsx(MapPin, { className: "w-3 h-3" }), "View on Map"] })] })), e.receipt && (_jsxs("div", { children: [_jsx("p", { className: "text-[10px] font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-1", children: "Receipt" }), _jsxs("a", { href: e.receipt, target: "_blank", rel: "noopener noreferrer", className: "block overflow-hidden rounded-lg border border-gray-200 bg-gray-50 hover:border-teal-400 dark:border-gray-600 dark:bg-gray-800", children: [_jsx("img", { src: e.receipt, alt: `Receipt for ${e.title}`, className: "h-28 w-full object-cover" }), _jsxs("span", { className: "flex items-center gap-1 p-2 text-xs text-blue-500 hover:underline", children: [_jsx(Receipt, { className: "w-3 h-3" }), "View full receipt"] })] })] }))] }), e.description && (_jsxs("div", { children: [_jsx("p", { className: "text-[10px] font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-1", children: "Description" }), _jsx("p", { className: "text-xs text-gray-700 dark:text-gray-300 line-clamp-3", children: e.description })] })), _jsx(Button, { size: "sm", onClick: () => {
+                                                            setSelectedExpenseForSplit(e);
+                                                            setShowSplitModal(true);
+                                                        }, className: "w-full text-teal-600 dark:text-teal-400 hover:text-teal-700 dark:hover:text-teal-300 text-xs border border-teal-200 dark:border-teal-800 bg-teal-50 dark:bg-teal-900/20", variant: "outline", children: "View Split Details" }), isSameChatActor(e.createdBy, currentActor) && (_jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { size: "sm", onClick: () => handleEdit(e), className: "flex-1 text-xs", variant: "outline", children: [_jsx(Pencil, { className: "w-3 h-3 mr-1" }), "Edit"] }), _jsxs(Button, { size: "sm", onClick: () => handleDelete(e._id), className: "flex-1 text-xs text-red-600 hover:text-red-700 border-red-200 dark:border-red-800 hover:bg-red-50 dark:hover:bg-red-900/20", variant: "outline", children: [_jsx(Trash2, { className: "w-3 h-3 mr-1" }), "Delete"] })] }))] }))] }, e._id));
+                            })] })) }), isFeatureEnabled && !loading && (_jsx("div", { className: "p-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0 space-y-2", children: showSettleMode ? (_jsx(Button, { onClick: () => setShowSettleMode(false), className: "w-full bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white rounded-lg", children: "Back to Expenses" })) : (_jsxs(_Fragment, { children: [!isAdding && (_jsxs(Button, { onClick: () => {
+                                setExpenseId(null);
+                                setIsAdding(true);
+                                setSplitParticipants([]);
+                            }, className: "w-full bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white rounded-lg flex items-center justify-center gap-2", children: [_jsx(Plus, { className: "w-4 h-4" }), "Add Expense"] })), userOwesAmount() > 0 && !isAdding && (_jsxs(Button, { onClick: () => setShowSettleMode(true), variant: "outline", className: "w-full rounded-lg border-teal-500 text-teal-600 hover:bg-teal-50 dark:hover:bg-teal-900/10", children: [_jsx(CreditCard, { className: "w-4 h-4 mr-2" }), "Settle Debts (\u20B9", userOwesAmount().toFixed(2), ")"] }))] })) })), showSplitModal && selectedExpenseForSplit && (_jsx(Dialog, { open: showSplitModal, onOpenChange: (open) => {
+                    setShowSplitModal(open);
+                    if (!open)
+                        setSelectedExpenseForSplit(null);
+                }, children: _jsxs(DialogContent, { className: "max-h-[calc(100vh-2rem)] overflow-y-auto", style: { width: "calc(100vw - 2rem)", maxWidth: "520px" }, children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Split Details" }) }), _jsxs("div", { className: "space-y-4 pt-2", children: [_jsxs("div", { className: "bg-teal-50 dark:bg-teal-900/20 p-3 rounded-lg border border-teal-100 dark:border-teal-800", children: [_jsx("p", { className: "text-xs font-semibold text-teal-700 dark:text-teal-300 uppercase tracking-wider mb-2", children: selectedExpenseForSplit.title }), _jsxs("p", { className: "text-sm font-bold text-teal-900 dark:text-teal-100", children: ["\u20B9", selectedExpenseForSplit.amount, " ", selectedExpenseForSplit.currency] }), _jsxs("p", { className: "text-[10px] text-teal-600 dark:text-teal-400 mt-1", children: ["Split Type: ", _jsx("span", { className: "font-semibold capitalize", children: selectedExpenseForSplit.splitType })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider", children: "Individual Splits" }), selectedExpenseForSplit.splits.map((split, idx) => (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: participantLabel(split) }), split.percentage && (_jsxs("p", { className: "text-[10px] text-gray-500", children: [split.percentage, "%"] })), split.shares && (_jsxs("p", { className: "text-[10px] text-gray-500", children: [split.shares, " shares"] }))] }), _jsxs("p", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: ["\u20B9", split.amount.toFixed(2)] })] }, idx)))] })] })] }) })), _jsx(ExpenseAnalyticsDialog, { conversationId: conversationId, participants: participants, open: showAnalytics, onClose: () => setShowAnalytics(false) })] }));
+}

package/dist/chat/MessageBubble.d.ts

@@ -0,0 +1,29 @@
+import { type ChatActorModel, type Message, type Participant, type Poll } from "@myrjfa/state/dist/lib/models/chat";
+interface MessageBubbleProps {
+    message: Message;
+    participants: Participant[];
+    currentUserId: string;
+    currentActorModel: ChatActorModel;
+    showSender?: boolean;
+    senderProfilePic?: string;
+    onEdit?: (message: Message) => void;
+    onDelete?: (messageId: string) => void;
+    onReply?: (message: Message) => void;
+    onReactionAdd?: (messageId: string, emoji: string) => void;
+    onReactionRemove?: (messageId: string) => void;
+    onScrollToReply?: (messageId: string) => void;
+    onVote?: (pollId: string, optionIndex: number) => Promise<Poll | null>;
+    onEditPoll?: (pollId: string, data: {
+        question: string;
+        options: string[];
+        allowMultiple: boolean;
+    }) => Promise<Poll | null>;
+    onStar?: (messageId: string) => void;
+    onPin?: (messageId: string) => void;
+    isGroupAdmin?: boolean;
+    onModerate?: (messageId: string) => void;
+    onReport?: (message: Message) => void;
+}
+export declare function MessageBubble({ message, participants, currentUserId, currentActorModel, showSender, senderProfilePic, onEdit, onDelete, onReply, onReactionAdd, onReactionRemove, onScrollToReply, onVote, onEditPoll, onStar, onPin, isGroupAdmin, onModerate, onReport, }: MessageBubbleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MessageBubble.d.ts.map

package/dist/chat/MessageBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../src/chat/MessageBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGH,KAAK,cAAc,EAEnB,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,IAAI,EACZ,MAAM,oCAAoC,CAAC;AAqE5C,UAAU,kBAAkB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,cAAc,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,EAAE,CAAC;QAAC,aAAa,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAC7H,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAWD,wBAAgB,aAAa,CAAC,EAC1B,OAAO,EACP,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,MAAM,EACN,UAAU,EACV,MAAM,EACN,KAAK,EACL,YAAY,EACZ,UAAU,EACV,QAAQ,GACX,EAAE,kBAAkB,2CAy0BpB"}