fix(appointment): client guard for slots that pass while page is open

The backend already returns is_available:false for past slots, but a
slot can lapse after the list is loaded. Disable any slot whose start
(unix seconds) is before now in the time grid, so a just-passed slot
can't be clicked. The grid disabling makes a SendAppo-level guard
redundant — a past slot can no longer be selected.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app/component/date/dateTime/hours/List.js

@@ -4,6 +4,8 @@ import React from "react";
 function List({ appo, hour, setHour, value }) {
   const list = appo && appo[value ? "evening" : "morning"];
   const checkHour = (item) => JSON.stringify(item) === JSON.stringify(hour);
+  const isSelectable = (item) =>
+    item.is_available && !(item?.start && item.start * 1000 < Date.now());
 
   if (list && list.length) {
     return (
@@ -12,7 +14,7 @@ function List({ appo, hour, setHour, value }) {
           <li key={idx}>
             <Button
               onClick={() => setHour(item)}
-              disabled={!item.is_available}
+              disabled={!isSelectable(item)}
               className={`
                           !w-full !rounded-[8px] !bg-[#EFEFEF] !flex !justify-center !items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
                           ${checkHour(item) ? "!bg-[#F79463] " : ""}
@@ -21,7 +23,7 @@ function List({ appo, hour, setHour, value }) {
               <p
                 className={`
                           text-[16px] font-semibold text-[#525252]
-                          ${item.is_available ? "text-[#525252]" : "text-[#D7D7D7]"}
+                          ${isSelectable(item) ? "text-[#525252]" : "text-[#D7D7D7]"}
                           ${checkHour(item) ? "!text-[#FAFAFA] " : ""}
                       `}
               >