Skip to content

ui enhancements#572

Merged
ashwin31 merged 2 commits intomasterfrom
dev
Dec 10, 2025
Merged

ui enhancements#572
ashwin31 merged 2 commits intomasterfrom
dev

Conversation

@ashwin31
Copy link
Member

@ashwin31 ashwin31 commented Dec 10, 2025

Summary by CodeRabbit

  • New Features

    • Enhanced input handling for related field associations across accounts, cases, contacts, leads, opportunities, and tasks.
    • Expanded token payload with user profile data.
  • Style

    • Comprehensive visual redesign with new light and dark theme system supporting CSS variables and semantic color tokens.
    • Redesigned dashboard components, sidebar navigation with HubSpot-inspired styling, and filter interfaces.
    • Updated Kanban boards, cards, and organization/support page layouts with improved typography and visual hierarchy.
  • Refactor

    • Improved internal data handling for many-to-many relationships across multiple endpoints.

✏️ Tip: You can customize this high-level summary in your review settings.

Copilot AI review requested due to automatic review settings December 10, 2025 13:01
@ashwin31 ashwin31 merged commit 9112a4f into master Dec 10, 2025
9 of 10 checks passed
@ashwin31 ashwin31 deleted the dev branch December 10, 2025 13:02
@coderabbitai
Copy link

coderabbitai bot commented Dec 10, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

Backend views now robustly handle many-to-many field inputs as JSON strings or lists, extracting IDs before filtering. Token generation embeds user metadata. Frontend undergoes comprehensive visual redesign with new theme system, expanded JWT payload handling, and refactored dashboard and UI components.

Changes

Cohort / File(s) Summary
Backend: M2M Input Normalization
backend/accounts/views.py, backend/cases/views.py, backend/contacts/views.py, backend/leads/views/lead_views.py, backend/opportunity/views/opportunity_views.py, backend/tasks/views/task_views.py
Across POST/PUT/PATCH handlers, added robust parsing of related-field inputs (contacts, tags, teams, assigned_to). When inputs are JSON strings, parse via json.loads; extract IDs from dict items or use items directly. Replace raw list usage with derived ID lists in ORM filter calls (id__in=…). Pattern applied consistently across all CRUD flows.
Backend: Token & Auth
backend/common/serializer.py, backend/common/views/auth_views.py, backend/common/views/document_views.py
OrgAwareRefreshToken.for_user_and_org now augments token payload with user_email, user_name, user_profile_pic. Auth view calls updated to use OrgAwareRefreshToken.for_user_and_org(user, None) instead of generic RefreshToken, standardizing token generation across Google OAuth, login, and refresh flows. Document views also adopt M2M input normalization for shared_to and teams fields.
Frontend: Theme & Design System
frontend/src/app.css
Comprehensive CSS overhaul introducing light/dark theme variables, Google Fonts integration (Plus Jakarta Sans, DM Sans, JetBrains Mono), glass-morphism tokens, semantic color families, z-index/animation/spacing tokens, Tailwind theme mappings, and utility layers (glass-card, glow effects, shimmer, fade-in-up, staggered delays, premium-card).
Frontend: JWT & Server Runtime
frontend/src/hooks.server.js
Public typedef JWTPayload expanded to include user_name, user_email, user_profile_pic. Runtime event.locals.user construction updated to populate name, email, profilePhoto from token alongside id.
Frontend: Dashboard Components
frontend/src/lib/components/dashboard/{ActivityFeed,FocusBar,HotLeadsPanel,KPICard,MiniPipeline,OpportunitiesTable,PipelineChart,TaskList}.svelte
Comprehensive dashboard redesign: ActivityFeed switched to div-based layout with action config mapping; FocusBar restructured with Zap icon and tile layout; HotLeadsPanel replaced Card with custom panel and ratingConfig; KPICard introduced accentColor prop and removed iconBgClass/iconClass/borderColor; MiniPipeline enriched stages with colors/icons/glows; OpportunitiesTable refactored with Sparkles icon, new stageConfig, and probability bars; PipelineChart redesigned with BarChart3 header and progress bars; TaskList introduced getPriorityConfig and filterButtons with tab UI.
Frontend: UI Components
frontend/src/lib/components/ui/{case-kanban/CaseCard,crm-drawer/{CrmDrawer,CrmPropertyRow},filter/{DateRangeFilter,FilterBar,SearchInput,SelectFilter,TagFilter},kanban/{KanbanBoard,KanbanColumn},lead-kanban/LeadCard,pagination/Pagination,sidebar/{sidebar-menu-sub-button,sidebar-menu-sub},task-kanban/TaskCard}.svelte
Extensive UI component redesigns: CaseCard added priorityConfig/caseTypeConfig and avatar gradients; CrmDrawer introduced premium header/footer with gradients; CrmPropertyRow expanded input styling and control sizes; DateRangeFilter added Clock/ArrowRight icons and date shortening; FilterBar redesigned minimal/full modes with gradient overlays; SearchInput added label/showLabel/showShortcut props; SelectFilter extended Option typedef with icon; TagFilter replaced Badge with Tag/Hash icons; KanbanBoard added pipelineStats and formatValue; KanbanColumn added columnValue and getColumnGradient; LeadCard introduced ratingConfig and avatar gradients; Pagination redesigned with ChevronsUpDown and page indicator; sidebar components updated styling and active states; TaskCard added priorityConfig/statusConfig and avatar colors.
Frontend: Layout & Navigation
frontend/src/lib/components/layout/{AppSidebar,PageHeader}.svelte
AppSidebar underwent major HubSpot-style refactor: expanded navigation structure (CRM/Sales/Support sections), added profile image error handling and getInitials helper, redesigned header/search/collapsible sections, replaced user menu with avatar/online status/dropdown actions, added Collapse/Expand toggle and Theme selector. PageHeader added decorative ambient glow and responsive header structure with accent line.
Frontend: Pages & Routes
frontend/src/routes/(app)/{+page,leads/+page,settings/organization/+page,settings/tags/+page}.svelte, frontend/src/routes/(no-layout)/login/+page.svelte, frontend/src/routes/(app)/support/+page.svelte
Dashboard (+page) introduced getGreeting logic and restructured layout with gradient mesh, multi-section card composition, and progressive reveal animations. Leads page set showLabel={false} on SearchInput. Settings organization page overhauled with hero identity block, Regional Settings section, avatar animations, and Loader2 spinner in submit button. Tags page replaced Card layout with HubSpot-inspired header/search/tables, added getHubspotBadgeClass and getColorDotClass helpers, and redesigned Create/Edit dialogs. Login page substantially restructured with interactive mouse-position-driven background, new left/right panel layout, and extensive inline style block. Support page replaced Card grid with "premium knowledge hub" Bento Grid cards and Custom Development Banner.

