feat: homepage

* can be used to show onboarding steps * pin important charts & dashboards
frappe · Jul 18, 2023 · 705628d · 705628d
1 parent 40228b4
commit 705628d
Show file tree

Hide file tree

Showing 11 changed files with 214 additions and 209 deletions.
diff --git a/frontend/src/components/AppShell.vue b/frontend/src/components/AppShell.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-1 overflow-hidden bg-gray-50 text-base">
+	<div class="flex flex-1 overflow-hidden text-base">
 		<Sidebar v-if="!hideSidebar" />
 		<RouterView v-slot="{ Component }">
 			<Suspense>

diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
@@ -1,5 +1,8 @@
 <template>
-	<div class="rg:w-60 flex w-14 flex-shrink-0 flex-col border-r bg-white" v-if="currentRoute">
+	<div
+		class="rg:w-60 flex w-14 flex-shrink-0 flex-col border-r border-gray-300 bg-white"
+		v-if="currentRoute"
+	>
 		<div class="flex flex-grow flex-col overflow-y-auto p-2.5">
 			<div class="rg:flex hidden flex-shrink-0 items-end text-sm text-gray-600">
 				<img src="../assets/insights-logo.svg" class="h-7" />
@@ -115,26 +118,32 @@
 <script setup>
 import { Avatar } from 'frappe-ui'
 
