{"id":2907,"date":"2026-02-04T11:04:47","date_gmt":"2026-02-04T11:04:47","guid":{"rendered":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/?p=2907"},"modified":"2026-02-05T05:28:41","modified_gmt":"2026-02-05T05:28:41","slug":"project-structure","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/kivicare-lite\/documentation\/developer-tool\/getting-statrted\/project-structure\/","title":{"rendered":"Project Structure"},"content":{"rendered":"<div class=\"nolwrap\">\n<p>Understanding how <strong>KiviCare<\/strong> is organized will help you navigate the codebase efficiently and know exactly where to make changes.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Directory Overview<\/strong><\/h2>\n\n\n    <div class=\"docsy-alert-block alert-info\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-info\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            kivicare-clinic-management-system\/<br>\u2502<br>\u251c\u2500\u2500 app\/                                                                    # \ud83d\udcc1 Core application code<br>\u2502 \u251c\u2500\u2500 dashboard\/                                                 # \ud83c\udfaf React Dashboard (PRIMARY WORKSPACE)<br>\u2502 \u251c\u2500\u2500 shortcodes\/                                                  # Frontend widgets<br>\u2502 \u251c\u2500\u2500 elementor\/                                                   # Elementor widgets<br>\u2502 \u251c\u2500\u2500 baseClasses\/                                               # PHP base classes<br>\u2502 \u251c\u2500\u2500 controllers\/                                                   # PHP controllers<br>\u2502 \u251c\u2500\u2500 models\/                                                             # Database models<br>\u2502 \u2514\u2500\u2500 database\/                                                       # Migrations<br>\u2502<br>\u251c\u2500\u2500 dist\/ # \ud83c\udfd7\ufe0f Generated build output<br>\u251c\u2500\u2500 docs\/ # \ud83d\udcda Documentation<br>\u251c\u2500\u2500 templates\/ # \ud83d\udcc4 PHP templates<br>\u251c\u2500\u2500 languages\/ # \ud83c\udf10 Translation files<br>\u251c\u2500\u2500 vendor\/ # PHP dependencies<br>\u251c\u2500\u2500 node_modules\/ # Node.js dependencies<br>\u2502<br>\u251c\u2500\u2500 vite.config.js # \u2699\ufe0f Build configuration<br>\u251c\u2500\u2500 package.json # NPM dependencies and scripts<br>\u251c\u2500\u2500 composer.json # PHP dependencies<br>\u2514\u2500\u2500 kivicare-clinic-management-system.php # Main plugin file        <\/div>\n    <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>React Dashboard<\/strong> (<code>app\/dashboard\/<\/code>)<\/h2>\n\n\n\n<p>\ud83d\udc49 This is the <strong>main development area<\/strong> for frontend features.<\/p>\n\n\n    <div class=\"docsy-alert-block alert-info\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-info\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            app\/dashboard\/<br>\u2502<br>\u251c\u2500\u2500 main.jsx # \ud83d\ude80 Application entry point<br>\u2502<br>\u251c\u2500\u2500 router\/ # Routing configuration<br>\u2502 \u251c\u2500\u2500 indexRouter.js # Main route definitions<br>\u2502 \u2514\u2500\u2500 \u2026<br>\u2502<br>\u251c\u2500\u2500 views\/ # \ud83d\udcc4 Pages \/ Screens<br>\u2502 \u251c\u2500\u2500 dashboard\/ # Dashboard homepage<br>\u2502 \u251c\u2500\u2500 appointments\/ # Appointment management<br>\u2502 \u251c\u2500\u2500 patients\/ # Patient management<br>\u2502 \u251c\u2500\u2500 doctors\/ # Doctor management<br>\u2502 \u251c\u2500\u2500 encounters\/ # Patient encounters<br>\u2502 \u251c\u2500\u2500 billing\/ # Billing &amp; invoices<br>\u2502 \u2514\u2500\u2500 settings\/ # System settings<br>\u2502<br>\u251c\u2500\u2500 components\/ # \ud83e\udde9 Reusable UI components<br>\u2502 \u251c\u2500\u2500 atoms\/ # Basic components (Button, Input)<br>\u2502 \u251c\u2500\u2500 molecules\/ # Small combinations<br>\u2502 \u251c\u2500\u2500 organisms\/ # Complex components<br>\u2502 \u251c\u2500\u2500 Table\/ # Data tables<br>\u2502 \u251c\u2500\u2500 forms\/ # Form components<br>\u2502 \u2514\u2500\u2500 modals\/ # Modal dialogs<br>\u2502<br>\u251c\u2500\u2500 api\/ # \ud83d\udd0c API service layer<br>\u2502 \u251c\u2500\u2500 appointmentService.js<br>\u2502 \u251c\u2500\u2500 patientService.js<br>\u2502 \u251c\u2500\u2500 doctorService.js<br>\u2502 \u2514\u2500\u2500 \u2026<br>\u2502<br>\u251c\u2500\u2500 hooks\/ # \ud83e\ude9d Custom React hooks<br>\u2502 \u251c\u2500\u2500 useCurrentUser.js<br>\u2502 \u251c\u2500\u2500 usePermissions.js<br>\u2502 \u2514\u2500\u2500 \u2026<br>\u2502<br>\u251c\u2500\u2500 context\/ # React Context providers<br>\u2502 \u251c\u2500\u2500 AuthContext.js<br>\u2502 \u2514\u2500\u2500 \u2026<br>\u2502<br>\u251c\u2500\u2500 layout\/ # Layout components<br>\u2502 \u251c\u2500\u2500 DefaultLayout.jsx<br>\u2502 \u251c\u2500\u2500 Sidebar.jsx<br>\u2502 \u2514\u2500\u2500 Header.jsx<br>\u2502<br>\u251c\u2500\u2500 utils\/ # \ud83d\udee0\ufe0f Utility functions<br>\u2502 \u251c\u2500\u2500 helpers.js<br>\u2502 \u251c\u2500\u2500 constants.js<br>\u2502 \u2514\u2500\u2500 validators.js<br>\u2502<br>\u2514\u2500\u2500 assets\/ # Static assets<br>\u251c\u2500\u2500 scss\/ # Stylesheets<br>\u2502 \u251c\u2500\u2500 kivicare.scss # Main styles<br>\u2502 \u251c\u2500\u2500 custom.scss # Custom styles<br>\u2502 \u2514\u2500\u2500 rtl.scss # RTL support<br>\u251c\u2500\u2500 images\/ # Images<br>\u2514\u2500\u2500 fonts\/ # Custom fonts        <\/div>\n    <\/div>\n    \n\n\n<p><strong>Location:<\/strong> <code>app\/dashboard\/main.jsx<\/code><br><strong>When to edit:<\/strong> Rarely \u2014 only for global configuration changes.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><code>vite.config.js<\/code> \u2014 Build Configuration<\/strong><\/h3>\n\n\n\n<p>Configures the Vite build tool.<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">export default {\n  plugins: [react(), v4wp()],\n  server: { port: 8080 },\n  resolve: { alias: {...} }\n}\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                            <span class=\"line-number\">6<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p><strong>Location:<\/strong> Root directory<br><strong>When to edit:<\/strong> When adjusting build settings, aliases, or plugins.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><code>package.json<\/code> \u2014 Node Dependencies<\/strong><\/h3>\n\n\n\n<p>Defines JavaScript dependencies and scripts.<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">{\n  &quot;scripts&quot;: {\n    &quot;dev&quot;: &quot;vite&quot;,\n    &quot;build&quot;: &quot;vite build&quot;\n  },\n  &quot;dependencies&quot;: {\n    &quot;react&quot;: &quot;^19.2.0&quot;\n  }\n}\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                            <span class=\"line-number\">6<\/span>\n                                            <span class=\"line-number\">7<\/span>\n                                            <span class=\"line-number\">8<\/span>\n                                            <span class=\"line-number\">9<\/span>\n                                            <span class=\"line-number\">10<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p><strong>Location:<\/strong> Root directory<br><strong>When to edit:<\/strong> When adding or updating npm packages.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><code>composer.json<\/code> \u2014 PHP Dependencies<\/strong><\/h3>\n\n\n\n<p>Defines PHP dependencies and autoloading.<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">{\n  &quot;autoload&quot;: {\n    &quot;psr-4&quot;: {\n      &quot;App\\\\&quot;: &quot;.\/app&quot;\n    }\n  }\n}\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                            <span class=\"line-number\">6<\/span>\n                                            <span class=\"line-number\">7<\/span>\n                                            <span class=\"line-number\">8<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p><strong>Location:<\/strong> Root directory<br><strong>When to edit:<\/strong> When adding PHP libraries.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Where to Add Custom Code<\/strong><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Custom React Component<\/strong><\/h5>\n\n\n\n<p>Create in:<br><code>app\/dashboard\/components\/custom\/MyComponent.jsx<\/code><\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">import React from &#039;react&#039;;\n\nexport const MyComponent = () =&gt; {\n  return &lt;div&gt;My Custom Component&lt;\/div&gt;;\n};\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                            <span class=\"line-number\">6<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Custom Page<\/strong><\/h3>\n\n\n\n<p>Create in:<br><code>app\/dashboard\/views\/custom\/MyPage.jsx<\/code><\/p>\n\n\n\n<p>Register the route in:<br><code>app\/dashboard\/router\/indexRouter.js<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Custom API Service<\/strong><\/h3>\n\n\n\n<p>Create in:<br><code>app\/dashboard\/api\/myService.js<\/code><\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">import { useQuery } from &#039;@tanstack\/react-query&#039;;\n\nexport const useMyData = () =&gt; {\n  return useQuery({...});\n};\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                            <span class=\"line-number\">6<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Custom Styles<\/strong><\/h3>\n\n\n\n<p>Edit:<br><code>app\/dashboard\/assets\/scss\/custom.scss<\/code><\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">.my-custom-class {\n  background: #7016d0;\n  padding: 1rem;\n}\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Custom PHP Controller<\/strong><\/h3>\n\n\n\n<p>Create in:<br><code>app\/controllers\/api\/MyController.php<\/code><\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">&lt;?php\nnamespace App\\controllers\\api;\n\nclass MyController extends WP_REST_Controller {\n  \/\/ Your controller logic\n}\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                            <span class=\"line-number\">6<\/span>\n                                            <span class=\"line-number\">7<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Build Output<\/strong> (<code>dist\/<\/code>)<\/h2>\n\n\n\n<p>These files are <strong>generated automatically<\/strong> \u2014 do not edit them.<\/p>\n\n\n    <div class=\"docsy-alert-block alert-info\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-info\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            dist\/<br>\u251c\u2500\u2500 dashboard.js<br>\u251c\u2500\u2500 dashboard.css<br>\u251c\u2500\u2500 manifest.json<br>\u2514\u2500\u2500 assets\/        <\/div>\n    <\/div>\n    \n\n\n<p><strong>Generated when:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>npm run dev<\/code> (development)<\/li>\n\n\n\n<li><code>npm run build<\/code> (production)<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>PHP Backend<\/strong> (<code>app\/<\/code>)<\/h2>\n\n\n    <div class=\"docsy-alert-block alert-info\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-info\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            app\/<br>\u251c\u2500\u2500 baseClasses\/<br>\u251c\u2500\u2500 controllers\/<br>\u2502 \u2514\u2500\u2500 api\/<br>\u251c\u2500\u2500 models\/<br>\u251c\u2500\u2500 database\/<br>\u2514\u2500\u2500 admin\/        <\/div>\n    <\/div>\n    \n\n\n<p>Work here when building backend logic, database features, or REST API endpoints.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Configuration Files<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>vite.config.js<\/strong> \u2014 Build tool configuration<\/li>\n\n\n\n<li><strong>.eslintrc.json<\/strong> (if present) \u2014 JavaScript linting rules<\/li>\n\n\n\n<li><strong>composer.json<\/strong> \u2014 PHP autoloading and dependencies<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Important Paths<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Purpose<\/th><th>Path<\/th><\/tr><\/thead><tbody><tr><td>Entry Point<\/td><td><code>app\/dashboard\/main.jsx<\/code><\/td><\/tr><tr><td>Routes<\/td><td><code>app\/dashboard\/router\/indexRouter.js<\/code><\/td><\/tr><tr><td>Pages<\/td><td><code>app\/dashboard\/views\/{module}\/<\/code><\/td><\/tr><tr><td>Components<\/td><td><code>app\/dashboard\/components\/<\/code><\/td><\/tr><tr><td>API Services<\/td><td><code>app\/dashboard\/api\/<\/code><\/td><\/tr><tr><td>Custom Styles<\/td><td><code>app\/dashboard\/assets\/scss\/custom.scss<\/code><\/td><\/tr><tr><td>Build Config<\/td><td><code>vite.config.js<\/code><\/td><\/tr><tr><td>Build Output<\/td><td><code>dist\/<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Path Aliases<\/strong><\/h2>\n\n\n\n<p>Use aliases instead of long relative paths.<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">\/\/ \u274c Avoid\nimport { Button } from &#039;..\/..\/..\/components\/atoms\/Button&#039;;\n\n\/\/ \u2705 Recommended\nimport { Button } from &#039;@components\/atoms\/Button&#039;;\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                            <span class=\"line-number\">6<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p><strong>Available aliases<\/strong> (defined in <code>vite.config.js<\/code>):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>@app<\/code> \u2192 <code>app\/dashboard<\/code><\/li>\n\n\n\n<li><code>@api<\/code> \u2192 <code>app\/dashboard\/api<\/code><\/li>\n\n\n\n<li><code>@components<\/code> \u2192 <code>app\/dashboard\/components<\/code><\/li>\n\n\n\n<li><code>@shortcodes<\/code> \u2192 <code>app\/shortcodes<\/code><\/li>\n\n\n\n<li><code>@elementor<\/code> \u2192 <code>app\/elementor\/widgets<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Next Steps<\/strong><\/h2>\n\n\n\n<p>Ready to customize?<\/p>\n\n\n\n<p>\u2192 Continue to <strong><a href=\".\/first-customization.md\">First Customization<\/a><\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Quick Reference<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Task<\/th><th>Location<\/th><\/tr><\/thead><tbody><tr><td>Add new page<\/td><td><code>app\/dashboard\/views\/custom\/MyPage.jsx<\/code><\/td><\/tr><tr><td>Add component<\/td><td><code>app\/dashboard\/components\/custom\/MyComponent.jsx<\/code><\/td><\/tr><tr><td>Add API service<\/td><td><code>app\/dashboard\/api\/myService.js<\/code><\/td><\/tr><tr><td>Custom styles<\/td><td><code>app\/dashboard\/assets\/scss\/custom.scss<\/code><\/td><\/tr><tr><td>Add PHP endpoint<\/td><td>Add a PHP endpoint<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Understanding how KiviCare is organized will help you navigate the codebase efficiently and know exactly where to make changes. Directory Overview React Dashboard (app\/dashboard\/) \ud83d\udc49 This is the main development area for frontend features. Location: app\/dashboard\/main.jsxWhen to edit: Rarely \u2014 only for global configuration changes. vite.config.js \u2014 Build Configuration Configures the Vite build tool. Location: [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"parent":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[81],"tags":[],"class_list":["post-2907","post","type-post","status-publish","format-standard","hentry","category-getting-statrted"],"featured_image_src":null,"author_info":{"display_name":"wordpressadminiq","author_link":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/author\/wordpressadminiq\/"},"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/2907","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/comments?post=2907"}],"version-history":[{"count":4,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/2907\/revisions"}],"predecessor-version":[{"id":2914,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/2907\/revisions\/2914"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/media?parent=2907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/categories?post=2907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/tags?post=2907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}