incr: fix import paths add ext .vue

src/components/Controls/Color.vue

@@ -55,9 +55,9 @@
 </template>
 
 <script>
-import Popover from 'src/components/Popover';
+import Popover from 'src/components/Popover.vue';
-import Row from 'src/components/Row';
+import Row from 'src/components/Row.vue';
-import Base from './Base';
+import Base from './Base.vue';
 
 export default {
   name: 'Color',

src/components/Icons/18/check.vue

@@ -17,7 +17,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };

src/components/Icons/18/common-entries.vue

@@ -23,7 +23,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconPurchase',
   extends: Base,

src/components/Icons/18/customer.vue

@@ -9,7 +9,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };

src/components/Icons/18/dashboard.vue

@@ -14,7 +14,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconDashboard',
   extends: Base

src/components/Icons/18/fb.vue

@@ -21,7 +21,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'FB',
   extends: Base,

src/components/Icons/18/general.vue

@@ -19,7 +19,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconGeneral',
   extends: Base,

src/components/Icons/18/gst.vue

@@ -15,7 +15,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconGST',
   extends: Base,

src/components/Icons/18/inventory.vue

@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconInventory',
   extends: Base,

src/components/Icons/18/invoice.vue

@@ -19,7 +19,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconInvoice',
   extends: Base,

src/components/Icons/18/item.vue

@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };

src/components/Icons/18/mail.vue

@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };

src/components/Icons/18/opening-ac.vue

@@ -7,7 +7,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };

src/components/Icons/18/percentage.vue

@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };

src/components/Icons/18/purchase-invoice.vue

@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };

src/components/Icons/18/purchase.vue

@@ -14,7 +14,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconPurchase',
   extends: Base

src/components/Icons/18/reports.vue

@@ -13,7 +13,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconReports',
   extends: Base

src/components/Icons/18/review-ac.vue

@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };

src/components/Icons/18/sales-invoice.vue

@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };

src/components/Icons/18/sales.vue

@@ -13,7 +13,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconSales',
   extends: Base

src/components/Icons/18/settings.vue

@@ -13,7 +13,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconSettings',
   extends: Base

src/components/Icons/18/start.vue

@@ -14,7 +14,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };

src/components/Icons/18/supplier.vue

@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   extends: Base
 };

src/components/Icons/18/system.vue

@@ -13,7 +13,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconSystem',
   extends: Base,

src/components/Icons/24/general.vue

@@ -14,7 +14,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconGeneral',
   extends: Base

src/components/Icons/24/green-check.vue

@@ -18,7 +18,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconGreenCheck',
   extends: Base

src/components/Icons/24/invoice.vue

@@ -14,7 +14,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconInvoice',
   extends: Base

src/components/Icons/24/mail.vue

@@ -14,7 +14,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconMail',
   extends: Base

src/components/Icons/24/privacy.vue

@@ -8,7 +8,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconPrivacy',
   extends: Base

src/components/Icons/24/system.vue

@@ -7,7 +7,7 @@
   </svg>
 </template>
 <script>
