guidence

src/features/store-admin/PeopleDrawers.tsx

@@ -191,9 +191,18 @@ export function PersonDrawer({
   const [email, setEmail] = useState(row?.email ?? '');
   const [contactno, setContactno] = useState(row?.contactno ?? '');
   const [roleid, setRoleid] = useState(String(row?.roleid ?? STAFF_ROLES[1]?.id ?? 4));
-  const [locationid, setLocationid] = useState(
-    String(row?.locationid ?? branches[0]?.locationid ?? 0),
-  );
+  /**
+   * No branch by default, rather than the first one.
+   *
+   * `branches[0]` was a guess, and it is the wrong one twice over. It quietly
+   * posted a new hire to whichever outlet happens to sort first, and it made
+   * "not at a shop yet" unreachable — the state a person is in between being
+   * hired and their branch opening, which is the whole point of being able to
+   * add somebody before the shop exists.
+   *
+   * An existing person keeps whatever they have; only a new one starts unplaced.
+   */
+  const [locationid, setLocationid] = useState(String(row?.locationid ?? 0));
   const [isActive, setIsActive] = useState((row?.status ?? 'Active').toLowerCase() !== 'inactive');
   const [problem, setProblem] = useState<string | null>(null);
 
@@ -289,10 +298,19 @@ export function PersonDrawer({
               label="Branch"
               value={locationid}
               onChange={setLocationid}
-              options={branches.map((branch) => ({
-                value: String(branch.locationid),
-                label: branchLabel(branch.locationname),
-              }))}
+              placeholder="Not at a shop yet"
+              description="Leave this if their shop does not exist yet — place them when it opens."
+              options={[
+                /* An offered choice, not an absence. Somebody hired before
+                   their outlet opens sits here, signs in, and is met by the
+                   "No store assigned" screen until a branch is ready for
+                   them — which is what makes hiring before opening possible. */
+                { value: '0', label: 'Not at a shop yet' },
+                ...branches.map((branch) => ({
+                  value: String(branch.locationid),
+                  label: branchLabel(branch.locationname),
+                })),
+              ]}
             />
           </div>