Sequence Diagram(s)

No sequence diagram is applicable to this diff. The changes are primarily:

  • Input normalization patterns applied across multiple backend endpoints (homogeneous, no new cross-component interactions)
  • Visual/UI redesigns and theme system implementations (not involving multi-component control flows)
  • Token payload augmentation (straightforward enhancement, not multi-actor interaction)
  • Component property changes and styling updates (internal to individual components)

The diff does not introduce new feature flows or significantly alter control flow with multiple distinct component interactions that would benefit from sequencing visualization.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Areas requiring extra attention:

  • Backend M2M normalization pattern: Review consistency of JSON parsing and ID extraction logic across all six view files (accounts, cases, contacts, leads, opportunity, tasks) to ensure no edge cases are missed or inconsistently handled; verify that empty lists and null values are handled correctly.
  • Token augmentation impact: Verify OrgAwareRefreshToken changes don't break backward compatibility and that user metadata fields are safely accessed across all auth flows; check that fallback behavior is correct when org is None.
  • Frontend theme system (app.css): The comprehensive CSS variable and utility introduction is a high-impact single file; verify all color tokens work in both light and dark modes, Tailwind mapping is correct, and glass-morphism/animation tokens are properly scoped.
  • Dashboard & component redesigns: Multiple UI refactors with new config-driven prop systems (accentColor, priorityConfig, ratingConfig, etc.). Cross-check that all config objects cover all valid enum/type values and that no component is missing fallback styling. Ensure responsive behavior is preserved across breakpoints.
  • AppSidebar HubSpot refactor: Significant structure change including collapsible sections, nested items, and new user dropdown. Verify navigation state management, active indicators, and theme toggle behavior work end-to-end; check accessibility of new components (keyboard navigation, ARIA labels).
  • Login page interactive background: New mouse-position-driven CSS variable binding introduces a novel interaction pattern; verify performance on lower-end devices and that fallback styling is correct when JavaScript is disabled or on mobile.

Poem

