Akash/top bar and user page revamp by asarode06 · Pull Request #75 · GTBitsOfGood/juno-dashboard

asarode06 · 2026-02-21T22:03:09Z

Added topbar with avatar and logout dropdown and modified sidebar to include logo.
Added account request section and improved user table.

Demo (I realized that i needed the account requests to be on top of the user table, so i changed that after):

akash_ticket_1_demo.mp4

netlify · 2026-02-21T22:03:14Z

✅ Deploy Preview for juno-dashboard ready!

Name	Link
🔨 Latest commit	`e6e73ef`
🔍 Latest deploy log	https://app.netlify.com/projects/juno-dashboard/deploys/699e0a85ba709d0008622daf
😎 Deploy Preview	https://deploy-preview-75--juno-dashboard.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

greptile-apps · 2026-02-21T22:06:22Z

Greptile Summary

This PR modernizes the dashboard UI by adding a top bar with user avatar and logout dropdown, refactoring the sidebar to include branding, and enhancing the users page with a pending account requests section.

Major changes:

Added TopBar component with page titles and UserDropdown for logout functionality
Created PendingAccountRequests component to approve/decline new user requests
Refactored sidebars (admin and project) to include logo and removed logout button
Enhanced user table with avatars, role filtering, and improved project display
Added @radix-ui/react-avatar dependency and supporting UI components

Issues found:

Multiple console.error statements left in production code (should be removed per checklist)
One hardcoded color text-red-400 instead of using tailwind config color
Account requests feature uses placeholder data (marked with "PLACEHOLDER" comment)

Confidence Score: 3/5

This PR is mostly safe but requires cleanup of console statements before merging
Score reduced due to multiple console.error statements in production code (violates PR checklist requirement) and one hardcoded color. The logic is sound and well-structured, but these issues need to be addressed.
Pay close attention to src/components/admin/PendingAccountRequests.tsx, src/lib/accountRequests.ts, and src/components/usertable/data-table.tsx - remove console.error statements

Important Files Changed

Filename	Overview
src/components/top-bar.tsx	added new top bar component with user dropdown and page titles
src/components/user-dropdown.tsx	added user dropdown with logout functionality; has hardcoded color issue
src/components/admin/PendingAccountRequests.tsx	added account request approval component; contains console.error statements
src/lib/accountRequests.ts	added account request logic with placeholder data; contains console.error
src/components/usertable/data-table.tsx	added role filtering and improved search; contains console.error

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User visits /admin/users] --> B[UsersPage Component]
    B --> C[UserDataTable]
    B --> D[PendingAccountRequests]
    
    C --> E[Display existing users with avatars]
    C --> F[Search & filter by name/role]
    C --> G[Add/Delete users]
    
    D --> H[Fetch account requests]
    H --> I{Has pending requests?}
    I -->|Yes| J[Display request cards]
    I -->|No| K[Show empty state]
    
    J --> L[Accept request]
    J --> M[Decline request]
    
    L --> N[Create user via createUserAction]
    N --> O{User type is ADMIN with project?}
    O -->|Yes| P[Create project via createProjectAction]
    P --> Q[Link user to project]
    O -->|No| R[Complete]
    Q --> R
    
    M --> S[Delete request via deleteAccountRequest]
    
    subgraph "Top Bar Component"
    T[TopBar] --> U[Page Title]
    T --> V[UserDropdown]
    V --> W[Logout Button]
    W --> X[Delete JWT & redirect]
    end

_{Last reviewed commit: 3e97d40}

greptile-apps

_{17 files reviewed, 6 comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2026-02-21T22:06:29Z

+
+  const deleteResult = await deleteAccountRequest(request.id);
+  if (!deleteResult.success) {
+    console.error(`Failed to delete account request ${request.id}: ${deleteResult.error}`);


console.error left in production code - remove or handle differently

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

greptile-apps · 2026-02-21T22:06:35Z

Additional Comments (1)

src/components/usertable/data-table.tsx
console.error left in production code - remove or handle differently

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

llam36

Please use react-query instead of plain useEffect to refetch data and trigger re-rendering more cleanly. Also, please use the Skeleton component to make the loading intention more explicit to future developers. Thanks a lot ;))

