From 24f5fc14b2a2b7aa22f7136aae98527be826b75d Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Thu, 12 Mar 2026 02:50:57 +0000
Subject: [PATCH] feat(01-04): create ItemAssign component for assigning people

- Multi-select checkbox UI for each person
- Reflects current assignment state
- Toggles person on/off when clicked
- Calls store.setAssignment on change
- Shows hint when no people added
---
 src/components/items/ItemAssign.jsx | 34 +++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/items/ItemAssign.jsx

diff --git a/src/components/items/ItemAssign.jsx b/src/components/items/ItemAssign.jsx
new file mode 100644
index 0000000..809b92f
--- /dev/null
+++ b/src/components/items/ItemAssign.jsx
@@ -0,0 +1,34 @@
+import { store } from '../../store/billStore.js';
+
+export function ItemAssign({ item }) {
+  const assignedTo = store.getAssignedPeople(item.id);
+
+  const togglePerson = (personId) => {
+    const current = assignedTo.includes(personId)
+      ? assignedTo.filter(id => id !== personId)
+      : [...assignedTo, personId];
+    store.setAssignment(item.id, current);
+  };
+
+  const people = store.people.value;
+
+  if (people.length === 0) {
+    return <p class="hint">Add people first to assign items</p>;
+  }
+
+  return (
+    <div class="item-assign">
+      <span class="assign-label">Split between:</span>
+      {people.map((person) => (
+        <label key={person.id} class="checkbox-label">
+          <input
+            type="checkbox"
+            checked={assignedTo.includes(person.id)}
+            onChange={() => togglePerson(person.id)}
+          />
+          {person.name}
+        </label>
+      ))}
+    </div>
+  );
+}