🐰 A theme blooms bright, M2M now bends,
Tokens carry names, new styles ascend,
Glass cards shimmer, dashboards reborn,
From dawn's new greeting to dusk adorned.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch dev

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4bff7b9 and ef596af.

📒 Files selected for processing (42)
  • backend/accounts/views.py (5 hunks)
  • backend/cases/views.py (6 hunks)
  • backend/common/serializer.py (1 hunks)
  • backend/common/views/auth_views.py (3 hunks)
  • backend/common/views/document_views.py (2 hunks)
  • backend/contacts/views.py (6 hunks)
  • backend/leads/views/lead_views.py (3 hunks)
  • backend/opportunity/views/opportunity_views.py (5 hunks)
  • backend/tasks/views/task_views.py (5 hunks)
  • frontend/src/app.css (4 hunks)
  • frontend/src/hooks.server.js (2 hunks)
  • frontend/src/lib/components/dashboard/ActivityFeed.svelte (3 hunks)
  • frontend/src/lib/components/dashboard/FocusBar.svelte (3 hunks)
  • frontend/src/lib/components/dashboard/HotLeadsPanel.svelte (3 hunks)
  • frontend/src/lib/components/dashboard/KPICard.svelte (2 hunks)
  • frontend/src/lib/components/dashboard/MiniPipeline.svelte (2 hunks)
  • frontend/src/lib/components/dashboard/OpportunitiesTable.svelte (4 hunks)
  • frontend/src/lib/components/dashboard/PipelineChart.svelte (2 hunks)
  • frontend/src/lib/components/dashboard/TaskList.svelte (4 hunks)
  • frontend/src/lib/components/layout/AppSidebar.svelte (12 hunks)
  • frontend/src/lib/components/layout/PageHeader.svelte (1 hunks)
  • frontend/src/lib/components/ui/case-kanban/CaseCard.svelte (6 hunks)
  • frontend/src/lib/components/ui/crm-drawer/CrmDrawer.svelte (1 hunks)
  • frontend/src/lib/components/ui/crm-drawer/CrmPropertyRow.svelte (7 hunks)
  • frontend/src/lib/components/ui/filter/DateRangeFilter.svelte (8 hunks)
  • frontend/src/lib/components/ui/filter/FilterBar.svelte (2 hunks)
  • frontend/src/lib/components/ui/filter/SearchInput.svelte (4 hunks)
  • frontend/src/lib/components/ui/filter/SelectFilter.svelte (3 hunks)
  • frontend/src/lib/components/ui/filter/TagFilter.svelte (4 hunks)
  • frontend/src/lib/components/ui/kanban/KanbanBoard.svelte (5 hunks)
  • frontend/src/lib/components/ui/kanban/KanbanColumn.svelte (4 hunks)
  • frontend/src/lib/components/ui/lead-kanban/LeadCard.svelte (6 hunks)
  • frontend/src/lib/components/ui/pagination/Pagination.svelte (2 hunks)
  • frontend/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte (1 hunks)
  • frontend/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte (1 hunks)
  • frontend/src/lib/components/ui/task-kanban/TaskCard.svelte (6 hunks)
  • frontend/src/routes/(app)/+page.svelte (2 hunks)
  • frontend/src/routes/(app)/leads/+page.svelte (1 hunks)
  • frontend/src/routes/(app)/settings/organization/+page.svelte (4 hunks)
  • frontend/src/routes/(app)/settings/tags/+page.svelte (5 hunks)
  • frontend/src/routes/(app)/support/+page.svelte (2 hunks)
  • frontend/src/routes/(no-layout)/login/+page.svelte (3 hunks)

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR implements a comprehensive UI enhancement across the BottleCRM application, introducing a premium design system with HubSpot-inspired styling. The changes focus on visual polish, improved user experience, and consistent design patterns.