React-query sample code: https://github.com/GTBitsOfGood/juno-dashboard/blob/main/src/components/fileConfigTable/fileConfig-table.tsx

llam36 · 2026-02-24T03:37:58Z

+          {isLoading ? (
+            <div className="divide-y">
+              {[1, 2, 3].map((n) => (
+                <div
+                  key={n}
+                  className="flex items-center gap-4 px-6 py-4 animate-pulse"
+                >
+                  <div className="h-9 w-9 rounded-full bg-muted shrink-0" />
+                  <div className="flex-1 space-y-2">
+                    <div className="h-3 w-32 rounded bg-muted" />
+                    <div className="h-3 w-48 rounded bg-muted" />
+                  </div>
+                  <div className="h-6 w-16 rounded bg-muted" />
+                  <div className="h-8 w-20 rounded bg-muted" />
+                  <div className="h-8 w-20 rounded bg-muted" />
+                </div>
+              ))}
+            </div>


Maybe use shadcn Skeleton component here

llam36 · 2026-02-24T03:38:35Z

+  const [requests, setRequests] = useState<AccountRequest[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [processingIds, setProcessingIds] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    async function fetchRequests() {
+      try {
+        const result = await getAccountRequests();
+        if (result.success) {
+          setRequests(result.requests);
+        } else {
+          toast.error("Error", {
+            description: result.error ?? "Failed to fetch account requests.",
+          });
+        }
+      } catch (err) {
+        console.error("Failed to load account requests:", err);
+        toast.error("Error", {
+          description: "Failed to load account requests.",
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchRequests();
+  }, []);


Please use @tanstack/react-query to auto cache fetch results and auto trigger re-rendering after data mutation (see example in src/components/fileConfigTable/fileConfig-table.tsx)

llam36 · 2026-02-24T03:54:12Z

Please use @tanstack/react-query to auto cache fetch results and auto trigger re-rendering after data mutation (see example in src/components/fileConfigTable/fileConfig-table.tsx). This should help with displaying new users in the table after accepting their request

… users page

llam36

LGTM!

* added top bar with logo and avatar * modified user table * changed topbar/sidebar styling * added pending accounts request section * Moved account requests to top of page * updated bun lock * fixed lint errors * Update src/components/user-dropdown.tsx Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * Prettier fix * fix: styling touch up * fix: touch up styling for top and side bar * Added tanstack query for account req and added skeleton components in users page * Fixed prettier * Remove package-lock --------- Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Co-authored-by: Long Lam <llam36@gatech.edu>

@greptile-apps

* feat(api-keys): create table to list created keys * feat(api-keys): implement three-card grid layout on api keys page * styles(api-keys): ensure consistency of table with design * feat(api-keys): make api key reveal UI look like editor' * feat(api-keys): reveal api key with mocked data * feat(api-keys): refactor cards to use generic dark-card component * fix: remove redundant ui component dark-card * chore: move reveal card to forms * styles: ensure styling consistency across cards used in juno-dashboard * chore: fix lint errors * chore: fix lint errors * styles: fix code style errors * remove debug statements from actions * styles: align descriptions with column headers * styles: fix code style issues * fix: remove console.error from catch block * fix unused error var * Update src/components/forms/CreateAPIKeyForm.tsx Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * fix: missing curly bracket * fix: touch up styling * Akash/top bar and user page revamp (#75) * added top bar with logo and avatar * modified user table * changed topbar/sidebar styling * added pending accounts request section * Moved account requests to top of page * updated bun lock * fixed lint errors * Update src/components/user-dropdown.tsx Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * Prettier fix * fix: styling touch up * fix: touch up styling for top and side bar * Added tanstack query for account req and added skeleton components in users page * Fixed prettier * Remove package-lock --------- Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Co-authored-by: Long Lam <llam36@gatech.edu> * New Request Account and Login Page (#76) * feat: enhance authentication pages for login and account creation with forms and branding * feat: redesign auth pages with seamless split layout and onboarding carousel * fix: format * fix: login styling touch up * fix: request account styling * fix: styling * fix: styling * fix: styling --------- Co-authored-by: Long Lam <llam36@gatech.edu> * fix: styling * fix: update logo * fix: styling * feat(api-keys): implement three-card grid layout on api keys page * fix: dup imports * feat: populate api keys table with data from backend * styles: fix lint errors * fix: styling * feat: edit layout * Davidgu/fetch migration (#78) * Updated imports * Made README better * Apply suggestion from @greptile-apps[bot] Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * fix: import path --------- Co-authored-by: Long Lam <lamhoanglong.3001@gmail.com> Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Co-authored-by: Long Lam <llam36@gatech.edu> * fix: use juno-sdk 0.0.10 * feat(api-keys): implement three-card grid layout on api keys page * fix: styling * styles: fix lint errors * fix: lint errors * fix: build errors * fix: linter errors * fix: netlify build errors * fix: build errors on local machine * fix: lint and format errors * feat(auth): replace email/password auth with jwt auth * fix: lint errors * styles: make api key layout use same padding as other pages * styles: remove 'Request' from sdk function names * fix: invalid import in usertable * fix: improperly formatted files * chore: fix formatting issues * fix: only reset table row selection after all deletes succeed * fix pagination, clean up formatting, use badge ui for consistency --------- Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Co-authored-by: Long Lam <llam36@gatech.edu> Co-authored-by: Akash Sarode <akashtechnion@gmail.com> Co-authored-by: Andrey Fernandez <andyfernandeznyc@gmail.com> Co-authored-by: David Gu <68869959+shaply@users.noreply.github.com> Co-authored-by: Long Lam <lamhoanglong.3001@gmail.com> Co-authored-by: aakashg00 <aakashbb@gmail.com>

asarode06 added 4 commits February 21, 2026 12:05

added top bar with logo and avatar

aa319db

modified user table

61a113d

changed topbar/sidebar styling

44cfdab

added pending accounts request section

58640fd

Moved account requests to top of page

3e97d40

greptile-apps Bot reviewed Feb 21, 2026

View reviewed changes

asarode06 and others added 4 commits February 21, 2026 17:06

updated bun lock

bdba375

fixed lint errors

eb5dd71

Update src/components/user-dropdown.tsx

1ce782c

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Prettier fix

e0c1ac4

llam36 self-requested a review February 23, 2026 05:21

asarode06 and others added 2 commits February 23, 2026 14:54

Merge branch 'main' into akash/top-bar-and-user-page-revamp

934def5

fix: styling touch up

3aeb548

llam36 requested changes Feb 24, 2026

View reviewed changes

llam36 and others added 4 commits February 24, 2026 13:18

fix: touch up styling for top and side bar

afa9572

Added tanstack query for account req and added skeleton components in…

7e86280

… users page

Fixed prettier

ce20d35

Remove package-lock

e6e73ef

llam36 approved these changes Feb 24, 2026

View reviewed changes

llam36 merged commit 7f05b0f into main Feb 24, 2026
5 checks passed

Navigation Menu

Repository navigation

Akash/top bar and user page revamp - #75

Akash/top bar and user page revamp#75
llam36 merged 15 commits into
mainfrom
akash/top-bar-and-user-page-revamp

asarode06 commented Feb 21, 2026

Uh oh!

netlify Bot commented Feb 21, 2026 •

edited

Loading

Uh oh!

greptile-apps Bot commented Feb 21, 2026

Flowchart

Uh oh!

greptile-apps Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

greptile-apps Bot Feb 21, 2026

Uh oh!

greptile-apps Bot commented Feb 21, 2026

Uh oh!

llam36 left a comment

Uh oh!

llam36 Feb 24, 2026

Uh oh!

llam36 Feb 24, 2026

Uh oh!

llam36 Feb 24, 2026

Uh oh!

llam36 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

asarode06 commented Feb 21, 2026

Uh oh!

netlify Bot commented Feb 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for juno-dashboard ready!

Uh oh!

greptile-apps Bot commented Feb 21, 2026

Greptile Summary

Confidence Score: 3/5

Important Files Changed

Flowchart

Uh oh!

greptile-apps Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

greptile-apps Bot Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot commented Feb 21, 2026

Uh oh!

llam36 left a comment

Choose a reason for hiding this comment

Uh oh!

llam36 Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

llam36 Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

llam36 Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

llam36 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify Bot commented Feb 21, 2026 •

edited

Loading