@myrjfa/ui 1.1.0 → 1.1.1

package/dist/chat/MilestonePanel.js

@@ -1,173 +1,173 @@
 "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 { CheckCircle2, Circle, Plus, Trash2, Pencil, MoreVertical } from "lucide-react";
+import { CheckCircle2, Circle, Plus, Trash2, Pencil, MoreVertical, Lock, Unlock, ListTodo, ChevronDown, AlertCircle, ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { Button } from "../misc/button";
+import { Input } from "../misc/input";
+import { Textarea } from "../misc/textarea";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../misc/dropdown-menu";
-export function MilestonePanel(_a) {
-    var _this = this;
-    var conversationId = _a.conversationId, currentUserId = _a.currentUserId, _b = _a.isFullScreen, isFullScreen = _b === void 0 ? false : _b;
-    var _c = useState([]), milestones = _c[0], setMilestones = _c[1];
-    var _d = useState(true), loading = _d[0], setLoading = _d[1];
-    var _e = useState(false), isAdding = _e[0], setIsAdding = _e[1];
-    var _f = useState(""), newTitle = _f[0], setNewTitle = _f[1];
-    var _g = useState(""), newSection = _g[0], setNewSection = _g[1];
-    var fetchMilestones = function () { return __awaiter(_this, void 0, void 0, function () {
-        var data;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setLoading(true);
-                    return [4 /*yield*/, chatApi.getMilestones(conversationId)];
-                case 1:
-                    data = _a.sent();
-                    setMilestones(data);
-                    setLoading(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    useEffect(function () {
+import { deleteActions, showAlert } from "../misc/alertdialogclaude";
+export function MilestonePanel({ conversationId, currentUserId, isFullScreen = false, isFeatureEnabled = true, isAdmin = false, onEnableFeature }) {
+    const [milestones, setMilestones] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [isAdding, setIsAdding] = useState(false);
+    const [milestoneId, setMilestoneId] = useState(null);
+    const [newTitle, setNewTitle] = useState("");
+    const [newSection, setNewSection] = useState("");
+    const [newDescription, setNewDescription] = useState("");
+    const [newDueDate, setNewDueDate] = useState("");
+    const [showMoreOptions, setShowMoreOptions] = useState(false);
+    const [sections, setSections] = useState([]);
+    const [expandedSections, setExpandedSections] = useState(new Set());
+    const [expandedMilestones, setExpandedMilestones] = useState(new Set());
+    const [allParticipants, setAllParticipants] = useState([]);
+    const fetchMilestones = async () => {
+        var _a;
+        setLoading(true);
+        const data = await chatApi.getMilestones(conversationId);
+        const convData = await chatApi.getConversation(conversationId);
+        setMilestones(data);
+        const participants = ((_a = convData === null || convData === void 0 ? void 0 : convData.participants) === null || _a === void 0 ? void 0 : _a.map((p) => p.userId)) || [];
+        setAllParticipants(participants);
+        setLoading(false);
+    };
+    useEffect(() => {
         fetchMilestones();
     }, [conversationId]);
-    var handleCreate = function () { return __awaiter(_this, void 0, void 0, function () {
-        var milestone;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!newTitle.trim())
-                        return [2 /*return*/];
-                    return [4 /*yield*/, chatApi.createMilestone(conversationId, {
-                            title: newTitle.trim(),
-                            section: newSection.trim() || "General"
-                        })];
-                case 1:
-                    milestone = _a.sent();
-                    if (milestone) {
-                        setMilestones(function (prev) { return __spreadArray(__spreadArray([], prev, true), [milestone], false); });
-                        setNewTitle("");
-                        setNewSection("");
-                        setIsAdding(false);
-                    }
-                    return [2 /*return*/];
+    useEffect(() => {
+        // Extract unique sections from existing milestones
+        const uniqueSections = Array.from(new Set(milestones.map(m => m.section).filter(Boolean)));
+        setSections(uniqueSections);
+    }, [milestones]);
+    const resetForm = () => {
+        setNewTitle("");
+        setNewSection("");
+        setNewDescription("");
+        setNewDueDate("");
+        setShowMoreOptions(false);
+        setIsAdding(false);
+        setShowMoreOptions(false);
+        setIsAdding(false);
+        setMilestoneId(null);
+    };
+    const toggleSection = (section) => {
+        setExpandedSections(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(section)) {
+                newSet.delete(section);
             }
-        });
-    }); };
-    var handleToggle = function (id) { return __awaiter(_this, void 0, void 0, function () {
-        var updated;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, chatApi.toggleMilestone(id)];
-                case 1:
-                    updated = _a.sent();
-                    if (updated) {
-                        setMilestones(function (prev) { return prev.map(function (m) { return m._id === id ? updated : m; }); });
-                    }
-                    return [2 /*return*/];
+            else {
+                newSet.add(section);
             }
+            return newSet;
         });
-    }); };
-    var handleDelete = function (id) { return __awaiter(_this, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!window.confirm("Are you sure you want to delete this milestone?")) return [3 /*break*/, 2];
-                    return [4 /*yield*/, chatApi.deleteMilestone(id)];
-                case 1:
-                    _a.sent();
-                    setMilestones(function (prev) { return prev.filter(function (m) { return m._id !== id; }); });
-                    _a.label = 2;
-                case 2: return [2 /*return*/];
+    };
+    const toggleMilestoneExpand = (id) => {
+        setExpandedMilestones(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(id)) {
+                newSet.delete(id);
+            }
+            else {
+                newSet.add(id);
             }
+            return newSet;
         });
-    }); };
-    var handleEdit = function (id_1, currentTitle_1) {
-        var args_1 = [];
-        for (var _i = 2; _i < arguments.length; _i++) {
-            args_1[_i - 2] = arguments[_i];
+    };
+    const handleCreate = async () => {
+        if (!newTitle.trim())
+            return;
+        try {
+            const milestoneData = {
+                title: newTitle.trim(),
+                section: newSection.trim() || "General",
+                description: newDescription.trim() || undefined,
+                dueDate: newDueDate || undefined
+            };
+            const milestoneResponse = milestoneId
+                ? await chatApi.updateMilestone(milestoneId, milestoneData)
+                : await chatApi.createMilestone(conversationId, milestoneData);
+            if (milestoneResponse.error) {
+                console.error("Failed to create milestone:", milestoneResponse.error);
+                showAlert(milestoneResponse.error, "Failed to create milestone");
+            }
+            else if (milestoneResponse.data) {
+                await fetchMilestones();
+                resetForm();
+            }
         }
-        return __awaiter(_this, __spreadArray([id_1, currentTitle_1], args_1, true), void 0, function (id, currentTitle, currentSection) {
-            var newTitle, newSection, updates, updated_1;
-            if (currentSection === void 0) { currentSection = "General"; }
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        newTitle = window.prompt("Edit milestone title:", currentTitle);
-                        newSection = window.prompt("Edit section:", currentSection);
-                        if (!(newTitle && newTitle.trim() !== "")) return [3 /*break*/, 2];
-                        updates = { title: newTitle.trim() };
-                        if (newSection !== null)
-                            updates.section = newSection.trim() || "General";
-                        return [4 /*yield*/, chatApi.updateMilestone(id, updates)];
-                    case 1:
-                        updated_1 = _a.sent();
-                        if (updated_1) {
-                            setMilestones(function (prev) { return prev.map(function (m) { return m._id === id ? updated_1 : m; }); });
-                        }
-                        _a.label = 2;
-                    case 2: return [2 /*return*/];
-                }
-            });
-        });
+        catch (err) {
+            console.error("Failed to create milestone:", err);
+            showAlert(err, "Failed to create milestone");
+        }
+    };
+    const handleToggle = async (id) => {
+        const response = await chatApi.toggleMilestone(id);
+        if (response.error) {
+            console.log("error toggling milestone " + id + "Error: " + response.error);
+            await showAlert("Error checking/unchecking milestone");
+            return;
+        }
+        else if (response.data) {
+            setMilestones(prev => prev.map(m => m._id === id ? response.data : m));
+        }
+    };
+    const handleDelete = async (id) => {
+        let confirmDelete = true;
+        await showAlert("Are you sure you want to delete this milestone?", undefined, deleteActions(() => confirmDelete = false));
+        if (confirmDelete) {
+            const response = await chatApi.deleteMilestone(id);
+            if (response.error) {
+                console.log("Unable to delete milestone:" + id + "Error: " + response.error);
+                await showAlert("Unable to delete milestone");
+                return;
+            }
+            setMilestones(prev => prev.filter(m => m._id !== id));
+        }
+    };
+    const handleEdit = async (milestone) => {
+        var _a, _b, _c;
+        setNewTitle(milestone.title);
+        setNewSection((_a = milestone.section) !== null && _a !== void 0 ? _a : "");
+        setNewDescription((_b = milestone.description) !== null && _b !== void 0 ? _b : "");
+        setNewDueDate((_c = milestone.dueDate) !== null && _c !== void 0 ? _c : "");
+        setMilestoneId(milestone._id);
+        setIsAdding(true);
+    };
+    // Check if current user has checked this milestone
+    const hasUserChecked = (milestone) => {
+        return milestone.checks.some(check => check.userId === currentUserId);
+    };
+    // Get users who haven't checked the milestone
+    const getUncheckedUsers = (milestone) => {
+        const checkedUserIds = new Set(milestone.checks.map(check => check.userId));
+        return allParticipants.filter(userId => !checkedUserIds.has(userId));
     };
