Feature/fin 022 completed by IeuanZorander · Pull Request #101 · oleksandriia-it-team/finman

IeuanZorander · 2026-04-28T10:39:12Z

Title

feat(admin): implement UI tables for lookups data and admin sidebar

Type

Feature
Bug

Description

Implemented the requirements for task [FIN-022](UI tables for lookups data and sidebar).

Key changes:

Admin Sidebar: Created the AdminSidebar widget with navigation links (Countries, Currencies), application logo, and active state tracking. The sidebar is fully responsive and collapsible.
Reusable Lookup Tables: Built a highly reusable LookupTable component on top of the base UI tables merged in PR feat(table): add reusable table components for UI #97. It fully encapsulates pagination, skeleton loading, and empty state handling.
Dynamic Columns: Implemented a generic LookupColumnDef<T> approach for rendering table columns dynamically, eliminating code duplication between different lookup pages.
Lookup Pages: Added CountriesLookup and CurrenciesLookup pages using the new table architecture.
Data Formatting: Created specialized components for cell data, such as LookupStatusBadge, LookupCreatedByCell (with avatar/initials fallback), and formatted dates.

All acceptance scenarios (1-3) have been successfully fulfilled.

Media

Check list

Self-reviewed
Added unit tests
The code doesn't have new warnings and errors
Passed ESLint / Prettier checks

Addition

This PR extends the foundational table UI components introduced in feat(table) (#97).
Note on Architecture: The lookup tables were refactored to be heavily data-agnostic. By defining COLUMNS (via LookupColumnDef) in the feature components, the base LookupTable can now be seamlessly reused for any future dictionaries without rewriting the layout, skeleton, or state handling logic.

Summary by CodeRabbit

New Features
- Added admin lookup management interface for countries, currencies, and locales with browsing, selection, and delete capabilities.
- Added admin sidebar with navigation and collapsible menu.
- Added role-based access control requiring admin status for admin section access.
Improvements
- Enhanced authentication flow to ensure user data refresh completes before navigation.
- Improved sidebar styling with white and blue color variants.
- Added new UI table components and cells for structured data display.
Chores
- Updated lint script quote formatting.

…s/table feat(table): add reusable table components for UI

…-lookups

…idebar-and-lookups

…d-lookups' into feature/fin-022-parts/sidebar-and-lookups

…t branding

…consistency

… feature/fin-022-parts/sidebar-and-lookups # Conflicts: # src/app/(auth)/login/page.tsx # src/client/entities/profile/role-guard.tsx # src/client/shared/components/list-screen-handler/fin-list-screen-handler.tsx # src/common/enums/categories.enum.ts

…/sidebar-and-lookups # Conflicts: # src/app/(auth)/login/page.tsx # src/client/entities/operations/income-expense-card/card-styles-mappings.ts # src/client/entities/operations/income-expense-card/income-expense-card.tsx # src/client/features/regular-incomes-expenses/card-creation-form/regular-transaction.hook.tsx # src/client/features/regular-incomes-expenses/regular-incomes-expenses-screen.tsx # src/client/shared/components/form-screen-handler/fin-form-screen-handler.tsx # src/client/shared/schemas/regular-card-validation-schema.ts # src/client/shared/ui/ui-info-block/ui-info-block.tsx # src/common/domains/regular-entry/schema/regular-entry.schema.ts # src/server/entities/regular-entry/infrastructure/regular-entry.orm.ts

…ebar styles)

… navigation

…ser information display

…es lookups

… display user name

…mponent

…styling

…-lookups # Conflicts: # src/client/features/regular-incomes-expenses/regular-incomes-expenses-screen.tsx

…actor sidebar content

… improve layout

…Table component

coderabbitai · 2026-04-28T10:39:18Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c8778b82-21d1-40cd-884a-597c08f930ef

📥 Commits

Reviewing files that changed from the base of the PR and between fc3141c and f7a8b94.

📒 Files selected for processing (49)

