@myrjfa/ui 1.1.0 → 1.1.1

package/dist/chat/ExpensePanel.js

@@ -1,215 +1,235 @@
 "use client";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 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 { Receipt, Plus, Trash2, MoreVertical, Users, MapPin, Image as ImageIcon, Loader2, Navigation } from "lucide-react";
+import { Receipt, Plus, Trash2, Pencil, CreditCard, Users, MapPin, Image as ImageIcon, Loader2, Navigation, Lock, Unlock, ReceiptText, BarChart3, CheckCircle, X, ChevronDown, PiggyBankIcon } from "lucide-react";
 import { Button } from "../misc/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../misc/dropdown-menu";
-export function ExpensePanel(_a) {
-    var _this = this;
-    var conversationId = _a.conversationId, currentUserId = _a.currentUserId, _b = _a.isFullScreen, isFullScreen = _b === void 0 ? false : _b;
-    var _c = useState([]), expenses = _c[0], setExpenses = _c[1];
-    var _d = useState(null), balances = _d[0], setBalances = _d[1];
-    var _e = useState(true), loading = _e[0], setLoading = _e[1];
-    var _f = useState(false), isAdding = _f[0], setIsAdding = _f[1];
-    var _g = useState(""), newTitle = _g[0], setNewTitle = _g[1];
-    var _h = useState(""), newAmount = _h[0], setNewAmount = _h[1];
-    var _j = useState(null), newLocation = _j[0], setNewLocation = _j[1];
-    var _k = useState(null), receiptFile = _k[0], setReceiptFile = _k[1];
-    var _l = useState(false), uploading = _l[0], setUploading = _l[1];
-    var _m = useState(false), gettingLocation = _m[0], setGettingLocation = _m[1];
-    var fetchData = function () { return __awaiter(_this, void 0, void 0, function () {
-        var _a, expData, balData;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    setLoading(true);
-                    return [4 /*yield*/, Promise.all([
-                            chatApi.getExpenses(conversationId),
-                            chatApi.getBalances(conversationId)
-                        ])];
-                case 1:
-                    _a = _b.sent(), expData = _a[0], balData = _a[1];
-                    setExpenses(expData);
-                    setBalances(balData);
-                    setLoading(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    useEffect(function () {
+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";
+export function ExpensePanel({ conversationId, currentUserId, isFullScreen = false, isFeatureEnabled = false, isAdmin = false, onEnableFeature }) {
+    const [expenses, setExpenses] = useState([]);
+    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 [groupParticipants, setGroupParticipants] = useState([]);
+    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 fetchData = async () => {
+        var _a;
+        setLoading(true);
+        const [expData, balData, convData] = await Promise.all([
+            chatApi.getExpenses(conversationId),
+            chatApi.getBalances(conversationId),
+            chatApi.getConversation(conversationId)
+        ]);
+        setExpenses(expData);
+        setBalances(balData);
+        const participants = ((_a = convData === null || convData === void 0 ? void 0 : convData.participants) === null || _a === void 0 ? void 0 : _a.map((p) => p.userId)) || [];
+        setGroupParticipants(participants);
+        setLoading(false);
+    };
+    useEffect(() => {
         fetchData();
+        fetchCategories();
     }, [conversationId]);
-    var handleGetLocation = function () {
+    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(b => b.userId === currentUserId);
+        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(s => s.from === currentUserId);
+        const isOwed = balances.settlements.filter(s => s.to === currentUserId);
+        return { owes, isOwed };
+    };
+    const handleGetLocation = () => {
         if (!navigator.geolocation) {
             alert("Geolocation not supported by your browser");
             return;
         }
         setGettingLocation(true);
-        navigator.geolocation.getCurrentPosition(function (position) { return __awaiter(_this, void 0, void 0, function () {
-            var _a, latitude, longitude, response, data, address, err_1;
-            var _b, _c, _d;
-            return __generator(this, function (_e) {
-                switch (_e.label) {
-                    case 0:
-                        _a = position.coords, latitude = _a.latitude, longitude = _a.longitude;
-                        _e.label = 1;
-                    case 1:
-                        _e.trys.push([1, 4, , 5]);
-                        return [4 /*yield*/, fetch("https://nominatim.openstreetmap.org/reverse?format=json&lat=".concat(latitude, "&lon=").concat(longitude), { headers: { 'Accept-Language': 'en' } })];
-                    case 2:
-                        response = _e.sent();
-                        return [4 /*yield*/, response.json()];
-                    case 3:
-                        data = _e.sent();
-                        address = ((_b = data.address) === null || _b === void 0 ? void 0 : _b.city) || ((_c = data.address) === null || _c === void 0 ? void 0 : _c.town) || ((_d = data.address) === null || _d === void 0 ? void 0 : _d.village) || "".concat(latitude.toFixed(4), ", ").concat(longitude.toFixed(4));
-                        setNewLocation(address);
-                        return [3 /*break*/, 5];
-                    case 4:
-                        err_1 = _e.sent();
-                        // Fallback to coordinates if reverse geocoding fails
-                        setNewLocation("".concat(latitude.toFixed(4), ", ").concat(longitude.toFixed(4)));
-                        return [3 /*break*/, 5];
-                    case 5:
-                        setGettingLocation(false);
-                        return [2 /*return*/];
-                }
-            });
-        }); }, function (error) {
-            console.error("Geolocation error:", error);
-            alert("Failed to get location. Please check permissions.");
+        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);
         });
     };
-    var handleCreate = function () { return __awaiter(_this, void 0, void 0, function () {
-        var receiptUrl, formData, res, amount, expense_1, balData, err_2;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!newTitle.trim() || !newAmount)
-                        return [2 /*return*/];
-                    setUploading(true);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 7, 8, 9]);
-                    receiptUrl = undefined;
-                    if (!receiptFile) return [3 /*break*/, 3];
-                    formData = new FormData();
-                    formData.append("chatFiles", receiptFile);
-                    return [4 /*yield*/, chatApi.uploadFiles(formData)];
-                case 2:
-                    res = _a.sent();
-                    if (res.data && res.data.files && res.data.files.length > 0) {
-                        receiptUrl = res.data.files[0].location;
-                    }
-                    _a.label = 3;
-                case 3:
-                    amount = parseFloat(newAmount);
-                    return [4 /*yield*/, chatApi.createExpense(conversationId, {
-                            title: newTitle.trim(),
-                            amount: amount,
-                            paidBy: [{ userId: currentUserId, amount: amount }],
-                            location: newLocation || undefined,
-                            receipt: receiptUrl
-                        })];
-                case 4:
-                    expense_1 = _a.sent();
-                    if (!expense_1) return [3 /*break*/, 6];
-                    setExpenses(function (prev) { return __spreadArray([expense_1], prev, true); });
-                    setNewTitle("");
-                    setNewAmount("");
-                    setNewLocation(null);
-                    setReceiptFile(null);
-                    setIsAdding(false);
-                    return [4 /*yield*/, chatApi.getBalances(conversationId)];
-                case 5:
-                    balData = _a.sent();
-                    setBalances(balData);
-                    _a.label = 6;
-                case 6: return [3 /*break*/, 9];
-                case 7:
-                    err_2 = _a.sent();
-                    console.error("Failed to create expense:", err_2);
-                    return [3 /*break*/, 9];
-                case 8:
-                    setUploading(false);
-                    return [7 /*endfinally*/];
-                case 9: return [2 /*return*/];
+    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].location;
+                }
             }
-        });
-    }); };
-    var handleDelete = function (id) { return __awaiter(_this, void 0, void 0, function () {
-        var balData;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!window.confirm("Are you sure you want to delete this expense?")) return [3 /*break*/, 3];
-                    return [4 /*yield*/, chatApi.deleteExpense(id)];
-                case 1:
-                    _a.sent();
-                    setExpenses(function (prev) { return prev.filter(function (e) { return e._id !== id; }); });
-                    return [4 /*yield*/, chatApi.getBalances(conversationId)];
-                case 2:
-                    balData = _a.sent();
-                    setBalances(balData);
-                    _a.label = 3;
-                case 3: return [2 /*return*/];
+            const expenseData = {
+                title: newTitle.trim(),
+                amount,
+                category: newCategory.trim() || "General",
+                description: newDescription.trim() || undefined,
+                paidBy: [{ userId: currentUserId, 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;
             }
-        });
-    }); };
-    var panelClasses = isFullScreen
+            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(s => s.userId));
+        setSplits(expense.splits);
+        setIsAdding(true);
+    };
+    const handleSettleSplit = async (payment) => {
+        setSettling(payment.from + payment.to);
+        let confirmPayment = true;
+        await showAlert(`Pay ₹${payment.amount.toFixed(0)} to ${payment.to}`, undefined, confirmActions(() => confirmPayment = false));
+        if (confirmPayment) {
+            const response = await chatApi.settleSplit(conversationId, payment.to, payment.amount);
+            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 ".concat(panelClasses), children: [_jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0", children: _jsx("h3", { className: "font-semibold text-gray-900 dark:text-white", children: "Expenses" }) }), 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 gap-2 mb-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: "Group Balance" })] }), balances.balances.map(function (b) { return (_jsxs("div", { className: "flex justify-between text-xs py-1", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: b.userId }), _jsxs("span", { className: "font-medium ".concat(b.netBalance >= 0 ? "text-green-600" : "text-red-500"), children: [b.netBalance >= 0 ? "+" : "", "\u20B9", b.netBalance.toFixed(2)] })] }, b.userId)); })] })), _jsx("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 pt-0", children: 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" }) })) : expenses.length === 0 && !isAdding ? (_jsx("div", { className: "text-center py-8 text-gray-400 text-sm", children: "No expenses yet" })) : (_jsxs(_Fragment, { children: [isAdding && (_jsxs("div", { className: "bg-teal-50 dark:bg-teal-900/20 p-3 rounded-xl border border-teal-100 dark:border-teal-800", children: [_jsx("input", { autoFocus: true, value: newTitle, onChange: function (e) { return 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 mb-2 shadow-sm" }), _jsxs("div", { className: "relative mb-2", children: [_jsx("span", { className: "absolute left-2 top-2 text-gray-400 text-sm", children: "\u20B9" }), _jsx("input", { type: "number", value: newAmount, onChange: function (e) { return 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("div", { className: "mb-2 flex gap-2", children: [_jsx("button", { onClick: handleGetLocation, disabled: gettingLocation || uploading, className: "flex-1 flex items-center justify-center gap-2 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-200 dark:border-gray-700 rounded-lg p-2 text-sm text-gray-600 dark:text-gray-300 transition-colors", children: gettingLocation ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), _jsx("span", { children: "Getting..." })] })) : (_jsxs(_Fragment, { children: [_jsx(Navigation, { className: "w-4 h-4" }), _jsx("span", { children: "Get Location" })] })) }), newLocation && (_jsx("button", { onClick: function () { return setNewLocation(null); }, className: "px-2 py-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-red-500 transition-colors", title: "Clear location", children: "\u2715" }))] }), newLocation && (_jsxs("div", { className: "mb-2 p-2 bg-white dark:bg-gray-800 rounded-lg border border-teal-200 dark:border-teal-800 flex items-center gap-2", children: [_jsx(MapPin, { className: "w-4 h-4 text-teal-500 flex-shrink-0" }), _jsx("span", { className: "text-xs text-gray-700 dark:text-gray-300 truncate", children: newLocation })] })), _jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsxs("label", { className: "flex-1 flex items-center gap-2 text-xs text-gray-500 cursor-pointer hover:text-teal-500 transition-colors bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-2", children: [_jsx(ImageIcon, { className: "w-4 h-4" }), receiptFile ? _jsx("span", { className: "text-teal-500 truncate max-w-[150px] text-xs", children: receiptFile.name }) : "Add Receipt", _jsx("input", { type: "file", className: "hidden", accept: "image/*", onChange: function (e) { var _a; return setReceiptFile(((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null); } })] }), receiptFile && _jsx("button", { onClick: function () { return setReceiptFile(null); }, className: "text-red-400 hover:text-red-500 p-2", children: _jsx(Trash2, { className: "w-3 h-3" }) })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: function () {
-                                                setIsAdding(false);
-                                                setNewLocation(null);
-                                            }, disabled: uploading || gettingLocation, children: "Cancel" }), _jsxs(Button, { size: "sm", onClick: handleCreate, 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: [uploading && _jsx(Loader2, { className: "w-3 h-3 mr-1 animate-spin" }), "Add"] })] })] })), expenses.map(function (e) {
-                            var _a;
-                            return (_jsxs("div", { className: "group flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-800/30 border border-gray-100 dark:border-gray-800 rounded-xl transition-colors", 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] })] }), _jsxs("div", { className: "flex justify-between items-start mt-1 flex-wrap gap-1", children: [_jsxs("p", { className: "text-[10px] text-gray-400", children: ["by ", (_a = e.paidBy[0]) === null || _a === void 0 ? void 0 : _a.userId, " \u2022 ", new Date(e.date).toLocaleDateString()] }), (e.location || e.receipt) && (_jsxs("div", { className: "flex items-center gap-2 mt-1 flex-wrap", children: [e.location && (_jsxs("a", { href: e.location.startsWith('http') ? e.location : "https://maps.google.com/?q=".concat(e.location), target: "_blank", rel: "noopener noreferrer", className: "flex items-center text-[10px] text-blue-500 hover:underline", children: [_jsx(MapPin, { className: "w-3 h-3 mr-0.5" }), e.location.length > 20 ? e.location.substring(0, 20) + "..." : e.location] })), e.receipt && (_jsxs("a", { href: e.receipt, target: "_blank", rel: "noopener noreferrer", className: "flex items-center text-[10px] text-blue-500 hover:underline", children: [_jsx(Receipt, { className: "w-3 h-3 mr-0.5" }), "View"] }))] }))] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { className: "opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-all mt-2 flex-shrink-0", children: _jsx(MoreVertical, { className: "w-3 h-3 text-gray-400" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsxs(DropdownMenuItem, { className: "text-red-500", onClick: function () { return handleDelete(e._id); }, children: [_jsx(Trash2, { className: "w-4 h-4 mr-2" }), "Delete"] }) })] })] }, e._id));
-                        })] })) }), !isAdding && (_jsx("div", { className: "p-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0", children: _jsxs(Button, { onClick: function () { return setIsAdding(true); }, 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"] }) }))] }));
+    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 && 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 gap-2 mb-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: "Group Balance" })] }), 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: b.userId }), _jsxs("span", { className: `font-medium ${b.netBalance >= 0 ? "text-green-600" : "text-red-500"}`, children: [b.netBalance >= 0 ? "+" : "", "\u20B9", b.netBalance.toFixed(2)] })] }, b.userId)))] })), 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: 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: 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: groupParticipants })), _jsx(SplitInputs, { splitType: splitType, totalAmount: parseFloat(newAmount) || 0, participants: splitParticipants, splits: splits, onChange: setSplits }), _jsxs("div", { children: [_jsx(Button, { onClick: handleGetLocation, 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 ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), _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" }), _jsxs(Button, { size: "sm", onClick: handleCreate, 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: [uploading && _jsx(Loader2, { className: "w-3 h-3 mr-1 animate-spin" }), expenseId ? "Update" : "Add"] })] })] })), !showSettleMode &&
+                            expenses.map((e) => {
+                                var _a, _b, _c;
+                                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 ", (_a = e.splits[0]) === null || _a === void 0 ? void 0 : _a.userId] }), _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 ", (_b = e.paidBy[0]) === null || _b === void 0 ? void 0 : _b.userId, " \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 ", (_c = e.paidBy[0]) === null || _c === void 0 ? void 0 : _c.userId, " \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-row w-full gap-2", 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: "text-xs text-blue-500 hover:underline flex items-center gap-1", children: [_jsx(Receipt, { className: "w-3 h-3" }), "View 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" }), (e.createdBy === currentUserId || isAdmin) && (_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("div", { className: "fixed inset-0 bg-black/50 flex items-end z-50", children: _jsxs("div", { className: "w-full bg-white dark:bg-gray-900 rounded-t-2xl p-4 max-h-96 overflow-y-auto", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Split Details" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+                                        setShowSplitModal(false);
+                                        setSelectedExpenseForSplit(null);
+                                    }, children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsxs("div", { className: "space-y-4", 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: split.userId }), 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, open: showAnalytics, onClose: () => setShowAnalytics(false) })] }));
 }

package/dist/chat/MessageBubble.d.ts

@@ -1,16 +1,18 @@
-import type { Message } from "@myrjfa/state/dist/lib/models/chat";
+import type { Message, Participant } from "@myrjfa/state/dist/lib/models/chat";
 interface MessageBubbleProps {
     message: Message;
+    participants: Participant[];
     currentUserId: string;
     showSender?: boolean;
     senderProfilePic?: string;
-    onEdit?: (messageId: string, text: string) => void;
+    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) => void;
 }
-export declare function MessageBubble({ message, currentUserId, showSender, senderProfilePic, onEdit, onDelete, onReply, onReactionAdd, onReactionRemove, onScrollToReply }: MessageBubbleProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageBubble({ message, participants, currentUserId, showSender, senderProfilePic, onEdit, onDelete, onReply, onReactionAdd, onReactionRemove, onScrollToReply, onVote }: MessageBubbleProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MessageBubble.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../src/chat/MessageBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAUlE,UAAU,kBAAkB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,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;CACjD;AAWD,wBAAgB,aAAa,CAAC,EAC1B,OAAO,EACP,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,eAAe,EAClB,EAAE,kBAAkB,2CAwdpB"}
+{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../src/chat/MessageBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,oCAAoC,CAAC;AASrF,UAAU,kBAAkB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,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,IAAI,CAAC;CAC1D;AAWD,wBAAgB,aAAa,CAAC,EAC1B,OAAO,EACP,YAAY,EACZ,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,MAAM,EACT,EAAE,kBAAkB,2CA0mBpB"}