[FEAT] implement modules page projects modules by nazarli-shabnam · Pull Request #34 · Devlaner/devlane

nazarli-shabnam · 2026-03-17T03:53:55Z

This pull request primarily focuses on two areas: improving support for default module selection in the work item creation modal, and refactoring how CSS custom properties are used in class names throughout several UI components. Additionally, there are minor enhancements to API types.

Default module selection and modal improvements:

Added a defaultModuleId prop to CreateWorkItemModal and updated its state handling so that the module selection is properly initialized and reset when the modal opens or closes. This makes it easier to preselect a module when creating a new work item. [1] [2] [3] [4]

Refactoring CSS custom property usage:

Refactored multiple UI components (CoverImageModal.tsx, CreateProjectModal.tsx, CreateWorkItemModal.tsx) to use the --var CSS custom property syntax consistently in Tailwind class names, improving maintainability and consistency in styling. For example, changed bg-[var(--bg-surface-1)] to bg-(--bg-surface-1). [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17]

API type enhancements:

Added an optional lead_id property to the ModuleApiResponse type, allowing modules to optionally specify a lead.

Minor improvements:

Added a Unicode BOM at the start of some files, likely to ensure proper encoding and compatibility. [1] [2]

Copilot

Pull request overview

This PR upgrades the project Modules experience by moving modules toolbar controls into ProjectSectionHeader, adding list/gallery/timeline layouts with URL-driven search/layout params, and introducing a new “Create module” modal backed by a new moduleService.create() API call.

Changes:

Added moduleService.create() plus a CreateModulePayload type for module creation.
Reworked ModulesPage to render modules in list/gallery/timeline layouts and filter by ?search=... / ?layout=....
Enhanced ProjectSectionHeader with a project switcher dropdown, modules search/layout controls, and a CreateModuleModal integration.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.

File	Description
ui/src/services/moduleService.ts	Adds a typed `create()` method for the modules API.
ui/src/pages/ModulesPage.tsx	Adds search/layout-driven module rendering + new layouts.
ui/src/components/layout/PageHeader.tsx	Adds project dropdown, modules toolbar controls, and wires up module creation modal + URL params.
ui/src/components/CreateModuleModal.tsx	New modal UI for module creation (dates/status + lead/members UI).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

ui/src/pages/ModulesPage.tsx

ui/src/components/layout/PageHeader.tsx

ui/src/components/CreateModuleModal.tsx

+        description: description.trim() || undefined,
+        status: status || "backlog",
+        start_date: startDate || undefined,
+        target_date: endDate || undefined,


ui/src/components/CreateModuleModal.tsx

+    new Date(s).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });


ui/src/services/moduleService.ts

+  start_date?: string | null;
+  target_date?: string | null;


ui/src/pages/ModulesPage.tsx

+  const parse = (iso: string) => {
+    const d = new Date(iso);
+    return { m: d.getMonth(), d: d.getDate(), y: d.getFullYear() };
+  };


ui/src/components/workspace-views/ModuleFiltersPanel.tsx

…ters, Add work item)

ui/src/components/layout/PageHeader.tsx

…Month/Quarter)

martian56

Nice work!

Copilot

Pull request overview

This PR extends the UI’s “Modules” feature set by adding module detail routing and module-related client APIs, while also improving the module creation/work-item flows and standardizing Tailwind CSS variable usage across many components.

Changes:

Added module detail navigation (/projects/:projectId/modules/:moduleId) plus new module filtering/favorites state and UI panels.
Expanded moduleService with get, create, and listIssueIds helpers and extended ModuleApiResponse with optional lead_id.
Refactored many UI components to use Tailwind v4 CSS variable shorthand classes (e.g., text-(--txt-secondary)) and introduced a few new modals/utilities.

Reviewed changes