package.json
src/app/(admin)/admin/lookups/countries/page.tsx
src/app/(admin)/admin/lookups/currencies/page.tsx
src/app/(admin)/admin/lookups/page.tsx
src/app/(admin)/layout.tsx
src/app/(auth)/login/page.tsx
src/app/(auth)/login/shared/login-form.ts
src/app/(profile)/profile/budget/(regular-operations)/layout.tsx
src/client/entities/lookups/lookup-column/lookup-column.model.ts
src/client/entities/lookups/lookup-created-by/lookup-created-by-cell.tsx
src/client/entities/lookups/lookup-created-by/lookup-created-by.model.ts
src/client/entities/lookups/lookup-created-by/lookup-created-by.util.ts
src/client/entities/lookups/lookup-page-header/lookup-page-header.tsx
src/client/entities/lookups/lookup-row-actions/lookup-row-actions.tsx
src/client/entities/lookups/lookup-status-badge/lookup-status-badge.tsx
src/client/entities/lookups/lookup-table/lookup-row-skeleton.tsx
src/client/entities/lookups/lookup-table/lookup-table-head.tsx
src/client/entities/lookups/lookup-table/lookup-table-row.tsx
src/client/entities/lookups/lookup-table/lookup-table.tsx
src/client/entities/profile/role-guard.tsx
src/client/features/admin/countries-lookup/countries-lookup.tsx
src/client/features/admin/currencies-lookup/currencies-lookup.tsx
src/client/features/admin/hooks/use-lookup-selection.hook.ts
src/client/features/regular-incomes-expenses/card-creation-form/cards-form-side-block/useful-tips-block/useful-tips-block.tsx
src/client/shared/models/admin-nav-item.model.ts
src/client/shared/services/user-information/models/user-infomation.model.ts
src/client/shared/svg/logo-inverse-svg.tsx
src/client/shared/svg/sidebar-countries-svg.tsx
src/client/shared/svg/sidebar-currencies-svg.tsx
src/client/shared/svg/sidebar-toggle-svg.tsx
src/client/shared/ui/ui-sidebar/styles/sidebar-menu-button-variant-mixin.scss
src/client/shared/ui/ui-sidebar/styles/sidebar-styles.scss
src/client/shared/ui/ui-sidebar/ui-sidebar-header-title.tsx
src/client/shared/ui/ui-sidebar/ui-sidebar.tsx
src/client/shared/ui/ui-table/ui-table-body.tsx
src/client/shared/ui/ui-table/ui-table-caption.tsx
src/client/shared/ui/ui-table/ui-table-cell.tsx
src/client/shared/ui/ui-table/ui-table-footer.tsx
src/client/shared/ui/ui-table/ui-table-head.tsx
src/client/shared/ui/ui-table/ui-table-header.tsx
src/client/shared/ui/ui-table/ui-table-row.tsx
src/client/shared/ui/ui-table/ui-table.tsx
src/client/shared/utils/lookup-date.util.tsx
src/client/widgets/admin-sidebar/admin-sidebar-content.tsx
src/client/widgets/admin-sidebar/admin-sidebar.tsx
src/client/widgets/profile-sidebar/profile-sidebar.tsx
src/client/widgets/shared/admin-routes.constant.ts
src/common/domains/regular-entry/schema/regular-entry.schema.ts
src/server/entities/user/infrastructure/user.orm.ts

📝 Walkthrough

Walkthrough

This PR introduces a comprehensive admin panel infrastructure with lookup table management for countries and currencies. It adds authentication-gated admin routes, lookup table UI components, sidebar navigation with styling variants, base table primitives, SVG icons, and updates the login flow to support asynchronous user refresh operations.

Changes

