| 78 | |
| 79 | // Define UI elements based on status |
| 80 | const getStatusDisplay = () => { |
| 81 | if (isError && status === "executing") { |
| 82 | return ( |
| 83 | <> |
| 84 | <AlertCircle className="w-3 h-3 inline-block mr-2 text-red-500" /> |
| 85 | Error |
| 86 | </> |
| 87 | ); |
| 88 | } |
| 89 | |
| 90 | switch (status) { |
| 91 | case "requested": |
| 92 | return ( |
| 93 | <> |
| 94 | <Clock className="w-3 h-3 inline-block mr-2 text-blue-500" /> |
| 95 | Call requested |
| 96 | </> |
| 97 | ); |
| 98 | case "pending_approval": |
| 99 | return ( |
| 100 | <> |
| 101 | <ShieldAlert className="w-3 h-3 inline-block mr-2 text-amber-500" /> |
| 102 | Approval required |
| 103 | </> |
| 104 | ); |
| 105 | case "approved": |
| 106 | return ( |
| 107 | <> |
| 108 | <CheckCircle className="w-3 h-3 inline-block mr-2 text-green-500" /> |
| 109 | Approved |
| 110 | </> |
| 111 | ); |
| 112 | case "rejected": |
| 113 | return ( |
| 114 | <> |
| 115 | <AlertCircle className="w-3 h-3 inline-block mr-2 text-red-500" /> |
| 116 | Rejected |
| 117 | </> |
| 118 | ); |
| 119 | case "executing": |
| 120 | return ( |
| 121 | <> |
| 122 | <Loader2 className="w-3 h-3 inline-block mr-2 text-yellow-500 animate-spin" /> |
| 123 | Executing |
| 124 | </> |
| 125 | ); |
| 126 | case "completed": |
| 127 | if (isError) { |
| 128 | return ( |
| 129 | <> |
| 130 | <AlertCircle className="w-3 h-3 inline-block mr-2 text-red-500" /> |
| 131 | Failed |
| 132 | </> |
| 133 | ); |
| 134 | } |
| 135 | return ( |
| 136 | <> |
| 137 | <CheckCircle className="w-3 h-3 inline-block mr-2 text-green-500" /> |