Copilot reviewed 80 out of 81 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
ui/src/services/moduleService.ts	Adds module `get/create` + module-issue listing helper and create payload typing.
ui/src/routes/index.tsx	Adds lazy-loaded `ModuleDetailPage` and a new nested `modules/:moduleId` route.
ui/src/routes/ProtectedRoute.tsx	Updates loading state styling; file now includes a BOM character at start.
ui/src/routes/InstanceAdminProtectedRoute.tsx	Updates loading state styling; file now includes a BOM character at start.
ui/src/pages/setup/InstanceSetupWelcomePage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/setup/InstanceSetupConfigurePage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/setup/InstanceSetupCompletePage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/instance-admin/InstanceAdminWorkspacePage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/instance-admin/InstanceAdminLoginPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/instance-admin/InstanceAdminImagePage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/instance-admin/InstanceAdminGeneralPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/instance-admin/InstanceAdminEmailPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/instance-admin/InstanceAdminCreateWorkspacePage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/instance-admin/InstanceAdminAuthenticationPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/instance-admin/InstanceAdminAIPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/WorkspaceHomePage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/ViewsPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/ProjectsListPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/ProjectHomePage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/PagesPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/NotificationsPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/LoginPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/IssueListPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/InviteSignUpPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/InviteAcceptPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/DraftsPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/CyclesPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/BoardPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/ArchivesPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/AnalyticsWorkItemsPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/pages/AnalyticsOverviewPage.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/lib/slug.ts	Adds `slugify` helper used for module URL slugs.
ui/src/hooks/useModuleFavorites.ts	Adds localStorage-backed module favorites hook.
ui/src/contexts/ModulesFilterContext.tsx	Introduces modules filter context + provider and hooks.
ui/src/components/workspace-views/index.ts	Exports the new `ModuleFiltersPanel`.
ui/src/components/workspace-views/WorkspaceViewsLayoutSelector.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/workspace-views/WorkspaceViewsFiltersShared.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/workspace-views/WorkspaceViewsFiltersPanel.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/workspace-views/WorkspaceViewsFiltersDropdown.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/workspace-views/WorkspaceViewsFiltersData.tsx	Tailwind CSS variable class refactor (icons/borders).
ui/src/components/workspace-views/WorkspaceViewsEllipsisMenu.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/workspace-views/WorkspaceViewsDisplayPanel.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/workspace-views/WorkspaceViewsDisplayDropdown.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/workspace-views/ModuleFiltersPanel.tsx	Adds modules-specific filter UI (status/lead/members/date presets).
ui/src/components/workspace-views/DateRangeModal.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/workspace-views/CreateViewModal.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/work-item/SelectParentModal.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/work-item/Dropdown.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/work-item/DatePickerTrigger.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/work-item/CommentEditor.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/ui/Skeleton.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/ui/Modal.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/ui/Input.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/ui/Card.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/ui/Button.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/ui/Badge.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/ui/Avatar.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/layout/InstanceAdminLayout.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/layout/Header.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/layout/AppShell.tsx	Wraps shell with `ModulesFilterProvider` and refactors Tailwind classes.
ui/src/components/instance-admin/CreateWorkspaceSetupHint.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/UploadImageModal.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/SetupGate.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/RootRedirect.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/ProjectNetworkSelect.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/ProjectLeadSelect.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/ProjectIconModal.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/CreateProjectModal.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/CoverImageModal.tsx	Tailwind CSS variable class refactor; file now includes a BOM character at start.
ui/src/components/AddExistingWorkItemModal.tsx	Adds modal to bulk-add existing work items to a module.
ui/src/api/types.ts	Extends `ModuleApiResponse` with optional `lead_id`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

ui/src/routes/ProtectedRoute.tsx

@@ -1,4 +1,4 @@
-import { Navigate, useLocation } from "react-router-dom";
+import { Navigate, useLocation } from "react-router-dom";


ui/src/components/layout/AppShell.tsx

    <WorkspaceViewsStateProvider>
-      <div className="flex h-screen flex-col overflow-hidden bg-[var(--bg-screen)] p-3">
-        <div className="flex min-h-0 flex-1 overflow-hidden rounded-[var(--radius-lg)] bg-[var(--bg-surface-1)] shadow-[var(--shadow-container)]">
-          <Sidebar />
-          <main className="flex min-h-0 flex-1 flex-col overflow-hidden bg-[var(--bg-canvas)]">
-            <PageHeader />
-            <div
-              className={`main-content-scroll min-h-0 flex-1 overflow-auto p-[var(--padding-page)] ${isViewsRoute ? "pl-0" : ""}`}
-            >
-              <Outlet />
-            </div>
-          </main>
+      <ModulesFilterProvider>
+        <div className="flex h-screen flex-col overflow-hidden bg-(--bg-screen) p-3">
+          <div className="flex min-h-0 flex-1 overflow-hidden rounded-(--radius-lg) bg-(--bg-surface-1) shadow-(--shadow-container)">
+            <Sidebar />
+            <main className="flex min-h-0 flex-1 flex-col overflow-hidden bg-(--bg-canvas)">
+              <PageHeader />
+              <div


