Aigars Silkalns
4 months ago
20 changed files with 1799 additions and 54 deletions
Unified 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'); | |||||