Cohort / File(s)	Summary
Admin Layout & Pages `src/app/(admin)/layout.tsx`, `src/app/(admin)/admin/lookups/page.tsx`, `src/app/(admin)/admin/lookups/countries/page.tsx`, `src/app/(admin)/admin/lookups/currencies/page.tsx`	New admin layout with `AuthGuard`, `RoleGuard`, and `AuthorizedUserProvider` wrapping a sidebar and main content area; lookup pages that render country and currency components or redirect to countries route.
Lookup Features `src/client/features/admin/countries-lookup/countries-lookup.tsx`, `src/client/features/admin/currencies-lookup/currencies-lookup.tsx`, `src/client/features/admin/hooks/use-lookup-selection.hook.ts`	New lookup management components for countries and currencies with pagination, row selection, and edit/delete action handlers; selection state hook using `Set<number>` for tracking selected row IDs.
Lookup Table Components `src/client/entities/lookups/lookup-table/lookup-table.tsx`, `src/client/entities/lookups/lookup-table/lookup-table-head.tsx`, `src/client/entities/lookups/lookup-table/lookup-table-row.tsx`, `src/client/entities/lookups/lookup-table/lookup-row-skeleton.tsx`	Generic lookup table with column definitions, pagination support, and integrated header/row/skeleton rendering; row component displays status badges, timestamps, creator info, and action buttons.
Lookup UI Utilities `src/client/entities/lookups/lookup-column/lookup-column.model.ts`, `src/client/entities/lookups/lookup-page-header/lookup-page-header.tsx`, `src/client/entities/lookups/lookup-row-actions/lookup-row-actions.tsx`, `src/client/entities/lookups/lookup-status-badge/lookup-status-badge.tsx`, `src/client/entities/lookups/lookup-created-by/*`	Type definitions and components for table columns, page headers with breadcrumbs/actions, row action popovers, status badges, and creator display cells with avatar support.
UI Table Primitives `src/client/shared/ui/ui-table/ui-table.tsx`, `src/client/shared/ui/ui-table/ui-table-header.tsx`, `src/client/shared/ui/ui-table/ui-table-body.tsx`, `src/client/shared/ui/ui-table/ui-table-row.tsx`, `src/client/shared/ui/ui-table/ui-table-head.tsx`, `src/client/shared/ui/ui-table/ui-table-cell.tsx`, `src/client/shared/ui/ui-table/ui-table-footer.tsx`, `src/client/shared/ui/ui-table/ui-table-caption.tsx`	HTML table element wrappers (`<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`, `<tfoot>`, `<caption>`) with fixed `data-slot` attributes, default Tailwind styling, and prop forwarding.
Sidebar Components & Styling `src/client/widgets/admin-sidebar/admin-sidebar.tsx`, `src/client/widgets/admin-sidebar/admin-sidebar-content.tsx`, `src/client/widgets/profile-sidebar/profile-sidebar.tsx`, `src/client/shared/ui/ui-sidebar/ui-sidebar.tsx`, `src/client/shared/ui/ui-sidebar/ui-sidebar-header-title.tsx`, `src/client/shared/ui/ui-sidebar/styles/sidebar-menu-button-variant-mixin.scss`, `src/client/shared/ui/ui-sidebar/styles/sidebar-styles.scss`	Admin sidebar with logo and route navigation; sidebar color variant support (`white` and `blue`) via `data-color-variant` attribute and SCSS theming; profile sidebar updated to use white variant.
SVG Components `src/client/shared/svg/logo-inverse-svg.tsx`, `src/client/shared/svg/sidebar-currencies-svg.tsx`, `src/client/shared/svg/sidebar-toggle-svg.tsx`	New SVG icon components with configurable dimensions, viewBox, and `SVGProps` spreading for extensibility.
Models & Utilities `src/client/shared/models/admin-nav-item.model.ts`, `src/client/shared/utils/lookup-date.util.tsx`, `src/client/entities/lookups/lookup-created-by/lookup-created-by.model.ts`, `src/client/entities/lookups/lookup-created-by/lookup-created-by.util.ts`	New `AdminNavItem` type for navigation structure; date formatting utility for lookup tables; `LookupCreatedBy` model and normalization utility.
Authentication & Guards `src/app/(auth)/login/page.tsx`, `src/app/(auth)/login/shared/login-form.ts`, `src/client/entities/profile/role-guard.tsx`, `src/client/shared/services/user-information/models/user-infomation.model.ts`	Login page now awaits async `refreshUser()` via updated `useSetupLogin` callback signature; new `RoleGuard` component for admin-only route protection with user role validation.
Navigation Constants & Config `src/client/widgets/shared/admin-routes.constant.ts`, `package.json`	New `adminNavRoutesWindow` constant defining admin sidebar navigation items for countries/currencies lookups; updated lint script to use double quotes for SCSS glob patterns.
Miscellaneous Updates `src/common/domains/regular-entry/schema/regular-entry.schema.ts`, `src/server/entities/user/infrastructure/user.orm.ts`, `src/client/features/regular-incomes-expenses/card-creation-form/cards-form-side-block/useful-tips-block/useful-tips-block.tsx`, `src/app/(profile)/profile/budget/(regular-operations)/layout.tsx`	Import reordering in schema and ORM files; removed explicit `size="lg"` from `UiInfoBlock` components; updated sidebar to use path alias imports.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 minutes

