feat(fusion_accounting_bank_rec): SCSS foundation for OWL widget
Provides design tokens (variables.scss), main bank-rec stylesheet, AI suggestion strip + alternatives panel styling, and dark mode overrides. CSS classes (.o_fusion_*) will be consumed by OWL components in Tasks 28-36. Verified: all 4 SCSS files compile via libsass; web.assets_backend bundle picks up all 4 entries; 134/134 module tests pass. Made-with: Cursor
This commit is contained in:
gsinghpal
@@ -1,6 +1,6 @@
|
||||
{
|
||||
'name': 'Fusion Accounting — Bank Reconciliation',
|
||||
'version': '19.0.1.0.8',
|
||||
'version': '19.0.1.0.9',
|
||||
'category': 'Accounting/Accounting',
|
||||
'sequence': 28,
|
||||
'summary': 'Native V19 bank reconciliation widget with AI confidence scoring + behavioural learning.',
|
||||
@@ -32,6 +32,14 @@ Built by Nexa Systems Inc.
|
||||
'security/ir.model.access.csv',
|
||||
'data/cron.xml',
|
||||
],
|
||||
'assets': {
|
||||
'web.assets_backend': [
|
||||
'fusion_accounting_bank_rec/static/src/scss/_variables.scss',
|
||||
'fusion_accounting_bank_rec/static/src/scss/bank_reconciliation.scss',
|
||||
'fusion_accounting_bank_rec/static/src/scss/ai_suggestion.scss',
|
||||
'fusion_accounting_bank_rec/static/src/scss/dark_mode.scss',
|
||||
],
|
||||
},
|
||||
'installable': True,
|
||||
'application': False,
|
||||
'license': 'OPL-1',
|
||||
|
||||
91
fusion_accounting_bank_rec/static/src/scss/_variables.scss
Normal file
91
fusion_accounting_bank_rec/static/src/scss/_variables.scss
Normal file
@@ -0,0 +1,91 @@
|
||||
// Fusion bank reconciliation design tokens.
|
||||
//
|
||||
// Mirrors Enterprise's color/spacing scale where it makes sense, with
|
||||
// fusion-specific additions for AI confidence bands and the suggestion
|
||||
// strip. All values can be overridden in dark_mode.scss.
|
||||
|
||||
// ============================================================
|
||||
// Colors — semantic
|
||||
// ============================================================
|
||||
$fusion-color-bg-primary: #ffffff;
|
||||
$fusion-color-bg-secondary: #f9fafb;
|
||||
$fusion-color-bg-tertiary: #f3f4f6;
|
||||
$fusion-color-border: #e5e7eb;
|
||||
$fusion-color-border-strong: #d1d5db;
|
||||
|
||||
$fusion-color-text-primary: #111827;
|
||||
$fusion-color-text-secondary: #6b7280;
|
||||
$fusion-color-text-muted: #9ca3af;
|
||||
$fusion-color-text-inverse: #ffffff;
|
||||
|
||||
$fusion-color-accent: #3b82f6; // primary brand blue
|
||||
$fusion-color-accent-hover: #2563eb;
|
||||
$fusion-color-accent-bg: #eff6ff;
|
||||
|
||||
// ============================================================
|
||||
// AI Confidence band colors
|
||||
// ============================================================
|
||||
$fusion-confidence-high: #10b981; // green
|
||||
$fusion-confidence-high-bg: #ecfdf5;
|
||||
$fusion-confidence-medium: #f59e0b; // amber
|
||||
$fusion-confidence-medium-bg: #fffbeb;
|
||||
$fusion-confidence-low: #ef4444; // red
|
||||
$fusion-confidence-low-bg: #fef2f2;
|
||||
$fusion-confidence-none: #9ca3af; // gray
|
||||
$fusion-confidence-none-bg: #f3f4f6;
|
||||
|
||||
// ============================================================
|
||||
// Reconciliation state colors
|
||||
// ============================================================
|
||||
$fusion-state-pending-bg: #fef3c7; // amber-100
|
||||
$fusion-state-reconciled-bg: #d1fae5; // emerald-100
|
||||
$fusion-state-partial-bg: #fde68a; // amber-200
|
||||
|
||||
// ============================================================
|
||||
// Spacing scale (4px increments)
|
||||
// ============================================================
|
||||
$fusion-space-1: 0.25rem; // 4px
|
||||
$fusion-space-2: 0.5rem; // 8px
|
||||
$fusion-space-3: 0.75rem; // 12px
|
||||
$fusion-space-4: 1rem; // 16px
|
||||
$fusion-space-5: 1.25rem; // 20px
|
||||
$fusion-space-6: 1.5rem; // 24px
|
||||
$fusion-space-8: 2rem; // 32px
|
||||
|
||||
// ============================================================
|
||||
// Typography
|
||||
// ============================================================
|
||||
$fusion-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
$fusion-font-size-xs: 0.75rem; // 12px
|
||||
$fusion-font-size-sm: 0.875rem; // 14px
|
||||
$fusion-font-size-base: 1rem; // 16px
|
||||
$fusion-font-size-lg: 1.125rem; // 18px
|
||||
$fusion-font-size-xl: 1.25rem; // 20px
|
||||
|
||||
$fusion-font-weight-normal: 400;
|
||||
$fusion-font-weight-medium: 500;
|
||||
$fusion-font-weight-semibold: 600;
|
||||
$fusion-font-weight-bold: 700;
|
||||
|
||||
// ============================================================
|
||||
// Borders + radii
|
||||
// ============================================================
|
||||
$fusion-border-radius-sm: 0.25rem;
|
||||
$fusion-border-radius: 0.375rem;
|
||||
$fusion-border-radius-md: 0.5rem;
|
||||
$fusion-border-radius-lg: 0.75rem;
|
||||
|
||||
// ============================================================
|
||||
// Shadows
|
||||
// ============================================================
|
||||
$fusion-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
$fusion-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
$fusion-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
$fusion-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
// ============================================================
|
||||
// Animation
|
||||
// ============================================================
|
||||
$fusion-transition-fast: 150ms ease-in-out;
|
||||
$fusion-transition-base: 200ms ease-in-out;
|
||||
$fusion-transition-slow: 300ms ease-in-out;
|
||||
@@ -0,0 +1,90 @@
|
||||
@import "variables";
|
||||
|
||||
// ============================================================
|
||||
// AI Suggestion strip (inline, on each statement line card)
|
||||
// ============================================================
|
||||
.o_fusion_ai_suggestion {
|
||||
margin-top: $fusion-space-3;
|
||||
padding: $fusion-space-3;
|
||||
border-radius: $fusion-border-radius;
|
||||
border: 1px solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $fusion-space-3;
|
||||
font-size: $fusion-font-size-sm;
|
||||
transition: all $fusion-transition-base;
|
||||
|
||||
// Confidence bands — apply via [data-band="..."] attribute
|
||||
&[data-band="high"] {
|
||||
background: $fusion-confidence-high-bg;
|
||||
border-color: $fusion-confidence-high;
|
||||
|
||||
.o_fusion_confidence_value { color: $fusion-confidence-high; }
|
||||
}
|
||||
&[data-band="medium"] {
|
||||
background: $fusion-confidence-medium-bg;
|
||||
border-color: $fusion-confidence-medium;
|
||||
|
||||
.o_fusion_confidence_value { color: $fusion-confidence-medium; }
|
||||
}
|
||||
&[data-band="low"] {
|
||||
background: $fusion-confidence-low-bg;
|
||||
border-color: $fusion-confidence-low;
|
||||
|
||||
.o_fusion_confidence_value { color: $fusion-confidence-low; }
|
||||
}
|
||||
&[data-band="none"] {
|
||||
background: $fusion-confidence-none-bg;
|
||||
border-color: $fusion-confidence-none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.o_fusion_confidence_badge {
|
||||
font-weight: $fusion-font-weight-bold;
|
||||
font-size: $fusion-font-size-base;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.o_fusion_suggestion_text {
|
||||
flex: 1;
|
||||
color: $fusion-color-text-primary;
|
||||
|
||||
.o_fusion_reasoning {
|
||||
color: $fusion-color-text-secondary;
|
||||
font-style: italic;
|
||||
margin-top: $fusion-space-1;
|
||||
}
|
||||
}
|
||||
|
||||
.o_fusion_suggestion_actions {
|
||||
display: flex;
|
||||
gap: $fusion-space-2;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Alternatives panel (expandable list of other suggestions)
|
||||
// ============================================================
|
||||
.o_fusion_alternatives_panel {
|
||||
margin-top: $fusion-space-2;
|
||||
padding: $fusion-space-3;
|
||||
background: $fusion-color-bg-secondary;
|
||||
border: 1px solid $fusion-color-border;
|
||||
border-radius: $fusion-border-radius;
|
||||
font-size: $fusion-font-size-sm;
|
||||
|
||||
.o_fusion_alternative {
|
||||
padding: $fusion-space-2 0;
|
||||
border-bottom: 1px solid $fusion-color-border;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
.alt_confidence {
|
||||
font-weight: $fusion-font-weight-medium;
|
||||
margin-right: $fusion-space-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
@import "variables";
|
||||
|
||||
// ============================================================
|
||||
// Bank reconciliation kanban container
|
||||
// ============================================================
|
||||
.o_fusion_bank_rec {
|
||||
background: $fusion-color-bg-secondary;
|
||||
min-height: 100vh;
|
||||
font-family: $fusion-font-family;
|
||||
color: $fusion-color-text-primary;
|
||||
|
||||
// Header bar with stats
|
||||
&_header {
|
||||
background: $fusion-color-bg-primary;
|
||||
border-bottom: 1px solid $fusion-color-border;
|
||||
padding: $fusion-space-4 $fusion-space-6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h1 {
|
||||
font-size: $fusion-font-size-xl;
|
||||
font-weight: $fusion-font-weight-semibold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.o_fusion_stats {
|
||||
display: flex;
|
||||
gap: $fusion-space-6;
|
||||
font-size: $fusion-font-size-sm;
|
||||
color: $fusion-color-text-secondary;
|
||||
|
||||
.stat-value {
|
||||
font-weight: $fusion-font-weight-semibold;
|
||||
color: $fusion-color-text-primary;
|
||||
margin-left: $fusion-space-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Statement line cards (kanban tile)
|
||||
&_line {
|
||||
background: $fusion-color-bg-primary;
|
||||
border: 1px solid $fusion-color-border;
|
||||
border-radius: $fusion-border-radius-md;
|
||||
padding: $fusion-space-4;
|
||||
margin-bottom: $fusion-space-3;
|
||||
cursor: pointer;
|
||||
transition: all $fusion-transition-base;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
border-color: $fusion-color-accent;
|
||||
box-shadow: $fusion-shadow-md;
|
||||
}
|
||||
|
||||
&.o_fusion_selected {
|
||||
border-color: $fusion-color-accent;
|
||||
background: $fusion-color-accent-bg;
|
||||
}
|
||||
|
||||
&_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: $fusion-space-2;
|
||||
|
||||
.o_fusion_amount {
|
||||
font-size: $fusion-font-size-lg;
|
||||
font-weight: $fusion-font-weight-semibold;
|
||||
|
||||
&.negative {
|
||||
color: $fusion-confidence-low;
|
||||
}
|
||||
}
|
||||
|
||||
.o_fusion_date {
|
||||
font-size: $fusion-font-size-sm;
|
||||
color: $fusion-color-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
&_body {
|
||||
font-size: $fusion-font-size-sm;
|
||||
color: $fusion-color-text-secondary;
|
||||
|
||||
.o_fusion_partner {
|
||||
font-weight: $fusion-font-weight-medium;
|
||||
color: $fusion-color-text-primary;
|
||||
margin-right: $fusion-space-2;
|
||||
}
|
||||
|
||||
.o_fusion_memo {
|
||||
font-style: italic;
|
||||
color: $fusion-color-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// Attachment count badge
|
||||
.o_fusion_attachments_badge {
|
||||
position: absolute;
|
||||
top: $fusion-space-2;
|
||||
right: $fusion-space-2;
|
||||
background: $fusion-color-bg-tertiary;
|
||||
border-radius: $fusion-border-radius;
|
||||
padding: $fusion-space-1 $fusion-space-2;
|
||||
font-size: $fusion-font-size-xs;
|
||||
color: $fusion-color-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// Detail/edit panel (right side)
|
||||
&_detail {
|
||||
background: $fusion-color-bg-primary;
|
||||
border-left: 1px solid $fusion-color-border;
|
||||
padding: $fusion-space-6;
|
||||
|
||||
h2 {
|
||||
font-size: $fusion-font-size-lg;
|
||||
font-weight: $fusion-font-weight-semibold;
|
||||
margin: 0 0 $fusion-space-4;
|
||||
}
|
||||
}
|
||||
|
||||
// Action buttons
|
||||
.btn_fusion {
|
||||
padding: $fusion-space-2 $fusion-space-4;
|
||||
border-radius: $fusion-border-radius;
|
||||
font-size: $fusion-font-size-sm;
|
||||
font-weight: $fusion-font-weight-medium;
|
||||
border: 1px solid $fusion-color-border;
|
||||
background: $fusion-color-bg-primary;
|
||||
color: $fusion-color-text-primary;
|
||||
cursor: pointer;
|
||||
transition: all $fusion-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $fusion-color-bg-tertiary;
|
||||
}
|
||||
|
||||
&.btn_fusion_primary {
|
||||
background: $fusion-color-accent;
|
||||
border-color: $fusion-color-accent;
|
||||
color: $fusion-color-text-inverse;
|
||||
|
||||
&:hover {
|
||||
background: $fusion-color-accent-hover;
|
||||
border-color: $fusion-color-accent-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
64
fusion_accounting_bank_rec/static/src/scss/dark_mode.scss
Normal file
64
fusion_accounting_bank_rec/static/src/scss/dark_mode.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
@import "variables";
|
||||
|
||||
// Activated via [data-color-scheme="dark"] on body or any ancestor.
|
||||
// Mirrors Odoo's standard dark-mode trigger pattern.
|
||||
|
||||
[data-color-scheme="dark"] .o_fusion_bank_rec {
|
||||
background: #1f2937;
|
||||
color: #f9fafb;
|
||||
|
||||
&_header,
|
||||
&_line,
|
||||
&_detail {
|
||||
background: #111827;
|
||||
border-color: #374151;
|
||||
color: #f9fafb;
|
||||
}
|
||||
|
||||
&_line {
|
||||
&:hover { border-color: #60a5fa; }
|
||||
&.o_fusion_selected {
|
||||
background: #1e3a8a;
|
||||
border-color: #60a5fa;
|
||||
}
|
||||
|
||||
&_header .o_fusion_date,
|
||||
&_body { color: #d1d5db; }
|
||||
|
||||
.o_fusion_attachments_badge {
|
||||
background: #374151;
|
||||
color: #d1d5db;
|
||||
}
|
||||
}
|
||||
|
||||
.btn_fusion {
|
||||
background: #374151;
|
||||
border-color: #4b5563;
|
||||
color: #f9fafb;
|
||||
|
||||
&:hover { background: #4b5563; }
|
||||
|
||||
&.btn_fusion_primary {
|
||||
background: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
|
||||
&:hover {
|
||||
background: #2563eb;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// AI suggestion strip — soften background colors for dark mode
|
||||
.o_fusion_ai_suggestion {
|
||||
&[data-band="high"] { background: rgba(16, 185, 129, 0.1); }
|
||||
&[data-band="medium"] { background: rgba(245, 158, 11, 0.1); }
|
||||
&[data-band="low"] { background: rgba(239, 68, 68, 0.1); }
|
||||
&[data-band="none"] { background: rgba(156, 163, 175, 0.1); }
|
||||
}
|
||||
|
||||
.o_fusion_alternatives_panel {
|
||||
background: #1f2937;
|
||||
border-color: #374151;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user