Draft Design

[drakkomaximo]

Pull Request for TrustBridge - Close Issue #33

❗ Pull Request Information

Implementation of an Audit Logs page in the lender's dashboard that allows users with the lender role to view and track platform actions with a modern, animated interface.

🌀 Summary of Changes

• New Components:

  • Created AuditLogsTable component with Framer Motion animations
  • Implemented paginated table display with modern styling
  • Added loading and error states with animations

• API Implementation:

  • Created /api/audit/logs endpoint with pagination support
  • Implemented mock data structure for testing
  • Added proper error handling and response formatting

• UI/UX Improvements:

  • Added smooth animations for table rows and state changes
  • Implemented color-coded action badges
  • Added responsive design elements
  • Included loading spinners and error messages

• Features:

  • Pagination with 5 items per page
  • Dynamic timestamp formatting
  • Color-coded action types (Login, Applications, Payments)
  • Animated transitions between pages
  • Hover effects on interactive elements

🛠 Testing

Evidence Before Solution

• No way to view audit logs in the system
• Lenders had no visibility into platform actions
• Missing tracking functionality for system activities

Evidence After Solution

• Fully functional audit logs page at /lender/audit-logs
• Animated table showing:
  • Action type with color coding
  • User information
  • Timestamp
  • Action details
• Pagination controls with page count display
• Loading states and error handling
• Smooth transitions and animations

📂 Related Issue

This pull request will close #33 upon merging.

Technical Details

• Used shadcn/ui for base components
• Implemented Framer Motion for animations
• Added TypeScript interfaces for type safety
• Included proper error handling and loading states
• Implemented responsive design principles

Files Changed

1. src/components/audit-logs-table.tsx
2. src/app/lender/audit-logs/page.tsx
3. src/app/api/audit/logs/route.ts

Evidence

2025-02-23.13-51-58.mp4

[gchyuli]

Hi @drakkomaximo thanks for your contribution! Please make sure to have the option to configure the clear and dark mode. Also, it's important that you mantein the side bar when the lender is on the audit page. This could be an example of table:

Also, you can take into account this is the Audit model:
model AuditLog {
id String @id @default(uuid())
userId String?
action String
timestamp DateTime @default(now())
details String?
user User? @relation(fields: [userId], references: [id])
}

Please remember to use SHADCN UI and Lucide React in the design. I will share with you a code of reference! Here are some visual indicators like guide:

LOAN_CREATE: {
    color: amber.500
    icon: <PlusCircle />
    background: amber.50 (10% opacity in dark mode)
}

LOAN_UPDATE: {
    color: blue.500
    icon: <FileEdit />
    background: blue.50 (10% opacity in dark mode)
}

PAYMENT_PROCESS: {
    color: emerald.500
    icon: <Wallet />
    background: emerald.50 (10% opacity in dark mode)
}

USER_UPDATE: {
    color: violet.500
    icon: <UserCog />
    background: violet.50 (10% opacity in dark mode)
}

RISK_ALERT: {
    color: red.500
    icon: <AlertTriangle />
    background: red.50 (10% opacity in dark mode)
}

Here is a specific information about any details of the table:
Layout & Components
Table Header

• Title: "Audit Log" (24px, SemiBold)
• Search Bar (right-aligned)
• Filter Dropdown (right-aligned)
• Export Button (optional)

Table Columns

• Event/Action (with icon)
• Description
• User
• Timestamp
• Details/View

[JosueBrenes]

Hi @drakkomaximo

I need to move this from here src\app\lender\audit-logs\page.tsx to here src\app\admin

Also delete this from src\app\api\audit\logs\route.ts because it doesn't go here, that should go here src@types but only the file and rename it audits.entity.ts

And finally move this src\components\audit-logs-table.tsx to here src\components\admin in a folder called audit-logs

[drakkomaximo]

Alright, I'll be making the changes throughout the day tomorrow. If anything comes up, you can message me on Telegram for faster communication.

[drakkomaximo]

Hi @JosueBrenes In that route: src\app\api\audit\logs\route.ts, I'm simulating as if the information were coming through an API. I can move part of the data, but the core should remain, which is the GET request, to keep the path ready for future backend integration.

[drakkomaximo]

Hi @JosueBrenes Done!

2025-02-24.01-40-14.mp4

2025-02-24.02-02-05.mp4

2025-02-24.02-45-07.mp4

I was reading the project requirements, and they specify certain routes, which is why I created the folders from the beginning.

In this case, who should I follow?

[gchyuli]

Hi @drakkomaximo the table is really good. Please remember to incluye a search bar and a filter, but it's almost ready! Thanks

[drakkomaximo]

Hi @gchyuli, but in the evidence, I'm showing that the search bar and filters are applied to the table.

Or are you talking about a different topic?

2025-02-24.02-02-05.mp4