feat: SettingsDialog

frontend/src2/components/AppSidebar.vue

@@ -8,11 +8,12 @@
 			<div class="flex flex-col overflow-y-auto">
 				<SidebarLink
 					v-for="link in links"
+					class="mx-2 my-0.5"
 					:icon="link.icon"
 					:label="link.label"
 					:to="link.to"
 					:isCollapsed="isSidebarCollapsed"
-					class="mx-2 my-0.5"
+					@click="link.onClick"
 				/>
 			</div>
 		</div>
@@ -33,26 +34,27 @@
 			</template>
 		</SidebarLink>
 	</div>
+
+	<Settings v-model="showSettingsDialog" />
 </template>
 
 <script setup lang="ts">
 import {
 	Book,
 	Database,
+	DatabaseZap,
 	LayoutGrid,
 	PanelRightOpen,
-	ShieldHalf,
-	Users,
+	SettingsIcon,
 	Warehouse,
 } from 'lucide-vue-next'
 import { ref } from 'vue'
-import { waitUntil } from '../helpers'
-import useSettings from '../settings/settings'
+import Settings from '../settings/Settings.vue'
 import SidebarLink from './SidebarLink.vue'
 import UserDropdown from './UserDropdown.vue'
 
 const isSidebarCollapsed = ref(false)