Possibly related issues

[FEATURE] FIN-022: UI tables for lookups data and sidebar #35: The lookup table components (LookupTable, LookupTableRow, LookupTableHead, related UiTable primitives) and admin sidebar (AdminSidebar, adminNavRoutesWindow) directly implement FIN-022 feature requirements for UI tables and sidebar navigation.

Possibly related PRs

Feature/fin 022 parts/sidebar and lookups #98: Contains identical code-level changes across multiple files (admin sidebar, lookups components/pages, ui-table/sidebar updates, and package.json lint quoting).
Feature/fin 021 parts/header #67: Introduces AuthorizedUserProvider and useAuthorizedUser hook that are directly consumed by the new admin layout and sidebar content components.
Feature/fin 042 #96: Provides FinListScreenHandler, FinLoader, and FinErrorWidget components used throughout the new lookup table and role guard implementations.

Suggested labels

Code review, feature, admin-panel, UI-components

Suggested reviewers

dmytroreshetylo
Qunitee

Poem

🐰 A rabbit hops through admin halls,
With lookups neat in ordered tables tall,
The sidebar glows in shades so blue,
While guards ensure who enters through—
A feature grand, both wide and deep,
For finman's treasure vault to keep! 🏛️

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feature/fin-022-completed

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Review rate limit: 0/1 reviews remaining, refill in 60 minutes.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

…idebar-and-lookups

… layout components

…h method signature

…ting and UI elements

…s/sidebar-and-lookups Feature/fin 022 parts/sidebar and lookups

dmytroreshetylo and others added 30 commits April 26, 2026 01:26

feat(table): add reusable table components for UI

0818290

Merge pull request #97 from oleksandriia-it-team/feature/fin-022-part…

b0718a7

…s/table feat(table): add reusable table components for UI

feat(fin-022): add admin sidebar, role guard and lookups tables

da2d00f

feat(table): add reusable table components for UI

a0235e8

feat(table): add reusable table components for UI

deeb9c4

fix(fin-022): update user.orm.ts and fix admin folders

9a89f59

fix(fin-022): new interface

ad5e093

Merge branch 'refs/heads/main' into feature/fin-022-parts/sidebar-and…

2fd3af0

…-lookups

refactor(fin-022): add admin sidebar, role guard and lookups tables UI

9cdc386

fix(fin-022): apply code review fixes for accessibility and code quality

8708515

Merge branch 'main' into feature/fin-022-completed

5ebef1f

Merge branch 'feature/fin-022-completed' into feature/fin-022-parts/s…

6c94e6f

…idebar-and-lookups

fix(fin-022): apply code review fixes

caf7b50

Merge remote-tracking branch 'origin/feature/fin-022-parts/sidebar-an…

bd74117

…d-lookups' into feature/fin-022-parts/sidebar-and-lookups

