add help and support option in settings

Author: devnamdev2003

README.md

@@ -145,6 +145,7 @@ Provides customization and utility options for better personalization:
 * 📤 **Import Data** — Upload and import expense data into the application
 * 🔄 **Update App** — Update the application to the latest available version
 * ☁️ **Data Backup** — Enable automatic or manual data backup for data safety. When enabled, a backend API runs automatically in the background to upload your data to the database.
+* ❓ **[Help & Support](https://devnamdev2003.github.io/angular-expense-tracker/public/help.html)** — Redirects to the external help center for FAQs, guides, and customer support
 * ➕ **Add Category** — Create custom categories for better expense organization
 * ✏️ **Edit Category** — Update or rename existing categories
 * ❌ **Delete Category** — Remove unused or incorrect categories

documentation/components/FooterComponent.html

@@ -380,7 +380,7 @@ <h3 id="inputs">
     <div class="tab-pane fade " id="templateData">
         <pre class="line-numbers"><code class="language-html">&lt;footer
     class&#x3D;&quot;hidden md:block fixed bottom-0 left-0 w-full bg-[var(--color-surface)] text-center text-sm py-2 z-50 text-muted&quot;&gt;
-    © 2025 exwise. All rights reserved. v{{appVersion}}
+    © 2026 exwise. All rights reserved. v{{appVersion}}
 &lt;/footer&gt;</code></pre>
     </div>
 
@@ -410,7 +410,7 @@ <h3 id="inputs">
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><footer    class="hidden md:block fixed bottom-0 left-0 w-full bg-[var(--color-surface)] text-center text-sm py-2 z-50 text-muted">    © 2025 exwise. All rights reserved. v{{appVersion}}</footer></div>'
+        var COMPONENT_TEMPLATE = '<div><footer    class="hidden md:block fixed bottom-0 left-0 w-full bg-[var(--color-surface)] text-center text-sm py-2 z-50 text-muted">    © 2026 exwise. All rights reserved. v{{appVersion}}</footer></div>'
     var COMPONENTS = [{'name': 'AddExpenseComponent', 'selector': 'app-add-expense'},{'name': 'AiComponent', 'selector': 'app-ai'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'CalendarComponent', 'selector': 'app-calendar'},{'name': 'CategoryDropdownComponent', 'selector': 'app-category-dropdown'},{'name': 'DownloadComponentComponent', 'selector': 'app-download-component'},{'name': 'ExpenseDetailsModalComponent', 'selector': 'app-expense-details-modal'},{'name': 'ExpenseListComponent', 'selector': 'app-expense-list'},{'name': 'ExpenseWiseComponent', 'selector': 'app-expense-wise'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FormModelComponent', 'selector': 'app-form-model'},{'name': 'GlobalLoaderComponent', 'selector': 'app-global-loader'},{'name': 'GraphsComponent', 'selector': 'app-graphs'},{'name': 'HamburgerMenuComponent', 'selector': 'app-hamburger-menu'},{'name': 'HelpDashboard', 'selector': 'app-help-dashboard'},{'name': 'HomeComponent', 'selector': 'app-home'},{'name': 'InstallAppPopupComponentComponent', 'selector': 'app-install-app-popup-component'},{'name': 'ListExpensesComponent', 'selector': 'app-list-expenses'},{'name': 'MusicComponent', 'selector': 'app-music'},{'name': 'NavbarComponent', 'selector': 'app-navbar'},{'name': 'PieChartComponent', 'selector': 'app-pie-chart'},{'name': 'PlaylistMusicComponent', 'selector': 'app-playlist-music'},{'name': 'SalaryComponent', 'selector': 'app-salary'},{'name': 'SearchButtonComponent', 'selector': 'app-search-button'},{'name': 'SearchMusicComponent', 'selector': 'app-search-music'},{'name': 'SettingItemComponent', 'selector': 'app-setting-item'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SplashScreenComponent', 'selector': 'app-splash-screen'},{'name': 'TemplatePlaygroundComponent', 'selector': 'template-playground-root'},{'name': 'ToastComponent', 'selector': 'app-toast'}];
     var DIRECTIVES = [];
     var ACTUAL_COMPONENT = {'name': 'FooterComponent'};

documentation/components/SettingsComponent.html

@@ -284,6 +284,7 @@ <h3>6. <strong>Settings View</strong></h3>
 <li>📤 <strong>Import Data</strong> — Upload and import expense data into the application</li>
 <li>🔄 <strong>Update App</strong> — Update the application to the latest available version</li>
 <li>☁️ <strong>Data Backup</strong> — Enable automatic or manual data backup for data safety. When enabled, a backend API runs automatically in the background to upload your data to the database.</li>
+<li>❓ <strong><a href="https://devnamdev2003.github.io/angular-expense-tracker/public/help.html">Help &amp; Support</a></strong> — Redirects to the external help center for FAQs, guides, and customer support</li>
 <li>➕ <strong>Add Category</strong> — Create custom categories for better expense organization</li>
 <li>✏️ <strong>Edit Category</strong> — Update or rename existing categories</li>
 <li>❌ <strong>Delete Category</strong> — Remove unused or incorrect categories</li>

documentation/index.html

@@ -819,7 +819,7 @@ <h3></h3>    <table class="table table-sm table-bordered">
    * This should be updated with each release to track application versions.
    * format: y.m.d
    */
-  applicationVersion: &#x27;26.02.09&#x27;, // Current application version
+  applicationVersion: &#x27;26.02.18&#x27;, // Current application version
 
   /**
    * The production (live) API base URL.

documentation/js/search/search_index.js

@@ -262,6 +262,12 @@
                     <span
                         class="absolute -bottom-1 left-0 w-0 h-0.5 bg-indigo-500 transition-all group-hover:w-full"></span>
                 </a>
+                <!-- Added Support Link Here -->
+                <a href="./public/help.html" class="hover:text-white transition-colors relative group">
+                    Support
+                    <span
+                        class="absolute -bottom-1 left-0 w-0 h-0.5 bg-indigo-500 transition-all group-hover:w-full"></span>
+                </a>
             </div>
             <div class="flex items-center gap-4">
                 <a href="https://exwise.vercel.app/" target="_blank"
@@ -437,7 +443,8 @@ <h3 class="font-bold text-2xl text-white mb-3 group-hover:text-purple-400 transi
                             Financial Dashboard
                         </h3>
                         <p class="text-sm text-slate-400 leading-relaxed group-hover:text-slate-300 transition-colors">
-                            The Financial Dashboard helps users manage their monthly salary, define budgets, and gain deep insights into their spending behavior.
+                            The Financial Dashboard helps users manage their monthly salary, define budgets, and gain
+                            deep insights into their spending behavior.
                         </p>
                     </div>
                 </div>
@@ -707,6 +714,21 @@ <h4 class="font-bold text-white mb-2 flex items-center gap-3">
                         formats anytime via the Settings menu for safe keeping.</p>
                 </div>
             </div>
+
+            <!-- Added Help CTA in FAQ -->
+            <div class="mt-12 text-center reveal delay-100">
+                <p class="text-slate-500 mb-2">Still have questions?</p>
+                <a href="./public/help.html"
+                    class="inline-flex items-center gap-2 text-indigo-400 font-semibold hover:text-white transition-colors group">
+                    Visit our Help & Support Center
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        class="transform group-hover:translate-x-1 transition-transform">
+                        <line x1="5" y1="12" x2="19" y2="12"></line>
+                        <polyline points="12 5 19 12 12 19"></polyline>
+                    </svg>
+                </a>
+            </div>
         </div>
     </section>
 
@@ -797,6 +819,18 @@ <h2 class="text-3xl md:text-4xl font-black text-white mb-4">Help Build the Futur
                                 </path>
                             </svg>
                         </a>
+                        <!-- Added Support Link to Footer Socials Area -->
+                        <a href="./public/help.html"
+                            class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/10 hover:text-white text-slate-400 transition-colors"
+                            title="Help & Support">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                                <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                            </svg>
+                        </a>
                     </div>
                 </div>