From 3fa40f9cc2afad955efd91337dd3617d5ca32b87 Mon Sep 17 00:00:00 2001
From: "Elias W. BA" <eliaswalyba@gmail.com>
Date: Fri, 25 Oct 2024 10:57:22 +0000
Subject: [PATCH] Refactor Projects Dashboard & Fix Last Activity Bug (#2606)

* Add arcade resources, unload video when modal is closed
* Move Arcade implementation to live_component
* Pass phx-target to component
* Assign projects for picker
* Cherry pick projects last activity fix
---
 CHANGELOG.md                                  |   3 +
 lib/lightning/projects.ex                     |  44 +++
 lib/lightning_web/live/components/modal.ex    |  30 +-
 .../live/dashboard_live/components.ex         | 134 +++++++--
 .../live/dashboard_live/index.ex              | 261 +----------------
 .../dashboard_live/user_projects_section.ex   |  90 ++++++
 .../live/dashboard_live/welcome_section.ex    | 104 +++++++
 test/lightning/projects_test.exs              | 195 +++++++++++++
 .../live/dashboard_live_test.exs              | 271 ++++++++++--------
 9 files changed, 730 insertions(+), 402 deletions(-)
 create mode 100644 lib/lightning_web/live/dashboard_live/user_projects_section.ex
 create mode 100644 lib/lightning_web/live/dashboard_live/welcome_section.ex

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 34f5b52ac1..681469c700 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,9 @@ and this project adheres to
 
 ### Fixed
 
+- Refactor projects dashboard page and fix bug on last activity column
+  [#2593](https://github.com/OpenFn/lightning/issues/2593)
+
 ## [v2.9.11] - 2024-10-23
 
 ### Added
diff --git a/lib/lightning/projects.ex b/lib/lightning/projects.ex
index 2b5285a13e..7facecf0ac 100644
--- a/lib/lightning/projects.ex
+++ b/lib/lightning/projects.ex
@@ -34,6 +34,50 @@ defmodule Lightning.Projects do
 
   require Logger
 
+  defmodule ProjectOverviewRow do
+    @moduledoc """
+    Represents a summarized view of a project for a user, used in the project overview table.
+    """
+    defstruct [
+      :id,
+      :name,
+      :role,
+      :workflows_count,
+      :collaborators_count,
+      :last_activity
+    ]
+  end
+
+  def get_projects_overview(%User{id: user_id}, opts \\ []) do
+    order_by = Keyword.get(opts, :order_by, {:asc, :name})
+
+    from(p in Project,
+      join: pu in assoc(p, :project_users),
+      left_join: w in assoc(p, :workflows),
+      left_join: pu_all in assoc(p, :project_users),
+      where: pu.user_id == ^user_id and is_nil(w.deleted_at),
+      group_by: [p.id, pu.role],
+      select: %ProjectOverviewRow{
+        id: p.id,
+        name: p.name,
+        role: pu.role,
+        workflows_count: count(w.id, :distinct),
+        collaborators_count: count(pu_all.user_id, :distinct),
+        last_activity: max(w.updated_at)
+      },
+      order_by: ^dynamic_order_by(order_by)
+    )
+    |> Repo.all()
+  end
+
+  defp dynamic_order_by({direction, :name}) do
+    {direction, dynamic([p, _pu, _w, _pu_all], field(p, :name))}
+  end
+
+  defp dynamic_order_by({direction, :last_activity}) do
+    {direction, dynamic([_p, _pu, w, _pu_all], max(w.updated_at))}
+  end
+
   @doc """
   Perform, when called with %{"type" => "purge_deleted"}
   will find projects that are ready for permanent deletion and purge them.
diff --git a/lib/lightning_web/live/components/modal.ex b/lib/lightning_web/live/components/modal.ex
index 5cd4e15679..d382440219 100644
--- a/lib/lightning_web/live/components/modal.ex
+++ b/lib/lightning_web/live/components/modal.ex
@@ -12,6 +12,7 @@ defmodule LightningWeb.Components.Modal do
   attr :id, :string, required: true
   attr :show, :boolean, default: false
   attr :with_frame, :boolean, default: true
+  attr :target, :any, default: nil
   attr :position, :string, default: "fixed inset-0"
   attr :width, :string, default: "max-w-3xl"
   attr :close_on_click_away, :boolean, default: true
@@ -34,7 +35,7 @@ defmodule LightningWeb.Components.Modal do
     <div
       id={@id}
       phx-mounted={@show && show_modal(@id)}
-      phx-on-close={hide_modal(@id)}
+      phx-on-close={hide_modal(@on_close, @id)}
       phx-hook="ModalHook"
       class={"#{@position} z-50 hidden"}
       {@rest}
@@ -43,6 +44,11 @@ defmodule LightningWeb.Components.Modal do
         id={"#{@id}-bg"}
         class="fixed inset-0 bg-black bg-opacity-60 transition-opacity"
         aria-hidden="true"
+        phx-click={
+          @close_on_click_away &&
+            hide_modal(@on_close, @id)
+            |> push_modal_closed(@id, @target)
+        }
       />
       <div
         class="fixed inset-0 overflow-y-auto sm:py-2"
@@ -57,9 +63,17 @@ defmodule LightningWeb.Components.Modal do
             <.focus_wrap
               id={"#{@id}-container"}
               phx-mounted={@show && show_modal(@on_open, @id)}
-              phx-window-keydown={@close_on_keydown && hide_modal(@on_close, @id)}
+              phx-window-keydown={
+                @close_on_keydown &&
+                  hide_modal(@on_close, @id)
+                  |> push_modal_closed(@id, @target)
+              }
               phx-key="escape"
-              phx-click-away={@close_on_click_away && hide_modal(@on_close, @id)}
+              phx-click-away={
+                @close_on_click_away &&
+                  hide_modal(@on_close, @id)
+                  |> push_modal_closed(@id, @target)
+              }
               class={[
                 "hidden relative rounded-xl transition",
                 @with_frame &&
@@ -150,4 +164,14 @@ defmodule LightningWeb.Components.Modal do
     |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
     |> JS.pop_focus()
   end
+
+  defp push_modal_closed(js, modal_id, nil) do
+    js
+    |> JS.push("modal_closed", value: %{id: modal_id})
+  end
+
+  defp push_modal_closed(js, modal_id, target) do
+    js
+    |> JS.push("modal_closed", value: %{id: modal_id}, target: target)
+  end
 end
diff --git a/lib/lightning_web/live/dashboard_live/components.ex b/lib/lightning_web/live/dashboard_live/components.ex
index 0de4888fef..e8719e81d4 100644
--- a/lib/lightning_web/live/dashboard_live/components.ex
+++ b/lib/lightning_web/live/dashboard_live/components.ex
@@ -3,18 +3,102 @@ defmodule LightningWeb.DashboardLive.Components do
 
   import PetalComponents.Table
 
-  alias Lightning.Accounts.User
-  alias Lightning.Projects.Project
+  def welcome_banner(assigns) do
+    ~H"""
+    <div class="pb-6">
+      <div class="flex justify-between items-center pt-6">
+        <h1 class="text-2xl font-medium">
+          Good day, <%= @user.first_name %>!
+        </h1>
+        <button
+          phx-click="toggle-welcome-banner"
+          phx-target={@target}
+          class="text-gray-500 focus:outline-none"
+        >
+          <span class="text-lg">
+            <.icon name={"hero-chevron-#{if @collapsed, do: "down", else: "up"}"} />
+          </span>
+        </button>
+      </div>
+
+      <div
+        id="welcome-banner-content"
+        class={[
+          "hover:overflow-visible transition-all duration-500 ease-in-out overflow-hidden",
+          banner_content_classes(@collapsed)
+        ]}
+      >
+        <p class="mb-6 mt-4">
+          Here are some resources to help you get started with OpenFn
+        </p>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          <%= for resource <- @resources do %>
+            <.resource_card resource={resource} target={@target} />
+          <% end %>
+        </div>
+      </div>
+
+      <hr class="border-t border-gray-300 mt-4" />
+      <.arcade_modal
+        :if={@selected_resource}
+        resource={@selected_resource}
+        target={@id}
+      />
+    </div>
+    """
+  end
+
+  defp resource_card(assigns) do
+    ~H"""
+    <button
+      type="button"
+      phx-click="select-arcade-resource"
+      phx-target={@target}
+      phx-value-resource={@resource.id}
+      class="relative flex items-end h-[150px] bg-gradient-to-r from-blue-400 to-purple-500 text-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 p-4 text-left"
+    >
+      <h2 class="text-lg font-semibold absolute bottom-4 left-4">
+        <%= @resource.title %>
+      </h2>
+    </button>
+    """
+  end
+
+  defp arcade_modal(assigns) do
+    ~H"""
+    <div class="text-xs">
+      <.modal
+        id={"arcade-modal-#{@resource.id}"}
+        target={"##{@target}"}
+        with_frame={false}
+        show={true}
+        width="w-5/6"
+      >
+        <div class="relative h-0 w-full pb-[60%]">
+          <iframe
+            src={@resource.link}
+            title={@resource.title}
+            frameborder="0"
+            loading="lazy"
+            webkitallowfullscreen
+            mozallowfullscreen
+            allowfullscreen
+            allow="clipboard-write"
+            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;"
+          >
+          </iframe>
+        </div>
+      </.modal>
+    </div>
+    """
+  end
 
-  defp project_role(
-         %User{id: user_id} = _user,
-         %Project{project_users: project_users} = _project
-       ) do
-    project_users
-    |> Enum.find(fn pu -> pu.user_id == user_id end)
-    |> Map.get(:role)
-    |> Atom.to_string()
-    |> String.capitalize()
+  defp banner_content_classes(collapsed) do
+    case collapsed do
+      true -> "max-h-0"
+      false -> "max-h-[500px]"
+      nil -> "max-h-[500px]"
+    end
   end
 
   defp table_title(assigns) do
@@ -36,7 +120,7 @@ defmodule LightningWeb.DashboardLive.Components do
         projects_count: assigns.projects |> Enum.count(),
         empty?: assigns.projects |> Enum.empty?(),
         name_sort_icon: next_sort_icon[assigns.name_direction],
-        activity_sort_icon: next_sort_icon[assigns.activity_direction]
+        last_activity_sort_icon: next_sort_icon[assigns.last_activity_direction]
       )
 
     ~H"""
@@ -57,6 +141,7 @@ defmodule LightningWeb.DashboardLive.Components do
               <span
                 phx-click="sort"
                 phx-value-by="name"
+                phx-target={@target}
                 class="cursor-pointer align-middle ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible"
               >
                 <.icon name={@name_sort_icon} />
@@ -71,10 +156,11 @@ defmodule LightningWeb.DashboardLive.Components do
               Last Activity
               <span
                 phx-click="sort"
-                phx-value-by="activity"
+                phx-value-by="last_activity"
+                phx-target={@target}
                 class="cursor-pointer align-middle ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible"
               >
-                <.icon name={@activity_sort_icon} />
+                <.icon name={@last_activity_sort_icon} />
               </span>
             </div>
           </.th>
@@ -95,24 +181,30 @@ defmodule LightningWeb.DashboardLive.Components do
             </.link>
           </.td>
           <.td class="break-words max-w-[25rem]">
-            <%= project_role(@user, project) %>
+            <%= project.role
+            |> Atom.to_string()
+            |> String.capitalize() %>
           </.td>
           <.td class="break-words max-w-[10rem]">
-            <%= length(project.workflows) %>
+            <%= project.workflows_count %>
           </.td>
           <.td class="break-words max-w-[5rem]">
             <.link
               class="link"
               href={~p"/projects/#{project.id}/settings#collaboration"}
             >
-              <%= length(project.project_users) %>
+              <%= project.collaborators_count %>
             </.link>
           </.td>
           <.td>
-            <%= Lightning.Helpers.format_date(
-              project.updated_at,
-              "%d/%b/%Y %H:%M:%S"
-            ) %>
+            <%= if project.last_activity do %>
+              <%= Lightning.Helpers.format_date(
+                project.last_activity,
+                "%d/%b/%Y %H:%M:%S"
+              ) %>
+            <% else %>
+              No activity
+            <% end %>
           </.td>
           <.td class="text-right">
             <.link
diff --git a/lib/lightning_web/live/dashboard_live/index.ex b/lib/lightning_web/live/dashboard_live/index.ex
index e8b2751a4e..da1010c364 100644
--- a/lib/lightning_web/live/dashboard_live/index.ex
+++ b/lib/lightning_web/live/dashboard_live/index.ex
@@ -1,134 +1,14 @@
 defmodule LightningWeb.DashboardLive.Index do
   use LightningWeb, :live_view
 
-  import LightningWeb.DashboardLive.Components
-
-  alias Lightning.Accounts
-  alias Lightning.Accounts.User
-  alias Lightning.Projects
-
   require Logger
 
-  @arcade_resources [
-    %{
-      id: 1,
-      title: "Getting Started with OpenFn",
-      link:
-        "https://demo.arcade.software/xmGSUuZ1Ovd9WeHaTLle?embed&embed_mobile=inline&embed_desktop=inline&show_copy_link=true"
-    },
-    %{
-      id: 2,
-      title: "Creating your first workflow",
-      link:
-        "https://demo.arcade.software/JzPHX0mUGTkPgAUoctHy?embed&embed_mobile=inline&embed_desktop=inline&show_copy_link=true"
-    },
-    %{
-      id: 3,
-      title: "How to use the IDE",
-      link:
-        "https://demo.arcade.software/L3jtNbBEdMJHtY1Z1PFk?embed&embed_mobile=inline&embed_desktop=inline&show_copy_link=true"
-    },
-    %{
-      id: 4,
-      title: "Managing project history",
-      link:
-        "https://demo.arcade.software/JLR25gjZdm3NlasAIrZ5?embed&embed_mobile=inline&embed_desktop=inline&show_copy_link=true"
-    }
-  ]
-
   on_mount {LightningWeb.Hooks, :project_scope}
+  on_mount {LightningWeb.Hooks, :assign_projects}
 
   @impl true
   def mount(_params, _session, socket) do
-    welcome_collapsed =
-      Accounts.get_preference(
-        socket.assigns.current_user,
-        "welcome.collapsed"
-      )
-
-    {:ok,
-     socket
-     |> assign_new(:projects, fn ->
-       projects_for_user(socket.assigns.current_user)
-     end)
-     |> assign(
-       arcade_resources: @arcade_resources,
-       selected_arcade_resource: nil,
-       welcome_collapsed: welcome_collapsed,
-       active_menu_item: :projects,
-       name_sort_direction: :asc,
-       activity_sort_direction: :asc
-     )}
-  end
-
-  @impl true
-  def handle_params(_params, _url, socket) do
-    {:noreply, assign(socket, page_title: "Projects")}
-  end
-
-  @impl true
-  def handle_event("sort", %{"by" => field}, socket) do
-    sort_key = String.to_atom("#{field}_sort_direction")
-    sort_direction = Map.get(socket.assigns, sort_key, :asc)
-    new_sort_direction = switch_sort_direction(sort_direction)
-
-    order_column = map_sort_field_to_column(field)
-
-    projects =
-      projects_for_user(socket.assigns.current_user,
-        order_by: [{new_sort_direction, order_column}]
-      )
-
-    socket =
-      socket
-      |> assign(:projects, projects)
-      |> assign(sort_key, new_sort_direction)
-
-    {:noreply, socket}
-  end
-
-  def handle_event(
-        "select-arcade-resource",
-        %{"resource" => resource_id},
-        socket
-      ) do
-    resource =
-      Enum.find(socket.assigns.arcade_resources, fn resource ->
-        resource.id == String.to_integer(resource_id)
-      end)
-
-    {:noreply, assign(socket, selected_arcade_resource: resource)}
-  end
-
-  def handle_event("toggle-welcome-banner", _params, socket) do
-    welcome_collapsed = !socket.assigns.welcome_collapsed
-
-    Accounts.update_user_preference(
-      socket.assigns.current_user,
-      "welcome.collapsed",
-      welcome_collapsed
-    )
-    |> case do
-      {:ok, _user} ->
-        {:noreply, assign(socket, welcome_collapsed: welcome_collapsed)}
-
-      {:error, reason} ->
-        Logger.error("Couldn't update user preferences: #{inspect(reason)}")
-        {:noreply, socket}
-    end
-  end
-
-  defp switch_sort_direction(:asc), do: :desc
-  defp switch_sort_direction(:desc), do: :asc
-
-  defp map_sort_field_to_column("name"), do: :name
-  defp map_sort_field_to_column("activity"), do: :updated_at
-
-  defp projects_for_user(%User{} = user, opts \\ []) do
-    include = Keyword.get(opts, :include, [:project_users, :workflows])
-    order_by = Keyword.get(opts, :order_by, asc: :name)
-
-    Projects.get_projects_for_user(user, include: include, order_by: order_by)
+    {:ok, assign(socket, page_title: "Projects", active_menu_item: :projects)}
   end
 
   @impl true
@@ -143,42 +23,17 @@ defmodule LightningWeb.DashboardLive.Index do
 
       <LayoutComponents.centered>
         <div class="w-full">
-          <.welcome_banner
+          <.live_component
+            id="projects-dashboard-welcome-section"
+            module={LightningWeb.DashboardLive.WelcomeSection}
             current_user={@current_user}
-            resources={@arcade_resources}
-            collapsed={@welcome_collapsed}
-            selected_resource={@selected_arcade_resource}
           />
 
-          <.user_projects_table
-            projects={@projects}
-            user={@current_user}
-            name_direction={@name_sort_direction}
-            activity_direction={@activity_sort_direction}
-          >
-            <:empty_state>
-              <button
-                type="button"
-                id="open-create-project-modal-big-button"
-                phx-click={show_modal("create-project-modal")}
-                class="relative block w-full rounded-lg border-2 border-dashed p-4 text-center hover:border-gray-400"
-              >
-                <Heroicons.plus_circle class="mx-auto w-12 h-12 text-secondary-400" />
-                <span class="mt-2 block text-xs font-semibold text-secondary-600">
-                  No projects found. Create a new one.
-                </span>
-              </button>
-            </:empty_state>
-            <:create_project_button>
-              <.button
-                id="open-create-project-modal-button"
-                phx-click={show_modal("create-project-modal")}
-                class="w-full rounded-md"
-              >
-                Create project
-              </.button>
-            </:create_project_button>
-          </.user_projects_table>
+          <.live_component
+            id="user-projects-section"
+            module={LightningWeb.DashboardLive.UserProjectsSection}
+            current_user={@current_user}
+          />
 
           <.live_component
             id="create-project-modal"
@@ -191,100 +46,4 @@ defmodule LightningWeb.DashboardLive.Index do
     </LayoutComponents.page_content>
     """
   end
-
-  def welcome_banner(assigns) do
-    ~H"""
-    <div class="rounded-lg pb-6">
-      <div class="flex justify-between items-center pt-6">
-        <h1 class="text-2xl font-medium">
-          Good day, <%= @current_user.first_name %>!
-        </h1>
-        <button
-          phx-click="toggle-welcome-banner"
-          class="text-gray-500 focus:outline-none"
-        >
-          <span class="text-lg">
-            <.icon name={"hero-chevron-#{if @collapsed, do: "down", else: "up"}"} />
-          </span>
-        </button>
-      </div>
-
-      <div
-        id="welcome-banner-content"
-        class={[
-          "transition-all duration-500 ease-in-out overflow-hidden hover:overflow-visible",
-          banner_content_classes(@collapsed)
-        ]}
-      >
-        <p class="mb-6 mt-4">
-          Here are some resources to help you get started with OpenFn
-        </p>
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-          <%= for resource <- @resources do %>
-            <.resource_card resource={resource} />
-          <% end %>
-        </div>
-      </div>
-
-      <hr class="border-t border-gray-300 mt-4" />
-      <.arcade_modal :if={@selected_resource} resource={@selected_resource} />
-    </div>
-    """
-  end
-
-  defp banner_content_classes(collapsed) do
-    case collapsed do
-      true -> "max-h-0"
-      false -> "max-h-[500px]"
-      nil -> "max-h-[500px]"
-    end
-  end
-
-  def resource_card(assigns) do
-    ~H"""
-    <button
-      type="button"
-      phx-click="select-arcade-resource"
-      phx-value-resource={@resource.id}
-      class={[
-        "relative flex items-end h-[150px] p-4 text-left",
-        "bg-gradient-to-r from-blue-400 to-purple-500",
-        "text-white rounded-lg shadow-sm hover:shadow-md",
-        "transition-shadow duration-300"
-      ]}
-    >
-      <h2 class="text-lg font-semibold absolute bottom-4 left-4">
-        <%= @resource.title %>
-      </h2>
-    </button>
-    """
-  end
-
-  def arcade_modal(assigns) do
-    ~H"""
-    <div class="text-xs">
-      <.modal
-        id={"arcade-modal-#{@resource.id}"}
-        with_frame={false}
-        show={true}
-        width="w-5/6"
-      >
-        <div style="position: relative; padding-bottom: calc(54.43121693121693% + 41px); height: 0; width: 100%;">
-          <iframe
-            src={@resource.link}
-            title={@resource.title}
-            frameborder="0"
-            loading="lazy"
-            webkitallowfullscreen
-            mozallowfullscreen
-            allowfullscreen
-            allow="clipboard-write"
-            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;"
-          >
-          </iframe>
-        </div>
-      </.modal>
-    </div>
-    """
-  end
 end
diff --git a/lib/lightning_web/live/dashboard_live/user_projects_section.ex b/lib/lightning_web/live/dashboard_live/user_projects_section.ex
new file mode 100644
index 0000000000..c2b31b7f06
--- /dev/null
+++ b/lib/lightning_web/live/dashboard_live/user_projects_section.ex
@@ -0,0 +1,90 @@
+defmodule LightningWeb.DashboardLive.UserProjectsSection do
+  use LightningWeb, :live_component
+
+  import LightningWeb.DashboardLive.Components
+
+  alias Lightning.Accounts.User
+  alias Lightning.Projects
+
+  require Logger
+
+  @impl true
+  def update(assigns, socket) do
+    projects = projects_for_user(assigns.current_user)
+
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign(:projects, projects)
+     |> assign(:name_sort_direction, :asc)
+     |> assign(:last_activity_sort_direction, :asc)}
+  end
+
+  @impl true
+  def handle_event("sort", %{"by" => field}, socket) do
+    sort_key = String.to_atom("#{field}_sort_direction")
+    order_column = String.to_atom(field)
+
+    sort_direction =
+      socket.assigns
+      |> Map.get(sort_key, :asc)
+      |> switch_sort_direction()
+
+    projects =
+      projects_for_user(socket.assigns.current_user,
+        order_by: {sort_direction, order_column}
+      )
+
+    {:noreply,
+     socket
+     |> assign(:projects, projects)
+     |> assign(sort_key, sort_direction)}
+  end
+
+  defp switch_sort_direction(:asc), do: :desc
+  defp switch_sort_direction(:desc), do: :asc
+
+  defp projects_for_user(%User{} = user, opts \\ []) do
+    order_by = Keyword.get(opts, :order_by, {:asc, :name})
+
+    Projects.get_projects_overview(user, order_by: order_by)
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div id={@id}>
+      <.user_projects_table
+        projects={@projects}
+        user={@current_user}
+        target={@myself}
+        name_direction={@name_sort_direction}
+        last_activity_direction={@last_activity_sort_direction}
+      >
+        <:empty_state>
+          <button
+            type="button"
+            id="open-create-project-modal-big-button"
+            phx-click={show_modal("create-project-modal")}
+            class="relative block w-full rounded-lg border-2 border-dashed p-4 text-center hover:border-gray-400"
+          >
+            <Heroicons.plus_circle class="mx-auto w-12 h-12 text-secondary-400" />
+            <span class="mt-2 block text-xs font-semibold text-secondary-600">
+              No projects found. Create a new one.
+            </span>
+          </button>
+        </:empty_state>
+        <:create_project_button>
+          <.button
+            id="open-create-project-modal-button"
+            phx-click={show_modal("create-project-modal")}
+            class="w-full rounded-md"
+          >
+            Create project
+          </.button>
+        </:create_project_button>
+      </.user_projects_table>
+    </div>
+    """
+  end
+end
diff --git a/lib/lightning_web/live/dashboard_live/welcome_section.ex b/lib/lightning_web/live/dashboard_live/welcome_section.ex
new file mode 100644
index 0000000000..f7fbc998d0
--- /dev/null
+++ b/lib/lightning_web/live/dashboard_live/welcome_section.ex
@@ -0,0 +1,104 @@
+defmodule LightningWeb.DashboardLive.WelcomeSection do
+  use LightningWeb, :live_component
+
+  import LightningWeb.DashboardLive.Components
+
+  alias Lightning.Accounts
+
+  require Logger
+
+  @arcade_resources [
+    %{
+      id: 1,
+      title: "Getting Started with OpenFn",
+      link:
+        "https://demo.arcade.software/xmGSUuZ1Ovd9WeHaTLle?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true"
+    },
+    %{
+      id: 2,
+      title: "Creating your first workflow",
+      link:
+        "https://demo.arcade.software/JzPHX0mUGTkPgAUoctHy?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true"
+    },
+    %{
+      id: 3,
+      title: "How to use the IDE",
+      link:
+        "https://demo.arcade.software/L3jtNbBEdMJHtY1Z1PFk?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true"
+    },
+    %{
+      id: 4,
+      title: "Managing project history",
+      link:
+        "https://demo.arcade.software/JLR25gjZdm3NlasAIrZ5?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true"
+    }
+  ]
+
+  @impl true
+  def update(assigns, socket) do
+    welcome_collapsed =
+      Accounts.get_preference(
+        assigns.current_user,
+        "welcome.collapsed"
+      )
+
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign(arcade_resources: @arcade_resources)
+     |> assign(selected_arcade_resource: nil)
+     |> assign(welcome_collapsed: welcome_collapsed)}
+  end
+
+  @impl true
+  def handle_event(
+        "select-arcade-resource",
+        %{"resource" => resource_id},
+        socket
+      ) do
+    resource =
+      Enum.find(socket.assigns.arcade_resources, fn resource ->
+        resource.id == String.to_integer(resource_id)
+      end)
+
+    {:noreply, assign(socket, selected_arcade_resource: resource)}
+  end
+
+  def handle_event("toggle-welcome-banner", _params, socket) do
+    welcome_collapsed = !socket.assigns.welcome_collapsed
+
+    Accounts.update_user_preference(
+      socket.assigns.current_user,
+      "welcome.collapsed",
+      welcome_collapsed
+    )
+    |> case do
+      {:ok, _user} ->
+        {:noreply, assign(socket, welcome_collapsed: welcome_collapsed)}
+
+      {:error, reason} ->
+        Logger.error("Couldn't update user preferences: #{inspect(reason)}")
+        {:noreply, socket}
+    end
+  end
+
+  def handle_event("modal_closed", _params, socket) do
+    {:noreply, assign(socket, selected_arcade_resource: nil)}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div id={@id}>
+      <.welcome_banner
+        id={@id}
+        user={@current_user}
+        resources={@arcade_resources}
+        target={@myself}
+        collapsed={@welcome_collapsed}
+        selected_resource={@selected_arcade_resource}
+      />
+    </div>
+    """
+  end
+end
diff --git a/test/lightning/projects_test.exs b/test/lightning/projects_test.exs
index c1776c067c..0991b1a141 100644
--- a/test/lightning/projects_test.exs
+++ b/test/lightning/projects_test.exs
@@ -12,6 +12,7 @@ defmodule Lightning.ProjectsTest do
   alias Lightning.Invocation.Dataclip
   alias Lightning.Projects
   alias Lightning.Projects.Project
+  alias Lightning.Projects.ProjectOverviewRow
   alias Lightning.Projects.ProjectUser
   alias Swoosh.Email
 
@@ -1686,6 +1687,200 @@ defmodule Lightning.ProjectsTest do
     end
   end
 
+  describe "get_projects_overview/2" do
+    test "returns an empty list when the user has no projects" do
+      user = insert(:user)
+
+      assert Projects.get_projects_overview(user) == []
+    end
+
+    test "returns projects overview with workflows and collaborators count" do
+      user = insert(:user)
+      other_user = insert(:user)
+
+      project =
+        %{id: project_id} =
+        insert(:project, name: "Project A", project_users: [%{user_id: user.id}])
+
+      insert(:simple_workflow, project: project)
+      insert(:simple_workflow, project: project)
+
+      insert(:project,
+        name: "Project B",
+        project_users: [%{user_id: other_user.id}]
+      )
+
+      result = Projects.get_projects_overview(user)
+
+      assert length(result) == 1
+
+      [
+        %ProjectOverviewRow{
+          id: ^project_id,
+          name: "Project A",
+          workflows_count: 2,
+          collaborators_count: 1
+        }
+      ] = result
+    end
+
+    test "orders projects by name ascending by default" do
+      user = insert(:user)
+
+      %{id: project_a_id} =
+        insert(:project, name: "Project A", project_users: [%{user_id: user.id}])
+
+      %{id: project_b_id} =
+        insert(:project, name: "Project B", project_users: [%{user_id: user.id}])
+
+      result = Projects.get_projects_overview(user)
+
+      assert [
+               %ProjectOverviewRow{id: ^project_a_id, name: "Project A"},
+               %ProjectOverviewRow{id: ^project_b_id, name: "Project B"}
+             ] = result
+    end
+
+    test "orders projects by last_activity (updated_at of workflows) descending when specified" do
+      user = insert(:user)
+
+      project_a =
+        %{id: project_a_id} =
+        insert(:project, name: "Project A", project_users: [%{user_id: user.id}])
+
+      project_b =
+        %{id: project_b_id} =
+        insert(:project, name: "Project B", project_users: [%{user_id: user.id}])
+
+      insert(:simple_workflow,
+        project: project_a,
+        updated_at: ~N[2023-10-05 00:00:00]
+      )
+
+      insert(:simple_workflow,
+        project: project_b,
+        updated_at: ~N[2023-10-10 00:00:00]
+      )
+
+      result =
+        Projects.get_projects_overview(user, order_by: {:desc, :last_activity})
+
+      assert [
+               %ProjectOverviewRow{id: ^project_b_id, name: "Project B"},
+               %ProjectOverviewRow{id: ^project_a_id, name: "Project A"}
+             ] = result
+    end
+
+    test "orders projects by last_activity ascending when specified" do
+      user = insert(:user)
+
+      project_a =
+        %{id: project_a_id} =
+        insert(:project, name: "Project A", project_users: [%{user_id: user.id}])
+
+      project_b =
+        %{id: project_b_id} =
+        insert(:project, name: "Project B", project_users: [%{user_id: user.id}])
+
+      insert(:simple_workflow,
+        project: project_a,
+        updated_at: ~N[2023-10-05 00:00:00]
+      )
+
+      insert(:simple_workflow,
+        project: project_b,
+        updated_at: ~N[2023-10-10 00:00:00]
+      )
+
+      result =
+        Projects.get_projects_overview(user, order_by: {:asc, :last_activity})
+
+      assert [
+               %ProjectOverviewRow{id: ^project_a_id, name: "Project A"},
+               %ProjectOverviewRow{id: ^project_b_id, name: "Project B"}
+             ] = result
+    end
+
+    test "returns project with no workflows or last activity" do
+      user = insert(:user)
+
+      %{id: project_id} =
+        insert(:project,
+          name: "Project No Workflow",
+          project_users: [%{user_id: user.id}]
+        )
+
+      result = Projects.get_projects_overview(user)
+
+      assert [
+               %ProjectOverviewRow{
+                 id: ^project_id,
+                 name: "Project No Workflow",
+                 workflows_count: 0,
+                 last_activity: nil
+               }
+             ] = result
+    end
+
+    test "returns correct collaborators count with multiple collaborators" do
+      user = insert(:user)
+      other_user = insert(:user)
+      third_user = insert(:user)
+
+      project =
+        insert(:project, name: "Project A", project_users: [%{user_id: user.id}])
+
+      insert(:project_user, project: project, user: other_user)
+      insert(:project_user, project: project, user: third_user)
+
+      result = Projects.get_projects_overview(user)
+
+      assert [
+               %ProjectOverviewRow{
+                 collaborators_count: 3
+               }
+             ] = result
+    end
+
+    test "returns correct role for the user" do
+      user = insert(:user)
+      other_user = insert(:user)
+
+      project =
+        insert(:project,
+          name: "Project A",
+          project_users: [%{user_id: user.id, role: :owner}]
+        )
+
+      insert(:project_user, project: project, user: other_user, role: :admin)
+
+      result = Projects.get_projects_overview(user)
+
+      assert [
+               %ProjectOverviewRow{
+                 role: :owner
+               }
+             ] = result
+    end
+
+    test "returns correct collaborators count with only one collaborator" do
+      user = insert(:user)
+
+      insert(:project,
+        name: "Solo Project",
+        project_users: [%{user_id: user.id}]
+      )
+
+      result = Projects.get_projects_overview(user)
+
+      assert [
+               %ProjectOverviewRow{
+                 collaborators_count: 1
+               }
+             ] = result
+    end
+  end
+
   @spec full_project_fixture(attrs :: Keyword.t()) :: %{optional(any) => any}
   def full_project_fixture(attrs \\ []) when is_list(attrs) do
     %{workflows: [workflow_1, workflow_2]} =
diff --git a/test/lightning_web/live/dashboard_live_test.exs b/test/lightning_web/live/dashboard_live_test.exs
index 7e53eace2f..04f0368daf 100644
--- a/test/lightning_web/live/dashboard_live_test.exs
+++ b/test/lightning_web/live/dashboard_live_test.exs
@@ -1,10 +1,14 @@
 defmodule LightningWeb.DashboardLiveTest do
-  require Ecto.Query
   use LightningWeb.ConnCase, async: true
 
+  import Ecto.Query
   import Phoenix.LiveViewTest
   import Lightning.Factories
 
+  alias Lightning.Workflows.Workflow
+
+  require Ecto.Query
+
   describe "Index" do
     setup :register_and_log_in_user
 
@@ -68,70 +72,32 @@ defmodule LightningWeb.DashboardLiveTest do
       project_3 =
         insert(:project, project_users: [%{user: build(:user), role: :owner}])
 
-      insert_list(2, :simple_workflow, project: project_1)
+      insert(:simple_workflow,
+        project: project_1,
+        updated_at: ~N[2023-10-01 12:00:00]
+      )
+
+      insert(:simple_workflow,
+        project: project_1,
+        updated_at: ~N[2023-10-02 12:00:00]
+      )
+
+      insert(:simple_workflow,
+        project: project_2,
+        updated_at: ~N[2023-10-05 12:00:00]
+      )
+
+      insert(:simple_workflow,
+        project: project_2,
+        updated_at: ~N[2023-10-03 12:00:00]
+      )
 
       {:ok, view, _html} = live(conn, ~p"/projects")
 
       refute has_element?(view, "#projects-table-row-#{project_3.id}")
 
-      [project_1, project_2]
-      |> Enum.each(fn project ->
-        assert has_element?(view, "tr#projects-table-row-#{project.id}")
-
-        assert has_element?(
-                 view,
-                 "tr#projects-table-row-#{project.id} > td:nth-child(1) > a[href='/projects/#{project.id}/w']",
-                 project.name
-               )
-
-        role =
-          project
-          |> Repo.preload(:project_users)
-          |> Map.get(:project_users)
-          |> Enum.find(fn pu -> pu.user_id == user.id end)
-          |> Map.get(:role)
-
-        assert has_element?(
-                 view,
-                 "tr#projects-table-row-#{project.id} > td:nth-child(2)",
-                 role
-                 |> Atom.to_string()
-                 |> String.capitalize()
-               )
-
-        workflow_count =
-          project
-          |> Repo.preload(:workflows)
-          |> Map.get(:workflows)
-          |> Enum.count()
-
-        assert has_element?(
-                 view,
-                 "tr#projects-table-row-#{project.id} > td:nth-child(3)",
-                 workflow_count |> to_string()
-               )
-
-        collaborator_count =
-          project
-          |> Repo.preload(:project_users)
-          |> Map.get(:project_users)
-          |> Enum.count()
-
-        assert has_element?(
-                 view,
-                 "tr#projects-table-row-#{project.id} > td:nth-child(4) > a[href='/projects/#{project.id}/settings#collaboration']",
-                 collaborator_count |> to_string()
-               )
-
-        formatted_date =
-          Lightning.Helpers.format_date(project.updated_at, "%d/%b/%Y %H:%M:%S")
-
-        assert has_element?(
-                 view,
-                 "tr#projects-table-row-#{project.id} > td:nth-child(5)",
-                 formatted_date
-               )
-      end)
+      assert_project_listed(view, project_1, user, ~N[2023-10-02 12:00:00])
+      assert_project_listed(view, project_2, user, ~N[2023-10-05 12:00:00])
     end
 
     test "projects list do not count deleted workflows", %{
@@ -141,15 +107,13 @@ defmodule LightningWeb.DashboardLiveTest do
       project = insert(:project, project_users: [%{user: user, role: :owner}])
 
       insert_list(2, :simple_workflow, project: project)
-
       insert(:workflow, deleted_at: Timex.now(), project: project)
 
-      import Ecto.Query
-
       workflows_count =
-        from(w in Ecto.assoc(project, :workflows),
-          or_where: not is_nil(w.deleted_at),
-          select: count(w)
+        from(w in Workflow,
+          where: w.project_id == ^project.id,
+          where: is_nil(w.deleted_at),
+          select: count(w.id)
         )
         |> Repo.one()
 
@@ -160,21 +124,20 @@ defmodule LightningWeb.DashboardLiveTest do
       assert has_element?(
                view,
                "tr#projects-table-row-#{project.id} > td:nth-child(3)",
-               "#{workflows_count - 1}"
+               "#{workflows_count}"
              )
     end
 
     test "User can create a new project", %{conn: conn, user: user} do
       {:ok, view, _html} = live(conn, ~p"/projects")
 
-      projects_before = Lightning.Projects.get_projects_for_user(user)
-      assert projects_before |> Enum.count() == 0
+      assert Enum.empty?(Lightning.Projects.get_projects_for_user(user))
 
       view
       |> form("#project-form",
         project: %{
           raw_name: "My Awesome Project",
-          description: "This is a really awesome project for testing purposes"
+          description: "This is a really awesome project"
         }
       )
       |> render_change()
@@ -185,30 +148,23 @@ defmodule LightningWeb.DashboardLiveTest do
       view |> form("#project-form") |> render_submit()
 
       projects_after = Lightning.Projects.get_projects_for_user(user)
-      assert projects_after |> Enum.count() == 1
+      assert Enum.count(projects_after) == 1
 
       project = List.first(projects_after)
 
       {:ok, view, _html} = live(conn, ~p"/projects")
-
-      assert has_element?(
-               view,
-               "tr#projects-table-row-#{project.id}"
-             )
+      assert has_element?(view, "tr#projects-table-row-#{project.id}")
     end
 
     test "When the user closes the modal without submitting the form, the project won't be created",
          %{conn: conn, user: user} do
       {:ok, view, _html} = live(conn, ~p"/projects")
 
-      projects_before = Lightning.Projects.get_projects_for_user(user)
-      assert projects_before |> Enum.count() == 0
-
       view
       |> form("#project-form",
         project: %{
           raw_name: "My Awesome Project",
-          description: "This is a really awesome project for testing purposes"
+          description: "This is a really awesome project"
         }
       )
       |> render_change()
@@ -216,7 +172,7 @@ defmodule LightningWeb.DashboardLiveTest do
       view |> element("#cancel-project-creation") |> render_click()
 
       projects_after = Lightning.Projects.get_projects_for_user(user)
-      assert projects_after |> Enum.count() == 0
+      assert Enum.count(projects_after) == 0
     end
 
     test "Users can sort the project table by name", %{conn: conn, user: user} do
@@ -227,14 +183,11 @@ defmodule LightningWeb.DashboardLiveTest do
 
       {:ok, view, _html} = live(conn, ~p"/projects")
 
-      # By default, projects are sorted by name ascending
       projects_sorted_by_name = get_sorted_projects_by_name(projects)
       html = render(view)
       project_names_from_html = extract_project_names_from_html(html)
-
       assert project_names_from_html == projects_sorted_by_name
 
-      # Click to sort by name descending
       view
       |> element("span[phx-click='sort'][phx-value-by='name']")
       |> render_click()
@@ -242,10 +195,8 @@ defmodule LightningWeb.DashboardLiveTest do
       projects_sorted_by_name_desc = get_sorted_projects_by_name(projects, :desc)
       html = render(view)
       project_names_from_html = extract_project_names_from_html(html)
-
       assert project_names_from_html == projects_sorted_by_name_desc
 
-      # Click again to sort by name ascending
       view
       |> element("span[phx-click='sort'][phx-value-by='name']")
       |> render_click()
@@ -253,7 +204,6 @@ defmodule LightningWeb.DashboardLiveTest do
       projects_sorted_by_name_asc = get_sorted_projects_by_name(projects, :asc)
       html = render(view)
       project_names_from_html = extract_project_names_from_html(html)
-
       assert project_names_from_html == projects_sorted_by_name_asc
     end
 
@@ -268,15 +218,8 @@ defmodule LightningWeb.DashboardLiveTest do
 
       {:ok, view, _html} = live(conn, ~p"/projects")
 
-      # By default, projects are sorted by last activity ascending
       projects_sorted_by_last_activity =
         get_sorted_projects_by_last_activity(projects)
-        |> Enum.map(fn date ->
-          Lightning.Helpers.format_date(
-            date,
-            "%d/%b/%Y %H:%M:%S"
-          )
-        end)
 
       html = render(view)
 
@@ -286,19 +229,12 @@ defmodule LightningWeb.DashboardLiveTest do
       assert project_last_activities_from_html ==
                projects_sorted_by_last_activity
 
-      # Click to sort by last activity descending
       view
-      |> element("span[phx-click='sort'][phx-value-by='activity']")
+      |> element("span[phx-click='sort'][phx-value-by='last_activity']")
       |> render_click()
 
       projects_sorted_by_last_activity_desc =
         get_sorted_projects_by_last_activity(projects, :desc)
-        |> Enum.map(fn date ->
-          Lightning.Helpers.format_date(
-            date,
-            "%d/%b/%Y %H:%M:%S"
-          )
-        end)
 
       html = render(view)
 
@@ -312,34 +248,34 @@ defmodule LightningWeb.DashboardLiveTest do
     test "Toggles the welcome banner", %{conn: conn, user: user} do
       {:ok, view, _html} = live(conn, ~p"/projects")
 
-      # Assert that the banner is initially expanded
-      assert view
-             |> has_element?("#welcome-banner-content[class~='max-h-[500px]']")
+      assert has_element?(
+               view,
+               "#welcome-banner-content[class~='max-h-[500px]']"
+             )
 
-      # Click to collapse the banner
       view
       |> element("button[phx-click='toggle-welcome-banner']")
       |> render_click()
 
-      # Assert that the banner is now collapsed
-      refute view
-             |> has_element?("#welcome-banner-content[class~='max-h-[500px]']")
+      refute has_element?(
+               view,
+               "#welcome-banner-content[class~='max-h-[500px]']"
+             )
 
-      assert view
-             |> has_element?("#welcome-banner-content[class~='max-h-0']")
+      assert has_element?(view, "#welcome-banner-content[class~='max-h-0']")
 
       assert Repo.reload(user)
              |> Map.get(:preferences)
              |> Map.get("welcome.collapsed")
 
-      # Click again to expand the banner back
       view
       |> element("button[phx-click='toggle-welcome-banner']")
       |> render_click()
 
-      # Assert that the banner is expanded again
-      assert view
-             |> has_element?("#welcome-banner-content[class~='max-h-[500px]']")
+      assert has_element?(
+               view,
+               "#welcome-banner-content[class~='max-h-[500px]']"
+             )
 
       refute Repo.reload(user)
              |> Map.get(:preferences)
@@ -355,40 +291,121 @@ defmodule LightningWeb.DashboardLiveTest do
       )
       |> render_click()
 
-      assert view |> has_element?("div#arcade-modal-1")
+      assert has_element?(view, "div#arcade-modal-1")
     end
   end
 
-  defp get_sorted_projects_by_name(projects, order \\ :asc) do
-    projects
-    |> Enum.sort_by(fn project -> project.name end, order)
-    |> Enum.map(& &1.name)
+  defp assert_project_listed(view, project, user, max_updated_at) do
+    assert has_element?(view, "tr#projects-table-row-#{project.id}")
+
+    assert has_element?(
+             view,
+             "tr#projects-table-row-#{project.id} > td:nth-child(1) > a[href='/projects/#{project.id}/w']",
+             project.name
+           )
+
+    role =
+      project
+      |> Repo.preload(:project_users)
+      |> Map.get(:project_users)
+      |> Enum.find(fn pu -> pu.user_id == user.id end)
+      |> Map.get(:role)
+
+    assert has_element?(
+             view,
+             "tr#projects-table-row-#{project.id} > td:nth-child(2)",
+             role
+             |> Atom.to_string()
+             |> String.capitalize()
+           )
+
+    workflow_count =
+      project
+      |> Repo.preload(:workflows)
+      |> Map.get(:workflows)
+      |> Enum.count()
+
+    assert has_element?(
+             view,
+             "tr#projects-table-row-#{project.id} > td:nth-child(3)",
+             workflow_count |> to_string()
+           )
+
+    collaborator_count =
+      project
+      |> Repo.preload(:project_users)
+      |> Map.get(:project_users)
+      |> Enum.count()
+
+    assert has_element?(
+             view,
+             "tr#projects-table-row-#{project.id} > td:nth-child(4) > a[href='/projects/#{project.id}/settings#collaboration']",
+             collaborator_count |> to_string()
+           )
+
+    formatted_date =
+      Lightning.Helpers.format_date(max_updated_at, "%d/%b/%Y %H:%M:%S")
+
+    assert has_element?(
+             view,
+             "tr#projects-table-row-#{project.id} > td:nth-child(5)",
+             formatted_date
+           )
   end
 
   defp get_sorted_projects_by_last_activity(projects, order \\ :asc) do
-    projects
-    |> Enum.sort_by(fn project -> project.updated_at end, order)
-    |> Enum.map(& &1.updated_at)
+    projects_with_workflows = Repo.preload(projects, :workflows)
+
+    projects_with_workflows
+    |> Enum.sort_by(
+      fn project ->
+        project
+        |> Map.get(:workflows)
+        |> Enum.map(& &1.updated_at)
+        |> Enum.max(fn -> nil end)
+      end,
+      order
+    )
+    |> Enum.map(fn project ->
+      last_activity =
+        project
+        |> Map.get(:workflows)
+        |> Enum.map(& &1.updated_at)
+        |> Enum.max(fn -> nil end)
+
+      if last_activity do
+        Lightning.Helpers.format_date(last_activity, "%d/%b/%Y %H:%M:%S")
+      else
+        "No activity"
+      end
+    end)
   end
 
-  defp extract_project_names_from_html(html) do
+  defp extract_project_last_activities_from_html(html) do
     html
     |> Floki.parse_document!()
     |> Floki.find("#projects-table tr")
     |> Enum.map(fn tr ->
-      Floki.find(tr, "td:nth-child(1) a")
+      tr
+      |> Floki.find("td:nth-child(5)")
       |> Floki.text()
       |> String.trim()
     end)
     |> Enum.reject(&(&1 == ""))
   end
 
-  defp extract_project_last_activities_from_html(html) do
+  defp get_sorted_projects_by_name(projects, order \\ :asc) do
+    projects
+    |> Enum.sort_by(fn project -> project.name end, order)
+    |> Enum.map(& &1.name)
+  end
+
+  defp extract_project_names_from_html(html) do
     html
     |> Floki.parse_document!()
     |> Floki.find("#projects-table tr")
     |> Enum.map(fn tr ->
-      Floki.find(tr, "td:nth-child(5)")
+      Floki.find(tr, "td:nth-child(1) a")
       |> Floki.text()
       |> String.trim()
     end)