From 376277ad437b770a68e4de14a0da86add2058529 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Tue, 26 Nov 2024 14:25:04 +0530
Subject: [PATCH] feat: `SettingsDialog`

---
 frontend/src2/components/AppSidebar.vue       |  33 ++-
 frontend/src2/components/Checkbox.vue         |   4 +-
 frontend/src2/components/SidebarLink.vue      |  11 +-
 .../TabbedSidebarLayout.vue                   |  18 +-
 frontend/src2/helpers/resource.ts             |   3 +
 .../source_selector/DataSourceTableList.vue   |   7 +-
 .../source_selector/SourceSelectorDialog.vue  |   2 +-
 .../source_selector/WorkbookQueryList.vue     |   3 +-
 frontend/src2/router.ts                       |  10 -
 frontend/src2/settings/DataStoreSettings.vue  |  45 ++++
 frontend/src2/settings/GeneralSettings.vue    |  66 ++++++
 .../src2/settings/PermissionsSettings.vue     |  31 +++
 frontend/src2/settings/ProfileSettings.vue    |  86 +++++++
 frontend/src2/settings/SettingItem.vue        |  20 ++
 frontend/src2/settings/Settings.vue           |  77 +++++++
 frontend/src2/settings/TeamsSettings.vue      |  82 +++++++
 frontend/src2/settings/UsersSettings.vue      | 217 ++++++++++++++++++
 frontend/src2/settings/settings.ts            |  11 +
 frontend/src2/users/users.ts                  |  33 +++
 insights/api/user.py                          |  13 ++
 20 files changed, 722 insertions(+), 50 deletions(-)
 rename frontend/src2/{query/components/source_selector => components}/TabbedSidebarLayout.vue (65%)
 create mode 100644 frontend/src2/settings/DataStoreSettings.vue
 create mode 100644 frontend/src2/settings/GeneralSettings.vue
 create mode 100644 frontend/src2/settings/PermissionsSettings.vue
 create mode 100644 frontend/src2/settings/ProfileSettings.vue
 create mode 100644 frontend/src2/settings/SettingItem.vue
 create mode 100644 frontend/src2/settings/Settings.vue
 create mode 100644 frontend/src2/settings/TeamsSettings.vue
 create mode 100644 frontend/src2/settings/UsersSettings.vue

