From 48d4c8b098e93f7a4c87dbbb069e98ee5382694a Mon Sep 17 00:00:00 2001
From: Yusuke Nakamura <yusuke1994525@gmail.com>
Date: Thu, 23 Apr 2026 10:46:18 +0900
Subject: [PATCH] Add Reload All button to ControlKiosksPage

Operators can reload every enrolled kiosk at once via a red "Reload All"
button next to the page heading, with a Popover confirmation. Internally
fans out Api.reloadKiosk calls over the per-kiosk IoT topic so the
control screen itself is not reloaded.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ui/src/ControlKiosksPage.tsx | 61 ++++++++++++++++++++++++++++++++++--
 1 file changed, 59 insertions(+), 2 deletions(-)

diff --git a/ui/src/ControlKiosksPage.tsx b/ui/src/ControlKiosksPage.tsx
index 457d367..f96507c 100644
--- a/ui/src/ControlKiosksPage.tsx
+++ b/ui/src/ControlKiosksPage.tsx
@@ -58,9 +58,10 @@ export const ControlKiosksPage: React.FC = () => {
   return (
     <Box mx="50px">
       {error ? <ErrorAlert error={error} /> : null}
-      <Box>
+      <Flex justifyContent="space-between" alignItems="center">
         <Heading>Kiosks</Heading>
-      </Box>
+        <KiosksReloadAll kiosks={data} />
+      </Flex>
       <Box>
         {data.map((kiosk) => (
           <ControlKioskView key={kiosk.id} kiosk={kiosk} />
@@ -115,6 +116,62 @@ export const ControlKioskView: React.FC<{
   );
 };
 
+const KiosksReloadAll: React.FC<{
+  kiosks: Kiosk[];
+}> = ({ kiosks }) => {
+  const aws = useApiContext(true);
+  const [isRequesting, setIsRequesting] = useState(false);
+  const toast = useToast();
+  const perform = async () => {
+    if (!aws) return;
+    if (isRequesting) return;
+    setIsRequesting(true);
+    try {
+      await Promise.all(
+        kiosks.map((k) => Api.reloadKiosk(aws, { id: k.id }))
+      );
+      toast({
+        title: `Reload Command sent to ${kiosks.length} kiosks`,
+        description: "",
+        status: "success",
+        duration: 2000,
+        isClosable: true,
+      });
+    } catch (e) {
+      toast(errorToToast(e));
+    }
+    setIsRequesting(false);
+  };
+  return (
+    <Popover closeOnBlur>
+      <PopoverTrigger>
+        <Button
+          colorScheme="red"
+          isDisabled={!aws || kiosks.length === 0}
+        >
+          Reload All
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <PopoverArrow />
+        <PopoverCloseButton />
+        <PopoverHeader>Reload all kiosks?</PopoverHeader>
+        <PopoverBody>
+          <Button
+            colorScheme="red"
+            size="sm"
+            onClick={perform}
+            isLoading={isRequesting}
+            isDisabled={!aws || kiosks.length === 0}
+          >
+            Reload
+          </Button>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
 const KioskRemoval: React.FC<{
   kiosk: Kiosk;
 }> = ({ kiosk }) => {