-import { ref, computed, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { createResource } from 'frappe-ui'
+import HelpDialog from '@/components/HelpDialog.vue'
 import auth from '@/utils/auth'
-import { getOnboardingStatus } from '@/utils/onboarding'
 import settings from '@/utils/settings'
-import HelpDialog from '@/components/HelpDialog.vue'
+import { createResource } from 'frappe-ui'
 import {
+	Book,
+	Database,
 	GanttChartSquare,
+	HomeIcon,
 	LayoutDashboard,
-	Database,
 	Settings,
 	User,
 	Users,
-	Star,
-	Book,
 } from 'lucide-vue-next'
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
 const showHelpDialog = ref(false)
 const sidebarItems = ref([
+	{
+		path: '/',
+		label: 'Home',
+		icon: HomeIcon,
+		name: 'Home',
+		current: false,
+	},
 	{
 		path: '/dashboard',
 		label: 'Dashboards',
@@ -171,18 +180,6 @@ const sidebarItems = ref([
 	},
 ])
 
-getOnboardingStatus().then((onboardingComplete) => {
-	if (!onboardingComplete) {
-		// add onboarding item as first item in sidebar
-		sidebarItems.value.unshift({
-			path: '/get-started',
-			label: 'Get Started',
-			icon: Star,
-			name: 'GetStarted',
-			current: false,
-		})
-	}
-})
 watch(
 	() => auth.user.is_admin && settings.doc?.enable_permissions,
 	(isAdmin) => {

diff --git a/frontend/src/home/Home.vue b/frontend/src/home/Home.vue
@@ -0,0 +1,22 @@
+<script setup>
+import auth from '@/utils/auth'
+import HomeQuickActions from './HomeQuickActions.vue'
+import HomePinnedItems from './HomePinnedItems.vue'
+import HomeRecentActivity from './HomeRecentActivity.vue'
+import { inject } from 'vue'
+
+const $dayjs = inject('$dayjs')
+const today = $dayjs().format('dddd, D MMMM')
+</script>
+
+<template>
+	<div class="flex flex-1 flex-col space-y-8 overflow-hidden bg-white p-8">
+		<div class="space-y-2">
+			<div class="text-3xl font-bold text-gray-900">Hello {{ auth.user.first_name }}, 👋</div>
+			<div class="text-lg text-gray-600">{{ today }}</div>
+		</div>
+		<HomeQuickActions></HomeQuickActions>
+		<HomePinnedItems></HomePinnedItems>
+		<HomeRecentActivity></HomeRecentActivity>
+	</div>
+</template>
diff --git a/frontend/src/home/HomePinnedItems.vue b/frontend/src/home/HomePinnedItems.vue
@@ -0,0 +1,20 @@
+<template>
+	<div>
+		<div class="flex items-center space-x-2">
+			<div class="rounded bg-gray-100 p-1">
+				<FeatherIcon name="bookmark" class="h-4 w-4" />
+			</div>
+			<div class="text-lg">Pinned Items</div>
+		</div>
+		<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+			<div
+				class="col-span-1 flex cursor-pointer items-center space-x-2 rounded border border-dashed bg-gray-50 p-4 transition-all hover:border-gray-400"
+			>
+				<div class="rounded p-1">
+					<FeatherIcon name="plus" class="h-4 w-4 text-gray-600" />
+				</div>
+				<div class="text-lg font-medium text-gray-600">Pin an item</div>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/frontend/src/home/HomeQuickActions.vue b/frontend/src/home/HomeQuickActions.vue
@@ -0,0 +1,36 @@
+<template>
+	<div>
+		<div class="flex items-center space-x-2">
+			<div class="rounded bg-gray-100 p-1">
+				<FeatherIcon name="arrow-up-right" class="h-4 w-4" />
+			</div>
+			<div class="text-lg">Quick Actions</div>
+		</div>
+		<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+			<div
+				class="col-span-1 flex cursor-pointer items-center justify-between rounded border border-transparent bg-white p-4 shadow transition-all hover:border-gray-400"
+			>
+				<div class="text-lg font-medium text-gray-900">Create a Query</div>
+				<div class="rounded bg-gray-100 p-1">
+					<FeatherIcon name="plus" class="h-4 w-4 text-gray-900" />
+				</div>
+			</div>
+			<div
+				class="col-span-1 flex cursor-pointer items-center justify-between rounded border border-transparent bg-white p-4 shadow transition-all hover:border-gray-400"
+			>
+				<div class="text-lg font-medium text-gray-900">Create a Page</div>
+				<div class="rounded bg-gray-100 p-1">
+					<FeatherIcon name="plus" class="h-4 w-4 text-gray-900" />
+				</div>
+			</div>
+			<div
+				class="col-span-1 flex cursor-pointer items-center justify-between rounded border border-transparent bg-white p-4 shadow transition-all hover:border-gray-400"
+			>
+				<div class="text-lg font-medium text-gray-900">Create a Dashboard</div>
+				<div class="rounded bg-gray-100 p-1">
+					<FeatherIcon name="plus" class="h-4 w-4 text-gray-900" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/frontend/src/home/HomeRecentActivity.vue b/frontend/src/home/HomeRecentActivity.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { ref, inject } from 'vue'
+import { call } from 'frappe-ui'
+
+const $dayjs = inject('$dayjs')
+
+const activities = ref([])
+call('insights.api.get_recent_activity').then((data) => {
+	activities.value = data.map((d) => {
+		return {
+			...d,
+			modified: $dayjs(d.modified).fromNow(),
+		}
+	})
+})
+</script>
+
+<template>
+	<div class="flex flex-col overflow-hidden">
+		<div class="flex items-center space-x-2">
+			<div class="rounded bg-gray-100 p-1">
+				<FeatherIcon name="clock" class="h-4 w-4" />
+			</div>
+			<div class="text-lg">Activity</div>
+		</div>
+		<div class="mt-4 flex-1 space-y-6 overflow-y-scroll">
+			<div
+				v-for="(activity, i) in activities"
+				:key="i"
+				class="flex w-fit cursor-pointer items-center space-x-4"
+			>
+				<div class="flex-shrink-0">
+					<Avatar size="xl" :label="activity.owner" />
+				</div>
+				<div class="flex flex-1 flex-col space-y-1">
+					<div class="flex items-center space-x-1">
+						<div class="font-medium text-gray-900">{{ activity.owner }}</div>
+						<div class="text-gray-600">updated</div>
+						<div class="font-medium text-gray-900">
+							{{ activity.ref_doctype }}
+							{{
+								activity.docname !== activity.ref_doctype
+									? `-- ${activity.docname}`
+									: ''
+							}}
+						</div>
+					</div>
+					<div class="text-sm text-gray-600">{{ activity.modified }}</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/frontend/src/pages/GetStarted.vue b/frontend/src/pages/GetStarted.vue
diff --git a/frontend/src/router.js b/frontend/src/router.js
@@ -1,6 +1,5 @@
 import { getTrialStatus } from '@/subscription'
 import auth from '@/utils/auth'
-import { getOnboardingStatus } from '@/utils/onboarding'
 import settings from '@/utils/settings'
 import { createRouter, createWebHistory } from 'vue-router'
 import { isSetupComplete } from '@/setup'
@@ -25,12 +24,8 @@ const routes = [
 	},
 	{
 		path: '/',
-		redirect: '/get-started',
-	},
-	{
-		path: '/get-started',
-		name: 'Get Started',
-		component: () => import('@/pages/GetStarted.vue'),
+		name: 'Home',
+		component: () => import('@/home/Home.vue'),
 	},
 	{
 		path: '/dashboard',
@@ -202,12 +197,6 @@ router.beforeEach(async (to, from, next) => {
 		return next('/')
 	}
 
-	// redirect to /dashboard if onboarding is complete
-	const onboardingComplete = await getOnboardingStatus()
-	if (onboardingComplete && to.name == 'Get Started') {
-		return next('/dashboard')
-	}
-
 	to.path === '/login' ? next('/') : next()
 })
 

diff --git a/frontend/src/utils/auth.js b/frontend/src/utils/auth.js
@@ -6,6 +6,8 @@ const auth = reactive({
 	isLoggedIn: false,
 	user: {
 		user_id: '',
+		first_name: '',
+		last_name: '',
 		full_name: '',
 		user_image: '',
 		is_admin: undefined,
@@ -33,6 +35,8 @@ const userInfo = createResource({
 	onSuccess(res) {
 		auth.user.is_admin = res.is_admin
 		auth.user.is_user = res.is_user
+		auth.user.first_name = res.first_name
+		auth.user.last_name = res.last_name
 	},
 })
 
@@ -53,6 +57,8 @@ async function login(email, password) {
 		pwd: password,
 	})
 	if (res) {
+		auth.user.first_name = res.first_name
+		auth.user.last_name = res.last_name
 		auth.user.full_name = res.full_name
 		auth.user.user_image = res.user_image
 		auth.isLoggedIn = true