Key Changes

  • Complete login page redesign with animated backgrounds, custom fonts (Cormorant Garamond, Outfit), and gradient effects
  • Enhanced component library with glass morphism, backdrop blur effects, and refined color palette
  • HubSpot-style navigation with improved sidebar, better visual hierarchy, and brand color accent (#ff7a59)

Reviewed changes

Copilot reviewed 42 out of 42 changed files in this pull request and generated no comments.

Show a summary per file
File Description
frontend/src/routes/(no-layout)/login/+page.svelte Complete redesign with geometric noir theme, custom fonts, animated backgrounds
frontend/src/routes/(app)/support/+page.svelte Premium knowledge hub aesthetic with bento grid layout
frontend/src/routes/(app)/settings/tags/+page.svelte HubSpot-style table view with search, filters, and refined dialogs
frontend/src/routes/(app)/settings/organization/+page.svelte Enhanced visual design with animations, gradients, and improved form layout
frontend/src/routes/(app)/+page.svelte Dashboard enhancements with gradient mesh background and greeting
frontend/src/lib/components/ui/task-kanban/TaskCard.svelte Premium card styling with priority badges, animations, and refined visual hierarchy
frontend/src/lib/components/ui/lead-kanban/LeadCard.svelte Enhanced card design with rating badges, avatar colors, and hover effects
frontend/src/lib/components/ui/kanban/* Premium kanban board with pipeline stats, glass effects, and smooth animations
frontend/src/lib/components/ui/filter/* Complete filter system redesign with glass morphism and refined interactions
frontend/src/lib/components/ui/crm-drawer/* Drawer enhancements with premium header, better spacing, and visual polish
frontend/src/lib/components/layout/* AppSidebar with HubSpot-style navigation and PageHeader with ambient glow effects
backend/common/serializer.py JWT token enhanced with user display information
Comments suppressed due to low confidence (21)

backend/common/views/document_views.py:433

  • Variable doc is not used.
            doc = serializer.save(

backend/leads/views/lead_views.py:316

  • Variable params is not used.
        params = self.request.query_params

backend/tasks/views/task_views.py:473

  • Variable previous_assigned_to_users is not used.
            previous_assigned_to_users = list(

backend/cases/views.py:63

  • Variable profiles is not used.
            profiles = profiles.filter(role="ADMIN")

backend/leads/views/lead_views.py:334

  • This assignment to 'comments' is unnecessary as it is redefined before this value is used.
        comments = Comment.objects.filter(

backend/leads/views/lead_views.py:337

  • This assignment to 'attachments' is unnecessary as it is redefined before this value is used.
        attachments = Attachments.objects.filter(

backend/contacts/views.py:25

  • Import pollutes the enclosing namespace, as the imported module contacts.serializer does not define 'all'.
from contacts.serializer import *

backend/common/views/auth_views.py:5

  • Import of 'settings' is not used.
from django.conf import settings

backend/common/views/auth_views.py:7

  • Import of 'OpenApiTypes' is not used.
from drf_spectacular.types import OpenApiTypes

backend/common/views/auth_views.py:8

  • Import of 'OpenApiParameter' is not used.
from drf_spectacular.utils import OpenApiParameter, extend_schema, inline_serializer

backend/common/views/auth_views.py:15

  • Import of 'RefreshToken' is not used.
from rest_framework_simplejwt.tokens import RefreshToken

backend/common/views/auth_views.py:18

  • Import of 'Org' is not used.
from common.models import Org, Profile, User

backend/common/serializer.py:4

  • Import of 'check_password' is not used.
from django.contrib.auth.hashers import check_password

backend/common/serializer.py:5

  • Import of 'default_token_generator' is not used.
from django.contrib.auth.tokens import default_token_generator

backend/common/serializer.py:6

  • Import of 'urlsafe_base64_decode' is not used.
from django.utils.http import urlsafe_base64_decode

backend/common/serializer.py:9

  • Import of 'AccessToken' is not used.
from rest_framework_simplejwt.tokens import AccessToken, RefreshToken

backend/cases/views.py:10

  • Import of 'OpenApiParameter' is not used.
    Import of 'OpenApiExample' is not used.
from drf_spectacular.utils import (
    OpenApiExample,
    OpenApiParameter,
    extend_schema,
    inline_serializer,
)

backend/contacts/views.py:11

  • Import of 'OpenApiParameter' is not used.
    Import of 'OpenApiExample' is not used.
from drf_spectacular.utils import (
    OpenApiExample,
    OpenApiParameter,
    extend_schema,
    inline_serializer,
)

backend/accounts/views.py:6

  • Import of 'OpenApiParameter' is not used.
    Import of 'OpenApiExample' is not used.
from drf_spectacular.utils import OpenApiExample, OpenApiParameter, extend_schema

backend/accounts/views.py:8

  • Import of 'GenericAPIView' is not used.
from rest_framework.generics import GenericAPIView

backend/common/views/document_views.py:34

  • This assignment assigns a variable to itself.
            queryset = queryset

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@ashwin31 ashwin31 restored the dev branch December 10, 2025 13:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant