prisma migration and fix dropdowns - working

src/app/_components/CommandManager.tsx

@@ -1,9 +1,21 @@
 // In file: src/app/_components/CommandManager.tsx
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { api } from "~/trpc/react";
-import { postCommand, type DeviceCommandType } from "~/lib/api"; // Your Laravel API helper
+import { postCommand, type DeviceCommandType } from "~/lib/api";
+
+const predefinedPayloads: Record<DeviceCommandType, object> = {
+  lights: { on: true },
+  camera: { on: true },
+  sleep: { interval_sec: 300 },
+  telemetry_sec: { interval: 60 },
+  poll_sec: { interval: 120 },
+  wifi: { target: "home", ssid: "YourSSID", password: "YourPassword" },
+  ring_fence: { enabled: true, points: [{ lat: 0, lng: 0 }] },
+  reboot: {},
+  ota: { url: "http://example.com/firmware.bin" },
+};
 
 interface CommandManagerProps {
   selectedImei: string;
@@ -11,23 +23,28 @@ interface CommandManagerProps {
 
 export function CommandManager({ selectedImei }: CommandManagerProps) {
   const [name, setName] = useState("");
-  const [type, setType] = useState<DeviceCommandType>("reboot");
-  const [payload, setPayload] = useState(""); // Stored as a string for the textarea
+  const [type, setType] = useState<DeviceCommandType>("lights");
+  const [payload, setPayload] = useState("");
+
+  // This useEffect hook updates the payload whenever the command type changes
+  useEffect(() => {
+    const newPayload = predefinedPayloads[type];
+    setPayload(JSON.stringify(newPayload, null, 2)); // Pretty-print the JSON
+  }, [type]); // Dependency array: this runs only when 'type' changes
 
   const utils = api.useUtils();
   const templatesQuery = api.commandTemplate.getAll.useQuery();
 
   const createTemplateMutation = api.commandTemplate.create.useMutation({
     onSuccess: () => {
-      utils.commandTemplate.getAll.invalidate(); // Invalidate cache to refetch list
+      utils.commandTemplate.getAll.invalidate();
       setName("");
-      setPayload("");
     },
   });
 
   const deleteTemplateMutation = api.commandTemplate.delete.useMutation({
     onSuccess: () => {
-      utils.commandTemplate.getAll.invalidate(); // Refetch list after deleting
+      utils.commandTemplate.getAll.invalidate();
     },
   });
 
@@ -40,13 +57,13 @@ export function CommandManager({ selectedImei }: CommandManagerProps) {
     }
   };
 
-  const handleSendCommand = async (template: { type: string; payload: any }) => {
+  const handleSendCommand = async (template: { name: string, type: string; payload: any }) => {
     try {
       await postCommand(selectedImei, {
         type: template.type as DeviceCommandType,
         payload: template.payload,
       });
-          alert(`Command "${template.type}" sent to ${selectedImei}!`);
+      alert(`Command "${template.name}" sent to ${selectedImei}!`);
     } catch (e) {
       alert(`Failed to send command: ${e instanceof Error ? e.message : "Unknown error"}`);
     }
@@ -56,7 +73,7 @@ export function CommandManager({ selectedImei }: CommandManagerProps) {
     <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
       {/* Form to add new templates */}
       <div className="flex flex-col gap-2 p-4 rounded-md bg-white/10">
-        <h3 className="text-lg font-bold">Create New Command Template</h3>
+        <h3 className="text-lg font-bold">Create/Edit Command</h3>
         <input
           type="text"
           placeholder="Template Name (e.g., Lights On)"
@@ -64,13 +81,11 @@ export function CommandManager({ selectedImei }: CommandManagerProps) {
           onChange={(e) => setName(e.target.value)}
           className="p-2 text-white rounded-md bg-gray-800 border border-gray-600"
         />
-       
-<select
-  value={type} // This value is tied to the 'type' state
-  onChange={(e) => setType(e.target.value as DeviceCommandType)} // This updates the state when you select an option
+        <select
+          value={type}
+          onChange={(e) => setType(e.target.value as DeviceCommandType)}
           className="p-2 text-white rounded-md bg-gray-800 border border-gray-600"
->
-  <option value="reboot" className="bg-gray-800 text-white">Reboot Device</option>
+        >
           <option value="lights" className="bg-gray-800 text-white">Lights On/Off</option>
           <option value="camera" className="bg-gray-800 text-white">Camera On/Off</option>
           <option value="sleep" className="bg-gray-800 text-white">Set Sleep Interval</option>
@@ -78,37 +93,32 @@ export function CommandManager({ selectedImei }: CommandManagerProps) {
           <option value="poll_sec" className="bg-gray-800 text-white">Set Poll Interval</option>
           <option value="wifi" className="bg-gray-800 text-white">Set WiFi Credentials</option>
           <option value="ring_fence" className="bg-gray-800 text-white">Set Geo-Fence</option>
+          <option value="reboot" className="bg-gray-800 text-white">Reboot Device</option>
           <option value="ota" className="bg-gray-800 text-white">Firmware OTA</option>
-</select>       
+        </select>
         <textarea
-          placeholder='JSON Payload, e.g., {"on": true}'
+          placeholder="JSON Payload"
           value={payload}
           onChange={(e) => setPayload(e.target.value)}
-          className="p-2 text-white rounded-md bg-white/10"
-          rows={3}
+          className="p-2 text-white rounded-md bg-gray-800 border border-gray-600 font-mono"
+          rows={5}
         />
         <button
           onClick={handleCreateTemplate}
           className="px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700"
           disabled={createTemplateMutation.isPending}
         >
-          {createTemplateMutation.isPending ? "Saving..." : "Save Template"}
+          {createTemplateMutation.isPending ? "Saving..." : "Save as Template"}
         </button>
       </div>
 
       {/* List of saved templates */}
-      // In file: src/app/_components/CommandManager.tsx
-
-{/* List of saved templates */}
-<div className="flex flex-col gap-2 p-4 rounded-md bg-white/10">
-  <h3 className="text-lg font-bold">Saved Commands</h3>
+      <div className="flex flex-col gap-2 p-4 rounded-md bg-white/10">
+        <h3 className="text-lg font-bold">Saved Templates</h3>
         {templatesQuery.isLoading && <p>Loading templates...</p>}
-  
-  {/* ADD THIS CHECK for an empty list */}
         {templatesQuery.data && templatesQuery.data.length === 0 && (
           <p className="text-gray-400">No templates saved. Create one on the left!</p>
         )}
-
         {templatesQuery.data?.map((template) => (
           <div key={template.id} className="flex items-center justify-between p-2 rounded-md bg-black/20">
             <div>
@@ -131,7 +141,7 @@ export function CommandManager({ selectedImei }: CommandManagerProps) {
             </div>
           </div>
         ))}
-</div>
+      </div>
     </div>
   );
 }