ui/src/components/workspace-views/ModuleFiltersPanel.tsx

+          {filteredMembers.length > 8 && (
+            <button
+              type="button"
+              className="px-3 py-1.5 text-left text-sm text-(--brand-default) hover:underline"
+            >
+              View all
+            </button>
+          )}


ui/src/routes/index.tsx

+                      {
+                        path: "modules/:moduleId",
+                        element: (
+                          <Suspense fallback={<PageFallback />}>
+                            <ModuleDetailPage />
+                          </Suspense>
+                        ),
+                      },


ui/src/components/AddExistingWorkItemModal.tsx

+      await Promise.all(
+        Array.from(selectedIds).map((issueId) =>
+          moduleService.addIssue(workspaceSlug, projectId, moduleId, issueId),
+        ),
+      );


ui/src/services/moduleService.ts

+export interface CreateModulePayload {
+  name: string;
+  description?: string;
+  status?: string;
+  start_date?: string | null;
+  target_date?: string | null;
+}


nazarli-shabnam added 6 commits March 16, 2026 04:08

add stack view button and fix modules header

3319b85

fix header: add sort icon before 'Name' text

4f1e4f1

replace IconUser with save/bookmark icon in module row

628f344

fix: project buttons hover fixtures

b22c245

add moduleService.create in frontend, design improvements

10aa950

feat: implement search, add module button

50cfafb

nazarli-shabnam linked an issue Mar 17, 2026 that may be closed by this pull request

Implement Modules page (Projects > Modules) #31

Open

Copilot AI review requested due to automatic review settings March 17, 2026 03:53

nazarli-shabnam self-assigned this Mar 17, 2026

Copilot started reviewing on behalf of nazarli-shabnam March 17, 2026 03:54 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

feat: filter and in progress buttons

2707550

github-code-quality bot found potential problems Mar 17, 2026

View reviewed changes

nazarli-shabnam added 5 commits March 17, 2026 08:47

fix: linting and few errors i found in modules page

a468d46

fix: formatting

4cf137b

add moduleService.get and listIssueIds; add route modules/:moduleId

974ce88

Create ModuleDetailPage with empty state, work items, actions

f2e130e

add ModuleDetailHeader in PageHeader (breadcrumbs, view switcher, Fil…

09f7cac

…ters, Add work item)

github-code-quality bot found potential problems Mar 17, 2026

View reviewed changes

ui/src/components/layout/PageHeader.tsx Fixed Show fixed Hide fixed

ui/src/components/layout/PageHeader.tsx Fixed Show fixed Hide fixed

nazarli-shabnam added 3 commits March 17, 2026 09:22

Redesign ModulesPage timeline to Gantt (left table, right grid, Week/…

73b07aa

…Month/Quarter)

favourites implemented

9e149b2

fix: lints, formats

23da413

nazarli-shabnam marked this pull request as draft March 17, 2026 05:53

martian56 changed the title ~~31 implement modules page projects modules~~ [FEAT] implement modules page projects modules Mar 17, 2026

martian56 reviewed Mar 17, 2026

View reviewed changes

nazarli-shabnam added enhancement New feature or request UI UX labels Mar 17, 2026

nazarli-shabnam added 2 commits March 17, 2026 15:52

add existing work item modal

0da2044

store filters in state; use name-only module routes

767434d

nazarli-shabnam requested a review from Copilot March 17, 2026 12:29

Copilot started reviewing on behalf of nazarli-shabnam March 17, 2026 12:30 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEAT] implement modules page projects modules#34

[FEAT] implement modules page projects modules#34
nazarli-shabnam wants to merge 17 commits intomainfrom
31-implement-modules-page-projects-modules

nazarli-shabnam commented Mar 17, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

martian56 left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -1,4 +1,4 @@
		import { Navigate, useLocation } from "react-router-dom";
		import { Navigate, useLocation } from "react-router-dom";

Conversation

nazarli-shabnam commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

martian56 left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

nazarli-shabnam commented Mar 17, 2026 •

edited

Loading