feat(frontend): implement TanStack Router with mobile sidebar

- Install and configure TanStack Router for type-safe routing
- Create route structure with __root.tsx layout and individual route files
- Implement mobile-responsive sidebar with collapse functionality
- Add clickable logo in sidebar that navigates to overview page
- Extract Header and Sidebar components from Dashboard for reusability
- Configure Vite with TanStack Router plugin for development
- Update main.tsx to use RouterProvider instead of direct App rendering
- Maintain existing TanStack Query integration seamlessly
- Add proper TypeScript types for all route components
- Implement responsive design with mobile overlay and hamburger menu

This replaces the tab-based navigation with URL-based routing while
maintaining the same user experience and adding powerful features like:
- Bookmarkable URLs (/transactions, /analytics, /notifications)
- Browser back/forward button support
- Direct linking capabilities
- Mobile-responsive sidebar with smooth animations
- Type-safe navigation with auto-completion
This commit is contained in:
Elisiário Couto
2025-09-10 22:45:01 +01:00
parent aa97f36819
commit ca41b7af0a
17 changed files with 1332 additions and 162 deletions

View File

@@ -24,7 +24,7 @@ export default function RawTransactionModal({
try {
await navigator.clipboard.writeText(
JSON.stringify(rawTransaction, null, 2)
JSON.stringify(rawTransaction, null, 2),
);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
@@ -78,7 +78,10 @@ export default function RawTransactionModal({
<div className="mb-4">
<p className="text-sm text-gray-600">
Transaction ID: <code className="bg-gray-100 px-2 py-1 rounded text-xs">{transactionId}</code>
Transaction ID:{" "}
<code className="bg-gray-100 px-2 py-1 rounded text-xs">
{transactionId}
</code>
</p>
</div>
@@ -94,7 +97,8 @@ export default function RawTransactionModal({
Raw transaction data is not available for this transaction.
</p>
<p className="text-sm text-gray-500 mt-2">
Try refreshing the page or check if the transaction was fetched with summary_only=false.
Try refreshing the page or check if the transaction was
fetched with summary_only=false.
</p>
</div>
)}