feat(fin-022): integrate pagination components from fin-021

2567604

fix(fin-022): apply review fixes

0a3a60d

feat(FIN-042): replace UiGraphic with LogoSvg component for consisten…

6bca472

…t branding

feat(FIN-042): update SVG components to use camelCase attributes for …

ee807f8

…consistency

feat(fin-022): add FinListScreenHandler component and associated props

18e7254

fix(fin-022): refine admin sidebar states and lookup UI

46469ac

fix(fin-022): fix build

1614aab

Merge branch 'main' into feature/fin-022-parts/sidebar-and-lookups

b227fd9

fix(fin-021): resolve build errors (types, schemas, mappings, and sid…

d19c58b

…ebar styles)

fix(fin-022): enhance admin sidebar with new UI components and lookup…

6ba045f

… navigation

feat(sidebar): enhance admin sidebar with new header components and u…

f7bf76d

…ser information display

fix(fin-022): add admin sidebar navigation for countries and currenci…

f42fe38

…es lookups

fix(fin-022): refactor admin sidebar to use new content component and…

7d5afae

… display user name

fix(role-guard): replace loading and error messages with FinLoader co…

3909dc3

…mponent

dmytroreshetylo and others added 6 commits April 28, 2026 02:14

feat(sidebar): update admin sidebar to display user name and enhance …

d3a09fd

…styling

Merge branch 'refs/heads/main' into feature/fin-022-parts/sidebar-and…

8eff3a0

…-lookups # Conflicts: # src/client/features/regular-incomes-expenses/regular-incomes-expenses-screen.tsx

fix(fin-022): implement admin navigation structure with icons and ref…

52e6b13

…actor sidebar content

fix(fin-022): refactor admin sidebar to include user profile link and…

4840656

… improve layout

feat(lookup): refactor countries and currencies lookups to use Lookup…

a3064e9

…Table component

Merge branch 'main' into feature/fin-022-completed

d9ae7e8

IeuanZorander requested a review from dmytroreshetylo April 28, 2026 10:42

IeuanZorander self-assigned this Apr 28, 2026

IeuanZorander and others added 6 commits April 28, 2026 13:54

Merge branch 'feature/fin-022-completed' into feature/fin-022-parts/s…

d47150c

…idebar-and-lookups

feat(lookup): update currency lookup headers to Ukrainian and improve…

6d8fc9a

… layout components

fix(fin-022): deleted commits

ce63771

feat(lookup): translate headers in countries lookup and update refres…

b72bb34

…h method signature

feat(lookup): enhance sidebar and lookup components with improved rou…

4113607

…ting and UI elements

Merge pull request #98 from oleksandriia-it-team/feature/fin-022-part…

f7a8b94

…s/sidebar-and-lookups Feature/fin 022 parts/sidebar and lookups

dmytroreshetylo approved these changes Apr 29, 2026

View reviewed changes

dmytroreshetylo merged commit a1b4706 into main Apr 29, 2026
4 of 5 checks passed

dmytroreshetylo linked an issue Apr 29, 2026 that may be closed by this pull request

[FEATURE] FIN-022: UI tables for lookups data and sidebar #35

Closed

coderabbitai Bot mentioned this pull request Apr 30, 2026

Feature/fin 023 #103

Merged

6 tasks

dmytroreshetylo deleted the feature/fin-022-completed branch May 4, 2026 15:01

This was referenced May 17, 2026

bug/fin 056 #127

Merged

Feature/fin 046 #125

Merged

bug/fin 045 #126

Merged

Feature/fin 048 #131

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feature/fin 022 completed#101

Feature/fin 022 completed#101
dmytroreshetylo merged 42 commits into
mainfrom
feature/fin-022-completed

IeuanZorander commented Apr 28, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 28, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

IeuanZorander commented Apr 28, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Title

Type

Description

Media

Check list

Addition

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

IeuanZorander commented Apr 28, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 28, 2026 •

edited

Loading