-    var groupedMilestones = milestones.reduce(function (acc, m) {
-        var section = m.section || "General";
+    const groupedMilestones = milestones.reduce((acc, m) => {
+        const section = m.section || "General";
         if (!acc[section])
             acc[section] = [];
         acc[section].push(m);
         return acc;
     }, {});
-    var panelClasses = isFullScreen
+    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: "Milestones" }) }), _jsx("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", 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" }) })) : milestones.length === 0 && !isAdding ? (_jsx("div", { className: "text-center py-8 text-gray-400 text-sm", children: "No milestones 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: "Milestone title...", 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" }), _jsx("input", { value: newSection, onChange: function (e) { return setNewSection(e.target.value); }, onKeyDown: function (e) { return e.key === "Enter" && handleCreate(); }, placeholder: "Section (e.g., Day 1)...", 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: "flex justify-end gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: function () { return setIsAdding(false); }, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleCreate, className: "bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white", children: "Add" })] })] })), milestones.length > 0 && (Object.entries(groupedMilestones).map(function (_a) {
-                            var section = _a[0], items = _a[1];
-                            return (_jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-xs font-semibold text-gray-500 uppercase tracking-widest pl-1 sticky top-0 bg-white dark:bg-gray-900 py-1 z-10", children: section }), items.map(function (m) { return (_jsxs("div", { className: "group flex items-start gap-3 p-2 hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl transition-colors", children: [_jsx("button", { onClick: function () { return handleToggle(m._id); }, className: "mt-0.5 transition-colors flex-shrink-0 ".concat(m.isCompleted ? "text-green-500" : "text-gray-300 hover:text-teal-400"), children: m.isCompleted ? _jsx(CheckCircle2, { className: "w-5 h-5" }) : _jsx(Circle, { className: "w-5 h-5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium transition-all ".concat(m.isCompleted ? "text-gray-400 line-through" : "text-gray-700 dark:text-gray-200"), children: m.title }), m.completedAt && (_jsxs("p", { className: "text-[10px] text-gray-400 mt-0.5", children: ["Completed on ", new Date(m.completedAt).toLocaleDateString()] }))] }), _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 flex-shrink-0", children: _jsx(MoreVertical, { className: "w-4 h-4 text-gray-400" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: function () { return handleEdit(m._id, m.title, m.section); }, children: [_jsx(Pencil, { className: "w-4 h-4 mr-2" }), "Edit"] }), _jsxs(DropdownMenuItem, { className: "text-red-500", onClick: function () { return handleDelete(m._id); }, children: [_jsx(Trash2, { className: "w-4 h-4 mr-2" }), "Delete"] })] })] })] }, m._id)); })] }, section));
-                        }))] })) }), !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 Milestone"] }) }))] }));
+    return (_jsxs("div", { className: `bg-white dark:bg-gray-900 ${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: "Milestones" }) }), _jsx("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", 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(ListTodo, { className: "w-12 h-12 text-teal-500" }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-2", children: "Milestones Feature" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-4 max-w-sm", children: "Track group tasks, organize by sections, and monitor progress together. Perfect for trip planning and group coordination." }), 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" }) })) : milestones.length === 0 && !isAdding ? (_jsx("div", { className: "text-center py-8 text-gray-400 text-sm", children: "No milestones yet" })) : (_jsxs(_Fragment, { children: [isAdding && (_jsxs("div", { className: "p-4 bg-gray-50 dark:bg-gray-800 rounded-lg space-y-3", children: [_jsx(Input, { placeholder: "Section (e.g., Day 1, Transport)", value: newSection, onChange: (e) => setNewSection(e.target.value), list: "section-suggestions", className: "text-sm" }), _jsx("datalist", { id: "section-suggestions", children: sections.map(section => (_jsx("option", { value: section }, section))) }), _jsx(Input, { placeholder: "Milestone title *", value: newTitle, onChange: (e) => setNewTitle(e.target.value), onKeyDown: (e) => e.key === "Enter" && !showMoreOptions && handleCreate(), className: "text-sm font-medium", autoFocus: true }), _jsxs("button", { type: "button", onClick: () => setShowMoreOptions(!showMoreOptions), className: "text-xs text-gray-600 dark:text-gray-400 hover:text-teal-600 dark:hover:text-teal-400 flex items-center gap-1 cursor-pointer", children: [showMoreOptions ? _jsx(ChevronDownIcon, { className: "w-3 h-3" }) : _jsx(ChevronRightIcon, { className: "w-3 h-3" }), " More Options"] }), showMoreOptions && (_jsxs("div", { className: "space-y-2 pl-4 border-l-2 border-teal-200 dark:border-teal-800", children: [_jsx(Textarea, { placeholder: "Description (optional)", value: newDescription, onChange: (e) => setNewDescription(e.target.value), className: "text-sm resize-none", rows: 2 }), _jsxs("div", { children: [_jsx("label", { className: "text-xs text-gray-600 dark:text-gray-400 block mb-1", children: "Due Date (optional)" }), _jsx(Input, { type: "date", value: newDueDate, onChange: (e) => setNewDueDate(e.target.value), className: "text-sm" })] })] })), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { onClick: handleCreate, size: "sm", className: "flex-1 bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700", children: "Add" }), _jsx(Button, { onClick: resetForm, size: "sm", variant: "outline", children: "Cancel" })] })] })), milestones.length > 0 && (Object.entries(groupedMilestones).map(([section, items]) => {
+                            const isExpanded = expandedSections.has(section);
+                            const completedCount = items.filter(m => m.isCompleted).length;
+                            const totalCount = items.length;
+                            return (_jsxs("div", { className: "space-y-2", children: [_jsxs("button", { onClick: () => toggleSection(section), className: "w-full flex items-center justify-between p-3 bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-teal-900/20 dark:to-cyan-900/20 hover:from-teal-100 hover:to-cyan-100 dark:hover:from-teal-900/30 dark:hover:to-cyan-900/30 rounded-lg border border-teal-100 dark:border-teal-800 transition-colors", children: [_jsxs("div", { className: "flex items-center gap-3 flex-1 text-left", children: [_jsx(ChevronDown, { className: `w-4 h-4 text-teal-600 dark:text-teal-400 transition-transform flex-shrink-0 ${isExpanded ? "" : "-rotate-90"}` }), _jsx("h4", { className: "text-sm font-semibold text-teal-900 dark:text-teal-100 uppercase tracking-widest", children: section })] }), _jsxs("span", { className: "text-xs font-semibold text-teal-700 dark:text-teal-300 bg-white dark:bg-gray-800 px-2.5 py-1 rounded-full flex-shrink-0", children: [completedCount, "/", totalCount] })] }), isExpanded && (_jsx("div", { className: "space-y-2 pl-4", children: items.map((milestone) => {
+                                            const userChecked = hasUserChecked(milestone);
+                                            const uncheckedUsers = getUncheckedUsers(milestone);
+                                            const isExpanded = expandedMilestones.has(milestone._id);
+                                            return (_jsxs("div", { className: "space-y-0", children: [_jsxs("button", { onClick: () => toggleMilestoneExpand(milestone._id), className: "w-full flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-800/30 hover:bg-gray-100 dark:hover:bg-gray-800/50 rounded-lg border border-gray-100 dark:border-gray-800 transition-colors group text-left", children: [_jsx("button", { onClick: (e) => {
+                                                                    e.stopPropagation();
+                                                                    handleToggle(milestone._id);
+                                                                }, className: `mt-0.5 transition-colors flex-shrink-0 ${userChecked ? "text-green-500" : "text-gray-300 hover:text-teal-400"}`, children: userChecked ? _jsx(CheckCircle2, { className: "w-5 h-5" }) : _jsx(Circle, { className: "w-5 h-5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: `text-sm font-medium transition-all ${userChecked ? "text-gray-400 line-through" : "text-gray-700 dark:text-gray-200"}`, children: milestone.title }), milestone.dueDate && (_jsxs("p", { className: "text-[10px] text-gray-500 dark:text-gray-400 mt-1", children: ["Due: ", new Date(milestone.dueDate).toLocaleDateString()] }))] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsxs("span", { className: `text-xs font-semibold px-2 py-1 rounded-full ${milestone.isCompleted
+                                                                            ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+                                                                            : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300"}`, children: [milestone.checks.length, "/", allParticipants.length] }), _jsx(ChevronDown, { className: `w-4 h-4 text-gray-400 transition-transform flex-shrink-0 ${isExpanded ? "" : "-rotate-90"}` })] }), (milestone.createdBy === currentUserId || isAdmin) && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { onClick: (e) => e.stopPropagation(), className: "p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-all flex-shrink-0", children: _jsx(MoreVertical, { className: "w-4 h-4 text-gray-400" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => handleEdit(milestone), children: [_jsx(Pencil, { className: "w-4 h-4 mr-2" }), "Edit"] }), _jsxs(DropdownMenuItem, { className: "text-red-500", onClick: () => handleDelete(milestone._id), children: [_jsx(Trash2, { className: "w-4 h-4 mr-2" }), "Delete"] })] })] }))] }), isExpanded && (_jsxs("div", { className: "ml-8 bg-white dark:bg-gray-700/30 p-3 rounded-lg border border-gray-200 dark:border-gray-700 space-y-2", children: [milestone.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", children: milestone.description })] })), uncheckedUsers.length > 0 && (_jsxs("div", { children: [_jsxs("p", { className: "text-[10px] font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-1", children: ["Pending (", uncheckedUsers.length, ")"] }), _jsx("div", { className: "space-y-1", children: uncheckedUsers.map((userId) => (_jsxs("div", { className: "flex items-center gap-2 p-1.5 bg-yellow-50 dark:bg-yellow-900/20 rounded border border-yellow-100 dark:border-yellow-800/30", children: [_jsx(AlertCircle, { className: "w-3 h-3 text-yellow-600 dark:text-yellow-500 flex-shrink-0" }), _jsx("span", { className: "text-xs text-yellow-700 dark:text-yellow-300", children: userId })] }, userId))) })] })), milestone.isCompleted && (_jsxs("div", { className: "flex items-center gap-2 p-2 bg-green-50 dark:bg-green-900/20 rounded border border-green-200 dark:border-green-800/30", children: [_jsx(CheckCircle2, { className: "w-4 h-4 text-green-600 dark:text-green-400 flex-shrink-0" }), _jsx("p", { className: "text-xs text-green-700 dark:text-green-400 font-medium", children: "All participants have checked this milestone" })] }))] }))] }, milestone._id));
+                                        }) }))] }, section));
+                        }))] })) }), isFeatureEnabled && !isAdding && (_jsx("div", { className: "p-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0", children: _jsxs(Button, { onClick: () => 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 Milestone"] }) }))] }));
 }

package/dist/chat/components/ParticipantSelector.d.ts

@@ -0,0 +1,11 @@
+import { ExpenseSplit } from "@myrjfa/state";
+import { Dispatch, SetStateAction } from "react";
+interface ParticipantSelectorProps {
+    participants: string[];
+    onChange: (participants: string[]) => void;
+    onSplitsChange: Dispatch<SetStateAction<ExpenseSplit[]>>;
+    availableUsers: string[];
+}
+export declare function ParticipantSelector({ participants, onChange, onSplitsChange, availableUsers }: ParticipantSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ParticipantSelector.d.ts.map

package/dist/chat/components/ParticipantSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantSelector.d.ts","sourceRoot":"","sources":["../../../src/chat/components/ParticipantSelector.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjD,UAAU,wBAAwB;IAC9B,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;IACzD,cAAc,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,EAChC,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,cAAc,EACjB,EAAE,wBAAwB,2CA2D1B"}

package/dist/chat/components/ParticipantSelector.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+export function ParticipantSelector({ participants, onChange, onSplitsChange, availableUsers }) {
+    const addParticipant = (userId) => {
+        if (!participants.includes(userId)) {
+            onChange([...participants, userId]);
+            onSplitsChange(prev => [...prev, { userId }]);
+        }
+    };
+    const removeParticipant = (userId) => {
+        onChange(participants.filter(p => p !== userId));
+        onSplitsChange(prev => prev.filter(s => s.userId !== userId));
+    };
+    const unselectedUsers = availableUsers.filter(u => !participants.includes(u));
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider", children: "Split Among" }), _jsx("div", { className: "flex flex-wrap gap-2", children: participants.length === 0 ? (_jsx("p", { className: "text-xs text-gray-500", children: "Select participants..." })) : (participants.map(userId => (_jsxs("div", { className: "flex items-center gap-1 bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300 rounded-full px-3 py-1 text-xs", children: [userId, _jsx("button", { onClick: () => removeParticipant(userId), className: "hover:text-teal-900 dark:hover:text-teal-100 transition-colors", children: _jsx(X, { className: "w-3 h-3" }) })] }, userId)))) }), unselectedUsers.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1", children: unselectedUsers.map(userId => (_jsxs("button", { onClick: () => addParticipant(userId), className: "text-xs px-2 py-1 rounded-full border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors", children: ["+ ", userId] }, userId))) }))] }));
+}

