Create a page layout for a new "Finances" section of a desktop application (Electron + Svelte + Tailwind). The app already has a left dark sidebar with logo and menu items: - Time tracker - Planner - Workout journal - Habits - Analytics / Reports - Settings The active item in the sidebar is highlighted with a bright green pill. DO NOT redesign the sidebar. Design ONLY the main content area for the "Finances" section. Overall style: - Dark theme, same visual style as a modern time-tracker dashboard. - Background: dark neutral surfaces (like bg-surface-900 / bg-surface-800). - Accent color: green (same vibe as a bright “today total” card). - Cards with soft rounded corners (rounded-xl / rounded-2xl) and subtle shadows. - Use Tailwind utility classes, e.g. bg-surface-900, bg-surface-800, text-surface-100, text-surface-300, border-surface-700, bg-brand-500 for green accents. - Desktop layout with good spacing and “air”, similar to a time-tracking main screen. The content should be a 3-column layout: - Left: import + filters (about 25% width). - Center: transactions list (about 50% width). - Right: summary + budgets (about 25% width). 1) Top header of the page Place a header at the top of the content area, full width (above the 3 columns): - Left side: - Main title: “Finances” - Subtitle: “Income and expense tracking” - Right side: - Period selector: a button or dropdown with options like “Today / Week / Month / Custom”. - Search input for transactions (with a search icon). - Primary green button: “Import statement”. - Secondary outline button with “+” icon: “New transaction”. 2) Left column (Import and Filters) Left column contains two stacked cards. Card “Statement import and matching”: - Title: “Import statement” - Content: - Button “Upload file” (CSV / Excel). - Short helper text: “The app will try to match operations with existing templates.” - Small summary section of the last import: - total operations imported - how many matched existing templates - how many were new operations Card “Filters”: - Title: “Filters” - Content: - Select for bank / source (dropdown). - Chips or toggle for direction: “All / Expenses / Income”. - Category selector (multi-select or list of checkboxes). - Date range (two dates or a preset selector). - Small “Reset filters” link-style button at the bottom. 3) Center column (Transactions list) Main card: “Transactions” - Header row of the card: - Title: “Transactions” - Small text on the right: “128 transactions in period” (just an example). - Under the header, add filter chips for matching status: - “All” - “Matched” - “New” - “Needs review” Each chip should look like a small pill button; the active one uses the green accent. - Below that, show the transactions as a table-like list where each row visually looks like a flat “semi-card” (full-width row with subtle hover and separators). Columns per transaction row: - Checkbox (for bulk actions). - Date of the transaction. - Raw description from the bank (gray text, can wrap to two lines). - Matching result: - If a template is found: a green badge “Matched: [template name]”. - If not: an orange badge “New operation”. - Category selector: dropdown with user-defined categories, prefilled if the template matched. - “Name” field: human-friendly operation name (can be simple text that looks editable). - Amount: - Expenses: red/orange text with minus sign. - Income: green text with plus sign. - Icon button “Make template” (e.g. a star icon) that marks this operation as an editable reference/template for future matching. - “…” menu icon for extra actions. - At the bottom of the card: - Pagination controls (previous/next, pages) styled similarly to a modern dashboard. - Small text like “Showing 1–20 of N transactions”. 4) Right column (Summary and Budgets) Right column contains stacked cards. Card “Summary for period”: - Title: “Period summary” - Content: - “Balance for period” — large number (Income − Expenses), color depends on positive/negative. - “Income” — amount in green. - “Expenses” — amount in red/orange. - A simple horizontal bar that shows the ratio of income vs expenses. Card “Category budgets”: - Title: “Category budgets” - At the top right of this card: a small link/button “Manage budgets” which would lead to a separate budget settings screen. - Inside, show a vertical list of categories. Each category row is a small card with: - Category name. - Small badge for type: “Expense” or “Income”. - Text like “Spent: X of Y” (for expenses) or “Received: X of Y” (for income). - Progress bar: - Background: dark (bg-surface-700). - Filled part: green for within budget, red/orange if over budget. - On the right side, small text “Remaining: Z”: - Green if in limit. - Red if budget exceeded. Optional bottom card “Quick stats”: - Show 2–3 compact stats, for example: - Number of unique merchants / payees. - Number of new operations without templates. - Percentage of operations with a successful match. Implementation notes: - Use only Tailwind CSS utility classes. - Design should be easy to split into Svelte components later. - Keep the spacing, padding and visual density similar to a modern time-tracker dashboard in dark mode. - Assume a desktop viewport width; no need to fully design mobile.