diff --git a/frontend/src2/components/AppSidebar.vue b/frontend/src2/components/AppSidebar.vue
index 4210809f3..67a29d725 100644
--- a/frontend/src2/components/AppSidebar.vue
+++ b/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>
diff --git a/frontend/src2/components/Checkbox.vue b/frontend/src2/components/Checkbox.vue
index 0bc0feaaa..3b1007b0a 100644
--- a/frontend/src2/components/Checkbox.vue
+++ b/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 ',
diff --git a/frontend/src2/components/SidebarLink.vue b/frontend/src2/components/SidebarLink.vue
index 78a6a86e3..8bcfdd262 100644
--- a/frontend/src2/components/SidebarLink.vue
+++ b/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,6 +43,7 @@ const props = defineProps<{
 	label: string
 	to?: string
 	isCollapsed?: boolean
+	isActive?: boolean
 }>()
 
 function handleClick() {
@@ -48,6 +51,6 @@ function handleClick() {
 }
 
 let isActive = computed(() => {
-	return router.currentRoute.value.name === props.to
+	return router.currentRoute.value.name === props.to || props.isActive
 })
 </script>
diff --git a/frontend/src2/query/components/source_selector/TabbedSidebarLayout.vue b/frontend/src2/components/TabbedSidebarLayout.vue
similarity index 65%
rename from frontend/src2/query/components/source_selector/TabbedSidebarLayout.vue
rename to frontend/src2/components/TabbedSidebarLayout.vue
index 8240d7630..d64172c05 100644
--- a/frontend/src2/query/components/source_selector/TabbedSidebarLayout.vue
+++ b/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>
diff --git a/frontend/src2/helpers/resource.ts b/frontend/src2/helpers/resource.ts
index b854f01d8..eea771e13 100644
--- a/frontend/src2/helpers/resource.ts
+++ b/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,
diff --git a/frontend/src2/query/components/source_selector/DataSourceTableList.vue b/frontend/src2/query/components/source_selector/DataSourceTableList.vue
index 1c07bfed9..a490b108b 100644
--- a/frontend/src2/query/components/source_selector/DataSourceTableList.vue
+++ b/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
diff --git a/frontend/src2/query/components/source_selector/SourceSelectorDialog.vue b/frontend/src2/query/components/source_selector/SourceSelectorDialog.vue
index 2305655f8..018b8a6c3 100644
--- a/frontend/src2/query/components/source_selector/SourceSelectorDialog.vue
+++ b/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 })
diff --git a/frontend/src2/query/components/source_selector/WorkbookQueryList.vue b/frontend/src2/query/components/source_selector/WorkbookQueryList.vue
index 17193a451..bedb0c166 100644
--- a/frontend/src2/query/components/source_selector/WorkbookQueryList.vue
+++ b/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
diff --git a/frontend/src2/router.ts b/frontend/src2/router.ts
index cbe40b498..1fb45c6cf 100644
--- a/frontend/src2/router.ts
+++ b/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',
diff --git a/frontend/src2/settings/DataStoreSettings.vue b/frontend/src2/settings/DataStoreSettings.vue
new file mode 100644
index 000000000..20a8e117c
--- /dev/null
+++ b/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>
diff --git a/frontend/src2/settings/GeneralSettings.vue b/frontend/src2/settings/GeneralSettings.vue
new file mode 100644
index 000000000..96b1fd84c
--- /dev/null
+++ b/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>
diff --git a/frontend/src2/settings/PermissionsSettings.vue b/frontend/src2/settings/PermissionsSettings.vue
new file mode 100644
index 000000000..5577d87ab
--- /dev/null
+++ b/frontend/src2/settings/PermissionsSettings.vue
@@ -0,0 +1,31 @@
+<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">Permission</h1>
+
+		<SettingItem
+			label="Enable Permissions"
+			description="When disabled, all users will have access to all data sources and tables."
+		>
+			<Checkbox v-model="settings.doc.enable_permissions" />
+		</SettingItem>
+
+		<div class="flex justify-end">
+			<Button
+				label="Update"
+				variant="solid"
+				:disabled="!settings.isdirty"
+				:loading="settings.saving"
+				@click="() => settings.save()"
+			/>
+		</div>
+	</div>
+</template>
diff --git a/frontend/src2/settings/ProfileSettings.vue b/frontend/src2/settings/ProfileSettings.vue
new file mode 100644
index 000000000..830aafde5
--- /dev/null
+++ b/frontend/src2/settings/ProfileSettings.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { Avatar } from 'frappe-ui'
+import session from '../session'
+import { computed, ref } from 'vue'
+import useUserStore from '../users/users'
+
+const user = ref({ ...session.user })
+
+const updateDisabled = computed(() => {
+	return (
+		user.value.first_name === session.user.first_name &&
+		user.value.last_name === session.user.last_name
+	)
+})
+
+const userStore = useUserStore()
+function update() {
+	if (updateDisabled.value) return
+
+	userStore
+		.updateUser(session.user.email, {
+			first_name: user.value.first_name,
+			last_name: user.value.last_name,
+		})
+		.then(() => {
+			session.user.first_name = user.value.first_name
+			session.user.last_name = user.value.last_name
+		})
+}
+</script>
+
+<template>
+	<div class="flex w-full flex-col gap-6 p-8 px-10">
+		<h1 class="text-xl font-semibold">Profile</h1>
+		<div class="flex items-start gap-4">
+			<div class="relative flex flex-col items-center justify-between gap-2">
+				<Avatar class="!h-15 !w-15" :image="user.user_image" :label="user.full_name" />
+			</div>
+			<div class="flex h-15 flex-col justify-center gap-1">
+				<span class="text-lg font-semibold">{{ user.full_name }}</span>
+				<span class="text-base text-gray-700">{{ user.email }}</span>
+			</div>
+		</div>
+		<div class="flex w-full flex-col gap-4">
+			<div class="flex gap-6">
+				<FormControl
+					v-model="user.first_name"
+					label="First Name"
+					autocomplete="off"
+					class="flex-1"
+				/>
+				<FormControl
+					autocomplete="off"
+					class="flex-1"
+					label="Last Name"
+					v-model="user.last_name"
+				/>
+			</div>
+			<div class="flex gap-6">
+				<FormControl
+					autocomplete="off"
+					class="flex-1"
+					label="Email"
+					:modelValue="user.email"
+					:disabled="true"
+				/>
+				<FormControl
+					autocomplete="off"
+					class="flex-1"
+					label="New Password"
+					type="password"
+					disabled
+				/>
+			</div>
+			<div class="flex justify-end">
+				<Button
+					label="Update"
+					variant="solid"
+					:loading="userStore.updatingUser"
+					:disabled="updateDisabled"
+					@click="update"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/frontend/src2/settings/SettingItem.vue b/frontend/src2/settings/SettingItem.vue
new file mode 100644
index 000000000..d301aba7a
--- /dev/null
+++ b/frontend/src2/settings/SettingItem.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps<{
+	label: string
+	description: string
+}>()
+</script>
+
+<template>
+	<div class="flex items-start justify-between gap-8">
+		<div class="flex w-3/4 flex-col">
+			<span class="text-p-base font-medium">{{ label }}</span>
+			<span class="text-p-sm text-gray-600">
+				{{ description }}
+			</span>
+		</div>
+		<div class="flex h-full w-1/4 items-center justify-end">
+			<slot />
+		</div>
+	</div>
+</template>
diff --git a/frontend/src2/settings/Settings.vue b/frontend/src2/settings/Settings.vue
new file mode 100644
index 000000000..3cc6d1650
--- /dev/null
+++ b/frontend/src2/settings/Settings.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import {
+	Building2,
+	CircleUser,
+	DatabaseZap,
+	SettingsIcon,
+	Shield,
+	Users,
+	Warehouse,
+} from 'lucide-vue-next'
+import { defineAsyncComponent, ref } from 'vue'
+import TabbedSidebarLayout, { Tab, TabGroup } from '../components/TabbedSidebarLayout.vue'
+
+const showDialog = defineModel({ required: true, default: false })
+const tabGroups: TabGroup[] = [
+	{
+		groupLabel: 'Account',
+		tabs: [
+			{
+				label: 'Profile',
+				icon: CircleUser,
+				component: defineAsyncComponent(() => import('./ProfileSettings.vue')),
+			},
+		],
+	},
+	{
+		groupLabel: 'Organization',
+		tabs: [
+			{
+				label: 'General',
+				icon: SettingsIcon,
+				component: defineAsyncComponent(() => import('./GeneralSettings.vue')),
+			},
+			// {
+			// 	label: 'Email Accounts',
+			// 	icon: Mail,
+			// 	component: () => {},
+			// },
+			{
+				label: 'Users',
+				icon: Users,
+				component: defineAsyncComponent(() => import('./UsersSettings.vue')),
+			},
+			{
+				label: 'Teams',
+				icon: Building2,
+				component: defineAsyncComponent(() => import('./TeamsSettings.vue')),
+			},
+			{
+				label: 'Permissions',
+				icon: Shield,
+				component: defineAsyncComponent(() => import('./PermissionsSettings.vue')),
+			},
+			{
+				label: 'Data Store',
+				icon: DatabaseZap,
+				component: defineAsyncComponent(() => import('./DataStoreSettings.vue')),
+			},
+		],
+	},
+]
+const activeTab = ref<Tab>(tabGroups[0].tabs[0])
+</script>
+
+<template>
+	<Dialog v-model="showDialog" :options="{ size: '4xl' }">
+		<template #body>
+			<div class="relative flex text-base" :style="{ height: 'calc(100vh - 12rem)' }">
+				<TabbedSidebarLayout
+					title="Settings"
+					:tabs="tabGroups"
+					v-model:activeTab="activeTab"
+				/>
+			</div>
+		</template>
+	</Dialog>
+</template>
diff --git a/frontend/src2/settings/TeamsSettings.vue b/frontend/src2/settings/TeamsSettings.vue
new file mode 100644
index 000000000..b5e6d39fd
--- /dev/null
+++ b/frontend/src2/settings/TeamsSettings.vue
@@ -0,0 +1,82 @@
+<script setup lang="tsx">
+import { Avatar, ListView } from 'frappe-ui'
+import { Plus, SearchIcon } from 'lucide-vue-next'
+import { computed, ref } from 'vue'
+import { copy } from '../helpers'
+import session from '../session'
+import CreateTeamDialog from '../teams/CreateTeamDialog.vue'
+import useTeamStore, { Team } from '../teams/teams'
+
+const teamStore = useTeamStore()
+teamStore.getTeams()
+
+const searchQuery = ref('')
+const filteredTeams = computed(() => {
+	if (!searchQuery.value) {
+		return teamStore.teams
+	}
+	return teamStore.teams.filter((team) =>
+		team.team_name.toLowerCase().includes(searchQuery.value.toLowerCase())
+	)
+})
+
+const listOptions = ref({
+	columns: [
+		{
+			label: 'Team',
+			key: 'team_name',
+			prefix(props: any) {
+				const team = props.row as Team
+				return <Avatar size="md" label={team.team_name} />
+			},
+		},
+	],
+	rows: filteredTeams,
+	rowKey: 'team_name',
+	options: {
+		selectable: false,
+		showTooltip: false,
+		emptyState: {
+			title: 'No teams.',
+			description: 'No teams to display.',
+			button: session.user.is_admin
+				? {
+						label: 'Create Team',
+						variant: 'solid',
+						onClick: () => (showCreateTeamDialog.value = true),
+				  }
+				: undefined,
+		},
+	},
+})
+
+const showCreateTeamDialog = ref(false)
+</script>
+
+<template>
+	<div class="flex h-full w-full flex-col gap-3 overflow-x-hidden overflow-y-scroll p-8 px-10">
+		<h1 class="flex-shrink-0 text-xl font-semibold">Teams</h1>
+		<div class="flex w-full flex-1 flex-col gap-3 overflow-auto">
+			<div class="flex justify-between gap-2 overflow-visible py-1">
+				<FormControl placeholder="Search" v-model="searchQuery" :debounce="300">
+					<template #prefix>
+						<SearchIcon class="h-4 w-4 text-gray-500" stroke-width="1.5" />
+					</template>
+				</FormControl>
+
+				<Button
+					v-if="session.user.is_admin"
+					label="Create Team"
+					variant="outline"
+					@click="showCreateTeamDialog = true"
+				>
+					<template #prefix>
+						<Plus class="h-4 w-4 text-gray-700" stroke-width="1.5" />
+					</template>
+				</Button>
+			</div>
+			<ListView class="h-full" v-bind="listOptions"> </ListView>
+		</div>
+		<CreateTeamDialog v-model="showCreateTeamDialog" />
+	</div>
+</template>
diff --git a/frontend/src2/settings/UsersSettings.vue b/frontend/src2/settings/UsersSettings.vue
new file mode 100644
index 000000000..92fc53dd3
--- /dev/null
+++ b/frontend/src2/settings/UsersSettings.vue
@@ -0,0 +1,217 @@
+<script setup lang="tsx">
+import { useTimeAgo } from '@vueuse/core'
+import { Avatar, ListView } from 'frappe-ui'
+import { Plus, SearchIcon } from 'lucide-vue-next'
+import { computed, ref, watch } from 'vue'
+import IndicatorIcon from '../components/Icons/IndicatorIcon.vue'
+import session from '../session'
+import useUserStore, { User } from '../users/users'
+
+const userStore = useUserStore()
+userStore.getUsers()
+
+const searchQuery = ref('')
+const filteredUsers = computed(() => {
+	if (!searchQuery.value) {
+		return userStore.users
+	}
+	return userStore.users.filter(
+		(user) =>
+			user.full_name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+			user.email.toLowerCase().includes(searchQuery.value.toLowerCase())
+	)
+})
+
+const listOptions = ref({
+	columns: [
+		{
+			label: 'User',
+			key: 'full_name',
+			prefix: (props: any) => {
+				const user = props.row as User
+				return <Avatar size="md" label={user.full_name} image={user.user_image} />
+			},
+		},
+		{
+			label: 'Status',
+			key: 'enabled',
+			getLabel: (props: any) => {
+				const user = props.row as User
+				if (user.invitation_status) {
+					return user.invitation_status === 'Pending'
+						? 'Invitation Sent'
+						: 'Invitation Expired'
+				}
+				return props.row.enabled ? 'Enabled' : 'Disabled'
+			},
+			prefix: (props: any) => {
+				let color
+				const user = props.row as User
+				if (user.invitation_status) {
+					color =
+						user.invitation_status === 'Pending' ? 'text-yellow-500' : 'text-red-500'
+				} else {
+					color = props.row.enabled ? 'text-green-500' : 'text-gray-500'
+				}
+				return <IndicatorIcon class={color} />
+			},
+		},
+		{
+			label: 'Email',
+			key: 'email',
+		},
+		// {
+		// 	label: 'Last Active',
+		// 	key: 'last_active',
+		// 	getLabel: (props: any) => {
+		// 		if (!props.row.last_active) {
+		// 			return ''
+		// 		}
+		// 		return useTimeAgo(props.row.last_active).value
+		// 	},
+		// },
+	],
+	rows: filteredUsers,
+	rowKey: 'email',
+	options: {
+		selectable: false,
+		showTooltip: false,
+		emptyState: {
+			title: 'No users.',
+			description: 'No users to display.',
+			button: session.user.is_admin
+				? {
+						label: 'Invite User',
+						variant: 'solid',
+						onClick: () => (showInviteUserDialog.value = true),
+				  }
+				: undefined,
+		},
+	},
+})
+
+const showInviteUserDialog = ref(false)
+const emailsToInvite = ref<string[]>([])
+const emailsTxt = ref('')
+watch(emailsTxt, extractEmails)
+
+function extractEmails(emails: string) {
+	const lastChar = emails.slice(-1)
+	if (lastChar != ' ' && lastChar != ',') {
+		emailsTxt.value = emails
+		return
+	}
+
+	const newEmails = emails
+		.split(/,|\s/)
+		.filter((email) => email)
+		.filter((email) => !emailsToInvite.value.includes(email))
+	emailsToInvite.value = [...emailsToInvite.value, ...newEmails]
+	emailsTxt.value = ''
+}
+
+const areAllEmailsValid = computed(() => {
+	if (!emailsToInvite.value.length && isValidEmail(emailsTxt.value)) {
+		return true
+	}
+	if (!emailsToInvite.value.length) {
+		return false
+	}
+	return emailsToInvite.value.every((email) => {
+		return isValidEmail(email)
+	})
+})
+
+function isValidEmail(email: string) {
+	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
+}
+
+function sendInvitation() {
+	if (!areAllEmailsValid.value) {
+		return
+	}
+	if (!emailsToInvite.value.length) {
+		emailsToInvite.value = [emailsTxt.value]
+	}
+	userStore.inviteUsers(emailsToInvite.value)
+	emailsToInvite.value = []
+	showInviteUserDialog.value = false
+}
+</script>
+
+<template>
+	<div class="flex h-full w-full flex-col gap-3 overflow-x-hidden overflow-y-scroll p-8 px-10">
+		<h1 class="flex-shrink-0 text-xl font-semibold">Users</h1>
+
+		<div class="flex w-full flex-1 flex-col gap-3 overflow-auto">
+			<div class="flex justify-between gap-2 overflow-visible py-1">
+				<FormControl placeholder="Search" :debounce="300">
+					<template #prefix>
+						<SearchIcon class="h-4 w-4 text-gray-500" />
+					</template>
+				</FormControl>
+
+				<Button
+					v-if="session.user.is_admin"
+					label="Invite User"
+					variant="outline"
+					@click="showInviteUserDialog = true"
+				>
+					<template #prefix>
+						<Plus class="h-4 w-4 text-gray-700" stroke-width="1.5" />
+					</template>
+				</Button>
+			</div>
+			<ListView class="h-full" v-bind="listOptions"> </ListView>
+		</div>
+	</div>
+
+	<Dialog
+		v-model="showInviteUserDialog"
+		:options="{
+			title: 'Invite User',
+			size: 'sm',
+			actions: [
+				{
+					label: 'Send Invitation',
+					variant: 'solid',
+					disabled: !areAllEmailsValid,
+					loading: userStore.sendingInvitation,
+					onClick: sendInvitation,
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<div class="flex flex-col gap-4">
+				<div class="flex flex-wrap gap-1 rounded bg-gray-100 p-0.5">
+					<Button
+						v-for="(email, idx) in emailsToInvite"
+						:key="email"
+						:label="email"
+						variant="outline"
+						class="shadow-sm"
+					>
+						<template #suffix>
+							<XIcon
+								class="h-4"
+								stroke-width="1.5"
+								@click.stop="() => emailsToInvite.splice(idx, 1)"
+							/>
+						</template>
+					</Button>
+					<div class="min-w-[10rem] flex-1">
+						<input
+							type="text"
+							autocomplete="off"
+							placeholder="Enter email address"
+							v-model="emailsTxt"
+							@keydown.enter.capture.stop="extractEmails(`${emailsTxt} `)"
+							class="h-7 w-full rounded border-none bg-gray-100 py-1.5 pl-2 pr-2 text-base text-gray-800 placeholder-gray-500 transition-colors focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0"
+						/>
+					</div>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
diff --git a/frontend/src2/settings/settings.ts b/frontend/src2/settings/settings.ts
index d0d8e9a23..774bcf102 100644
--- a/frontend/src2/settings/settings.ts
+++ b/frontend/src2/settings/settings.ts
@@ -13,7 +13,13 @@ function makeSettings() {
 		initialDoc: {
 			name: '',
 			enable_permissions: false,
+			allowed_origins: '',
+			max_records_to_sync: 10_00_000,
+			max_memory_usage: 512,
+			fiscal_year_start: '2024-04-01',
+			week_starts_on: 'Monday',
 		},
+		disableLocalStorage: true,
 	})
 	_settings.onAfterSave(() =>
 		createToast({
@@ -31,4 +37,9 @@ type Settings = ReturnType<typeof makeSettings>
 type InsightsSettings = {
 	name: string
 	enable_permissions: boolean
+	allowed_origins: string
+	max_records_to_sync: number
+	max_memory_usage: number
+	fiscal_year_start: string
+	week_starts_on: string
 }
diff --git a/frontend/src2/users/users.ts b/frontend/src2/users/users.ts
index 35b467c54..b3c2b9521 100644
--- a/frontend/src2/users/users.ts
+++ b/frontend/src2/users/users.ts
@@ -60,6 +60,36 @@ function inviteUsers(emails: string[]) {
 		})
 }
 
+const updatingUser = ref(false)
+type UpdateUser = {
+	first_name: string
+	last_name: string
+}
+function updateUser(email: string, data: Partial<UpdateUser>) {
+	updatingUser.value = true
+	return call('insights.api.user.update_user', {
+		email,
+		fields: {
+			first_name: data.first_name,
+			last_name: data.last_name,
+		},
+	})
+		.then(() => {
+			getUsers()
+			createToast({
+				title: 'User Updated',
+				message: 'User updated successfully',
+				variant: 'success',
+			})
+		})
+		.catch((e: Error) => {
+			showErrorToast(e)
+		})
+		.finally(() => {
+			updatingUser.value = false
+		})
+}
+
 export default function useUserStore() {
 	if (!users.value.length) {
 		getUsers()
@@ -73,6 +103,9 @@ export default function useUserStore() {
 		getName,
 		getImage,
 
+		updatingUser,
+		updateUser,
+
 		inviteUsers,
 		sendingInvitation,
 	})
diff --git a/insights/api/user.py b/insights/api/user.py
index 4a554362b..529284be1 100644
--- a/insights/api/user.py
+++ b/insights/api/user.py
@@ -244,3 +244,16 @@ def invite_users(emails: str):
         invite = frappe.new_doc("Insights User Invitation")
         invite.email = email
         invite.insert(ignore_permissions=True)
+
+
+@insights_whitelist()
+def update_user(email: str, fields: dict):
+    first_name, last_name = fields.get("first_name"), fields.get("last_name")
+
+    user = frappe.get_doc("User", email)
+    if first_name:
+        user.first_name = first_name
+    if last_name:
+        user.last_name = last_name
+
+    user.save()