package/dist/chat/components/SplitInputs.d.ts

@@ -0,0 +1,11 @@
+import type { SplitType, ExpenseSplit } from "@myrjfa/state/dist/lib/models/chat";
+interface SplitInputsProps {
+    splitType: SplitType;
+    totalAmount: number;
+    participants: string[];
+    splits: ExpenseSplit[];
+    onChange: (splits: ExpenseSplit[]) => void;
+}
+export declare function SplitInputs({ splitType, totalAmount, participants, splits, onChange }: SplitInputsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=SplitInputs.d.ts.map

package/dist/chat/components/SplitInputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitInputs.d.ts","sourceRoot":"","sources":["../../../src/chat/components/SplitInputs.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAGlF,UAAU,gBAAgB;IACtB,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,WAAW,CAAC,EACxB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,MAAM,EACN,QAAQ,EACX,EAAE,gBAAgB,kDA8KlB"}

package/dist/chat/components/SplitInputs.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { ChevronDown } from "lucide-react";
+export function SplitInputs({ splitType, totalAmount, participants, splits, onChange }) {
+    const [isExpanded, setIsExpanded] = useState(splitType !== "equal");
+    useEffect(() => {
+        setIsExpanded(splitType !== "equal");
+    }, [splitType]);
+    if (splitType === "equal") {
+        return null;
+    }
+    const handleInputChange = (userId, value, field) => {
+        const numValue = parseFloat(value) || 0;
+        const updatedSplits = splits.map(s => {
+            if (s.userId === userId) {
+                return { ...s, [field]: numValue, amount: field === "amount" ? numValue : s.amount };
+            }
+            return s;
+        });
+        // Auto-calculate amounts for percentage and shares
+        if (field === "percentage") {
+            updatedSplits.forEach(s => {
+                if (s.userId === userId) {
+                    s.amount = (numValue / 100) * totalAmount;
+                }
+            });
+        }
+        else if (field === "shares") {
+            const totalShares = updatedSplits.reduce((sum, s) => sum + (s.shares || 0), 0);
+            updatedSplits.forEach(s => {
+                s.amount = (s.shares && s.shares > 0) ? (s.shares / totalShares) * totalAmount : 0;
+            });
+        }
+        onChange(updatedSplits);
+    };
+    const getInputLabel = () => {
+        switch (splitType) {
+            case "exact":
+                return "Amount";
+            case "percentage":
+                return "Percentage";
+            case "shares":
+                return "Shares";
+            default:
+                return "Amount";
+        }
+    };
+    const validateSplits = () => {
+        if (splitType === "percentage") {
+            const total = splits.reduce((sum, s) => sum + (s.percentage || 0), 0);
+            return total === 100;
+        }
+        else if (splitType === "exact") {
+            const total = splits.reduce((sum, s) => sum + (s.amount || 0), 0);
+            return Math.abs(total - totalAmount) < 0.01;
+        }
+        return true;
+    };
+    const isValid = getInputLabel();
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("button", { onClick: () => setIsExpanded(!isExpanded), className: "w-full flex items-center justify-between p-2 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors", children: [_jsx("span", { className: "text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider", children: "Split Details" }), _jsx(ChevronDown, { className: `w-4 h-4 text-gray-400 transition-transform ${isExpanded ? "rotate-180" : ""}` })] }), isExpanded && (_jsx("div", { className: "bg-gray-50 dark:bg-gray-800/30 p-3 rounded-lg border border-gray-200 dark:border-gray-700 space-y-2", children: participants.length === 0 ? (_jsx("p", { className: "text-xs text-gray-500 text-center py-2", children: "Add participants to split expense" })) : (_jsxs(_Fragment, { children: [splits.map((split, idx) => {
+                            var _a;
+                            return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-xs text-gray-600 dark:text-gray-400 flex-1 truncate font-medium", children: split.userId }), _jsxs("div", { className: "flex items-center gap-1 flex-1", children: [_jsx("input", { type: "number", step: "1", value: splitType === "exact"
+                                                    ? split.amount || ""
+                                                    : splitType === "percentage"
+                                                        ? split.percentage || ""
+                                                        : split.shares || "", onChange: (e) => handleInputChange(split.userId, e.target.value, splitType === "exact"
+                                                    ? "amount"
+                                                    : splitType === "percentage"
+                                                        ? "percentage"
+                                                        : "shares"), placeholder: "0", className: "w-20 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded p-1 text-xs text-gray-900 dark:text-white outline-none focus:border-teal-500" }), _jsx("span", { className: "text-[10px] text-gray-500 min-w-fit", children: splitType === "percentage"
+                                                    ? "%"
+                                                    : splitType === "shares"
+                                                        ? "shares"
+                                                        : `₹${((_a = split.amount) === null || _a === void 0 ? void 0 : _a.toFixed(2)) || "0.00"}` })] })] }, split.userId));
+                        }), splitType === "percentage" && (_jsx("div", { className: "text-[10px] text-gray-600 dark:text-gray-400 pt-2 border-t border-gray-200 dark:border-gray-600", children: _jsxs("p", { children: ["Total:", " ", _jsxs("span", { className: Math.abs(splits.reduce((sum, s) => sum + (s.percentage || 0), 0) -
+                                            100) < 0.01
+                                            ? "text-green-600"
+                                            : "text-red-500", children: [splits.reduce((sum, s) => sum + (s.percentage || 0), 0).toFixed(1), "%"] })] }) })), splitType === "exact" && (_jsx("div", { className: "text-[10px] text-gray-600 dark:text-gray-400 pt-2 border-t border-gray-200 dark:border-gray-600", children: _jsxs("p", { children: ["Total:", " ", _jsxs("span", { className: Math.abs(splits.reduce((sum, s) => sum + (s.amount || 0), 0) -
+                                            totalAmount) < 0.01
+                                            ? "text-green-600"
+                                            : "text-red-500", children: ["\u20B9", splits.reduce((sum, s) => sum + (s.amount || 0), 0).toFixed(2)] })] }) }))] })) }))] }));
+}

