Theme Context - Copy this React, Tailwind Component to your project
Prompt-for-Developing-a-SaaS-with-Dual-Dashboards,-Analytics-Tab,-Modular-Metrics,-and-Language-Localization-Project-Overview:-Develop-a-SaaS-platform-tailored-for-two-types-of-customers-managing-Meta-Ads-and-Google-Ads-campaigns.-The-platform-must-feature:-Two-distinct-dashboards-for-the-different-customer-types.-An-Analytics-Tab-with-a-complete-funnel-visualization-and-customizable-options.-Modular-metrics-allowing-users-to-add,-remove,-or-rearrange-data-displayed-on-the-dashboard.-Language-localization-to-support-multiple-languages-(e.g.,-English,-Portuguese)-with-seamless-transitions.-Dark-mode-and-light-mode-for-user-comfort.-Key-Features-and-Functionalities-1.-Dual-Dashboards-for-Two-Customer-Types-Provide-separate-dashboards-tailored-to-the-needs-of-the-two-distinct-customer-types:-Dashboard-1-–-Performance-Oriented-Customers-This-dashboard-emphasizes-detailed-metrics-to-support-campaign-performance-optimization.-Metrics-to-Display:-Total-Spend-Impressions-(Prints)-CPM-(Cost-Per-Mille)-CPC-(Cost-Per-Click)-CTR-(Click-Through-Rate)-Checkouts-Cost-per-Checkout-Sales-Cost-per-Purchase-Sales-Value-Visualizations:-Sales-per-Day:-Line-graph-showing-daily-sales-trends.-Clicks-per-Day:-Graph-illustrating-engagement-trends.-Checkouts-per-Day:-Visualization-of-daily-checkout-activity.-Spend-vs.-Revenue:-Bar-or-line-graph-comparing-ad-spend-with-revenue.-Dashboard-2-–-Strategic-Decision-Makers-This-dashboard-focuses-on-summaries-and-high-level-insights.-Metrics-to-Display:-Total-Spend-vs.-Sales-Value-ROI-(Return-on-Investment)-across-campaigns-Top-performing-campaigns-(based-on-CTR,-CPC,-or-ROI)-Visualizations:-ROI-Heatmap:-Compare-campaign-profitability.-Funnel-Visualization:-Track-user-flow-from-impressions-to-sales.-2.-Analytics-Tab-with-Full-Funnel-The-Analytics-Tab-provides-a-comprehensive-view-of-campaign-performance-through-a-full-funnel-analysis.-Funnel-Stages:-Impressions-(Prints)-Clicks-Add-to-Cart-Checkouts-Purchases-Sales-Value-Features:-Interactive-Funnel-Visualization:-Display-drop-off-rates-between-stages.-Show-percentages-of-users-advancing-to-the-next-stage.-Highlight-bottlenecks-for-optimization-opportunities.-Customizable-Options:-Add,-remove,-or-rearrange-funnel-stages-based-on-client-needs.-Save-preferred-configurations-for-future-use.-Advanced-Filtering:-Time-range:-Daily,-weekly,-monthly,-custom.-Campaign-specific-performance-analysis.-Segmentation-by-audience-(e.g.,-demographics,-device-types).-Graph-Options-in-Analytics-Tab:-Sales-per-Day-Clicks-per-Day-Add-to-Cart-per-Day-Revenue-vs.-Spend-3.-Modular-Metrics-on-the-Dashboard-Enable-users-to-customize-their-dashboard-by-adding,-removing,-or-rearranging-metrics:-Functionality:-Select-or-deselect-metrics-(e.g.,-CPM,-CPC,-CTR,-Sales-Value).-Drag-and-drop-to-rearrange-metric-order.-Save-preferences-for-personalized-views.-4.-Language-Localization-Support-Ensure-the-platform-supports-multiple-languages-with-seamless-switching:-Features:-Dynamic-Language-Switching:-Users-can-switch-between-languages-(e.g.,-English,-Portuguese)-via-a-settings-menu.-All-dashboard-elements,-analytics-tabs,-and-tooltips-update-instantly.-Localized-Formats:-Adapt-numerical-data-formats-(e.g.,-currency,-date)-to-the-selected-language-region.-Persistent-Settings:-Save-user-language-preferences-for-consistent-experiences-across-sessions.-5.-General-Platform-Features-Dark-and-Light-Modes:-Provide-users-with-the-option-to-toggle-between-dark-mode-and-light-mode-for-a-personalized-experience.-Responsiveness:-Ensure-compatibility-with-all-device-types-(desktop,-tablet,-and-mobile).-User-Roles:-Admin:-Full-access.-Analyst:-View-only-access.-Manager:-View-and-edit-campaigns.-Data-Export:-Allow-users-to-export-data-and-reports-in-formats-like-PDF,-CSV,-and-Excel.-Technology-Recommendations-Frontend:-React.js-or-Vue.js-for-responsive-and-dynamic-UI.-Backend:-Node.js-or-Django-for-robust-API-handling-and-scalability.-Database:-PostgreSQL-or-MongoDB-for-secure-and-efficient-data-management.-API-Integrations:-RESTful-or-GraphQL-APIs-for-Meta-Ads-and-Google-Ads-data-syncing.-Authentication:-OAuth-2.0-for-secure-user-account-connections.-Hosting:-AWS,-Google-Cloud,-or-Azure-for-scalable-infrastructure.-Deliverables-Dual-Dashboard-System:-Two-distinct-dashboards-tailored-to-the-needs-of-each-customer-type.-Analytics-Tab:-Full-funnel-visualization-with-customizable-metrics-and-filters.-Modular-Metrics:-A-dynamic-dashboard-where-users-can-add,-remove,-or-rearrange-metrics.-Language-Localization:-Seamless-language-switching-with-localized-data-formats.-Documentation:-User-guides-for-dashboards,-analytics,-and-language-settings.
