From dda602969fbca3eb1f10e0320c138cd2c605b4ab Mon Sep 17 00:00:00 2001
From: xlc-dev <119954023+xlc-dev@users.noreply.github.com>
Date: Wed, 15 Jan 2025 18:53:10 +0100
Subject: [PATCH 1/2] fix bugs lars found

---
 src/Chain.svelte       |   2 +-
 src/Sidebar.svelte     |  20 +-
 src/Stepper.svelte     | 783 +++++++++++++++++++++--------------------
 src/excel.svelte.ts    |  30 +-
 src/formdata.svelte.ts |   4 +-
 5 files changed, 431 insertions(+), 408 deletions(-)

diff --git a/src/Chain.svelte b/src/Chain.svelte
index 35f6c9e..b7bcf58 100644
--- a/src/Chain.svelte
+++ b/src/Chain.svelte
@@ -408,7 +408,7 @@
                     </p>
                   {/if}
                 </div>
-                {#if chainIterations[currentChainIndex].costmodel.name !== "Fixed Price" && chainIterations[currentChainIndex].costmodel.algorithm !== "TEMO"}
+                {#if chainIterations[currentChainIndex].costmodel.name !== "Fixed Price" && chainIterations[currentChainIndex].costmodel.name !== "TEMO"}
                   <div>
                     <label
                       for="costModelAlgo-{currentChainIndex}"
diff --git a/src/Sidebar.svelte b/src/Sidebar.svelte
index b62c063..7b59a12 100644
--- a/src/Sidebar.svelte
+++ b/src/Sidebar.svelte
@@ -222,30 +222,30 @@
     </button>
     <div class="flex flex-col gap-2 p-4">
       <div class="mb-2 flex items-center">
-        <div class="mr-2 h-4 w-4 bg-gray-700"></div>
-        <p>contain the time slots that are unavailable to plan appliances in.</p>
+        <div class="mr-2 h-4 w-4 flex-shrink-0 bg-gray-700"></div>
+        <p>Contain the time slots that are unavailable to plan appliances in.</p>
       </div>
       <div class="mb-2 flex items-center">
-        <div class="mr-2 h-4 w-4 bg-blue-700"></div>
-        <p>contain the time slots that are available to plan appliances in.</p>
+        <div class="mr-2 h-4 w-4 flex-shrink-0 bg-blue-700"></div>
+        <p>Contain the time slots that are available to plan appliances in.</p>
       </div>
       <div class="mb-2 flex items-center">
-        <div class="mr-2 h-4 w-4 bg-green-700"></div>
-        <p>indicate that the planned energy used is drawn from solar panels.</p>
+        <div class="mr-2 h-4 w-4 flex-shrink-0 bg-green-700"></div>
+        <p>Indicate that the planned energy used is drawn from solar panels.</p>
       </div>
       <div class="flex items-center">
-        <div class="mr-2 h-4 w-4 bg-red-700"></div>
-        <p>indicate that the planned energy used is drawn from the national grid.</p>
+        <div class="mr-2 h-4 w-4 flex-shrink-0 bg-red-700"></div>
+        <p>Indicate that the planned energy used is drawn from the national grid.</p>
       </div>
       <div class="flex items-center">
-        <div class="mr-2 h-4 w-4 bg-red-950"></div>
+        <div class="mr-2 h-4 w-4 flex-shrink-0 bg-red-950"></div>
         <p>
           The algorithm attempted to plan energy usage at a location where energy was drawn from
           the national grid, but the household's time window was missing.
         </p>
       </div>
       <div class="flex items-center">
-        <div class="mr-2 h-4 w-4 bg-yellow-700"></div>
+        <div class="mr-2 h-4 w-4 flex-shrink-0 bg-yellow-700"></div>
         <p>
           The algorithm attempted to plan energy usage at a location where energy was drawn from
           the solar panels, but the household's time window was missing.
diff --git a/src/Stepper.svelte b/src/Stepper.svelte
index 5e20bb5..8b450e9 100644
--- a/src/Stepper.svelte
+++ b/src/Stepper.svelte
@@ -802,7 +802,7 @@
         }
       }
 
-      resetFormFields();
+      resetForm();
     }
   }
 
