farmitry_hvac/app/views/nutrient/index.html.erb

<div class="w-full h-full content overflow-y-auto">
  <div class="flex-1 grid grid-cols-2 xl:grid-cols-4 gap-4">
    <!-- pH -->
    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" do %>
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <div class="size-8 bg-nut-color rounded-full text-base-background flex flex-col justify-center">
              <div class="flex flex-row justify-center items-baseline">
                <span class="text-xl">pH</span>
              </div>
            </div>
            <div class="items-baseline">
              <span class="text-2xl">pH</span>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fa-solid fa-calendar-days text-2xl"></i>
            <i class="fa-solid fa-angle-right text-2xl opacity-90"></i>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">현재 pH</div>
            <div class="font-bold text-3xl">6.0<span class="font-normal text-2xl"> pH</span></div>
          </div>
          <div class="flex flex-col items-baseline text-right w-full pl-4">
            <div class="opacity-50">오차 pH</div>
            <div class="font-bold text-3xl">0.1<span class="font-normal text-2xl"> pH</span></div>
          </div>
        </div>
      </div>
    <% end %>

    <!-- EC -->
    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" do %>
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <div class="size-8 bg-nut-color rounded-full text-base-background flex flex-col justify-center">
              <div class="flex flex-row justify-center items-baseline">
                <span class="text-xl">EC</span>
              </div>
            </div>
            <div class="items-baseline">
              <span class="text-2xl">EC</span>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fa-solid fa-calendar-days text-2xl"></i>
            <i class="fa-solid fa-angle-right text-2xl opacity-90"></i>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">현재 EC</div>
            <div class="font-bold text-3xl">1.2<span class="font-normal text-2xl"> mS/cm</span></div>
          </div>
          <div class="flex flex-col items-baseline text-right w-full pl-4">
            <div class="opacity-50">오차 pH</div>
            <div class="font-bold text-3xl">0.1<span class="font-normal text-2xl"> mS/cm</span></div>
          </div>
        </div>
      </div>
    <% end %>

    <!-- 양액 온도 -->
    <div class="dashboard-group bg-base-content"
         data-controller="toggle"
         data-action="click->toggle#toggle"
         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <i class="fa-solid fa-temperature-low text-nut-color text-3xl text-left"></i>
            <div class="items-baseline">
              <span class="text-2xl">양액 온도</span>
            </div>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">양액 온도</div>
            <div class="font-bold text-3xl">20.2<span class="font-normal text-2xl"> °C</span></div>
          </div>
          <div class="flex flex-col items-baseline text-right w-full pl-4">
            <div class="opacity-50">원액 온도</div>
            <div class="font-bold text-3xl">20.2<span class="font-normal text-2xl"> °C</span></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 수위 정보 -->
    <div class="dashboard-group bg-base-content"
         data-controller="toggle"
         data-action="click->toggle#toggle"
         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <i class="fa-solid fa-glass-water-droplet text-nut-color text-3xl text-left"></i>
            <div class="items-baseline">
              <span class="text-2xl">수위 정보</span>
            </div>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">상태</div>
            <div class="flex flex-row items-center space-x-2">
              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
              <div class="font-bold text-3xl text-notice">정상</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 원수 탱크 -->
    <div class="dashboard-group bg-base-content"
         data-controller="toggle"
         data-action="click->toggle#toggle"
         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2 cursor-pointer">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <i class="fa-solid fa-fan text-etc-color text-3xl text-left"></i>
            <div class="items-baseline">
              <span class="text-2xl">원수 탱크</span>
            </div>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 원수 펌프 -->
    <div class="dashboard-group bg-base-content"
         data-controller="toggle"
         data-action="click->toggle#toggle"
         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <%= render "partials/icons/pump_icon", class: "w-auto h-6 text-etc-color" %>
            <div class="items-baseline">
              <span class="text-2xl">원수 펌프</span>
            </div>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 교반기A -->
    <div class="dashboard-group bg-base-content"
         data-controller="toggle"
         data-action="click->toggle#toggle"
         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <i class="fa-solid fa-fan text-etc-color text-3xl text-left"></i>
            <div class="items-baseline">
              <span class="text-2xl">교반기A</span>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fa-solid fa-calendar-days text-2xl"></i>
            <i class="fa-solid fa-angle-right text-2xl opacity-90"></i>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">설정 시간</div>
            <div class="font-bold text-3xl">30<span class="font-normal text-2xl"> 분</span></div>
          </div>
          <div class="flex flex-col items-baseline text-right w-full pl-4">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 교반기B -->
    <div class="dashboard-group bg-base-content"
         data-controller="toggle"
         data-action="click->toggle#toggle"
         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <i class="fa-solid fa-fan text-etc-color text-3xl text-left"></i>
            <div class="items-baseline">
              <span class="text-2xl">교반기B</span>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fa-solid fa-calendar-days text-2xl"></i>
            <i class="fa-solid fa-angle-right text-2xl opacity-90"></i>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">설정 시간</div>
            <div class="font-bold text-3xl">30<span class="font-normal text-2xl"> 분</span></div>
          </div>
          <div class="flex flex-col items-baseline text-right w-full pl-4">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 급수/공급 펌프 -->
    <div class="dashboard-group bg-base-content"
         data-controller="toggle"
         data-action="click->toggle#toggle"
         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <%= render "partials/icons/pump_icon", class: "w-auto h-6 text-etc-color" %>
            <div class="items-baseline">
              <span class="text-2xl">급수/공급 펌프</span>
            </div>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 1번급수 솔벨브 -->
    <div class="dashboard-group bg-base-content"
         data-controller="toggle"
         data-action="click->toggle#toggle"
         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <%= render "partials/icons/valve_icon", class: "w-auto h-6 text-etc-color" %>
            <div class="items-baseline">
              <span class="text-2xl">1번급수 솔벨브</span>
            </div>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 2번급수 솔벨브 -->
    <div class="dashboard-group bg-base-content"
         data-controller="toggle"
         data-action="click->toggle#toggle"
         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <%= render "partials/icons/valve_icon", class: "w-auto h-6 text-etc-color" %>
            <div class="items-baseline">
              <span class="text-2xl">2번급수 솔벨브</span>
            </div>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 퇴수 솔벨브 -->
    <div class="dashboard-group bg-base-content"
         data-controller="toggle"
         data-action="click->toggle#toggle"
         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <%= render "partials/icons/valve_icon", class: "w-auto h-6 text-etc-color" %>
            <div class="items-baseline">
              <span class="text-2xl">퇴수 솔벨브</span>
            </div>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 솔레노이드 벨브A -->
    <div class="dashboard-group bg-base-content"
         data-controller="toggle"
         data-action="click->toggle#toggle"
         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <%= render "partials/icons/valve_icon", class: "w-auto h-6 text-etc-color" %>
            <div class="items-baseline">
              <span class="text-2xl">솔레노이드 벨브A</span>
            </div>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 솔레노이드 벨브B -->
    <div class="dashboard-group bg-base-content"
         data-controller="toggle"
         data-action="click->toggle#toggle"
         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <%= render "partials/icons/valve_icon", class: "w-auto h-6 text-etc-color" %>
            <div class="items-baseline">
              <span class="text-2xl">솔레노이드 벨브B</span>
            </div>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 솔레노이드 벨브C -->
    <div class="dashboard-group bg-base-content"
         data-controller="toggle"
         data-action="click->toggle#toggle"
         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <%= render "partials/icons/valve_icon", class: "w-auto h-6 text-etc-color" %>
            <div class="items-baseline">
              <span class="text-2xl">솔레노이드 벨브C</span>
            </div>
          </div>
        </div>
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 긴급 정지 -->
    <div class="dashboard-group bg-base-content"
         data-controller="toggle"
         data-action="click->toggle#toggle"
         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full">
        <div class="text-2xl">긴급 정지</div>
        <div class="flex flex-row justify-end items-baseline w-full">
          <div class="flex size-12 bg-etc-color rounded-lg items-center justify-center">
            <i class="fa-solid fa-pause text-white text-3xl text-left"></i>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>