towerops/lib/towerops_web/live/schedule_live/index.html.heex

<Layouts.authenticated
  flash={@flash}
  current_scope={@current_scope}
  active_page="schedules"
>
  <div class="flex items-center justify-between mb-1">
    <h1 class="text-xl font-bold text-gray-900 dark:text-white">{t("On-Call & Schedules")}</h1>
    <div class="flex items-center gap-2">
      <%= if @tab == "escalation-policies" do %>
        <.link
          navigate={~p"/schedules/escalation-policies/new"}
          class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 transition-colors"
        >
          <.icon name="hero-plus" class="h-4 w-4" />
          {t("New Policy")}
        </.link>
      <% else %>
        <.link
          navigate={~p"/schedules/new"}
          class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 transition-colors"
        >
          <.icon name="hero-plus" class="h-4 w-4" />
          {t("New Schedule")}
        </.link>
      <% end %>
    </div>
  </div>
  <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
    {t("Define on-call rotations and escalation policies for alert notifications.")}
  </p>

  <div class="flex items-center gap-2 mb-6">
    <.link
      patch={~p"/schedules?tab=schedules"}
      class={[
        "inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
        @tab == "schedules" && "bg-gray-900 text-white dark:bg-white dark:text-gray-900",
        @tab != "schedules" &&
          "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
      ]}
    >
      {t("Schedules")}
    </.link>
    <.link
      patch={~p"/schedules?tab=escalation-policies"}
      class={[
        "inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
        @tab == "escalation-policies" && "bg-gray-900 text-white dark:bg-white dark:text-gray-900",
        @tab != "escalation-policies" &&
          "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
      ]}
    >
      {t("Escalation Policies")}
    </.link>
  </div>

  <%= if @tab == "escalation-policies" do %>
    <%= if Enum.empty?(@policies) do %>
      <div class="flex items-center justify-center py-16">
        <div class="text-center">
          <.icon
            name="hero-arrow-trending-up"
            class="h-12 w-12 text-gray-300 dark:text-gray-600 mx-auto mb-4"
          />
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">
            {t("No escalation policies")}
          </h3>
          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
            {t("Create an escalation policy to define how alerts are escalated to on-call users.")}
          </p>
        </div>
      </div>
    <% else %>
      <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
          <thead class="bg-gray-50 dark:bg-gray-800/50">
            <tr>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                {t("Name")}
              </th>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                {t("Rules")}
              </th>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                {t("Repeat Count")}
              </th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100 dark:divide-white/5 bg-white dark:bg-gray-900">
            <%= for policy <- @policies do %>
              <tr
                class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors cursor-pointer"
                phx-click={JS.navigate(~p"/schedules/escalation-policies/#{policy.id}")}
              >
                <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                  {policy.name}
                </td>
                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                  —
                </td>
                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                  {policy.repeat_count}
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    <% end %>
  <% else %>
    <%= if Enum.empty?(@schedules) do %>
      <div class="flex items-center justify-center py-16">
        <div class="text-center">
          <.icon
            name="hero-calendar-days"
            class="h-12 w-12 text-gray-300 dark:text-gray-600 mx-auto mb-4"
          />
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">
            {t("No schedules")}
          </h3>
          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
            {t("Create an on-call schedule to define rotation coverage.")}
          </p>
        </div>
      </div>
    <% else %>
      <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
          <thead class="bg-gray-50 dark:bg-gray-800/50">
            <tr>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                {t("Name")}
              </th>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                {t("Timezone")}
              </th>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                {t("Currently On-Call")}
              </th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100 dark:divide-white/5 bg-white dark:bg-gray-900">
            <%= for schedule <- @schedules do %>
              <tr
                class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors cursor-pointer"
                phx-click={JS.navigate(~p"/schedules/#{schedule.id}")}
              >
                <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                  {schedule.name}
                </td>
                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                  {schedule.timezone}
                </td>
                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                  <%= if schedule.current_on_call do %>
                    <span class="inline-flex items-center gap-1.5">
                      <span class="h-2 w-2 rounded-full bg-green-500"></span>
                      {schedule.current_on_call_name}
                    </span>
                  <% else %>
                    <span class="text-gray-400 dark:text-gray-500">{t("No one")}</span>
                  <% end %>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    <% end %>
  <% end %>
</Layouts.authenticated>