feat: added lead form page with tabs
This commit is contained in:
Shariq Ansari
parent
e09865cce6
commit
4f4230a925
38
frontend/src/components/Icons/ActivityIcon.vue
Normal file
38
frontend/src/components/Icons/ActivityIcon.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M2.5 6C2.5 4.61929 3.61929 3.5 5 3.5H15C16.3807 3.5 17.5 4.61929 17.5 6V12C17.5 15.0376 15.0376 17.5 12 17.5H5C3.61929 17.5 2.5 16.3807 2.5 15V6Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M6 2.5V3.5"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14 2.5V3"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M10.75 7.5C10.75 7.91421 10.4142 8.25 10 8.25C9.58579 8.25 9.25 7.91421 9.25 7.5C9.25 7.08579 9.58579 6.75 10 6.75C10.4142 6.75 10.75 7.08579 10.75 7.5ZM10.75 10.5C10.75 10.9142 10.4142 11.25 10 11.25C9.58579 11.25 9.25 10.9142 9.25 10.5C9.25 10.0858 9.58579 9.75 10 9.75C10.4142 9.75 10.75 10.0858 10.75 10.5ZM10 14.25C10.4142 14.25 10.75 13.9142 10.75 13.5C10.75 13.0858 10.4142 12.75 10 12.75C9.58579 12.75 9.25 13.0858 9.25 13.5C9.25 13.9142 9.58579 14.25 10 14.25ZM7.25 13.5C7.25 13.9142 6.91421 14.25 6.5 14.25C6.08579 14.25 5.75 13.9142 5.75 13.5C5.75 13.0858 6.08579 12.75 6.5 12.75C6.91421 12.75 7.25 13.0858 7.25 13.5ZM6.5 11.25C6.91421 11.25 7.25 10.9142 7.25 10.5C7.25 10.0858 6.91421 9.75 6.5 9.75C6.08579 9.75 5.75 10.0858 5.75 10.5C5.75 10.9142 6.08579 11.25 6.5 11.25ZM14.25 10.5C14.25 10.9142 13.9142 11.25 13.5 11.25C13.0858 11.25 12.75 10.9142 12.75 10.5C12.75 10.0858 13.0858 9.75 13.5 9.75C13.9142 9.75 14.25 10.0858 14.25 10.5ZM13.5 8.25C13.9142 8.25 14.25 7.91421 14.25 7.5C14.25 7.08579 13.9142 6.75 13.5 6.75C13.0858 6.75 12.75 7.08579 12.75 7.5C12.75 7.91421 13.0858 8.25 13.5 8.25Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M17.0077 11.6994L17.5 11.2071V11.5V12C17.5 15.0241 15.0594 17.4781 12.0404 17.4999L12.7878 16.5656C13.2586 15.9772 13.4651 15.2203 13.3586 14.4743C13.2098 13.4332 14.0203 12.5 15.0739 12.5C15.7985 12.5 16.4949 12.2122 17.0077 11.6994Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
15
frontend/src/components/Icons/EmailIcon.vue
Normal file
15
frontend/src/components/Icons/EmailIcon.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M2.5 6.5V6.5C2.5 7.10397 2.86771 7.64708 3.42848 7.87139L9.25722 10.2029C9.73404 10.3936 10.266 10.3936 10.7428 10.2029L16.5715 7.87139C17.1323 7.64708 17.5 7.10397 17.5 6.5V6.5"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<rect x="2.5" y="4" width="15" height="12" rx="2.5" stroke="currentColor" />
|
||||
</svg>
|
||||
</template>
|
||||
21
frontend/src/components/Icons/NoteIcon.vue
Normal file
21
frontend/src/components/Icons/NoteIcon.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10 4.5C10 3.39543 9.10457 2.5 8 2.5H5.75C4.64543 2.5 3.75 3.39543 3.75 4.5V15.5C3.75 16.6046 4.64543 17.5 5.75 17.5H14.25C15.3546 17.5 16.25 16.6021 16.25 15.4976C16.25 13.1374 16.25 12.6616 16.25 9.75319C16.25 9.2009 15.8023 8.75 15.25 8.75H11C10.4477 8.75 10 8.30228 10 7.75V5.3125V4.5Z"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.5 2.5H9.4844C10.2191 2.5 10.9283 2.76964 11.4775 3.25777L15.2431 6.60497C15.8836 7.17427 16.25 7.99028 16.25 8.8472V10.625"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
15
frontend/src/components/Icons/PhoneIcon.vue
Normal file
15
frontend/src/components/Icons/PhoneIcon.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.381 15.0091L13.0108 12.8044C13.3009 12.5612 13.7186 12.5445 14.0272 12.7639L16.5838 14.5815C17.0394 14.9054 17.0522 15.5775 16.6093 15.9186L15.6001 16.6955C14.9561 17.1913 14.0933 17.2956 13.3711 16.9225C11.824 16.1231 9.08016 14.5487 7.11025 12.5456C5.21236 10.6158 3.81881 8.0839 3.08578 6.57321C2.70649 5.79154 2.88609 4.87094 3.48778 4.24418L4.42402 3.26893C4.7989 2.87842 5.441 2.94435 5.72871 3.40288L7.34325 5.976C7.55012 6.3057 7.50072 6.73477 7.22432 7.00882L4.62919 9.58191"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
17
frontend/src/components/Icons/TaskIcon.vue
Normal file
17
frontend/src/components/Icons/TaskIcon.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect x="3" y="3" width="14" height="14" rx="2.5" stroke="currentColor" />
|
||||
<path
|
||||
d="M6.5 10.5L8.5 13L13.5 7.5"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
162
frontend/src/pages/Lead.vue
Normal file
162
frontend/src/pages/Lead.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<LayoutHeader v-if="lead.doc">
|
||||
<template #left-header>
|
||||
<FeatherIcon
|
||||
name="chevron-left"
|
||||
class="h-5 cursor-pointer"
|
||||
@click="$router.back()"
|
||||
/>
|
||||
<h1 class="font-semibold text-xl">{{ lead.doc.lead_name }}</h1>
|
||||
<div
|
||||
v-if="lead.doc.organization_name"
|
||||
class="flex items-center space-x-2 bg-gray-100 hover:bg-gray-200 p-1 pr-2 rounded ml-2 cursor-pointer"
|
||||
>
|
||||
<Avatar
|
||||
class="flex items-center"
|
||||
:image="lead.doc.organization_logo"
|
||||
:label="lead.doc.organization_name"
|
||||
size="sm"
|
||||
shape="square"
|
||||
/>
|
||||
<div class="text-base text-gray-700 truncate">
|
||||
{{ lead.doc.organization_name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #right-header>
|
||||
<div
|
||||
v-if="lead.doc.lead_owner"
|
||||
class="flex items-center space-x-2 bg-gray-100 hover:bg-gray-200 pl-1.5 py-1 pr-2 rounded ml-2 cursor-pointer"
|
||||
>
|
||||
<Avatar
|
||||
:image="getUser(lead.doc.lead_owner).user_image"
|
||||
:label="getUser(lead.doc.lead_owner).full_name"
|
||||
size="sm"
|
||||
/>
|
||||
<div class="text-base text-gray-700">
|
||||
{{ getUser(lead.doc.lead_owner).full_name }}
|
||||
</div>
|
||||
</div>
|
||||
<Dropdown :options="statusDropdownOptions">
|
||||
<template #default="{ open }">
|
||||
<Button :label="lead.doc.status">
|
||||
<template #prefix>
|
||||
<IndicatorIcon :class="indicatorColor[lead.doc.status]" />
|
||||
</template>
|
||||
<template #suffix
|
||||
><FeatherIcon
|
||||
:name="open ? 'chevron-up' : 'chevron-down'"
|
||||
class="h-4"
|
||||
/></template>
|
||||
</Button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
<Button icon="more-horizontal" />
|
||||
</template>
|
||||
</LayoutHeader>
|
||||
<TabView v-if="lead.doc" :tabs="tabs">
|
||||
<template #tab-content="{ tab }">
|
||||
<div>{{ tab.label }}</div>
|
||||
</template>
|
||||
</TabView>
|
||||
</template>
|
||||
<script setup>
|
||||
import TabView from '@/components/TabView.vue'
|
||||
import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
|
||||
import EmailIcon from '@/components/Icons/EmailIcon.vue'
|
||||
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
||||
import TaskIcon from '@/components/Icons/TaskIcon.vue'
|
||||
import NoteIcon from '@/components/Icons/NoteIcon.vue'
|
||||
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
||||
import LayoutHeader from '../components/LayoutHeader.vue'
|
||||
import {
|
||||
createDocumentResource,
|
||||
Avatar,
|
||||
FeatherIcon,
|
||||
Dropdown,
|
||||
} from 'frappe-ui'
|
||||
import { usersStore } from '../stores/users'
|
||||
|
||||
const { getUser } = usersStore()
|
||||
|
||||
const props = defineProps({
|
||||
leadId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const lead = createDocumentResource({
|
||||
doctype: 'CRM Lead',
|
||||
name: props.leadId,
|
||||
auto: true,
|
||||
})
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
label: 'Activity',
|
||||
icon: ActivityIcon,
|
||||
},
|
||||
{
|
||||
label: 'Emails',
|
||||
icon: EmailIcon,
|
||||
},
|
||||
{
|
||||
label: 'Calls',
|
||||
icon: PhoneIcon,
|
||||
},
|
||||
{
|
||||
label: 'Tasks',
|
||||
icon: TaskIcon,
|
||||
},
|
||||
{
|
||||
label: 'Notes',
|
||||
icon: NoteIcon,
|
||||
},
|
||||
]
|
||||
|
||||
const statusDropdownOptions = [
|
||||
{
|
||||
label: 'New',
|
||||
icon: IndicatorIcon,
|
||||
onClick: () => {
|
||||
lead.doc.status = 'New'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Contact made',
|
||||
icon: IndicatorIcon,
|
||||
onClick: () => {
|
||||
lead.doc.status = 'Contact made'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Proposal made',
|
||||
icon: IndicatorIcon,
|
||||
onClick: () => {
|
||||
lead.doc.status = 'Proposal made'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Negotiation',
|
||||
icon: IndicatorIcon,
|
||||
onClick: () => {
|
||||
lead.doc.status = 'Negotiation'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Converted',
|
||||
icon: IndicatorIcon,
|
||||
onClick: () => {
|
||||
lead.doc.status = 'Converted'
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const indicatorColor = {
|
||||
New: 'text-gray-600',
|
||||
'Contact made': 'text-orange-500',
|
||||
'Proposal made': 'text-blue-600',
|
||||
Negotiation: 'text-red-600',
|
||||
Converted: 'text-green-600',
|
||||
}
|
||||
</script>
|
||||
@ -12,6 +12,12 @@ const routes = [
|
||||
name: 'Leads',
|
||||
component: () => import('@/pages/Leads.vue'),
|
||||
},
|
||||
{
|
||||
path: '/leads/:leadId',
|
||||
name: 'Lead',
|
||||
component: () => import('@/pages/Lead.vue'),
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: '/deals',
|
||||
name: 'Deals',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user