-const settings = useSettings()
+const showSettingsDialog = ref(false)
 
 const links = ref([
 	{
@@ -72,23 +74,14 @@ const links = ref([
 	},
 	{
 		label: 'Data Store',
-		icon: Warehouse,
+		icon: DatabaseZap,
 		to: 'DataStoreList',
 	},
 	{
-		label: 'Users',
-		icon: Users,
-		to: 'UserList',
+		label: 'Settings',
+		icon: SettingsIcon,
+		to: 'Settings',
+		onClick: () => (showSettingsDialog.value = true),
 	},
 ])
-
-waitUntil(() => settings.loading === false).then(() => {
-	if (settings.doc.enable_permissions) {
-		links.value.push({
-			label: 'Teams',
-			icon: ShieldHalf,
-			to: 'TeamList',
-		})
-	}
-})
 </script>

frontend/src2/components/Checkbox.vue

@@ -9,14 +9,14 @@
 				class="relative inline-flex items-center rounded-full transition-colors"
 				:class="[
 					enabled ? 'bg-gray-900' : 'bg-gray-300',
-					props.size === 'sm' ? 'h-4 w-6' : 'h-4.5 w-8',
+					props.size === 'sm' ? 'h-4 w-6.5' : 'h-4.5 w-8',
 				]"
 			>
 				<span
 					:class="[
 						enabled
 							? props.size == 'sm'
-								? 'translate-x-2.5'
+								? 'translate-x-3'
 								: 'translate-x-4'
 							: 'translate-x-1',
 						props.size == 'sm' ? 'h-2.5 w-2.5' : ' h-3 w-3 ',

frontend/src2/components/SidebarLink.vue

@@ -5,7 +5,7 @@
 		@click="handleClick"
 	>
 		<div
-			class="flex items-center duration-300 ease-in-out"
+			class="flex items-center overflow-hidden duration-300 ease-in-out"
 			:class="isCollapsed ? 'p-1' : 'px-2 py-1'"
 		>
 			<Tooltip :text="label" placement="right">
@@ -20,9 +20,11 @@
 				</slot>
 			</Tooltip>
 			<span
-				class="flex-shrink-0 text-base duration-300 ease-in-out"
+				class="flex-1 flex-shrink-0 text-base duration-300 ease-in-out"
 				:class="
-					isCollapsed ? 'ml-0 w-0 overflow-hidden opacity-0' : 'ml-2 w-auto opacity-100'
+					isCollapsed
+						? 'ml-0 w-0 overflow-hidden opacity-0'
+						: 'ml-2 w-auto truncate opacity-100'
 				"
 			>
 				{{ label }}
@@ -41,13 +43,14 @@ const props = defineProps<{
 	label: string
 	to?: string
 	isCollapsed?: boolean
+	isActive?: boolean
 }>()
 
 function handleClick() {
 	router.push({ name: props.to })
 }
 
 let isActive = computed(() => {
-	return router.currentRoute.value.name === props.to
+	return router.currentRoute.value.name === props.to || props.isActive
 })
 </script>

frontend/src2/query/components/source_selector/TabbedSidebarLayout.vue → frontend/src2/components/TabbedSidebarLayout.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import SidebarLink from '../../../components/SidebarLink.vue'
+import SidebarLink from './SidebarLink.vue'
 
 export type Tab = {
 	label: string
@@ -32,33 +32,29 @@ const activeTab = defineModel<Tab>('activeTab', {
 <template>
 	<div class="flex h-full w-full">
 		<div class="flex w-52 shrink-0 flex-col overflow-hidden bg-gray-50 p-2">
-			<h1 v-if="props.title" class="mb-2 px-2 pt-2 text-lg font-semibold">
+			<h1 v-if="props.title" class="px-2 pt-2 text-lg font-semibold">
 				{{ props.title }}
 			</h1>
-			<div v-for="group in tabGroups" class="flex min-h-[10rem] flex-col overflow-hidden">
+			<div v-for="group in tabGroups" class="flex flex-col overflow-hidden">
 				<div
 					v-if="group.groupLabel"
-					class="mb-2 mt-4 flex flex-shrink-0 cursor-pointer gap-1.5 px-2 text-base font-medium text-gray-600 transition-all duration-300 ease-in-out"
+					class="mb-2 mt-4 flex flex-shrink-0 px-2 text-sm font-medium text-gray-600"
 				>
 					<span>{{ group.groupLabel }}</span>
 				</div>
-				<nav class="flex-1 space-y-1 overflow-y-scroll">
+				<nav class="flex-1 space-y-1 overflow-y-scroll p-0.5">
 					<SidebarLink
 						v-for="tab in group.tabs"
 						:icon="tab.icon"
 						:label="tab.label"
 						class="w-full"
-						:class="
-							activeTab?.label == tab.label
-								? 'bg-white shadow-sm'
-								: 'hover:bg-gray-100'
-						"
+						:is-active="activeTab?.label == tab.label"
 						@click="activeTab = tab"
 					/>
 				</nav>
 			</div>
 		</div>
-		<div class="flex h-full flex-1 flex-col px-3 py-3">
+		<div class="flex h-full flex-1 flex-col overflow-hidden">
 			<component v-if="activeTab && activeTab.component" :is="activeTab.component" />
 		</div>
 	</div>

frontend/src2/helpers/resource.ts

@@ -8,6 +8,7 @@ import { createToast } from './toasts'
 type DocumentResourceOptions<T> = {
 	initialDoc: T
 	transform?: (doc: T) => T
+	disableLocalStorage?: boolean
 }
 export default function useDocumentResource<T extends object>(
 	doctype: string,
@@ -150,6 +151,8 @@ export default function useDocumentResource<T extends object>(
 	resource.load().then(setupLocalStorage)
 
 	function setupLocalStorage() {
+		if (options.disableLocalStorage) return
+
 		const storageKey = `insights:resource:${resource.doctype}:${resource.name}`
 		const storage = useStorage(storageKey, {
 			doc: null as any,

frontend/src2/query/components/source_selector/DataSourceTableList.vue

@@ -5,8 +5,12 @@ import { computed, h, ref } from 'vue'
 import useTableStore from '../../../data_source/tables'
 import { wheneverChanges } from '../../../helpers'
 import { TableArgs } from '../../../types/query.types'
+import useDataSourceStore from '../../../data_source/data_source'
 
 const props = defineProps<{ data_source: string }>()
+const dataSourceStore = useDataSourceStore()
+const dataSource = computed(() => dataSourceStore.getSource(props.data_source))
+
 const tableStore = useTableStore()
 
 const selectedTable = defineModel<TableArgs>('selectedTable')
@@ -62,7 +66,8 @@ const emptyState = computed(() => {
 </script>
 
 <template>
-	<div class="flex h-full flex-col gap-2 overflow-auto p-0.5">
+	<div class="flex h-full flex-col gap-2 overflow-auto p-8 px-10">
+		<h1 class="text-xl font-semibold">{{ dataSource?.title }}</h1>
 		<div class="flex justify-between overflow-visible py-1">
 			<div class="flex gap-2">
 				<FormControl

frontend/src2/query/components/source_selector/SourceSelectorDialog.vue

@@ -1,13 +1,13 @@
 <script setup lang="tsx">
 import { DatabaseIcon, Table2Icon } from 'lucide-vue-next'
 import { computed, inject, ref } from 'vue'
+import TabbedSidebarLayout, { Tab, TabGroup } from '../../../components/TabbedSidebarLayout.vue'
 import useDataSourceStore from '../../../data_source/data_source'
 import { wheneverChanges } from '../../../helpers'
 import { QueryTableArgs, SourceArgs, TableArgs } from '../../../types/query.types'
 import { Workbook, workbookKey } from '../../../workbook/workbook'
 import { query_table, table } from '../../helpers'
 import DataSourceTableList from './DataSourceTableList.vue'
-import TabbedSidebarLayout, { Tab, TabGroup } from './TabbedSidebarLayout.vue'
 import WorkbookQueryList from './WorkbookQueryList.vue'
 
 const emit = defineEmits({ select: (source: SourceArgs) => true })

frontend/src2/query/components/source_selector/WorkbookQueryList.vue

@@ -54,7 +54,8 @@ const listColumns = [
 </script>
 
 <template>
-	<div class="flex h-full flex-col gap-2 overflow-auto p-0.5">
+	<div class="flex h-full flex-col gap-2 overflow-auto p-8 px-10">
+		<h1 class="text-xl font-semibold">Queries</h1>
 		<div class="flex justify-between overflow-visible py-1">
 			<div class="flex gap-2">
 				<FormControl

frontend/src2/router.ts

@@ -80,16 +80,6 @@ const routes = [
 		name: 'DataStoreList',
 		component: () => import('./data_store/DataStoreList.vue'),
 	},
-	{
-		path: '/users',
-		name: 'UserList',
-		component: () => import('./users/UserList.vue'),
-	},
-	{
-		path: '/teams',
-		name: 'TeamList',
-		component: () => import('./teams/TeamList.vue'),
-	},
 	{
 		props: true,
 		name: 'SharedChart',

frontend/src2/settings/DataStoreSettings.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Checkbox from '../components/Checkbox.vue'
+import SettingItem from './SettingItem.vue'
+import useSettings from './settings'
+
+const settings = useSettings()
+settings.load()
+</script>
+
+<template>
+	<div class="flex w-full flex-col gap-6 overflow-y-scroll p-8 px-10">
+		<h1 class="text-xl font-semibold">Data Store</h1>
+
+		<SettingItem
+			label="Enable"
+			description="Enable the data store to store database tables into a duckdb database for faster & cross-database queries."
+		>
+			<Checkbox />
+		</SettingItem>
+
+		<SettingItem
+			label="Row Limit"
+			description="Set the maximum number of rows per table that will be imported into the data store. Default is 10,00,000"
+		>
+			<FormControl v-model="settings.doc.max_records_to_sync" class="w-28" type="number" />
+		</SettingItem>
+
+		<SettingItem
+			label="Memory Limit"
+			description="Set the maximum memory usage while importing tables into the data store. Default is 512MB"
+		>
+			<FormControl v-model="settings.doc.max_memory_usage" class="w-28" type="number" />
+		</SettingItem>
+
+		<div class="flex justify-end">
+			<Button
+				label="Update"
+				variant="solid"
+				:disabled="!settings.isdirty"
+				:loading="settings.saving"
+				@click="() => settings.save()"
+			/>
+		</div>
+	</div>
+</template>

frontend/src2/settings/GeneralSettings.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import Checkbox from '../components/Checkbox.vue'
+import DatePickerControl from '../query/components/DatePickerControl.vue'
+import SettingItem from './SettingItem.vue'
+import useSettings from './settings'
+
+const settings = useSettings()
+settings.load()
+</script>
+
+<template>
+	<div class="flex w-full flex-col gap-6 overflow-y-scroll p-8 px-10">
+		<h1 class="text-xl font-semibold">General</h1>
+		<SettingItem
+			label="Logo"
+			description="Appears in the top left corner of the application and in the browser tab next to the page title. Recommended size: 32x32px in PNG format."
+		>
+			<div class="flex h-full w-full items-center justify-center rounded border">
+				<img src="../assets/insights-logo-new.svg" alt="Logo" class="w-8 rounded" />
+			</div>
+		</SettingItem>
+
+		<SettingItem
+			label="Fiscal Year Start"
+			description="Set the start of the fiscal year for the organization. This will be used to calculate
+					quarterly and yearly data."
+		>
+			<DatePickerControl
+				class="w-28"
+				placeholder="Select Date"
+				:model-value="[settings.doc.fiscal_year_start]"
+				@update:model-value="settings.doc.fiscal_year_start = $event?.[0] || '2024-04-01'"
+			/>
+		</SettingItem>
+
+		<SettingItem
+			label="Week Starts On"
+			description="Set the start of the week for the organization. This will be used to calculate weekly data."
+		>
+			<FormControl
+				class="w-28"
+				type="select"
+				v-model="settings.doc.week_starts_on"
+				:options="[
+					'Sunday',
+					'Monday',
+					'Tuesday',
+					'Wednesday',
+					'Thursday',
+					'Friday',
+					'Saturday',
+				]"
+			/>
+		</SettingItem>
+
+		<div class="flex justify-end">
+			<Button
+				label="Update"
+				variant="solid"
+				:disabled="!settings.isdirty"
+				:loading="settings.saving"
+				@click="() => settings.save()"
+			/>
+		</div>
+	</div>
+</template>