-import Base from '../base';
+import Base from '../base.vue';
 export default {
   name: 'IconSystem',
   extends: Base

src/pages/Dashboard/ProfitAndLoss.vue

@@ -37,8 +37,8 @@ import { uicolors } from 'src/utils/colors';
 import { getDatesAndPeriodList } from 'src/utils/misc';
 import { getValueMapFromList } from 'utils';
 import DashboardChartBase from './BaseDashboardChart.vue';
-import PeriodSelector from './PeriodSelector';
+import PeriodSelector from './PeriodSelector.vue';
-import SectionHeader from './SectionHeader';
+import SectionHeader from './SectionHeader.vue';
 
 export default {
   name: 'ProfitAndLoss',

src/pages/GetStarted.vue

@@ -70,9 +70,9 @@
 </template>
 
 <script>
-import Button from 'src/components/Button';
+import Button from 'src/components/Button.vue';
-import Icon from 'src/components/Icon';
+import Icon from 'src/components/Icon.vue';
-import PageHeader from 'src/components/PageHeader';
+import PageHeader from 'src/components/PageHeader.vue';
 import { fyo } from 'src/initFyo';
 import { getGetStartedConfig } from 'src/utils/getStartedConfig';
 import { openLink } from 'src/utils/ipcCalls';

src/pages/ListView/List.vue

@@ -80,7 +80,7 @@
       v-if="!data?.length"
       class="flex flex-col items-center justify-center my-auto"
     >
-      <img src="@/assets/img/list-empty-state.svg" alt="" class="w-24" />
+      <img src="src/assets/img/list-empty-state.svg" alt="" class="w-24" />
       <p class="my-3 text-gray-800">{{ t`No entries found` }}</p>
       <Button type="primary" class="text-white" @click="$emit('makeNewDoc')" v-if="canCreate">
         {{ t`Make Entry` }}
@@ -90,14 +90,14 @@
 </template>
 <script>
 import { clone } from 'lodash';
-import Button from 'src/components/Button';
+import Button from 'src/components/Button.vue';
 import Paginator from 'src/components/Paginator.vue';
-import Row from 'src/components/Row';
+import Row from 'src/components/Row.vue';
 import { fyo } from 'src/initFyo';
 import { isNumeric } from 'src/utils';
 import { objectForEach } from 'utils/index';
 import { defineComponent, toRaw } from 'vue';
-import ListCell from './ListCell';
+import ListCell from './ListCell.vue';
 
 export default defineComponent({
   name: 'List',

src/setup/createCOA.ts

@@ -93,7 +93,7 @@ async function getCOA(chartOfAccounts: string) {
   }
 
   try {
-    const countryCoa = (await import('fixtures/verified/' + conCode + '.json'))
+    const countryCoa = (await import(`../../fixtures/verified/${conCode}.json`))
       .default;
     return countryCoa.tree;
   } catch (e) {

src/utils/colors.ts

@@ -1,6 +1,118 @@
-import { theme } from '../../tailwind.config';
+export const uicolors = {
-
+  black: '#1E293B',
-export const uicolors = theme.extend.colors;
+  gray: {
+    25: '#fcfcfd',
+    50: '#f8f9fc',
+    100: '#f2f4f8',
+    200: '#ebeff5',
+    300: '#e2e8f0',
+    400: '#cad5e2',
+    500: '#9aa8bc',
+    600: '#8493a9',
+    700: '#64748b',
+    800: '#475569',
+    900: '#334155',
+  },
+  red: {
+    100: '#fff5f5',
+    200: '#fed7d7',
+    300: '#feb2b2',
+    400: '#fc8181',
+    500: '#f56565',
+    600: '#e53e3e',
+    700: '#c53030',
+    800: '#9b2c2c',
+    900: '#742a2a',
+  },
+  orange: {
+    100: '#fffaf0',
+    200: '#feebc8',
+    300: '#fbd38d',
+    400: '#f6ad55',
+    500: '#ed8936',
+    600: '#dd6b20',
+    700: '#c05621',
+    800: '#9c4221',
+    900: '#7b341e',
+  },
+  yellow: {
+    100: '#fffff0',
+    200: '#fefcbf',
+    300: '#faf089',
+    400: '#f6e05e',
+    500: '#ecc94b',
+    600: '#d69e2e',
+    700: '#b7791f',
+    800: '#975a16',
+    900: '#744210',
+  },
+  green: {
+    100: '#f0fff4',
+    200: '#c6f6d5',
+    300: '#9ae6b4',
+    400: '#68d391',
+    500: '#48bb78',
+    600: '#38a169',
+    700: '#2f855a',
+    800: '#276749',
+    900: '#22543d',
+  },
+  teal: {
+    100: '#e6fffa',
+    200: '#b2f5ea',
+    300: '#81e6d9',
+    400: '#4fd1c5',
+    500: '#38b2ac',
+    600: '#319795',
+    700: '#2c7a7b',
+    800: '#285e61',
+    900: '#234e52',
+  },
+  blue: {
+    100: '#e5f3ff',
+    200: '#cce7ff',
+    300: '#99d0ff',
+    400: '#66b8ff',
+    500: '#33a1ff',
+    600: '#2490ef',
+    700: '#006ecc',
+    800: '#005299',
+    900: '#003766',
+  },
+  indigo: {
+    100: '#ebf4ff',
+    200: '#c3dafe',
+    300: '#a3bffa',
+    400: '#7f9cf5',
+    500: '#667eea',
+    600: '#5a67d8',
+    700: '#4c51bf',
+    800: '#434190',
+    900: '#3c366b',
+  },
+  purple: {
+    100: '#faf5ff',
+    200: '#e9d8fd',
+    300: '#d6bcfa',
+    400: '#b794f4',
+    500: '#9f7aea',
+    600: '#805ad5',
+    700: '#6b46c1',
+    800: '#553c9a',
+    900: '#44337a',
+  },
+  pink: {
+    100: '#fdf7f8',
+    200: '#fbeef1',
+    300: '#f7dee5',
+    400: '#eec3d2',
+    500: '#df9eb8',
+    600: '#cf82a7',
+    700: '#ac688b',
+    800: '#8f5b79',
+    900: '#70485f',
+  },
+};
 
 export const indicators = {
   GRAY: 'grey',
@@ -14,7 +126,6 @@ export const indicators = {
   BLACK: 'black',
 };
 
-
 const getValidColor = (color: string) => {
   const isValid = [
     'gray',