nikdoof/leggen
1
1
Fork 0
mirror of https://github.com/elisiariocouto/leggen.git synced 2025-12-14 06:12:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): implement TanStack Router with mobile sidebar

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

129
frontend/src/components/AccountsOverview.tsx
View File

@@ -208,69 +208,72 @@ export default function AccountsOverview() {
<div className="p-3 bg-gray-100 rounded-full">
<Building2 className="h-6 w-6 text-gray-600" />
</div>
<div className="flex-1">
{editingAccountId === account.id ? (
<div className="space-y-2">
<div className="flex items-center space-x-2">
<input
type="text"
value={editingName}
onChange={(e) => setEditingName(e.target.value)}
className="flex-1 px-3 py-1 text-lg font-medium border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="Account name"
name="search"
autoComplete="off"
onKeyDown={(e) => {
if (e.key === "Enter") handleEditSave();
if (e.key === "Escape") handleEditCancel();
}}
autoFocus
/>
<button
onClick={handleEditSave}
disabled={!editingName.trim() || updateAccountMutation.isPending}
className="p-1 text-green-600 hover:text-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
title="Save changes"
>
<Check className="h-4 w-4" />
</button>
<button
onClick={handleEditCancel}
className="p-1 text-gray-600 hover:text-gray-700"
title="Cancel editing"
>
<X className="h-4 w-4" />
</button>
</div>
<p className="text-sm text-gray-600">
{account.institution_id} • {account.status}
</p>
</div>
) : (
<div>
<div className="flex items-center space-x-2">
<h4 className="text-lg font-medium text-gray-900">
{account.name || "Unnamed Account"}
</h4>
<button
onClick={() => handleEditStart(account)}
className="p-1 text-gray-400 hover:text-gray-600 transition-colors"
title="Edit account name"
>
<Edit2 className="h-4 w-4" />
</button>
</div>
<p className="text-sm text-gray-600">
{account.institution_id} • {account.status}
</p>
{account.iban && (
<p className="text-xs text-gray-500 mt-1">
IBAN: {account.iban}
</p>
)}
</div>
)}
</div>
<div className="flex-1">
{editingAccountId === account.id ? (
<div className="space-y-2">
<div className="flex items-center space-x-2">
<input
type="text"
value={editingName}
onChange={(e) => setEditingName(e.target.value)}
className="flex-1 px-3 py-1 text-lg font-medium border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="Account name"
name="search"
autoComplete="off"
onKeyDown={(e) => {
if (e.key === "Enter") handleEditSave();
if (e.key === "Escape") handleEditCancel();
}}
autoFocus
/>
<button
onClick={handleEditSave}
disabled={
!editingName.trim() ||
updateAccountMutation.isPending
}
className="p-1 text-green-600 hover:text-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
title="Save changes"
>
<Check className="h-4 w-4" />
</button>
<button
onClick={handleEditCancel}
className="p-1 text-gray-600 hover:text-gray-700"
title="Cancel editing"
>
<X className="h-4 w-4" />
</button>
</div>
<p className="text-sm text-gray-600">
{account.institution_id} • {account.status}
</p>
</div>
) : (
<div>
<div className="flex items-center space-x-2">
<h4 className="text-lg font-medium text-gray-900">
{account.name || "Unnamed Account"}
</h4>
<button
onClick={() => handleEditStart(account)}
className="p-1 text-gray-400 hover:text-gray-600 transition-colors"
title="Edit account name"
>
<Edit2 className="h-4 w-4" />
</button>
</div>
<p className="text-sm text-gray-600">
{account.institution_id} • {account.status}
</p>
{account.iban && (
<p className="text-xs text-gray-500 mt-1">
IBAN: {account.iban}
</p>
)}
</div>
)}
</div>
</div>
<div className="text-right">