@@ -827,11 +827,15 @@
       const currentStepData = formData.formData[currentStep];
       const editorField = currentStepData.formFields.find((field) => field.type === "editor");
       if (editorField) {
-        const defaultValue = editingOption
-          ? editorField.value
-          : getDefaultEditorValue(currentStepData.stepType);
+        const defaultValue = getDefaultEditorValue(currentStepData.stepType);
         // @ts-ignore
-        const aceEditor = ace.edit("editor");
+        const aceEditor = ace.edit("editor", {
+          mode: "ace/mode/javascript",
+          selectionStyle: "text",
+          autoScrollEditorIntoView: true,
+          animatedScroll: true,
+          fontSize: "15px",
+        });
         aceEditor.setValue(defaultValue, -1);
       }
     }
@@ -1234,405 +1238,416 @@
 
 {#snippet twinWorldCard()}
   {@const twinworld = getSelectedTwinWorld()!}
-  <div
-    class="text-les-highlight flex w-full flex-col space-y-4 rounded-lg border-4 border-gray-400 bg-white p-6 shadow-lg">
-    <h2 class="mb-6 text-center text-2xl font-bold">
-      Manage Twin World: {twinworld.name || "No Twin World Selected"}
-    </h2>
-
-    <div class="flex flex-col space-y-6">
-      <button
-        class="flex w-fit cursor-pointer items-center rounded-md bg-blue-500 px-4 py-2 text-white transition duration-300 hover:bg-blue-600"
-        onclick={addHousehold}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="mr-2 h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 4v16m8-8H4" />
-        </svg>
-        Add Household
-      </button>
+  {#if twinworld}
+    <div
+      class="text-les-highlight flex w-full flex-col space-y-4 rounded-lg border-4 border-gray-400 bg-white p-6 shadow-lg">
+      <h2 class="mb-6 text-center text-2xl font-bold">
+        Manage Twin World: {twinworld.name || "No Twin World Selected"}
+      </h2>
+
+      <div class="flex flex-col space-y-6">
+        <button
+          class="flex w-fit cursor-pointer items-center rounded-md bg-blue-500 px-4 py-2 text-white transition duration-300 hover:bg-blue-600"
+          onclick={addHousehold}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 4v16m8-8H4" />
+          </svg>
+          Add Household
+        </button>
 
-      {#if twinworld.households.length > 0}
-        {#each twinworld.households as household, hIndex}
-          <div class="flex flex-col space-y-4 rounded-lg border-2 border-gray-300 bg-gray-50 p-5">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center space-x-3">
+        {#if twinworld.households.length > 0}
+          {#each twinworld.households as household, hIndex}
+            <div
+              class="flex flex-col space-y-4 rounded-lg border-2 border-gray-300 bg-gray-50 p-5">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                  <button
+                    class="flex cursor-pointer items-center justify-center rounded-full bg-gray-200 p-2 transition duration-300 hover:bg-gray-300"
+                    onclick={() => toggleFold(hIndex)}
+                    aria-label={foldedHouseholds[hIndex]
+                      ? "Expand Household"
+                      : "Collapse Household"}>
+                    {#if foldedHouseholds[hIndex]}
+                      <svg
+                        width="20px"
+                        height="20px"
+                        viewBox="0 0 24 24"
+                        class="rotate-180 transform"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          d="M7 10L12 15L17 10"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          stroke-linecap="round"
+                          stroke-linejoin="round" />
+                      </svg>
+                    {:else}
+                      <svg
+                        width="20px"
+                        height="20px"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          d="M7 10L12 15L17 10"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          stroke-linecap="round"
+                          stroke-linejoin="round" />
+                      </svg>
+                    {/if}
+                  </button>
+                  <div class="w-3/4">
+                    <input
+                      type="text"
+                      bind:value={household.name}
+                      placeholder="Household Name"
+                      maxlength="20"
+                      onchange={(e: Event) =>
+                        handleHouseholdChange(
+                          hIndex,
+                          "name",
+                          (e.target as HTMLInputElement).value
+                        )}
+                      class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none" />
+                    {#if errors.households[household.id]?.name}
+                      <p class="mt-1 text-sm text-red-500">
+                        {errors.households[household.id].name}
+                      </p>
+                    {/if}
+                  </div>
+                </div>
                 <button
-                  class="flex cursor-pointer items-center justify-center rounded-full bg-gray-200 p-2 transition duration-300 hover:bg-gray-300"
-                  onclick={() => toggleFold(hIndex)}
-                  aria-label={foldedHouseholds[hIndex]
-                    ? "Expand Household"
-                    : "Collapse Household"}>
-                  {#if foldedHouseholds[hIndex]}
-                    <svg
-                      width="20px"
-                      height="20px"
-                      viewBox="0 0 24 24"
-                      class="rotate-180 transform"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg">
-                      <path
-                        d="M7 10L12 15L17 10"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round" />
-                    </svg>
-                  {:else}
-                    <svg
-                      width="20px"
-                      height="20px"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg">
-                      <path
-                        d="M7 10L12 15L17 10"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round" />
-                    </svg>
-                  {/if}
+                  class="flex cursor-pointer items-center text-red-500 transition hover:underline"
+                  onclick={() => deleteHousehold(hIndex)}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="mr-1 h-5 w-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                  Delete
                 </button>
-                <div class="w-3/4">
-                  <input
-                    type="text"
-                    bind:value={household.name}
-                    placeholder="Household Name"
-                    maxlength="20"
-                    onchange={(e: Event) =>
-                      handleHouseholdChange(hIndex, "name", (e.target as HTMLInputElement).value)}
-                    class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none" />
-                  {#if errors.households[household.id]?.name}
-                    <p class="mt-1 text-sm text-red-500">{errors.households[household.id].name}</p>
-                  {/if}
-                </div>
-              </div>
-              <button
-                class="flex cursor-pointer items-center text-red-500 transition hover:underline"
-                onclick={() => deleteHousehold(hIndex)}>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="mr-1 h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12" />
-                </svg>
-                Delete
-              </button>
-            </div>
-
-            {#if !foldedHouseholds[hIndex]}
-              <div
-                class="mt-4 grid grid-cols-1 gap-4 rounded-lg border-2 border-blue-200 bg-blue-50 p-4 md:grid-cols-3">
-                <div>
-                  <label
-                    class="mb-1 block text-sm font-medium text-blue-700"
-                    for={`size-${hIndex}`}>
-                    Household Size
-                  </label>
-                  <input
-                    type="number"
-                    id={`size-${hIndex}`}
-                    bind:value={household.size}
-                    min="1"
-                    onchange={(e: Event) =>
-                      handleHouseholdChange(
-                        hIndex,
-                        "size",
-                        Number((e.target as HTMLInputElement).value)
-                      )}
-                    class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                    placeholder="Enter number of members" />
-                  {#if errors.households[household.id]?.size}
-                    <p class="mt-1 text-sm text-red-500">{errors.households[household.id].size}</p>
-                  {/if}
-                </div>
-                <div>
-                  <label
-                    class="mb-1 block text-sm font-medium text-blue-700"
-                    for={`solarPanels-${hIndex}`}>
-                    Solar Panels
-                  </label>
-                  <input
-                    type="number"
-                    id={`solarPanels-${hIndex}`}
-                    bind:value={household.solarPanels}
-                    min="0"
-                    onchange={(e: Event) => {
-                      const value = Number((e.target as HTMLInputElement).value);
-                      household.solarPanels = value >= 0 ? value : 0;
-                      handleHouseholdChange(hIndex, "solarPanels", household.solarPanels);
-                    }}
-                    class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                    placeholder="Enter number of solar panels" />
-                  {#if errors.households[household.id]?.solarPanels}
-                    <p class="mt-1 text-sm text-red-500">
-                      {errors.households[household.id].solarPanels}
-                    </p>
-                  {/if}
-                </div>
-                <div>
-                  <label
-                    class="mb-1 block text-sm font-medium text-blue-700"
-                    for={`solarPanelType-${hIndex}`}>
-                    Panel Type
-                  </label>
-                  <select
-                    id={`solarPanelType-${hIndex}`}
-                    bind:value={household.solarPanelType}
-                    class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none">
-                    <option value="Average">Average</option>
-                    <option value="Good">Good</option>
-                    <option value="Bad">Bad</option>
-                  </select>
-                  {#if errors.households[household.id]?.solarPanelType}
-                    <p class="mt-1 text-sm text-red-500">
-                      {errors.households[household.id].solarPanelType}
-                    </p>
-                  {/if}
-                </div>
               </div>
 
-              <div class="mt-6 flex flex-col space-y-4">
-                <div class="flex items-center justify-between">
-                  <h4 class="text-lg font-semibold">Appliances</h4>
-                  <button
-                    class="flex cursor-pointer items-center rounded-md bg-blue-500 px-3 py-2 text-white transition hover:bg-blue-600"
-                    disabled={(household.appliances?.length ?? 0) >= 5}
-                    onclick={() => addAppliance(hIndex)}>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="mr-2 h-5 w-5"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor">
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M12 4v16m8-8H4" />
-                    </svg>
-                    Add Appliance
-                  </button>
+              {#if !foldedHouseholds[hIndex]}
+                <div
+                  class="mt-4 grid grid-cols-1 gap-4 rounded-lg border-2 border-blue-200 bg-blue-50 p-4 md:grid-cols-3">
+                  <div>
+                    <label
+                      class="mb-1 block text-sm font-medium text-blue-700"
+                      for={`size-${hIndex}`}>
+                      Household Size
+                    </label>
+                    <input
+                      type="number"
+                      id={`size-${hIndex}`}
+                      bind:value={household.size}
+                      min="1"
+                      onchange={(e: Event) =>
+                        handleHouseholdChange(
+                          hIndex,
+                          "size",
+                          Number((e.target as HTMLInputElement).value)
+                        )}
+                      class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                      placeholder="Enter number of members" />
+                    {#if errors.households[household.id]?.size}
+                      <p class="mt-1 text-sm text-red-500">
+                        {errors.households[household.id].size}
+                      </p>
+                    {/if}
+                  </div>
+                  <div>
+                    <label
+                      class="mb-1 block text-sm font-medium text-blue-700"
+                      for={`solarPanels-${hIndex}`}>
+                      Solar Panels
+                    </label>
+                    <input
+                      type="number"
+                      id={`solarPanels-${hIndex}`}
+                      bind:value={household.solarPanels}
+                      min="0"
+                      onchange={(e: Event) => {
+                        const value = Number((e.target as HTMLInputElement).value);
+                        household.solarPanels = value >= 0 ? value : 0;
+                        handleHouseholdChange(hIndex, "solarPanels", household.solarPanels);
+                      }}
+                      class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                      placeholder="Enter number of solar panels" />
+                    {#if errors.households[household.id]?.solarPanels}
+                      <p class="mt-1 text-sm text-red-500">
+                        {errors.households[household.id].solarPanels}
+                      </p>
+                    {/if}
+                  </div>
+                  <div>
+                    <label
+                      class="mb-1 block text-sm font-medium text-blue-700"
+                      for={`solarPanelType-${hIndex}`}>
+                      Panel Type
+                    </label>
+                    <select
+                      id={`solarPanelType-${hIndex}`}
+                      bind:value={household.solarPanelType}
+                      class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none">
+                      <option value="Average">Average</option>
+                      <option value="Good">Good</option>
+                      <option value="Bad">Bad</option>
+                    </select>
+                    {#if errors.households[household.id]?.solarPanelType}
+                      <p class="mt-1 text-sm text-red-500">
+                        {errors.households[household.id].solarPanelType}
+                      </p>
+                    {/if}
+                  </div>
                 </div>
-                {#each household.appliances! as appliance, aIndex}
-                  <div
-                    class="flex flex-col space-y-4 rounded-lg border-2 border-gray-300 bg-gray-100 p-5">
-                    <div class="flex items-center space-x-3">
-                      <button
-                        class="flex cursor-pointer items-center justify-center rounded-full bg-gray-200 p-2 transition duration-300 hover:bg-gray-300"
-                        onclick={() => toggleApplianceFold(hIndex, aIndex)}
-                        aria-label={foldedAppliances[hIndex][aIndex]
-                          ? "Expand Appliance"
-                          : "Collapse Appliance"}>
-                        {#if foldedAppliances[hIndex][aIndex]}
-                          <svg
-                            width="20px"
-                            height="20px"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            class="rotate-180 transform"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <path
-                              d="M7 10L12 15L17 10"
-                              stroke="currentColor"
-                              stroke-width="1.5"
-                              stroke-linecap="round"
-                              stroke-linejoin="round" />
-                          </svg>
-                        {:else}
-                          <svg
-                            width="20px"
-                            height="20px"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <path
-                              d="M7 10L12 15L17 10"
-                              stroke="currentColor"
-                              stroke-width="1.5"
-                              stroke-linecap="round"
-                              stroke-linejoin="round" />
-                          </svg>
-                        {/if}
-                      </button>
-
-                      <div class="flex-grow">
-                        <select
-                          id={`appliance-select-${hIndex}-${aIndex}`}
-                          bind:value={appliance.name}
-                          onchange={(e: Event) =>
-                            handleApplianceTypeChange(
-                              hIndex,
-                              aIndex,
-                              (e.target as HTMLSelectElement).value as ApplianceTypes
-                            )}
-                          class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none">
-                          <option disabled value="">Select Appliance</option>
-                          {#each getAvailableApplianceTypes(household, appliance.name) as type}
-                            <option value={type}>{type}</option>
-                          {/each}
-                        </select>
-                        {#if errors.appliances[household.id]?.[appliance.id]?.name}
-                          <p class="mt-1 text-sm text-red-500">
-                            {errors.appliances[household.id][appliance.id].name}
-                          </p>
-                        {/if}
-                      </div>
-
-                      <button
-                        class="flex cursor-pointer items-center text-red-500 transition hover:underline"
-                        onclick={() => deleteAppliance(hIndex, aIndex)}>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="mr-1 h-5 w-5"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor">
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                        Delete
-                      </button>
-                    </div>
 
-                    {#if !foldedAppliances[hIndex][aIndex]}
-                      <div class="mt-2 grid grid-cols-1 gap-4 md:grid-cols-2">
-                        <div>
-                          <label
-                            class="mb-1 block text-sm font-medium"
-                            for={`power-${hIndex}-${aIndex}`}>
-                            Power (W)
-                          </label>
-                          <input
-                            type="number"
-                            id={`power-${hIndex}-${aIndex}`}
-                            bind:value={appliance.power}
-                            min="1"
-                            onchange={(e: Event) =>
-                              handleApplianceChange(
-                                hIndex,
-                                aIndex,
-                                "power",
-                                Number((e.target as HTMLInputElement).value)
-                              )}
-                            class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                            placeholder="Enter power in watts" />
-                          {#if errors.appliances[household.id]?.[appliance.id]?.power}
-                            <p class="mt-1 text-sm text-red-500">
-                              {errors.appliances[household.id][appliance.id].power}
-                            </p>
-                          {/if}
-                        </div>
-                        <div>
-                          <label
-                            class="mb-1 block text-sm font-medium"
-                            for={`duration-${hIndex}-${aIndex}`}>
-                            Duration (hours)
-                          </label>
-                          <input
-                            type="number"
-                            id={`duration-${hIndex}-${aIndex}`}
-                            bind:value={appliance.duration}
-                            min="1"
-                            onchange={(e: Event) =>
-                              handleApplianceChange(
-                                hIndex,
-                                aIndex,
-                                "duration",
-                                Number((e.target as HTMLInputElement).value)
-                              )}
-                            class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                            placeholder="Enter duration in hours" />
-                          {#if errors.appliances[household.id]?.[appliance.id]?.duration}
-                            <p class="mt-1 text-sm text-red-500">
-                              {errors.appliances[household.id][appliance.id].duration}
-                            </p>
+                <div class="mt-6 flex flex-col space-y-4">
+                  <div class="flex items-center justify-between">
+                    <h4 class="text-lg font-semibold">Appliances</h4>
+                    <button
+                      class="flex cursor-pointer items-center rounded-md bg-blue-500 px-3 py-2 text-white transition hover:bg-blue-600"
+                      disabled={(household.appliances?.length ?? 0) >= 5}
+                      onclick={() => addAppliance(hIndex)}>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="mr-2 h-5 w-5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor">
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M12 4v16m8-8H4" />
+                      </svg>
+                      Add Appliance
+                    </button>
+                  </div>
+                  {#each household.appliances! as appliance, aIndex}
+                    <div
+                      class="flex flex-col space-y-4 rounded-lg border-2 border-gray-300 bg-gray-100 p-5">
+                      <div class="flex items-center space-x-3">
+                        <button
+                          class="flex cursor-pointer items-center justify-center rounded-full bg-gray-200 p-2 transition duration-300 hover:bg-gray-300"
+                          onclick={() => toggleApplianceFold(hIndex, aIndex)}
+                          aria-label={foldedAppliances[hIndex][aIndex]
+                            ? "Expand Appliance"
+                            : "Collapse Appliance"}>
+                          {#if foldedAppliances[hIndex][aIndex]}
+                            <svg
+                              width="20px"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              class="rotate-180 transform"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                d="M7 10L12 15L17 10"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round" />
+                            </svg>
+                          {:else}
+                            <svg
+                              width="20px"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                d="M7 10L12 15L17 10"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round" />
+                            </svg>
                           {/if}
-                        </div>
-                        <div>
-                          <label
-                            class="mb-1 block text-sm font-medium"
-                            for={`dailyUsage-${hIndex}-${aIndex}`}>
-                            Daily Usage (times)
-                          </label>
-                          <input
-                            type="number"
-                            id={`dailyUsage-${hIndex}-${aIndex}`}
-                            bind:value={appliance.dailyUsage}
-                            min="1"
+                        </button>
+
+                        <div class="flex-grow">
+                          <select
+                            id={`appliance-select-${hIndex}-${aIndex}`}
+                            bind:value={appliance.name}
                             onchange={(e: Event) =>
-                              handleApplianceChange(
+                              handleApplianceTypeChange(
                                 hIndex,
                                 aIndex,
-                                "dailyUsage",
-                                Number((e.target as HTMLInputElement).value)
+                                (e.target as HTMLSelectElement).value as ApplianceTypes
                               )}
-                            class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                            placeholder="Enter daily usage times" />
-                          {#if errors.appliances[household.id]?.[appliance.id]?.dailyUsage}
+                            class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none">
+                            <option disabled value="">Select Appliance</option>
+                            {#each getAvailableApplianceTypes(household, appliance.name) as type}
+                              <option value={type}>{type}</option>
+                            {/each}
+                          </select>
+                          {#if errors.appliances[household.id]?.[appliance.id]?.name}
                             <p class="mt-1 text-sm text-red-500">
-                              {errors.appliances[household.id][appliance.id].dailyUsage}
+                              {errors.appliances[household.id][appliance.id].name}
                             </p>
                           {/if}
                         </div>
+
+                        <button
+                          class="flex cursor-pointer items-center text-red-500 transition hover:underline"
+                          onclick={() => deleteAppliance(hIndex, aIndex)}>
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="mr-1 h-5 w-5"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M6 18L18 6M6 6l12 12" />
+                          </svg>
+                          Delete
+                        </button>
                       </div>
-                      <div class="mt-4">
-                        {#each appliance.timeDaily.slice(0, 7) as time}
-                          <div class="mb-4">
-                            <label class="mb-2 block font-semibold" for="time-{time.day}">
-                              {daysOfWeek[time.day - 1]}
+
+                      {#if !foldedAppliances[hIndex][aIndex]}
+                        <div class="mt-2 grid grid-cols-1 gap-4 md:grid-cols-2">
+                          <div>
+                            <label
+                              class="mb-1 block text-sm font-medium"
+                              for={`power-${hIndex}-${aIndex}`}>
+                              Power (W)
                             </label>
-                            <div class="grid grid-cols-6 gap-2">
-                              {#each Array(24) as _, hour}
-                                <label class="flex items-center space-x-1 text-xs">
-                                  <input
-                                    type="checkbox"
-                                    checked={(time.bitmapWindow & (1 << hour)) !== 0}
-                                    onchange={(e) => {
-                                      const target = e.target as HTMLInputElement;
-                                      handleTimeDailyChange(
-                                        hIndex,
-                                        aIndex,
-                                        time.day,
-                                        hour,
-                                        target.checked
-                                      );
-                                    }}
-                                    class="rounded text-blue-600 focus:ring-blue-500" />
-                                  <span>{hour}:00</span>
-                                </label>
-                              {/each}
-                            </div>
+                            <input
+                              type="number"
+                              id={`power-${hIndex}-${aIndex}`}
+                              bind:value={appliance.power}
+                              min="1"
+                              onchange={(e: Event) =>
+                                handleApplianceChange(
+                                  hIndex,
+                                  aIndex,
+                                  "power",
+                                  Number((e.target as HTMLInputElement).value)
+                                )}
+                              class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                              placeholder="Enter power in watts" />
+                            {#if errors.appliances[household.id]?.[appliance.id]?.power}
+                              <p class="mt-1 text-sm text-red-500">
+                                {errors.appliances[household.id][appliance.id].power}
+                              </p>
+                            {/if}
                           </div>
-                        {/each}
-                      </div>
-                    {/if}
-                  </div>
-                {/each}
-              </div>
-            {/if}
-          </div>
-        {/each}
-      {/if}
+                          <div>
+                            <label
+                              class="mb-1 block text-sm font-medium"
+                              for={`duration-${hIndex}-${aIndex}`}>
+                              Duration (hours)
+                            </label>
+                            <input
+                              type="number"
+                              id={`duration-${hIndex}-${aIndex}`}
+                              bind:value={appliance.duration}
+                              min="1"
+                              onchange={(e: Event) =>
+                                handleApplianceChange(
+                                  hIndex,
+                                  aIndex,
+                                  "duration",
+                                  Number((e.target as HTMLInputElement).value)
+                                )}
+                              class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                              placeholder="Enter duration in hours" />
+                            {#if errors.appliances[household.id]?.[appliance.id]?.duration}
+                              <p class="mt-1 text-sm text-red-500">
+                                {errors.appliances[household.id][appliance.id].duration}
+                              </p>
+                            {/if}
+                          </div>
+                          <div>
+                            <label
+                              class="mb-1 block text-sm font-medium"
+                              for={`dailyUsage-${hIndex}-${aIndex}`}>
+                              Daily Usage (times)
+                            </label>
+                            <input
+                              type="number"
+                              id={`dailyUsage-${hIndex}-${aIndex}`}
+                              bind:value={appliance.dailyUsage}
+                              min="1"
+                              onchange={(e: Event) =>
+                                handleApplianceChange(
+                                  hIndex,
+                                  aIndex,
+                                  "dailyUsage",
+                                  Number((e.target as HTMLInputElement).value)
+                                )}
+                              class="w-full rounded-lg border-2 border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                              placeholder="Enter daily usage times" />
+                            {#if errors.appliances[household.id]?.[appliance.id]?.dailyUsage}
+                              <p class="mt-1 text-sm text-red-500">
+                                {errors.appliances[household.id][appliance.id].dailyUsage}
+                              </p>
+                            {/if}
+                          </div>
+                        </div>
+                        <div class="mt-4">
+                          {#each appliance.timeDaily.slice(0, 7) as time}
+                            <div class="mb-4">
+                              <label class="mb-2 block font-semibold" for="time-{time.day}">
+                                {daysOfWeek[time.day - 1]}
+                              </label>
+                              <div class="grid grid-cols-6 gap-2">
+                                {#each Array(24) as _, hour}
+                                  <label class="flex items-center space-x-1 text-xs">
+                                    <input
+                                      type="checkbox"
+                                      checked={(time.bitmapWindow & (1 << hour)) !== 0}
+                                      onchange={(e) => {
+                                        const target = e.target as HTMLInputElement;
+                                        handleTimeDailyChange(
+                                          hIndex,
+                                          aIndex,
+                                          time.day,
+                                          hour,
+                                          target.checked
+                                        );
+                                      }}
+                                      class="rounded text-blue-600 focus:ring-blue-500" />
+                                    <span>{hour}:00</span>
+                                  </label>
+                                {/each}
+                              </div>
+                            </div>
+                          {/each}
+                        </div>
+                      {/if}
+                    </div>
+                  {/each}
+                </div>
+              {/if}
+            </div>
+          {/each}
+        {/if}
+      </div>
     </div>
-  </div>
+  {/if}
 {/snippet}
 
 <div class="mx-auto flex max-w-3xl flex-col items-center justify-center space-y-8 px-2 py-8">
diff --git a/src/excel.svelte.ts b/src/excel.svelte.ts
index 71dc24c..5249bf2 100644
--- a/src/excel.svelte.ts
+++ b/src/excel.svelte.ts
@@ -111,19 +111,25 @@ export function downloadExcel(name?: string): void {
   }
 
   function processGraphDataAndAddToWorkbook(graphData: GraphData, workbook: XLSX.WorkBook): void {
+    const graphTabNames: Record<keyof GraphData, string> = {
+      graph1: "Internal Energy Price",
+      graph2: "Individual Solar Energy",
+      graph3: "Total Solar Energy",
+      graph4: "Total Money Saved",
+    };
+
     Object.keys(graphData).forEach((graphKey) => {
-      const graphPoints: GraphPoint[] = graphData[graphKey as keyof GraphData].map(
-        (point: string) => {
-          const [xPart, yPart] = point.split(",");
-          return {
-            X: xPart.split(":")[1].trim(),
-            Y: yPart.split(":")[1].trim(),
-          };
-        }
-      );
+      const key = graphKey as keyof GraphData;
+      const graphPoints: GraphPoint[] = graphData[key].map((point: string) => {
+        const [xPart, yPart] = point.split(",");
+        return {
+          X: xPart.split(":")[1].trim(),
+          Y: yPart.split(":")[1].trim(),
+        };
+      });
 
       const worksheet = XLSX.utils.json_to_sheet(graphPoints);
-      XLSX.utils.book_append_sheet(workbook, worksheet, graphKey);
+      XLSX.utils.book_append_sheet(workbook, worksheet, graphTabNames[key]);
     });
   }
 
@@ -142,15 +148,17 @@ export function downloadExcel(name?: string): void {
 
   const timeDailiesSheet = XLSX.utils.json_to_sheet(timeDailies);
   XLSX.utils.book_append_sheet(workbook, timeDailiesSheet, "Time Dailies");
+
   processGraphDataAndAddToWorkbook(graphData, workbook);
   const dashboardSheet = XLSX.utils.json_to_sheet(dashboardData);
   XLSX.utils.book_append_sheet(workbook, dashboardSheet, "Dashboard Data");
+
   const wbout = XLSX.write(workbook, { bookType: "xlsx", type: "binary" });
   const blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
   const url = URL.createObjectURL(blob);
   const a = document.createElement("a");
   a.href = url;
-  a.download = name + ".xlsx" || "session-data.xlsx";
+  a.download = name ? name + ".xlsx" : "session-data.xlsx";
   document.body.appendChild(a);
   a.click();
   document.body.removeChild(a);
diff --git a/src/formdata.svelte.ts b/src/formdata.svelte.ts
index c228a08..9734967 100644
--- a/src/formdata.svelte.ts
+++ b/src/formdata.svelte.ts
@@ -132,8 +132,8 @@ export async function loadFormData() {
         },
       ],
       twinWorlds: {
-        "1": createTwinWorld("Twin World Small", 25, 5),
-        "2": createTwinWorld("Twin World Large", 75, 5),
+        "1": createTwinWorld("Twin World Small", 25, 2),
+        "2": createTwinWorld("Twin World Large", 75, 2),
       },
     },
     {

From 1f72cf9062b71aec4368f8fdaa8eb04803430cbe Mon Sep 17 00:00:00 2001
From: xlc-dev <119954023+xlc-dev@users.noreply.github.com>
Date: Wed, 15 Jan 2025 18:57:56 +0100
Subject: [PATCH 2/2] last bug

---
 src/Stepper.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Stepper.svelte b/src/Stepper.svelte
index 8b450e9..afdf444 100644
--- a/src/Stepper.svelte
+++ b/src/Stepper.svelte
@@ -1424,7 +1424,11 @@
                   <div class="flex items-center justify-between">
                     <h4 class="text-lg font-semibold">Appliances</h4>
                     <button
-                      class="flex cursor-pointer items-center rounded-md bg-blue-500 px-3 py-2 text-white transition hover:bg-blue-600"
+                      class={`flex items-center rounded-md px-3 py-2 text-white transition ${
+                        (household.appliances?.length ?? 0) < 5
+                          ? "cursor-pointer bg-blue-500 hover:bg-blue-600"
+                          : "cursor-not-allowed bg-gray-300"
+                      }`}
                       disabled={(household.appliances?.length ?? 0) >= 5}
                       onclick={() => addAppliance(hIndex)}>
                       <svg