package/dist/chat/components/SplitTypeSelector.d.ts

@@ -0,0 +1,8 @@
+import type { SplitType } from "@myrjfa/state/dist/lib/models/chat";
+interface SplitTypeSelectorProps {
+    value: SplitType;
+    onChange: (type: SplitType) => void;
+}
+export declare function SplitTypeSelector({ value, onChange }: SplitTypeSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SplitTypeSelector.d.ts.map

package/dist/chat/components/SplitTypeSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitTypeSelector.d.ts","sourceRoot":"","sources":["../../../src/chat/components/SplitTypeSelector.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAGpE,UAAU,sBAAsB;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AASD,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CA4B5E"}

package/dist/chat/components/SplitTypeSelector.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SPLIT_TYPES = [
+    { value: "equal", label: "Equal", description: "Split evenly among all" },
+    { value: "exact", label: "Exact", description: "Specify exact amounts" },
+    { value: "percentage", label: "Percentage", description: "Split by percentages" },
+    { value: "shares", label: "Shares", description: "Split by number of shares" }
+];
+export function SplitTypeSelector({ value, onChange }) {
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider", children: "Split Type" }), _jsx("div", { className: "grid grid-cols-2 gap-2", children: SPLIT_TYPES.map((type) => (_jsxs("button", { onClick: () => onChange(type.value), className: `p-2 rounded-lg border-2 transition-all text-left ${value === type.value
+                        ? "border-teal-500 bg-teal-50 dark:bg-teal-900/20"
+                        : "border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"}`, children: [_jsx("p", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: type.label }), _jsx("p", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: type.description })] }, type.value))) })] }));
+}