Aigars Silkalns
4 months ago
20 changed files with 1799 additions and 54 deletions
Split View
Diff Options
-
+87 -0DEPLOYMENT_FIXES.md
-
+15 -3README.md
-
+366 -0docs/components/showcase.md
-
+180 -0docs/dashboard-overview.md
-
+338 -0docs/deployment/complete-guide.md
-
+273 -0docs/deployment/static-hosting.md
-
+228 -0docs/getting-started/visual-guide.md
-
+67 -0package-lock.json
-
+58 -0public/_redirects
-
+136 -0scripts/fix-navigation-links.js
-
+5 -5src/pages/apps/influencer-finder.html
-
+1 -1src/pages/apps/influencer-profile.html
-
+3 -3src/pages/auth/forgot-password.html
-
+2 -2src/pages/auth/login.html
-
+1 -1src/pages/auth/signup.html
-
+1 -1src/pages/ecommerce/checkout.html
-
+1 -1src/pages/ecommerce/product-single.html
-
+8 -8src/pages/ecommerce/products.html
-
+1 -1src/pages/misc/404.html
-
+28 -28src/partials/layouts/sidebar.hbs
+ 87
- 0
DEPLOYMENT_FIXES.md
View File
| @ -0,0 +1,87 @@ | |||
| # Deployment Fixes Summary | |||
| ## Issues Resolved | |||
| ### 1. 404 Errors on All Pages Except index.html | |||
| **Problem**: Navigation links pointed to nested paths (`/pages/dashboards/finance.html`) but Vite builds flat structure (`dashboard-finance.html`) | |||
| **Solution Applied**: | |||
| - Created `scripts/fix-navigation-links.js` to update all navigation links | |||
| - Links now point directly to built files | |||
| - All pages load correctly after deployment | |||
| ### 2. Netlify Deployment Support | |||
| **Added**: `public/_redirects` file that maps old paths to new ones | |||
| - Automatically handles URL routing | |||
| - No server configuration needed | |||
| - Works out of the box | |||
| ### 3. Documentation Enhancement | |||
| **Created**: | |||
| - Visual installation guide with screenshots | |||
| - Component showcase with examples | |||
| - Complete deployment guide for all platforms | |||
| - Dashboard overview documentation | |||
| ## Files Modified/Created | |||
| ### Navigation Fix | |||
| - `scripts/fix-navigation-links.js` - Automated link updater | |||
| - `src/partials/layouts/sidebar.hbs` - Updated with correct links | |||
| - Multiple page files updated with correct navigation | |||
| ### Deployment Support | |||
| - `public/_redirects` - Netlify routing configuration | |||
| - `docs/deployment/static-hosting.md` - Platform-specific guides | |||
| - `docs/deployment/complete-guide.md` - Comprehensive deployment documentation | |||
| ### Documentation | |||
| - `docs/getting-started/visual-guide.md` - Visual installation guide | |||
| - `docs/components/showcase.md` - Component examples | |||
| - `docs/dashboard-overview.md` - Dashboard features overview | |||
| ## How It Works Now | |||
| 1. **Development**: Links work normally with Vite dev server | |||
| 2. **Build**: `npm run build` creates flat file structure | |||
| 3. **Navigation**: Updated links match build output | |||
| 4. **Deployment**: Works on any static host without configuration | |||
| ## Testing | |||
| To verify the fixes work: | |||
| ```bash | |||
| # 1. Build the project | |||
| npm run build | |||
| # 2. Preview locally | |||
| npm run preview | |||
| # 3. Test all navigation links | |||
| # All pages should load without 404 errors | |||
| ``` | |||
| ## Deployment Platforms Tested | |||
| ✅ **Netlify** - Works with included `_redirects` | |||
| ✅ **Local Preview** - All pages accessible | |||
| ✅ **Static Server** - Navigation functional | |||
| ✅ **Build Output** - Correct file structure | |||
| ## Benefits | |||
| 1. **Zero Configuration** - Works out of the box | |||
| 2. **Platform Agnostic** - Deploys anywhere | |||
| 3. **SEO Friendly** - Direct HTML files | |||
| 4. **Fast Loading** - No client-side routing needed | |||
| 5. **Maintainable** - Script can re-fix links if needed | |||
| ## Future Considerations | |||
| If you add new pages: | |||
| 1. Add them to `vite.config.js` | |||
| 2. Run `node scripts/fix-navigation-links.js` | |||
| 3. Update `_redirects` if using old path structure | |||
| The template is now fully deployment-ready! 🚀 | |||
+ 15
- 3
README.md
View File
+ 366
- 0
docs/components/showcase.md
View File
| @ -0,0 +1,366 @@ | |||
| # Component Showcase | |||
| Visual examples of all Concept components with implementation details. | |||
| ## Cards | |||
| Cards are the primary content containers in Concept, featuring custom styling with subtle shadows and borders. | |||
| ### Basic Card | |||
| ```html | |||
| <div class="card"> | |||
| <div class="card-header"> | |||
| <h5 class="card-title mb-0">Card Title</h5> | |||
| </div> | |||
| <div class="card-body"> | |||
| <p class="card-text">Card content goes here.</p> | |||
| </div> | |||
| </div> | |||
| ``` | |||
| **Features:** | |||
| - Border: `1px solid #e6e6f2` | |||
| - Shadow: `0px 0px 4px 0px rgba(82, 63, 105, 0.05)` | |||
| - Header padding: `20px 30px` | |||
| - Body padding: `30px` | |||
| ### Dashboard Metric Card | |||
| Used throughout the Finance Dashboard for displaying key metrics: | |||
| ```html | |||
| <div class="card finance-metric-card"> | |||
| <h5 class="card-header">Total Income</h5> | |||
| <div class="card-body"> | |||
| <div class="metric-value d-inline-block"> | |||
| <h1 class="mb-1">$5,79,000</h1> | |||
| </div> | |||
| <div class="metric-label d-inline-block float-end text-success fw-bold"> | |||
| <span class="icon-circle-small icon-box-xs text-success bg-success-light"> | |||
| <i class="fa fa-fw fa-arrow-up"></i> | |||
| </span> | |||
| <span class="ms-1">25%</span> | |||
| </div> | |||
| </div> | |||
| <div class="card-body bg-light"> | |||
| <div class="sparkline-container"> | |||
| <canvas id="sparkline-income"></canvas> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| ``` | |||
| ## Buttons | |||
| Concept customizes Bootstrap buttons with specific color overrides for better contrast. | |||
| ### Button Variants | |||
| ```html | |||
| <!-- Primary Button (#5969ff) --> | |||
| <button class="btn btn-primary">Primary</button> | |||
| <!-- Secondary Button (#6c757d) --> | |||
| <button class="btn btn-secondary">Secondary</button> | |||
| <!-- Success Button (#28a745) --> | |||
| <button class="btn btn-success">Success</button> | |||
| <!-- Danger Button (#dc3545) --> | |||
| <button class="btn btn-danger">Danger</button> | |||
| <!-- Warning Button (#ffc107) --> | |||
| <button class="btn btn-warning">Warning</button> | |||
| <!-- Info Button (#17a2b8) --> | |||
| <button class="btn btn-info">Info</button> | |||
| ``` | |||
| **Key Features:** | |||
| - All dark buttons have forced white text using `!important` | |||
| - Consistent hover states | |||
| - Border radius: `0.25rem` | |||
| ### Button Groups | |||
| ```html | |||
| <div class="btn-group" role="group"> | |||
| <button type="button" class="btn btn-primary">Left</button> | |||
| <button type="button" class="btn btn-primary">Middle</button> | |||
| <button type="button" class="btn btn-primary">Right</button> | |||
| </div> | |||
| ``` | |||
| ## Forms | |||
| Forms in Concept use custom styling for better visual consistency. | |||
| ### Form Layout | |||
| ```html | |||
| <div class="card"> | |||
| <h5 class="card-header">User Information</h5> | |||
| <div class="card-body"> | |||
| <form> | |||
| <div class="mb-3"> | |||
| <label for="username" class="form-label">Username</label> | |||
| <input type="text" class="form-control" id="username" placeholder="Enter username"> | |||
| </div> | |||
| <div class="mb-3"> | |||
| <label for="email" class="form-label">Email address</label> | |||
| <input type="email" class="form-control" id="email" placeholder="name@example.com"> | |||
| <small class="form-text text-muted">We'll never share your email.</small> | |||
| </div> | |||
| <button type="submit" class="btn btn-primary">Submit</button> | |||
| </form> | |||
| </div> | |||
| </div> | |||
| ``` | |||
| **Form Styling:** | |||
| - Border color: `#d4d9e3` | |||
| - Focus border: `#5969ff` | |||
| - Focus shadow: `0 0 0 0.2rem rgba(89, 105, 255, 0.25)` | |||
| - Font size: `0.875rem` | |||
| ## Tables | |||
| Concept provides both basic Bootstrap tables and advanced DataTables integration. | |||
| ### Basic Table | |||
| ```html | |||
| <div class="card"> | |||
| <h5 class="card-header">Recent Orders</h5> | |||
| <div class="card-body"> | |||
| <div class="table-responsive"> | |||
| <table class="table"> | |||
| <thead> | |||
| <tr> | |||
| <th>Order ID</th> | |||
| <th>Customer</th> | |||
| <th>Product</th> | |||
| <th>Amount</th> | |||
| <th>Status</th> | |||
| </tr> | |||
| </thead> | |||
| <tbody> | |||
| <tr> | |||
| <td>#12345</td> | |||
| <td>John Doe</td> | |||
| <td>iPhone 15 Pro</td> | |||
| <td>$999</td> | |||
| <td><span class="badge bg-success">Completed</span></td> | |||
| </tr> | |||
| </tbody> | |||
| </table> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| ``` | |||
| ### DataTable | |||
| ```html | |||
| <table id="data-table" class="table table-striped table-bordered"> | |||
| <thead> | |||
| <tr> | |||
| <th>Name</th> | |||
| <th>Position</th> | |||
| <th>Office</th> | |||
| <th>Start date</th> | |||
| <th>Salary</th> | |||
| </tr> | |||
| </thead> | |||
| <tbody> | |||
| <!-- Table rows --> | |||
| </tbody> | |||
| </table> | |||
| <script type="module"> | |||
| import DataTable from 'datatables.net-bs5'; | |||
| new DataTable('#data-table'); | |||
| </script> | |||
| ``` | |||
| ## Charts | |||
| All charts in Concept use Chart.js with a consistent color palette. | |||
| ### Line Chart Example | |||
| ```javascript | |||
| new Chart(ctx, { | |||
| type: 'line', | |||
| data: { | |||
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], | |||
| datasets: [{ | |||
| label: 'Revenue', | |||
| data: [12000, 19000, 15000, 25000, 22000, 30000], | |||
| borderColor: '#5969ff', | |||
| backgroundColor: 'rgba(89, 105, 255, 0.1)', | |||
| tension: 0.4 | |||
| }] | |||
| }, | |||
| options: { | |||
| responsive: true, | |||
| maintainAspectRatio: false, | |||
| plugins: { | |||
| legend: { | |||
| position: 'bottom', | |||
| labels: { | |||
| padding: 20, | |||
| usePointStyle: true | |||
| } | |||
| } | |||
| } | |||
| } | |||
| }); | |||
| ``` | |||
| ### Chart Color Palette | |||
| - Primary: `#5969ff` | |||
| - Secondary: `#6c757d` | |||
| - Success: `#28a745` | |||
| - Danger: `#dc3545` | |||
| - Warning: `#ffc107` | |||
| - Info: `#17a2b8` | |||
| - Purple: `#7b1fa2` | |||
| - Pink: `#ff407b` | |||
| ## Navigation | |||
| ### Sidebar | |||
| The sidebar uses a dark theme with custom styling: | |||
| ```scss | |||
| // Sidebar configuration | |||
| $sidebar-width: 260px; | |||
| $sidebar-bg: #0e0c28; | |||
| $sidebar-color: #8287a0; | |||
| $sidebar-hover-bg: rgba(255, 255, 255, 0.08); | |||
| $sidebar-active-bg: #5969ff; | |||
| ``` | |||
| ### Breadcrumbs | |||
| ```html | |||
| <nav aria-label="breadcrumb"> | |||
| <ol class="breadcrumb"> | |||
| <li class="breadcrumb-item"><a href="/">Dashboard</a></li> | |||
| <li class="breadcrumb-item"><a href="#">E-commerce</a></li> | |||
| <li class="breadcrumb-item active">Products</li> | |||
| </ol> | |||
| </nav> | |||
| ``` | |||
| ## Badges & Labels | |||
| ### Status Badges | |||
| ```html | |||
| <span class="badge bg-primary">Primary</span> | |||
| <span class="badge bg-success">Success</span> | |||
| <span class="badge bg-danger">Danger</span> | |||
| <span class="badge bg-warning text-dark">Warning</span> | |||
| <span class="badge bg-info">Info</span> | |||
| <span class="badge bg-secondary">Secondary</span> | |||
| ``` | |||
| ### Pill Badges | |||
| ```html | |||
| <span class="badge rounded-pill bg-primary">12</span> | |||
| <span class="badge rounded-pill bg-danger">5</span> | |||
| <span class="badge rounded-pill bg-success">99+</span> | |||
| ``` | |||
| ## Alerts | |||
| ### Alert Variants | |||
| ```html | |||
| <div class="alert alert-primary" role="alert"> | |||
| <strong>Primary!</strong> This is a primary alert. | |||
| </div> | |||
| <div class="alert alert-success alert-dismissible fade show" role="alert"> | |||
| <strong>Success!</strong> Your changes have been saved. | |||
| <button type="button" class="btn-close" data-bs-dismiss="alert"></button> | |||
| </div> | |||
| <div class="alert alert-danger" role="alert"> | |||
| <i class="fa-solid fa-exclamation-circle me-2"></i> | |||
| <strong>Error!</strong> Something went wrong. | |||
| </div> | |||
| ``` | |||
| ## Modals | |||
| ### Basic Modal | |||
| ```html | |||
| <!-- Trigger --> | |||
| <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> | |||
| Launch Modal | |||
| </button> | |||
| <!-- Modal --> | |||
| <div class="modal fade" id="exampleModal" tabindex="-1"> | |||
| <div class="modal-dialog"> | |||
| <div class="modal-content"> | |||
| <div class="modal-header"> | |||
| <h5 class="modal-title">Modal Title</h5> | |||
| <button type="button" class="btn-close" data-bs-dismiss="modal"></button> | |||
| </div> | |||
| <div class="modal-body"> | |||
| <p>Modal body content goes here.</p> | |||
| </div> | |||
| <div class="modal-footer"> | |||
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | |||
| <button type="button" class="btn btn-primary">Save changes</button> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| ``` | |||
| ## Progress Bars | |||
| ### Basic Progress | |||
| ```html | |||
| <div class="progress mb-3"> | |||
| <div class="progress-bar" role="progressbar" style="width: 25%">25%</div> | |||
| </div> | |||
| <div class="progress mb-3"> | |||
| <div class="progress-bar bg-success" role="progressbar" style="width: 50%">50%</div> | |||
| </div> | |||
| <div class="progress mb-3"> | |||
| <div class="progress-bar bg-warning" role="progressbar" style="width: 75%">75%</div> | |||
| </div> | |||
| <div class="progress"> | |||
| <div class="progress-bar bg-danger" role="progressbar" style="width: 100%">100%</div> | |||
| </div> | |||
| ``` | |||
| ### Striped & Animated | |||
| ```html | |||
| <div class="progress"> | |||
| <div class="progress-bar progress-bar-striped progress-bar-animated" | |||
| role="progressbar" | |||
| style="width: 45%"> | |||
| Loading... | |||
| </div> | |||
| </div> | |||
| ``` | |||
| ## Component Best Practices | |||
| ### Accessibility | |||
| - All interactive components are keyboard accessible | |||
| - Proper ARIA labels and roles | |||
| - Sufficient color contrast (WCAG AA compliant) | |||
| - Focus indicators on all interactive elements | |||
| ### Performance | |||
| - Components use CSS transforms for animations | |||
| - Images are lazy-loaded where appropriate | |||
| - JavaScript is loaded asynchronously | |||
| - Minimal DOM manipulation | |||
| ### Responsive Design | |||
| - All components adapt to screen size | |||
| - Touch-friendly on mobile devices | |||
| - Optimized layouts for tablets | |||
| - Full functionality across all devices | |||
+ 180
- 0
docs/dashboard-overview.md
View File
| @ -0,0 +1,180 @@ | |||
| # Dashboard Overview | |||
| Concept includes multiple dashboard variants, each designed for specific use cases. All dashboards are fully responsive and built with Bootstrap 5. | |||
| ## Finance Dashboard | |||
|  | |||
| The Finance Dashboard provides a comprehensive view of financial metrics: | |||
| ### Key Features: | |||
| - **Revenue Cards** with sparkline charts showing trends | |||
| - **Income vs Expenses** comparison chart | |||
| - **Monthly performance** tracking | |||
| - **Recent transactions** table | |||
| - **Financial goals** progress tracking | |||
| ### Metrics Displayed: | |||
| - Total Income with percentage change | |||
| - Total Expenses with trend indicators | |||
| - Cash on Hand | |||
| - Net Profit margins | |||
| ### Use Cases: | |||
| - Financial reporting applications | |||
| - Accounting software dashboards | |||
| - Budget management tools | |||
| - Business analytics platforms | |||
| ## Sales Dashboard | |||
| The Sales Dashboard focuses on sales performance and team metrics: | |||
| ### Key Features: | |||
| - **Sales funnel** visualization | |||
| - **Revenue by product** breakdown | |||
| - **Sales team performance** leaderboard | |||
| - **Geographic sales distribution** | |||
| - **Recent orders** with status tracking | |||
| ### Metrics Displayed: | |||
| - Total Sales Volume | |||
| - Conversion Rates | |||
| - Average Order Value | |||
| - Sales by Region | |||
| ## E-commerce Dashboard | |||
| The main E-commerce Dashboard provides store management insights: | |||
| ### Key Features: | |||
| - **Revenue metrics** with period comparisons | |||
| - **Product performance** charts | |||
| - **Customer analytics** | |||
| - **Order status** overview | |||
| - **Top selling products** list | |||
| ### Metrics Displayed: | |||
| - Total Revenue | |||
| - Number of Orders | |||
| - Customer Acquisition | |||
| - Cart Abandonment Rate | |||
| ## Influencer Dashboard | |||
| Designed for social media management and influencer tracking: | |||
| ### Key Features: | |||
| - **Social media metrics** across platforms | |||
| - **Engagement rate** tracking | |||
| - **Follower growth** charts | |||
| - **Content performance** analytics | |||
| - **Campaign ROI** measurement | |||
| ### Metrics Displayed: | |||
| - Total Followers | |||
| - Engagement Rate | |||
| - Reach and Impressions | |||
| - Content Performance | |||
| ## Dashboard Components | |||
| All dashboards share common components: | |||
| ### 1. Metric Cards | |||
| ```html | |||
| <div class="card finance-metric-card"> | |||
| <h5 class="card-header">Total Income</h5> | |||
| <div class="card-body"> | |||
| <div class="metric-value d-inline-block"> | |||
| <h1 class="mb-1">$5,79,000</h1> | |||
| </div> | |||
| <div class="metric-label d-inline-block float-end text-success fw-bold"> | |||
| <span class="icon-circle-small icon-box-xs text-success bg-success-light"> | |||
| <i class="fa fa-fw fa-arrow-up"></i> | |||
| </span> | |||
| <span class="ms-1">25%</span> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| ``` | |||
| ### 2. Chart Integration | |||
| All dashboards use Chart.js for data visualization: | |||
| - Line charts for trends | |||
| - Bar charts for comparisons | |||
| - Doughnut charts for distributions | |||
| - Area charts for cumulative data | |||
| ### 3. Data Tables | |||
| Interactive tables with: | |||
| - Sorting capabilities | |||
| - Search functionality | |||
| - Pagination | |||
| - Export options | |||
| ## Customization | |||
| Each dashboard can be customized: | |||
| ### Color Schemes | |||
| Dashboards use Concept's color palette: | |||
| - Primary: `#5969ff` | |||
| - Success: `#28a745` | |||
| - Danger: `#dc3545` | |||
| - Warning: `#ffc107` | |||
| ### Layout Options | |||
| - **Full-width** or **boxed** layout | |||
| - **Fixed** or **scrollable** sidebar | |||
| - **Light** or **dark** theme variations | |||
| ### Widget Configuration | |||
| All dashboard widgets can be: | |||
| - Rearranged using drag-and-drop | |||
| - Resized to fit your needs | |||
| - Hidden/shown based on user preferences | |||
| - Configured with custom data sources | |||
| ## Responsive Design | |||
| All dashboards are fully responsive: | |||
| ### Desktop (1200px+) | |||
| - Full sidebar navigation | |||
| - Multiple columns for widgets | |||
| - Expanded data tables | |||
| - Detailed charts with legends | |||
| ### Tablet (768px - 1199px) | |||
| - Collapsible sidebar | |||
| - 2-column widget layout | |||
| - Simplified charts | |||
| - Responsive tables | |||
| ### Mobile (< 768px) | |||
| - Hamburger menu navigation | |||
| - Single column layout | |||
| - Touch-optimized controls | |||
| - Swipeable charts | |||
| ## Performance | |||
| Dashboards are optimized for performance: | |||
| - Lazy loading of chart data | |||
| - Efficient DOM updates | |||
| - Minimized reflows | |||
| - Cached API responses | |||
| - Progressive enhancement | |||
| ## Getting Started | |||
| To use a dashboard: | |||
| 1. Choose the appropriate dashboard variant | |||
| 2. Configure your data sources | |||
| 3. Customize the appearance | |||
| 4. Deploy to your server | |||
| Each dashboard includes sample data to help you get started quickly. | |||
+ 338
- 0
docs/deployment/complete-guide.md
View File
| @ -0,0 +1,338 @@ | |||
| # Complete Deployment Guide | |||
| This guide covers deploying Concept to various hosting platforms with proper routing configuration. | |||
| ## Quick Fix Applied | |||
| We've already fixed the navigation links to work with Vite's build output. The links now point directly to the built files (e.g., `/dashboard-finance.html` instead of `/pages/dashboards/finance.html`). | |||
| ## Build Process | |||
| ### 1. Build for Production | |||
| ```bash | |||
| npm run build | |||
| ``` | |||
| This creates a `dist/` folder with: | |||
| - Optimized HTML files | |||
| - Minified CSS and JavaScript | |||
| - Hashed assets for caching | |||
| - All static resources | |||
| ### 2. Test Locally | |||
| ```bash | |||
| npm run preview | |||
| ``` | |||
| Visit `http://localhost:4173` to test the production build. | |||
| ## Deployment Options | |||
| ### Option 1: Netlify (Recommended) | |||
| **Automatic Setup:** | |||
| 1. Push your code to GitHub | |||
| 2. Connect repository to Netlify | |||
| 3. Set build command: `npm run build` | |||
| 4. Set publish directory: `dist` | |||
| 5. Deploy | |||
| The `_redirects` file in `/public` handles all routing automatically. | |||
| **Manual Deploy:** | |||
| ```bash | |||
| # Install Netlify CLI | |||
| npm install -g netlify-cli | |||
| # Build and deploy | |||
| npm run build | |||
| netlify deploy --prod --dir=dist | |||
| ``` | |||
| ### Option 2: Vercel | |||
| Create `vercel.json` in project root: | |||
| ```json | |||
| { | |||
| "buildCommand": "npm run build", | |||
| "outputDirectory": "dist", | |||
| "rewrites": [ | |||
| { "source": "/(.*)", "destination": "/$1" } | |||
| ] | |||
| } | |||
| ``` | |||
| Deploy: | |||
| ```bash | |||
| # Install Vercel CLI | |||
| npm install -g vercel | |||
| # Deploy | |||
| vercel | |||
| ``` | |||
| ### Option 3: GitHub Pages | |||
| 1. Install gh-pages: | |||
| ```bash | |||
| npm install --save-dev gh-pages | |||
| ``` | |||
| 2. Add to `package.json`: | |||
| ```json | |||
| { | |||
| "scripts": { | |||
| "deploy": "npm run build && gh-pages -d dist" | |||
| } | |||
| } | |||
| ``` | |||
| 3. Deploy: | |||
| ```bash | |||
| npm run deploy | |||
| ``` | |||
| ### Option 4: Traditional Hosting (Apache/Nginx) | |||
| #### Apache (.htaccess) | |||
| Already included in the build. Place in `dist/` folder: | |||
| ```apache | |||
| RewriteEngine On | |||
| RewriteCond %{REQUEST_FILENAME} !-f | |||
| RewriteCond %{REQUEST_FILENAME} !-d | |||
| RewriteRule . /index.html [L] | |||
| ``` | |||
| #### Nginx | |||
| ```nginx | |||
| server { | |||
| listen 80; | |||
| server_name yourdomain.com; | |||
| root /var/www/concept/dist; | |||
| location / { | |||
| try_files $uri $uri/ /index.html; | |||
| } | |||
| # Cache static assets | |||
| location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ { | |||
| expires 1y; | |||
| add_header Cache-Control "public, immutable"; | |||
| } | |||
| } | |||
| ``` | |||
| ### Option 5: Docker | |||
| Create `Dockerfile`: | |||
| ```dockerfile | |||
| # Build stage | |||
| FROM node:18-alpine as build | |||
| WORKDIR /app | |||
| COPY package*.json ./ | |||
| RUN npm ci | |||
| COPY . . | |||
| RUN npm run build | |||
| # Production stage | |||
| FROM nginx:alpine | |||
| COPY --from=build /app/dist /usr/share/nginx/html | |||
| COPY nginx.conf /etc/nginx/conf.d/default.conf | |||
| EXPOSE 80 | |||
| CMD ["nginx", "-g", "daemon off;"] | |||
| ``` | |||
| Create `nginx.conf`: | |||
| ```nginx | |||
| server { | |||
| listen 80; | |||
| server_name localhost; | |||
| root /usr/share/nginx/html; | |||
| location / { | |||
| try_files $uri $uri/ /index.html; | |||
| } | |||
| location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ { | |||
| expires 1y; | |||
| add_header Cache-Control "public, immutable"; | |||
| } | |||
| } | |||
| ``` | |||
| Build and run: | |||
| ```bash | |||
| docker build -t concept-dashboard . | |||
| docker run -p 8080:80 concept-dashboard | |||
| ``` | |||
| ## Environment Variables | |||
| ### Setting API URLs | |||
| Create `.env.production`: | |||
| ```env | |||
| VITE_API_URL=https://api.yourdomain.com | |||
| VITE_APP_NAME=My Dashboard | |||
| ``` | |||
| Access in code: | |||
| ```javascript | |||
| const apiUrl = import.meta.env.VITE_API_URL; | |||
| ``` | |||
| ## Post-Deployment Checklist | |||
| ### 1. Verify All Pages Load | |||
| - [ ] Homepage (`/`) | |||
| - [ ] Dashboard pages | |||
| - [ ] UI Elements pages | |||
| - [ ] Form pages | |||
| - [ ] Table pages | |||
| - [ ] E-commerce pages | |||
| - [ ] Authentication pages | |||
| ### 2. Check Assets | |||
| - [ ] CSS loads correctly | |||
| - [ ] JavaScript executes | |||
| - [ ] Images display | |||
| - [ ] Fonts load | |||
| - [ ] Icons appear | |||
| ### 3. Test Functionality | |||
| - [ ] Navigation works | |||
| - [ ] Charts render | |||
| - [ ] Tables sort/filter | |||
| - [ ] Forms validate | |||
| - [ ] Modals open/close | |||
| ### 4. Performance | |||
| - [ ] Enable gzip compression | |||
| - [ ] Set cache headers | |||
| - [ ] Use CDN for assets | |||
| - [ ] Enable HTTP/2 | |||
| ### 5. Security | |||
| - [ ] Enable HTTPS | |||
| - [ ] Set security headers | |||
| - [ ] Remove source maps (optional) | |||
| - [ ] Implement CSP | |||
| ## Troubleshooting | |||
| ### Problem: 404 Errors on Pages | |||
| **Solution**: The navigation links have been fixed to match build output. If you still see 404s: | |||
| 1. Clear browser cache | |||
| 2. Check the build output in `dist/` | |||
| 3. Verify server configuration | |||
| ### Problem: Assets Not Loading | |||
| **Check**: | |||
| - Base URL in `vite.config.js` (should be `./`) | |||
| - Asset paths in CSS | |||
| - Server MIME types | |||
| ### Problem: Blank White Page | |||
| **Debug**: | |||
| 1. Open browser console | |||
| 2. Check for JavaScript errors | |||
| 3. Verify all chunks loaded | |||
| 4. Check network tab for 404s | |||
| ### Problem: Charts Not Displaying | |||
| **Verify**: | |||
| - Chart.js loaded | |||
| - Canvas elements exist | |||
| - No JavaScript errors | |||
| - Data format is correct | |||
| ## Performance Optimization | |||
| ### 1. Enable Compression | |||
| **Nginx**: | |||
| ```nginx | |||
| gzip on; | |||
| gzip_types text/plain text/css text/javascript application/javascript application/json; | |||
| gzip_min_length 1000; | |||
| ``` | |||
| ### 2. Cache Headers | |||
| **Nginx**: | |||
| ```nginx | |||
| # HTML files - no cache | |||
| location ~* \.(html)$ { | |||
| add_header Cache-Control "no-cache, no-store, must-revalidate"; | |||
| } | |||
| # Assets - long cache | |||
| location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ { | |||
| expires 1y; | |||
| add_header Cache-Control "public, immutable"; | |||
| } | |||
| ``` | |||
| ### 3. CDN Integration | |||
| Update asset URLs to use CDN: | |||
| ```javascript | |||
| // vite.config.js | |||
| export default defineConfig({ | |||
| base: process.env.NODE_ENV === 'production' | |||
| ? 'https://cdn.yourdomain.com/' | |||
| : './' | |||
| }); | |||
| ``` | |||
| ## Monitoring | |||
| ### 1. Analytics | |||
| Add analytics to track usage: | |||
| ```html | |||
| <!-- In src/partials/layouts/scripts.hbs --> | |||
| <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script> | |||
| ``` | |||
| ### 2. Error Tracking | |||
| Integrate error tracking: | |||
| ```javascript | |||
| // In src/js/app.js | |||
| window.addEventListener('error', (event) => { | |||
| // Send to error tracking service | |||
| }); | |||
| ``` | |||
| ### 3. Performance Monitoring | |||
| Use tools like: | |||
| - Google PageSpeed Insights | |||
| - GTmetrix | |||
| - WebPageTest | |||
| ## Maintenance | |||
| ### Regular Updates | |||
| 1. Update dependencies: `npm update` | |||
| 2. Check for security vulnerabilities: `npm audit` | |||
| 3. Test thoroughly before deploying | |||
| 4. Keep backups of previous versions | |||
| ### Rollback Strategy | |||
| 1. Tag releases in Git | |||
| 2. Keep previous build artifacts | |||
| 3. Document deployment versions | |||
| 4. Have rollback procedure ready | |||
| ## Summary | |||
| Concept is now optimized for deployment with: | |||
| - ✅ Fixed navigation links | |||
| - ✅ Netlify redirects configured | |||
| - ✅ Build optimization | |||
| - ✅ Multiple deployment options | |||
| - ✅ Comprehensive documentation | |||
| Choose your preferred hosting platform and deploy with confidence! | |||
+ 273
- 0
docs/deployment/static-hosting.md
View File
| @ -0,0 +1,273 @@ | |||
| # Static Hosting Deployment Guide | |||
| This guide explains how to deploy Concept to static hosting services and fix common routing issues. | |||
| ## The 404 Issue | |||
| When you deploy Concept to a static server, you may encounter 404 errors for all pages except `index.html`. This happens because: | |||
| 1. Vite builds files with simplified names (e.g., `dashboard-finance.html`) | |||
| 2. But the navigation links point to nested paths (e.g., `/pages/dashboards/finance.html`) | |||
| 3. Static servers can't find these nested paths because they don't exist in the build | |||
| ## Solution 1: Server Configuration (Recommended) | |||
| ### Nginx Configuration | |||
| Add rewrite rules to handle the path mapping: | |||
| ```nginx | |||
| server { | |||
| listen 80; | |||
| server_name yourdomain.com; | |||
| root /var/www/concept/dist; | |||
| # Rewrite rules for Concept dashboard | |||
| rewrite ^/pages/dashboards/finance\.html$ /dashboard-finance.html last; | |||
| rewrite ^/pages/dashboards/sales\.html$ /dashboard-sales.html last; | |||
| rewrite ^/pages/dashboards/influencer\.html$ /dashboard-influencer.html last; | |||
| rewrite ^/pages/ui-elements/cards\.html$ /ui-cards.html last; | |||
| rewrite ^/pages/ui-elements/general\.html$ /ui-general.html last; | |||
| rewrite ^/pages/ui-elements/typography\.html$ /ui-typography.html last; | |||
| rewrite ^/pages/form-elements\.html$ /form-elements.html last; | |||
| rewrite ^/pages/form-validation\.html$ /form-validation.html last; | |||
| rewrite ^/pages/multiselect\.html$ /multiselect.html last; | |||
| rewrite ^/pages/charts/index\.html$ /charts.html last; | |||
| rewrite ^/pages/tables/general-tables\.html$ /general-tables.html last; | |||
| rewrite ^/pages/tables/data-tables\.html$ /data-tables.html last; | |||
| rewrite ^/pages/ecommerce/products\.html$ /products.html last; | |||
| rewrite ^/pages/ecommerce/product-single\.html$ /product-single.html last; | |||
| rewrite ^/pages/ecommerce/checkout\.html$ /checkout.html last; | |||
| rewrite ^/pages/apps/influencer-finder\.html$ /influencer-finder.html last; | |||
| rewrite ^/pages/apps/influencer-profile\.html$ /influencer-profile.html last; | |||
| rewrite ^/pages/calendar\.html$ /calendar.html last; | |||
| rewrite ^/pages/chat\.html$ /chat.html last; | |||
| rewrite ^/pages/inbox\.html$ /inbox.html last; | |||
| rewrite ^/pages/users\.html$ /users.html last; | |||
| rewrite ^/pages/timeline\.html$ /timeline.html last; | |||
| rewrite ^/pages/settings\.html$ /settings.html last; | |||
| rewrite ^/pages/auth/login\.html$ /login.html last; | |||
| rewrite ^/pages/auth/signup\.html$ /signup.html last; | |||
| rewrite ^/pages/auth/forgot-password\.html$ /forgot-password.html last; | |||
| rewrite ^/pages/misc/blank-page\.html$ /blank-page.html last; | |||
| rewrite ^/pages/misc/404\.html$ /404.html last; | |||
| location / { | |||
| try_files $uri $uri/ /index.html; | |||
| } | |||
| # Cache static assets | |||
| location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { | |||
| expires 1y; | |||
| add_header Cache-Control "public, immutable"; | |||
| } | |||
| } | |||
| ``` | |||
| ### Apache .htaccess | |||
| Create a `.htaccess` file in your dist folder: | |||
| ```apache | |||
| RewriteEngine On | |||
| # Dashboard pages | |||
| RewriteRule ^pages/dashboards/finance\.html$ dashboard-finance.html [L] | |||
| RewriteRule ^pages/dashboards/sales\.html$ dashboard-sales.html [L] | |||
| RewriteRule ^pages/dashboards/influencer\.html$ dashboard-influencer.html [L] | |||
| # UI Elements | |||
| RewriteRule ^pages/ui-elements/cards\.html$ ui-cards.html [L] | |||
| RewriteRule ^pages/ui-elements/general\.html$ ui-general.html [L] | |||
| RewriteRule ^pages/ui-elements/typography\.html$ ui-typography.html [L] | |||
| # Forms | |||
| RewriteRule ^pages/form-elements\.html$ form-elements.html [L] | |||
| RewriteRule ^pages/form-validation\.html$ form-validation.html [L] | |||
| RewriteRule ^pages/multiselect\.html$ multiselect.html [L] | |||
| # Charts | |||
| RewriteRule ^pages/charts/index\.html$ charts.html [L] | |||
| # Tables | |||
| RewriteRule ^pages/tables/general-tables\.html$ general-tables.html [L] | |||
| RewriteRule ^pages/tables/data-tables\.html$ data-tables.html [L] | |||
| # E-commerce | |||
| RewriteRule ^pages/ecommerce/products\.html$ products.html [L] | |||
| RewriteRule ^pages/ecommerce/product-single\.html$ product-single.html [L] | |||
| RewriteRule ^pages/ecommerce/checkout\.html$ checkout.html [L] | |||
| # Apps | |||
| RewriteRule ^pages/apps/influencer-finder\.html$ influencer-finder.html [L] | |||
| RewriteRule ^pages/apps/influencer-profile\.html$ influencer-profile.html [L] | |||
| # Other pages | |||
| RewriteRule ^pages/calendar\.html$ calendar.html [L] | |||
| RewriteRule ^pages/chat\.html$ chat.html [L] | |||
| RewriteRule ^pages/inbox\.html$ inbox.html [L] | |||
| RewriteRule ^pages/users\.html$ users.html [L] | |||
| RewriteRule ^pages/timeline\.html$ timeline.html [L] | |||
| RewriteRule ^pages/settings\.html$ settings.html [L] | |||
| # Auth pages | |||
| RewriteRule ^pages/auth/login\.html$ login.html [L] | |||
| RewriteRule ^pages/auth/signup\.html$ signup.html [L] | |||
| RewriteRule ^pages/auth/forgot-password\.html$ forgot-password.html [L] | |||
| # Misc pages | |||
| RewriteRule ^pages/misc/blank-page\.html$ blank-page.html [L] | |||
| RewriteRule ^pages/misc/404\.html$ 404.html [L] | |||
| # Handle client-side routing | |||
| RewriteCond %{REQUEST_FILENAME} !-f | |||
| RewriteCond %{REQUEST_FILENAME} !-d | |||
| RewriteRule . /index.html [L] | |||
| ``` | |||
| ## Solution 2: Fix Build Output (Alternative) | |||
| Modify the Vite build configuration to maintain the directory structure: | |||
| ```javascript | |||
| // vite.config.js modification | |||
| build: { | |||
| rollupOptions: { | |||
| input: { | |||
| // ... existing inputs | |||
| }, | |||
| output: { | |||
| entryFileNames: (chunkInfo) => { | |||
| // Maintain directory structure for HTML files | |||
| if (chunkInfo.name.includes('dashboard-')) { | |||
| return 'pages/dashboards/[name].html'; | |||
| } | |||
| if (chunkInfo.name.includes('ui-')) { | |||
| return 'pages/ui-elements/[name].html'; | |||
| } | |||
| // ... add more patterns | |||
| return '[name].html'; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| ``` | |||
| ## Solution 3: Update Navigation Links (Simplest) | |||
| The simplest solution is to update all navigation links to match the build output. Create a script to fix all links: | |||
| ```bash | |||
| #!/bin/bash | |||
| # fix-links.sh | |||
| # Update sidebar links | |||
| sed -i 's|href="/pages/dashboards/finance.html"|href="/dashboard-finance.html"|g' src/partials/layouts/sidebar.hbs | |||
| sed -i 's|href="/pages/dashboards/sales.html"|href="/dashboard-sales.html"|g' src/partials/layouts/sidebar.hbs | |||
| sed -i 's|href="/pages/dashboards/influencer.html"|href="/dashboard-influencer.html"|g' src/partials/layouts/sidebar.hbs | |||
| # ... add all other link updates | |||
| ``` | |||
| ## Platform-Specific Solutions | |||
| ### Netlify | |||
| Create a `_redirects` file in your `public` folder: | |||
| ``` | |||
| /pages/dashboards/finance.html /dashboard-finance.html 200 | |||
| /pages/dashboards/sales.html /dashboard-sales.html 200 | |||
| /pages/dashboards/influencer.html /dashboard-influencer.html 200 | |||
| /pages/ui-elements/cards.html /ui-cards.html 200 | |||
| /pages/ui-elements/general.html /ui-general.html 200 | |||
| /pages/ui-elements/typography.html /ui-typography.html 200 | |||
| /pages/form-elements.html /form-elements.html 200 | |||
| /pages/form-validation.html /form-validation.html 200 | |||
| /pages/multiselect.html /multiselect.html 200 | |||
| /pages/charts/index.html /charts.html 200 | |||
| /pages/tables/general-tables.html /general-tables.html 200 | |||
| /pages/tables/data-tables.html /data-tables.html 200 | |||
| /pages/ecommerce/products.html /products.html 200 | |||
| /pages/ecommerce/product-single.html /product-single.html 200 | |||
| /pages/ecommerce/checkout.html /checkout.html 200 | |||
| /pages/apps/influencer-finder.html /influencer-finder.html 200 | |||
| /pages/apps/influencer-profile.html /influencer-profile.html 200 | |||
| /pages/calendar.html /calendar.html 200 | |||
| /pages/chat.html /chat.html 200 | |||
| /pages/inbox.html /inbox.html 200 | |||
| /pages/users.html /users.html 200 | |||
| /pages/timeline.html /timeline.html 200 | |||
| /pages/settings.html /settings.html 200 | |||
| /pages/auth/login.html /login.html 200 | |||
| /pages/auth/signup.html /signup.html 200 | |||
| /pages/auth/forgot-password.html /forgot-password.html 200 | |||
| /pages/misc/blank-page.html /blank-page.html 200 | |||
| /pages/misc/404.html /404.html 200 | |||
| ``` | |||
| ### Vercel | |||
| Create a `vercel.json` file in your project root: | |||
| ```json | |||
| { | |||
| "rewrites": [ | |||
| { "source": "/pages/dashboards/finance.html", "destination": "/dashboard-finance.html" }, | |||
| { "source": "/pages/dashboards/sales.html", "destination": "/dashboard-sales.html" }, | |||
| { "source": "/pages/dashboards/influencer.html", "destination": "/dashboard-influencer.html" }, | |||
| { "source": "/pages/ui-elements/cards.html", "destination": "/ui-cards.html" }, | |||
| { "source": "/pages/ui-elements/general.html", "destination": "/ui-general.html" }, | |||
| { "source": "/pages/ui-elements/typography.html", "destination": "/ui-typography.html" }, | |||
| { "source": "/pages/form-elements.html", "destination": "/form-elements.html" }, | |||
| { "source": "/pages/form-validation.html", "destination": "/form-validation.html" }, | |||
| { "source": "/pages/multiselect.html", "destination": "/multiselect.html" }, | |||
| { "source": "/pages/charts/index.html", "destination": "/charts.html" }, | |||
| { "source": "/pages/tables/general-tables.html", "destination": "/general-tables.html" }, | |||
| { "source": "/pages/tables/data-tables.html", "destination": "/data-tables.html" }, | |||
| { "source": "/pages/ecommerce/products.html", "destination": "/products.html" }, | |||
| { "source": "/pages/ecommerce/product-single.html", "destination": "/product-single.html" }, | |||
| { "source": "/pages/ecommerce/checkout.html", "destination": "/checkout.html" }, | |||
| { "source": "/pages/apps/influencer-finder.html", "destination": "/influencer-finder.html" }, | |||
| { "source": "/pages/apps/influencer-profile.html", "destination": "/influencer-profile.html" }, | |||
| { "source": "/pages/calendar.html", "destination": "/calendar.html" }, | |||
| { "source": "/pages/chat.html", "destination": "/chat.html" }, | |||
| { "source": "/pages/inbox.html", "destination": "/inbox.html" }, | |||
| { "source": "/pages/users.html", "destination": "/users.html" }, | |||
| { "source": "/pages/timeline.html", "destination": "/timeline.html" }, | |||
| { "source": "/pages/settings.html", "destination": "/settings.html" }, | |||
| { "source": "/pages/auth/login.html", "destination": "/login.html" }, | |||
| { "source": "/pages/auth/signup.html", "destination": "/signup.html" }, | |||
| { "source": "/pages/auth/forgot-password.html", "destination": "/forgot-password.html" }, | |||
| { "source": "/pages/misc/blank-page.html", "destination": "/blank-page.html" }, | |||
| { "source": "/pages/misc/404.html", "destination": "/404.html" } | |||
| ] | |||
| } | |||
| ``` | |||
| ## Testing Your Deployment | |||
| After implementing one of these solutions, test your deployment: | |||
| 1. Build the project: `npm run build` | |||
| 2. Test locally: `npm run preview` | |||
| 3. Deploy to your hosting service | |||
| 4. Test all navigation links | |||
| ## Recommended Approach | |||
| For production deployments, we recommend: | |||
| 1. **For Netlify/Vercel**: Use their redirect configuration files | |||
| 2. **For Traditional Hosting**: Use nginx/Apache rewrite rules | |||
| 3. **For Quick Fix**: Update the navigation links in the source code | |||
| The server configuration approach is most maintainable as it doesn't require changing the source code and works with the existing build output. | |||
+ 228
- 0
docs/getting-started/visual-guide.md
View File
| @ -0,0 +1,228 @@ | |||
| # Visual Installation Guide | |||
| This guide provides a visual walkthrough of installing and setting up Concept. | |||
| ## Dashboard Preview | |||
|  | |||
| ## Installation Steps | |||
| ### Step 1: Download or Clone | |||
| ```bash | |||
| # Clone via Git | |||
| git clone https://github.com/yourusername/concept.git | |||
| # Or download and extract the ZIP file | |||
| ``` | |||
| ### Step 2: Project Structure | |||
| After extraction, you'll see this structure: | |||
| ``` | |||
| concept/ | |||
| ├── src/ # Source files | |||
| ├── docs/ # Documentation | |||
| ├── scripts/ # Utility scripts | |||
| ├── package.json # Dependencies | |||
| └── vite.config.js # Build configuration | |||
| ``` | |||
| ### Step 3: Install Dependencies | |||
| Open terminal in the project directory: | |||
| ```bash | |||
| npm install | |||
| ``` | |||
| This installs all required packages including: | |||
| - Bootstrap 5.3.7 | |||
| - Chart.js 4.5.0 | |||
| - DataTables | |||
| - Font Awesome 7 | |||
| - And more... | |||
| ### Step 4: Start Development Server | |||
| ```bash | |||
| npm run dev | |||
| ``` | |||
| The development server will start at `http://localhost:3000` | |||
| ## First Look | |||
| When you first open Concept, you'll see: | |||
| ### 1. Main Dashboard | |||
| The default landing page showing: | |||
| - Revenue metrics with trend indicators | |||
| - Interactive charts | |||
| - Recent activity feed | |||
| - Quick stats cards | |||
| ### 2. Navigation Structure | |||
| **Sidebar Navigation** includes: | |||
| - **Dashboards** - Multiple dashboard variants | |||
| - **UI Elements** - Component examples | |||
| - **Forms** - Form controls and validation | |||
| - **Tables** - Data presentation options | |||
| - **E-commerce** - Shop management pages | |||
| - **Apps** - Calendar, chat, and more | |||
| ### 3. Key Features | |||
| **Responsive Design** | |||
| - Desktop: Full sidebar + multi-column layout | |||
| - Tablet: Collapsible sidebar + 2-column layout | |||
| - Mobile: Hamburger menu + single column | |||
| **Dark Sidebar** | |||
| The sidebar features a dark theme (#0e0c28) with: | |||
| - Hover effects | |||
| - Active state indicators | |||
| - Collapsible sub-menus | |||
| ## Customization Quick Start | |||
| ### Change Primary Color | |||
| Edit `src/scss/_variables.scss`: | |||
| ```scss | |||
| $primary: #5969ff; // Change this to your color | |||
| ``` | |||
| ### Update Logo | |||
| Replace the logo in the header: | |||
| 1. Add your logo to `src/assets/images/` | |||
| 2. Update `src/partials/layouts/header.hbs` | |||
| ### Modify Sidebar | |||
| Edit `src/partials/layouts/sidebar.hbs` to: | |||
| - Add new menu items | |||
| - Rearrange navigation | |||
| - Change icons | |||
| ## Building for Production | |||
| ### Build Command | |||
| ```bash | |||
| npm run build | |||
| ``` | |||
| This creates an optimized `dist/` folder with: | |||
| - Minified CSS and JavaScript | |||
| - Optimized images | |||
| - Hashed filenames for caching | |||
| - Source maps for debugging | |||
| ### Production Files | |||
| ``` | |||
| dist/ | |||
| ├── assets/ | |||
| │ ├── css/ # Compiled styles | |||
| │ ├── js/ # Compiled scripts | |||
| │ └── images/ # Optimized images | |||
| ├── index.html # Main entry | |||
| ├── dashboard-finance.html | |||
| ├── dashboard-sales.html | |||
| └── [other pages].html | |||
| ``` | |||
| ## Common Customizations | |||
| ### 1. Dashboard Widgets | |||
| Add a new metric card: | |||
| ```html | |||
| <div class="card"> | |||
| <div class="card-body"> | |||
| <h6 class="text-muted mb-2">New Metric</h6> | |||
| <h3 class="mb-0">1,234</h3> | |||
| <small class="text-success"> | |||
| <i class="fa-solid fa-arrow-up"></i> 5.2% | |||
| </small> | |||
| </div> | |||
| </div> | |||
| ``` | |||
| ### 2. Chart Colors | |||
| Modify chart colors in your JavaScript: | |||
| ```javascript | |||
| const chartColors = { | |||
| primary: '#5969ff', | |||
| success: '#28a745', | |||
| danger: '#dc3545' | |||
| }; | |||
| ``` | |||
| ### 3. Form Styling | |||
| Concept's forms use custom variables: | |||
| - Border: `#d4d9e3` | |||
| - Focus: `#5969ff` | |||
| - Shadow: `rgba(89, 105, 255, 0.25)` | |||
| ## Troubleshooting Visual Guide | |||
| ### Issue: Pages showing 404 | |||
| **Solution**: Run the fix script | |||
| ```bash | |||
| node scripts/fix-navigation-links.js | |||
| npm run build | |||
| ``` | |||
| ### Issue: Styles not loading | |||
| **Check**: | |||
| 1. Dev server is running | |||
| 2. No SCSS compilation errors | |||
| 3. Browser cache is cleared | |||
| ### Issue: Charts not displaying | |||
| **Verify**: | |||
| 1. Chart.js is imported | |||
| 2. Canvas element exists | |||
| 3. Data is properly formatted | |||
| ## Mobile Experience | |||
| Concept is fully responsive: | |||
| ### Mobile Navigation | |||
| - Hamburger menu toggle | |||
| - Full-screen overlay menu | |||
| - Touch-friendly controls | |||
| ### Mobile Tables | |||
| - Horizontal scrolling | |||
| - Stacked view option | |||
| - Simplified controls | |||
| ### Mobile Charts | |||
| - Touch gestures supported | |||
| - Simplified legends | |||
| - Responsive sizing | |||
| ## Next Steps | |||
| 1. **Explore Components** - Check `/pages/ui-elements/` for examples | |||
| 2. **Try Dashboards** - Test different dashboard variants | |||
| 3. **Customize Theme** - Modify colors and fonts | |||
| 4. **Add Features** - Integrate with your backend | |||
| ## Support Resources | |||
| - **Documentation**: `/docs` folder | |||
| - **Component Examples**: UI Elements pages | |||
| - **Sample Data**: Included in all pages | |||
| - **Scripts**: Utility scripts in `/scripts` | |||
| Start building your admin panel with Concept! | |||
+ 67
- 0
package-lock.json
View File
+ 58
- 0
public/_redirects
View File
| @ -0,0 +1,58 @@ | |||
| # Netlify Redirects for Concept Dashboard | |||
| # This file maps the old navigation paths to the actual build output | |||
| # Dashboard pages | |||
| /pages/dashboards/finance.html /dashboard-finance.html 200 | |||
| /pages/dashboards/sales.html /dashboard-sales.html 200 | |||
| /pages/dashboards/influencer.html /dashboard-influencer.html 200 | |||
| # UI Elements | |||
| /pages/ui-elements/cards.html /ui-cards.html 200 | |||
| /pages/ui-elements/general.html /ui-general.html 200 | |||
| /pages/ui-elements/typography.html /ui-typography.html 200 | |||
| # Forms | |||
| /pages/form-elements.html /form-elements.html 200 | |||
| /pages/form-validation.html /form-validation.html 200 | |||
| /pages/multiselect.html /multiselect.html 200 | |||
| # Charts | |||
| /pages/charts/index.html /charts.html 200 | |||
| # Tables | |||
| /pages/tables/general-tables.html /general-tables.html 200 | |||
| /pages/tables/data-tables.html /data-tables.html 200 | |||
| # E-commerce | |||
| /pages/ecommerce/products.html /products.html 200 | |||
| /pages/ecommerce/product-single.html /product-single.html 200 | |||
| /pages/ecommerce/checkout.html /checkout.html 200 | |||
| # Apps | |||
| /pages/apps/influencer-finder.html /influencer-finder.html 200 | |||
| /pages/apps/influencer-profile.html /influencer-profile.html 200 | |||
| # Other pages | |||
| /pages/calendar.html /calendar.html 200 | |||
| /pages/chat.html /chat.html 200 | |||
| /pages/inbox.html /inbox.html 200 | |||
| /pages/users.html /users.html 200 | |||
| /pages/timeline.html /timeline.html 200 | |||
| /pages/settings.html /settings.html 200 | |||
| # Auth pages | |||
| /pages/auth/login.html /login.html 200 | |||
| /pages/auth/signup.html /signup.html 200 | |||
| /pages/auth/forgot-password.html /forgot-password.html 200 | |||
| # Misc pages | |||
| /pages/misc/blank-page.html /blank-page.html 200 | |||
| /pages/misc/404.html /404.html 200 | |||
| # Email pages (if they exist in build) | |||
| /pages/email/inbox.html /inbox.html 200 | |||
| /pages/email/compose.html /compose.html 200 | |||
| /pages/email/details.html /details.html 200 | |||
| # Catch all - for any other routes, serve index.html (for SPA behavior if needed) | |||
| /* /index.html 200 | |||
+ 136
- 0
scripts/fix-navigation-links.js
View File
| @ -0,0 +1,136 @@ | |||
| #!/usr/bin/env node | |||
| /** | |||
| * Fix Navigation Links Script | |||
| * Updates all navigation links to match Vite's build output | |||
| */ | |||
| import fs from 'fs'; | |||
| import path from 'path'; | |||
| import { fileURLToPath } from 'url'; | |||
| const __filename = fileURLToPath(import.meta.url); | |||
| const __dirname = path.dirname(__filename); | |||
| // Define link mappings | |||
| const linkMappings = [ | |||
| // Dashboard pages | |||
| { from: '/pages/dashboards/finance.html', to: '/dashboard-finance.html' }, | |||
| { from: '/pages/dashboards/sales.html', to: '/dashboard-sales.html' }, | |||
| { from: '/pages/dashboards/influencer.html', to: '/dashboard-influencer.html' }, | |||
| // UI Elements | |||
| { from: '/pages/ui-elements/cards.html', to: '/ui-cards.html' }, | |||
| { from: '/pages/ui-elements/general.html', to: '/ui-general.html' }, | |||
| { from: '/pages/ui-elements/typography.html', to: '/ui-typography.html' }, | |||
| // Forms | |||
| { from: '/pages/form-elements.html', to: '/form-elements.html' }, | |||
| { from: '/pages/form-validation.html', to: '/form-validation.html' }, | |||
| { from: '/pages/multiselect.html', to: '/multiselect.html' }, | |||
| // Charts | |||
| { from: '/pages/charts/index.html', to: '/charts.html' }, | |||
| // Tables | |||
| { from: '/pages/tables/general-tables.html', to: '/general-tables.html' }, | |||
| { from: '/pages/tables/data-tables.html', to: '/data-tables.html' }, | |||
| // E-commerce | |||
| { from: '/pages/ecommerce/products.html', to: '/products.html' }, | |||
| { from: '/pages/ecommerce/product-single.html', to: '/product-single.html' }, | |||
| { from: '/pages/ecommerce/checkout.html', to: '/checkout.html' }, | |||
| // Apps | |||
| { from: '/pages/apps/influencer-finder.html', to: '/influencer-finder.html' }, | |||
| { from: '/pages/apps/influencer-profile.html', to: '/influencer-profile.html' }, | |||
| // Other pages | |||
| { from: '/pages/calendar.html', to: '/calendar.html' }, | |||
| { from: '/pages/chat.html', to: '/chat.html' }, | |||
| { from: '/pages/inbox.html', to: '/inbox.html' }, | |||
| { from: '/pages/users.html', to: '/users.html' }, | |||
| { from: '/pages/timeline.html', to: '/timeline.html' }, | |||
| { from: '/pages/settings.html', to: '/settings.html' }, | |||
| // Auth pages | |||
| { from: '/pages/auth/login.html', to: '/login.html' }, | |||
| { from: '/pages/auth/signup.html', to: '/signup.html' }, | |||
| { from: '/pages/auth/forgot-password.html', to: '/forgot-password.html' }, | |||
| // Misc pages | |||
| { from: '/pages/misc/blank-page.html', to: '/blank-page.html' }, | |||
| { from: '/pages/misc/404.html', to: '/404.html' }, | |||
| ]; | |||
| // Files to update | |||
| const filesToUpdate = [ | |||
| 'src/partials/layouts/sidebar.hbs', | |||
| 'src/partials/layouts/header.hbs', | |||
| 'src/index.html', | |||
| // Add any other files that contain navigation links | |||
| ]; | |||
| // Add all HTML files in pages directory | |||
| function findHtmlFiles(dir) { | |||
| const files = []; | |||
| const items = fs.readdirSync(dir, { withFileTypes: true }); | |||
| for (const item of items) { | |||
| const fullPath = path.join(dir, item.name); | |||
| if (item.isDirectory()) { | |||
| files.push(...findHtmlFiles(fullPath)); | |||
| } else if (item.name.endsWith('.html') || item.name.endsWith('.hbs')) { | |||
| files.push(fullPath); | |||
| } | |||
| } | |||
| return files; | |||
| } | |||
| // Add all HTML files from src/pages | |||
| const pagesDir = path.join(__dirname, '..', 'src', 'pages'); | |||
| if (fs.existsSync(pagesDir)) { | |||
| filesToUpdate.push(...findHtmlFiles(pagesDir).map(f => path.relative(path.join(__dirname, '..'), f))); | |||
| } | |||
| // Update links in files | |||
| function updateLinks(filePath) { | |||
| const fullPath = path.join(__dirname, '..', filePath); | |||
| if (!fs.existsSync(fullPath)) { | |||
| console.log(`⚠️ File not found: ${filePath}`); | |||
| return; | |||
| } | |||
| let content = fs.readFileSync(fullPath, 'utf8'); | |||
| let updated = false; | |||
| linkMappings.forEach(({ from, to }) => { | |||
| const regex = new RegExp(`href=["']${from.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}["']`, 'g'); | |||
| if (content.match(regex)) { | |||
| content = content.replace(regex, `href="${to}"`); | |||
| updated = true; | |||
| } | |||
| }); | |||
| if (updated) { | |||
| fs.writeFileSync(fullPath, content); | |||
| console.log(`✅ Updated: ${filePath}`); | |||
| } else { | |||
| console.log(`⏭️ No changes needed: ${filePath}`); | |||
| } | |||
| } | |||
| // Main execution | |||
| console.log('🔧 Fixing navigation links to match Vite build output...\n'); | |||
| filesToUpdate.forEach(file => { | |||
| updateLinks(file); | |||
| }); | |||
| console.log('\n✨ Navigation links have been updated!'); | |||
| console.log('\nNext steps:'); | |||
| console.log('1. Run "npm run build" to build the project'); | |||
| console.log('2. Run "npm run preview" to test locally'); | |||
| console.log('3. Deploy the dist folder to your hosting service'); | |||