refactor: convert virtual table into a real table

[ogzhanolguncu]

What does this PR do?

Fixes # (issue)

If there is not an issue for this, please create one first. This is used to tracking purposes and also helps use understand why this PR exists

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Chore (refactoring code, technical debt, workflow improvements)
• Enhancement (small improvements)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How should this be tested?

• Test A
• Test B

Checklist

Required

• Filled out the "How to test" section in this PR
• Read Contributing Guide
• Self-reviewed my own code
• Commented on my code in hard-to-understand areas
• Ran pnpm build
• Ran pnpm fmt
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Unkey Docs if changes were necessary

Summary by CodeRabbit

• New Features

  • Introduced a refreshed logs interface integrating detailed audit log views.
  • Added a resizable panel for dynamically adjusting the log details area.
  • Launched a new log section featuring clipboard copy functionality.
  • Added a clear search button in the logs search component.

• Refactor

  • Optimized table layout and column spacing for improved clarity and responsiveness.
  • Enhanced state management in datetime controls and log components for smoother interactions.
  • Updated component props for improved type safety and clarity.

• Chores

  • Removed deprecated components and streamlined error handling to simplify the codebase.
  • Updated constant definitions for panel widths to maintain consistency across the application.
  • Modified timestamp formatting for better display consistency.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

apps/dashboard/app/(app)/logs/components/controls/components/logs-search/index.tsx (1)

119-119: Remove unnecessary string literal space.

The string literal space {" "} after the closing div is unnecessary and can be removed.

-        </div>{" "}
+        </div>

apps/dashboard/app/(app)/logs/components/table/log-details/components/log-footer.tsx (1)

91-93: Consider using a more reliable key for the permission badges.

Using array indices as React keys can lead to rendering issues if the array items are reordered or modified. Consider using a more stable unique identifier.

-  // biome-ignore lint/suspicious/noArrayIndexKey: its okay to use it as a key
-  key={index}
+  key={`${permission}-${index}`}

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 33bb5c8 and 1e5193c.

📒 Files selected for processing (4)

• apps/dashboard/app/(app)/logs/components/control-cloud/index.tsx (1 hunks)
• apps/dashboard/app/(app)/logs/components/controls/components/logs-search/index.tsx (2 hunks)
• apps/dashboard/app/(app)/logs/components/table/log-details/components/log-footer.tsx (1 hunks)
• apps/dashboard/components/timestamp-info.tsx (2 hunks)

🔇 Additional comments (5)

apps/dashboard/app/(app)/logs/components/controls/components/logs-search/index.tsx (2)

7-7: LGTM!

The XMark icon import is properly added alongside other icon imports from @unkey/icons.

---

122-126: LGTM! Clear search functionality is well implemented.

The clear search button is properly implemented with:

• Correct conditional rendering
• Accessible aria-label
• Consistent icon sizing and styling

apps/dashboard/app/(app)/logs/components/table/log-details/components/log-footer.tsx (1)

87-88: LGTM! Improved layout for permissions badges.

The flex layout with wrap and gap provides better handling of multiple permissions, and the justify-end alignment maintains consistency with the design pattern.

Also applies to: 98-98

apps/dashboard/components/timestamp-info.tsx (1)

84-84: LGTM! Clean class name management.

Good use of the cn utility function for managing conditional class names. This approach is more maintainable and consistent with best practices.

apps/dashboard/app/(app)/logs/components/control-cloud/index.tsx (1)

102-107: LGTM! Better separation of concerns.

Good refactoring to let TimestampInfo handle the formatting internally instead of pre-formatting the value. This improves component encapsulation and maintainability.