diff --git a/src/components/CustomAppBar.tsx b/src/components/CustomAppBar.tsx index 8222100a..513f62e1 100644 --- a/src/components/CustomAppBar.tsx +++ b/src/components/CustomAppBar.tsx @@ -5,9 +5,10 @@ import { Link, Button } from '@mui/material' -import { FaArrowLeft, FaCheckCircle, FaEdit, FaPlusCircle } from 'react-icons/fa' +import { FaArrowLeft, FaCheckCircle, FaCross, FaEdit, FaPlusCircle, FaTimesCircle } from 'react-icons/fa' import { useLocation, useNavigate } from 'react-router-dom'; import { useMyContext } from '../context/Context'; +import { FiChevronLeft } from '@react-icons/all-files/fi/FiChevronLeft'; export function CustomAppBar(props: any) { const location = useLocation(); const sharedData = useMyContext(); @@ -17,9 +18,9 @@ export function CustomAppBar(props: any) { const Module = module.toLowerCase() return ( - + Dashboard navigate(`/app/${Module}`)} - style={{ cursor: 'pointer' }} + sx={{ cursor: 'pointer', fontWeight: 600 }} > {module} - {crntPage} + {crntPage} {location.state?.detail ?
- -
+
@@ -63,9 +64,10 @@ export function CustomAppBar(props: any) {
:
-
+
-
+
@@ -99,11 +103,11 @@ export function CustomAppBar(props: any) {
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 4dd1afe7..935a3a19 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -14,7 +14,7 @@ import Cases from '../pages/cases/Cases'; import logo from '../assets/images/auth/img_logo.png'; import { AddLeads } from '../pages/leads/AddLeads'; import Accounts from '../pages/accounts/Accounts'; -import { AddAccount } from '../pages/accounts/AddAccounts'; +import { AddAccount } from '../pages/accounts/AddAccount'; import { AccountDetails } from '../pages/accounts/AccountDetails'; import { AddUsers } from '../pages/users/AddUsers'; import { AddOpportunity } from '../pages/opportunities/AddOpportunity'; @@ -36,6 +36,8 @@ import CompanyDetails from '../pages/company/CompanyDetails'; import EditCompany from '../pages/company/EditCompany'; import { EditLead } from '../pages/leads/EditLead'; import UserDetails from '../pages/users/UserDetails'; +import { EditAccount } from '../pages/accounts/EditAccount'; +import { EditOpportunity } from '../pages/opportunities/EditOpportunity'; // declare global { @@ -172,7 +174,7 @@ export default function Sidebar(props: any) { setDrawerWidth(drawerWidth === 60 ? 200 : 60)}> - + {screen} {/* Bottle-CRM */} @@ -297,13 +299,15 @@ export default function Sidebar(props: any) { } /> } /> } /> + } /> } /> } /> } /> } /> } /> - } /> + } /> } /> + } /> } /> } /> diff --git a/src/components/Tags.tsx b/src/components/Tags.tsx index f8ce5a00..213b210d 100644 --- a/src/components/Tags.tsx +++ b/src/components/Tags.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react' import { Chip } from '@mui/material' export const Tags = (props:any) => { - // const [tags, seTags] = useState([props.tags.name]) + // const [tags, seTags] = useState([props.tags]) const [tagsColor, setTagsColor] = useState('#665d1e') useEffect(() => { @@ -10,53 +10,53 @@ export const Tags = (props:any) => { }, []) const colorTag = () => { - if (props.tags.name === 'account') { + if (props.tags === 'account') { setTagsColor('red') - } else if (props.tags.name === 'testing') { + } else if (props.tags === 'testing') { setTagsColor('#D22B2B') - } else if (props.tags.name === 'assigned') { + } else if (props.tags === 'assigned') { setTagsColor('#0087bd') - } else if (props.tags.name === 'bug') { + } else if (props.tags === 'bug') { setTagsColor('#008000') - } else if (props.tags.name === 'closed') { + } else if (props.tags === 'closed') { setTagsColor('#008080') - } else if (props.tags.name === 'asdfg') { + } else if (props.tags === 'asdfg') { setTagsColor('Crimson') - } else if (props.tags.name === 'test') { + } else if (props.tags === 'test') { setTagsColor('#b06500') - } else if (props.tags.name === 'new') { + } else if (props.tags === 'new') { setTagsColor('#FF2400') - } else if (props.tags.name === 'tagtest') { + } else if (props.tags === 'tagtest') { setTagsColor('#ffff00') - } else if (props.tags.name === 'assigning') { + } else if (props.tags === 'assigning') { setTagsColor('#E0115F') - } else if (props.tags.name === 'leading') { + } else if (props.tags === 'leading') { setTagsColor('#4e1609') - } else if (props.tags.name === 'processing') { + } else if (props.tags === 'processing') { setTagsColor('#ffa500') - } else if (props.tags.name === 'vddafv') { + } else if (props.tags === 'vddafv') { setTagsColor('#ff004f') - } else if (props.tags.name === 'vfvfavtq') { + } else if (props.tags === 'vfvfavtq') { setTagsColor('#ff5a36') - } else if (props.tags.name === 'active') { + } else if (props.tags === 'active') { setTagsColor('#7f1734') - } else if (props.tags.name === 'details') { + } else if (props.tags === 'details') { setTagsColor('#FF2400') - } else if (props.tags.name === 'testing') { + } else if (props.tags === 'testing') { setTagsColor('#D22B2B') - } else if (props.tags.name === 'created') { + } else if (props.tags === 'created') { setTagsColor('#880808') - } else if (props.tags.name === 'details') { + } else if (props.tags === 'details') { setTagsColor('#66ff00') - } else if (props.tags.name === 'new') { + } else if (props.tags === 'new') { setTagsColor('#191970') - } else if (props.tags.name === 'staging') { + } else if (props.tags === 'staging') { setTagsColor('#191970') - } else if (props.tags.name === 'exist') { + } else if (props.tags === 'exist') { setTagsColor('#191970') - } else if (props.tags.name === 'tagest') { + } else if (props.tags === 'tagest') { setTagsColor('#954535') - } else if (props.tags.name === 'asdfg') { + } else if (props.tags === 'asdfg') { setTagsColor('#E97451') } } @@ -64,9 +64,9 @@ export const Tags = (props:any) => { return (
{ - props.tags && props.tags.name + props.tags && props.tags ? { const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' } return new Date(dateString).toLocaleDateString(undefined, options) } +type response = { + created_by: { + email: string; + id: string; + profile_pic: string; + }; + user_details: { + email: string; + id: string; + profile_pic: string; + }; + org: { name: string }; + lead: { account_name: string }; + account_attachment: []; + assigned_to: []; + billing_address_line: string; + billing_city: string; + billing_country: string; + billing_state: string; + billing_postcode: string; + billing_street: string; + contact_name: string; + name: string; + + created_at: string; + created_on: string; + created_on_arrow: string; + date_of_birth: string; + title: string; + first_name: string; + last_name: string; + account_name: string; + phone: string; + email: string; + lead_attachment: string; + opportunity_amount: string; + website: string; + description: string; + contacts: string; + status: string; + source: string; + address_line: string; + street: string; + city: string; + state: string; + postcode: string; + country: string; + tags: []; + company: string; + probability: string; + industry: string; + skype_ID: string; + file: string; + + close_date: string; + organization: string; + created_from_site: boolean; + id: string; + teams: []; + leads: string; + +}; export const AccountDetails = (props: any) => { const { state } = useLocation() const navigate = useNavigate() - const [accountData, setAccountData] = useState([]) - const headers = { - Accept: 'application/json', - 'Content-Type': 'application/json', - Authorization: `jwt ${localStorage.getItem('Token')}`, - org: localStorage.getItem('org') - } + const [accountDetails, setAccountDetails] = useState(null) + const [usersDetails, setUsersDetails] = useState>([]); + const [selectedCountry, setSelectedCountry] = useState([]) + const [attachments, setAttachments] = useState([]) + const [tags, setTags] = useState([]) + const [countries, setCountries] = useState([]) + const [source, setSource] = useState([]) + const [status, setStatus] = useState([]) + const [industries, setIndustries] = useState([]) + const [contacts, setContacts] = useState([]) + const [users, setUsers] = useState([]) + const [teams, setTeams] = useState([]) + const [leads, setLeads] = useState([]) + const [comments, setComments] = useState([]) + const [commentList, setCommentList] = useState('Recent Last') + const [note, setNote] = useState('') useEffect(() => { - // fetchData(`${AccountsUrl}/${state.accounts}/`, 'GET', null as any, headers) - // .then((data) => { - // if (!data.error) { - // // Object.assign({}, data, { cases: data.cases }) - // setAccountData(Object.assign({}, accountData, { - // account_obj: data.account_obj, - // user_details: data.account_obj.created_by.user_details, - // tags: data.account_obj.tags, - // account_id: data.account_obj.id, - // lead: data.account_obj.lead, - // teams: data.account_obj.teams - // })) - // } - // // if (data.error) { - // // } - // }) - // .catch(() => { - // }) - }, []) + getAccountDetails(state.accountId) + }, [state.accountId]) + const getAccountDetails = (id: any) => { + fetchData(`${AccountsUrl}/${id}/`, 'GET', null as any, Header) + .then((res) => { + console.log(res, 'edd'); + if (!res.error) { + setAccountDetails(res?.account_obj) + setContacts(res?.contacts) + setIndustries(res?.industries) + setUsers(res?.users) + setStatus(res?.status) + setCountries(res?.countries) + setLeads(res?.leads) + setTags(res?.tags) + setTeams(res?.teams) + // setAttachments(res?.attachments) + // setTags(res?.tags) + // setCountries(res?.countries) + // setIndustries(res?.industries) + // setStatus(res?.status) + // setSource(res?.source) + // setUsers(res?.users) + // setContacts(res?.contacts) + // setTeams(res?.teams) + // setComments(res?.comments) + } + }) + .catch((err) => { + // console.error('Error:', err) + < Snackbar open={err} autoHideDuration={4000} onClose={() => navigate('/app/accounts')} > + navigate('/app/accounts')} severity="error" sx={{ width: '100%' }}> + Failed to load! + + + }) + } + const accountCountry = (country: string) => { + let countryName: string[] | undefined; + for (countryName of countries) { + if (Array.isArray(countryName) && countryName.includes(country)) { + const ele = countryName; + break; + } + } + return countryName?.[1] + } const editHandle = () => { - navigate('/accounts/account-edit', - // { - // state: { - // account_id: accountData.account_id, - // accounts: accountData.account_obj - // } - // } + // navigate('/contacts/edit-contacts', { state: { value: contactDetails, address: newAddress } }) + let country: string[] | undefined; + for (country of countries) { + if (Array.isArray(country) && country.includes(accountDetails?.country || '')) { + const firstElement = country[0]; + break; + } + } + navigate('/app/accounts/edit-account', { + state: { + value: { + name: accountDetails?.name, + phone: accountDetails?.phone, + email: accountDetails?.email, + billing_address_line: accountDetails?.billing_address_line, + billing_street: accountDetails?.billing_street, + billing_city: accountDetails?.billing_city, + billing_state: accountDetails?.billing_state, + billing_postcode: accountDetails?.billing_postcode, + billing_country: accountDetails?.billing_country, + contact_name: accountDetails?.contact_name, + teams: accountDetails?.teams || [], + assigned_to: accountDetails?.assigned_to || [], + tags: accountDetails?.tags || [], + account_attachment: accountDetails?.account_attachment || null, + website: accountDetails?.website, + status: accountDetails?.status, + lead: accountDetails?.lead?.account_name, + // contacts: accountDetails?.contacts + }, id: state?.accountId, + contacts: state?.contacts || [], status: state?.status || [], tags: state?.tags || [], users: state?.users || [], countries: state?.countries || [], teams: state?.teams || [], leads: state?.leads || [] + } + } ) } const backbtnHandle = () => { - navigate('/accounts') + navigate('/app/accounts') } - const module = 'Account' - const crntPage = 'Account Title' - const backBtn = 'Back To Account' + const module = 'Accounts' + const crntPage = 'Account Details' + const backBtn = 'Back To Accounts' return ( -
-
- -
-
-
- - {/* account Information */} -
-
-
- Account Information -
-
-
-
- created on   - {/* {formatDate(accountData.account_obj && accountData.account_obj.created_on ? accountData.account_obj.created_on : '---')} -   by   - { - accountData.user_details && accountData.user_details.profile_pic - ? accountData.user_details.profile_pic - : -   -   - { - accountData.user_details && - accountData.user_details.first_name - ? accountData.user_details.first_name - : 'Ashwin Kumar' - } -     - - } */} -
-
- Last Updated:--- - {/* {formatDate(accountData.account_obj && accountData.account_obj.created_on ? accountData.account_obj.created_on : "---")} */} - days ago -
-
-
+
+ + + + +
+
+ Account Information
-
-
- Account Title +
+
+ created   + {FormateTime(accountDetails?.created_at)}   by   + +   +   + {/* {accountDetails?.first_name}  + {accountDetails?.last_name} */}
-
+ +
+
+
+
+ {accountDetails?.name} + {/* { - accountData.tags && accountData.tags - ? accountData.tags.map((tagData, index) => ( - - )) - : ' ' - } */} -
+ lead.assigned_to && lead.assigned_to.map((assignItem) => ( + assignItem.user_details.profile_pic + ? */} + {usersDetails?.length ? usersDetails.map((val: any, i: any) => + + ) : '' + } +
-
-
-
- Website -
-
- {/* { - accountData.account_obj && - accountData.account_obj.website - ? accountData.account_obj.website - : '---' - } */} -
+ + {accountDetails?.tags?.length ? accountDetails?.tags.map((tagData: any) => ( + +
+
+
+
Website
+
+ {accountDetails?.website || '---'}
-
-
- Contact Name -
-
- {/* { - accountData.account_obj && - accountData.account_obj.contact_name - ? accountData.account_obj.contact_name - : '---' - } */} -
+
+
+
Contact Name
+
+ {accountDetails?.contact_name}
-
-
- Organization Name -
-
- {/* { - accountData.account_obj && accountData.account_obj.organization_name - ? accountData.account_obj.organization_name - : '---' - } */} -
+
+
+
Organization Name
+
+ {accountDetails?.org?.name || '---'}
-
-
-
- Industry -
-
- {/* { - accountData.account_obj && accountData.account_obj.industry - ? accountData.account_obj.industry - : '---' - } */} -
+
+
+
+
Industry
+
+ {/* {lead.pipeline ? lead.pipeline : '------'} */} + {accountDetails?.industry || '---'}
-
-
- Leads -
-
- {/* { - accountData.account_obj && accountData.account_obj.lead - ? accountData.account_obj.lead.title - : '---' - } */} -
+
+
+
Leads
+
+ {accountDetails?.lead?.account_name || '---'}
-
-
- Teams -
-
- {/* { - accountData.teams && - accountData.teams - ? accountData.teams.map((v) => -
- {v.name} -
- ) - : '---' - } */} -
+
+
+
Teams
+
+ {accountDetails?.teams?.length ? accountDetails?.teams.map((team: any) => + + ) : '----'} +
-
-
-
- Email Address -
-
- - {/* {accountData.account_obj && accountData.account_obj.email ? accountData.account_obj.email : '---'} */} - - -
+
+
+
+
Email Address
+
+ {accountDetails?.email || '----'}
-
-
- Mobile Number -
-
- {/* {accountData.account_obj && accountData.account_obj.phone ? accountData.account_obj.phone : '---'} */} - -
+
+
+
Mobile Number
+
+ {accountDetails?.phone || '----'}
-
-
- Skype ID -
-
- - {/* {accountData.account_obj && accountData.account_obj.skype_ID ? accountData.account_obj.skype_ID : '---'} */} - -
+
+
+
Skype Id
+
+ {accountDetails?.skype_ID ? + {accountDetails?.skype_ID} + : '---'}
- {/* Address Details */} -
-
-
+ {/*
*/} + {/* Address details */} +
+
+
Address Details
-
+
-
- Address Lane -
-
- {/* {accountData.account_obj && accountData.account_obj.billing_address_line ? accountData.account_obj.billing_address_line : '---'} */} +
Address Lane
+
+ {accountDetails?.billing_address_line || '---'}
-
- Street -
-
- {/* { - accountData.account_obj && accountData.account_obj.billing_street ? accountData.account_obj.billing_street : '---' - } */} +
Street
+
+ {accountDetails?.billing_street || '---'}
-
- City -
-
- {/* { - accountData.account_obj && accountData.account_obj.billing_city ? accountData.account_obj.billing_city : '---' - } */} +
City
+
+ {accountDetails?.billing_city || '---'}
-
+
-
- Pincode -
-
- {/* { - accountData.account_obj && accountData.account_obj.billing_postcode ? accountData.account_obj.billing_postcode : '---' - } */} +
Pincode
+
+ {accountDetails?.billing_postcode || '---'}
-
- State -
-
- {/* { - accountData.account_obj && accountData.account_obj.billing_state ? accountData.account_obj.billing_state : '---' - } */} +
State
+
+ {accountDetails?.billing_state || '---'}
-
- Country -
-
- {/* {accountData.account_obj && accountData.account_obj.billing_country ? accountData.account_obj.billing_country : '---'} */} +
Country
+
+ {/* {accountDetails?.billing_country || '---'} */} + {accountCountry(accountDetails?.billing_country || '----')}
{/* Description */} -
-
-
+
+
+
Description
-
-

- {/* { - accountData.account_obj && accountData.account_obj.description ? accountData.account_obj.description : '---' - } */} -

+

+ {accountDetails?.description || '---'} +

+
+ + + + + +
+
+ Attachments
+ {/*
*/} + {/* Add Social #1E90FF */} + + {/*
*/} +
+ +
+ {/* {lead && lead.lead_attachment} */} + {accountDetails?.account_attachment?.length ? accountDetails?.account_attachment.map((pic: any, i: any) => + + {pic} + + ) : ''}
- -
-
+ + +
) diff --git a/src/pages/accounts/Accounts.tsx b/src/pages/accounts/Accounts.tsx index 86e8383d..2f27f600 100644 --- a/src/pages/accounts/Accounts.tsx +++ b/src/pages/accounts/Accounts.tsx @@ -1,5 +1,5 @@ import React, { SyntheticEvent, useEffect, useState } from 'react' -import { Box, Button, Card, Stack, Tab, Table, TableBody, TableContainer, TableHead, TablePagination, TableRow, Tabs, Toolbar, Typography, Paper, TableCell, IconButton, Checkbox, Tooltip, TableSortLabel, alpha, MenuItem, Select, Avatar, Fab, Container } from '@mui/material' +import { Box, Button, Card, Stack, Tab, Table, TableBody, TableContainer, TableHead, TablePagination, TableRow, Tabs, Toolbar, Typography, Paper, TableCell, IconButton, Checkbox, Tooltip, TableSortLabel, alpha, MenuItem, Select, Avatar, Fab, Container, TextField } from '@mui/material' import { FiPlus } from "@react-icons/all-files/fi/FiPlus"; import { FiChevronLeft } from "@react-icons/all-files/fi/FiChevronLeft"; import { FiChevronRight } from "@react-icons/all-files/fi/FiChevronRight"; @@ -9,7 +9,7 @@ import { CustomTab, CustomToolbar, FabLeft, FabRight } from '../../styles/CssSty import { getComparator, stableSort } from '../../components/Sorting'; import { FaAd, FaEdit, FaTrashAlt } from 'react-icons/fa'; import { fetchData } from '../../components/FetchData'; -import { AccountsUrl } from '../../services/ApiUrls'; +import { AccountsUrl, Header } from '../../services/ApiUrls'; import { useNavigate } from 'react-router-dom'; import { DeleteModal } from '../../components/DeleteModal'; import { Tags } from '../../components/Tags'; @@ -78,13 +78,13 @@ function EnhancedTableHead(props: any) { return ( - + {/* - + */} { headCells.map((headCell) => ( headCell.label === 'Actions' || headCell.label === 'Tags' ? @@ -126,7 +126,6 @@ function EnhancedTableHead(props: any) { type Item = { id: string; - // Other properties }; export default function Accounts() { const navigate = useNavigate() @@ -150,6 +149,17 @@ export default function Accounts() { const [isDelete, setIsDelete] = useState(false) const [selectOpen, setSelectOpen] = useState(false); + const [contacts, setContacts] = useState([]) + const [status, setStatus] = useState([]) + const [source, setSource] = useState([]) + const [companies, setCompanies] = useState([]) + const [tags, setTags] = useState([]) + const [users, setUsers] = useState([]) + const [countries, setCountries] = useState([]) + const [industries, setIndustries] = useState([]) + const [leads, setLeads] = useState([]) + const [teams, setTeams] = useState([]) + const [openAccounts, setOpenAccounts] = useState([]) const [openAccountsCount, setOpenAccountsCount] = useState(0) const [openAccountsOffset, setOpenAccountsOffset] = useState(0) @@ -166,6 +176,7 @@ export default function Accounts() { const [recordsPerPage, setRecordsPerPage] = useState(10); const [totalPages, setTotalPages] = useState(0); + useEffect(() => { getAccounts() }, []) @@ -174,14 +185,8 @@ export default function Accounts() { setTab(val) } - const headers = { - Accept: 'application/json', - 'Content-Type': 'application/json', - Authorization: localStorage.getItem('Token'), - org: localStorage.getItem('org') - } const getAccounts = () => { - fetchData(`${AccountsUrl}/?offset=${tab === "open" ? openOffset : closeOffset}`, 'GET', null as any, headers) + fetchData(`${AccountsUrl}/?offset=${tab === "open" ? openOffset : closeOffset}`, 'GET', null as any, Header) .then((res: any) => { if (!res.error) { console.log(res, 'accounts') @@ -192,22 +197,22 @@ export default function Accounts() { setClosedAccounts(res?.closed_accounts?.close_accounts) // setClosedAccountsCount(res?.closed_accounts?.close_accounts_count) setClosedAccountsOffset(res?.closed_accounts?.offset) + setContacts(res?.contacts) + setIndustries(res?.industries) + setUsers(res?.users) + setStatus(res?.status) + setCountries(res?.countries) + setLeads(res?.leads) + setTags(res?.tags) + setTeams(res?.teams) } - // else { - // if (tab === 'open') { - - // } - // if (tab === 'closed' || initial) { - - // } - // } } }) .catch((error: any) => console.error('error', error)) } const accountDetail = (accountId: any) => { - navigate(`/app/accounts/account-details`, { state: { accountId, detail: true } }) + navigate(`/app/accounts/account-details`, { state: { accountId, detail: true ,contacts: contacts || [], status: status || [], tags: tags || [], users: users || [], countries: countries || [], teams: teams || [], leads: leads || []} }) } const next = () => { @@ -254,7 +259,7 @@ export default function Accounts() { } const onDelete = (id: any) => { - fetchData(`${AccountsUrl}/${id}/`, 'delete', null as any, headers) + fetchData(`${AccountsUrl}/${id}/`, 'delete', null as any, Header) .then((data) => { if (!data.error) { getAccounts() @@ -268,48 +273,19 @@ export default function Accounts() { const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - 7) : 0 const onAddAccount = () => { - navigate('/app/accounts/add-account') - // navigate('/users/add-users', { - // state: { - // roles: usersData.roles, - // status: usersData.status - // } - // }) + navigate('/app/accounts/add-account', { + state: { + detail: false, + contacts: contacts || [], status: status || [], tags: tags || [], users: users || [], countries: countries || [], teams: teams || [], leads: leads || [] + } + }) } const deleteRow = (id: any) => { setSelectedId(id) setDeleteRowModal(!deleteRowModal) } - const getAccountDetail = (id: any) => { - fetchData(`${AccountsUrl}/${id}/`, 'GET', null as any, headers) - .then((res) => { - console.log(res, 'res'); - if (!res.error) { - // const data = res?.data?.profile_obj - navigate('/app/accounts/edit-account', { - state: { - value: { - // email: data?.user_details?.email, - // role: data?.role, - // phone: data?.phone, - // alternate_phone: data?.alternate_phone, - // address_line: data?.address?.address_line, - // street: data?.address?.street, - // city: data?.address?.city, - // state: data?.address?.state, - // pincode: data?.address?.postcode, - // country: data?.address?.country, - // profile_pic: data?.user_details?.profile_pic, - // has_sales_access: data?.has_sales_access, - // has_marketing_access: data?.has_marketing_access, - // is_organization_admin: data?.is_organization_admin, - }, id: id, edit: true - } - }) - } - }) - } + const EditItem = (accountId: any) => { getAccountDetail(accountId) @@ -319,8 +295,8 @@ export default function Accounts() { setDeleteRowModal(false) setSelectedId([]) } - const DeleteItem = () => { - fetchData(`${AccountsUrl}/${selectedId}/`, 'DELETE', null as any, headers) + const deleteItem = () => { + fetchData(`${AccountsUrl}/${selectedId}/`, 'DELETE', null as any, Header) .then((res: any) => { console.log('delete:', res); if (!res.error) { @@ -379,13 +355,44 @@ export default function Accounts() { setSelectedId(newSelectedIds); setIsSelectedId(newIsSelectedId); }; + + const getAccountDetail = (id: any) => { + fetchData(`${AccountsUrl}/${id}/`, 'GET', null as any, Header) + .then((res) => { + console.log(res, 'resDetail'); + if (!res.error) { + const data = res?.account_obj + navigate('/app/accounts/edit-account', { + state: { + value: { + // email: data?.email, + // name: data?.name, + // role: data?.role, + // phone: data?.phone, + // alternate_phone: data?.alternate_phone, + // address_line: data?.address?.address_line, + // street: data?.address?.street, + // city: data?.address?.city, + // state: data?.address?.state, + // pincode: data?.address?.postcode, + // country: data?.address?.country, + // profile_pic: data?.user_details?.profile_pic, + // has_sales_access: data?.has_sales_access, + // has_marketing_access: data?.has_marketing_access, + // is_organization_admin: data?.is_organization_admin, + }, accountId: id, edit: true + } + }) + } + }) + } const handleDelete = (id: any) => { console.log(id, 's;ected') } const modalDialog = 'Are You Sure You want to delete this Account?' const modalTitle = 'Delete Account' - const recordsList = [10, 20, 30, 40, 50] + const recordsList = [[10, '10 Records per page'], [20, '20 Records per page'], [30, '30 Records per page'], [40, '40 Records per page'], [50, '50 Records per page']] // const selectClasses = selectOpen ? 'select-opened' : ''; // console.log(!!(selectedId?.length === 0), 'asd'); @@ -409,45 +416,29 @@ export default function Accounts() { - - Records Per Page - - + - - - + + + {/* + + {selected.length > 0 ? ( + + {selected.length} selected + + ) : ( + '' + )} + */} + + + + + { + opportunities?.length > 0 + ? stableSort(opportunities, getComparator(order, orderBy)) + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((item: any, index: any) => { + const labelId = `enhanced-table-checkbox-${index}` + const rowIndex = selectedId.indexOf(item.id); + return ( + + {/* + handleRowSelect(item.id)} + inputProps={{ + 'aria-labelledby': labelId, + }} + sx={{ border: 0, color: 'inherit' }} + /> + */} + opportunityDetail(item.id)} + > + {item?.name ? item?.name : '---'} + + + {item?.account ? item?.account?.name : '---'} + + + {item?.assigned_to ? : '----'} + {/* + {item?.lead?.account_name ? item?.lead?.account_name : '---'} + */} + + + {item?.stage ? item?.stage : '---'} + + + {item?.created_on_arrow ? item?.created_on_arrow : '---'} + + + {item?.tags?.length ? item?.tags.map((tag: any, i: any) => ) : '---'} + + + {item?.lead_source ? item?.lead_source : '---'} + + + + {/* + EditItem(item?.id)} + style={{ fill: '#1A3353', cursor: 'pointer', width: '18px' }} + /> + */} + + deleteRow(item?.id)} + style={{ fill: '#1A3353', cursor: 'pointer', width: '15px' }} /> + + + + ) + }) + : + } + {/* { + emptyRows > 0 && ( + + + + ) + } + */} + +
+ + + + { const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' } return new Date(dateString).toLocaleDateString(undefined, options) } +type response = { + created_by: { + email: string; + id: string; + profile_pic: string; + }; + user_details: { + email: string; + id: string; + profile_pic: string; + }; + org: { name: string }; + lead: { account_name: string }; + account_attachment: []; + assigned_to: []; + billing_address_line: string; + billing_city: string; + billing_country: string; + billing_state: string; + billing_postcode: string; + billing_street: string; + contact_name: string; + name: string; + + created_at: string; + created_on: string; + created_on_arrow: string; + date_of_birth: string; + title: string; + first_name: string; + last_name: string; + account_name: string; + phone: string; + email: string; + lead_attachment: string; + opportunity_amount: string; + website: string; + description: string; + contacts: string; + status: string; + source: string; + address_line: string; + street: string; + city: string; + state: string; + postcode: string; + country: string; + tags: []; + company: string; + probability: string; + industry: string; + skype_ID: string; + file: string; + + close_date: string; + organization: string; + created_from_site: boolean; + id: string; + teams: []; + leads: string; + + lead_source: string; + amount: string; + currency: string; + users: string; + stage: string; + closed_on: string; + opportunity_attachment: []; + account: { id: string; name: string }; + +}; export const OpportunityDetails = (props: any) => { const { state } = useLocation() const navigate = useNavigate() - const [opportunities, setOpportunities] = useState([]) - // const theme = useTheme() - const headers = { - Accept: 'application/json', - 'Content-Type': 'application/json', - Authorization: `jwt ${localStorage.getItem('Token')}`, - org: localStorage.getItem('org') - } + const [opportunityDetails, setOpportunityDetails] = useState(null) + const [usersDetails, setUsersDetails] = useState>([]); + const [selectedCountry, setSelectedCountry] = useState([]) + const [attachments, setAttachments] = useState([]) + const [tags, setTags] = useState([]) + const [countries, setCountries] = useState([]) + const [source, setSource] = useState([]) + const [status, setStatus] = useState([]) + const [industries, setIndustries] = useState([]) + const [contacts, setContacts] = useState([]) + const [users, setUsers] = useState([]) + const [teams, setTeams] = useState([]) + const [leads, setLeads] = useState([]) + const [comments, setComments] = useState([]) + const [commentList, setCommentList] = useState('Recent Last') + const [note, setNote] = useState('') useEffect(() => { - // fetchData(`${OpportunityUrl}/${state.opportunitiesDetails}/`, 'GET', null as any, headers) - // .then((data) => { - // if (!data.error) { - // setOpportunities(Object.assign({}, opportunities, { - // // setOpportunities(...opportunities, { - // opportunity_obj: data.opportunity_obj, - // tagLabel: data.opportunity_obj.tags, - // account: data.opportunity_obj.account, - // // teams: data.opportunity_obj.teams.name, - // // users: data.opportunity_obj.users.name, - // // contacts: data.opportunity_obj. contacts.name, - // // assigned_to:data.opportunity_obj.assigned_to.first_name, - // user_details: data.opportunity_obj.created_by.user_details - // })) - // } - // }) - }, []) + getOpportunityDetails(state.opportunityId) + }, [state.opportunityId]) + const getOpportunityDetails = (id: any) => { + fetchData(`${OpportunityUrl}/${id}/`, 'GET', null as any, Header) + .then((res) => { + console.log(res, 'edd'); + if (!res.error) { + setOpportunityDetails(res?.opportunity_obj) + setUsers(res?.users) + // setContacts(res?.contacts) + // setIndustries(res?.industries) + // setUsers(res?.users) + // setStatus(res?.status) + // setCountries(res?.countries) + // setLeads(res?.leads) + // setTags(res?.tags) + // setTeams(res?.teams) + // setAttachments(res?.attachments) + // setTags(res?.tags) + // setCountries(res?.countries) + // setIndustries(res?.industries) + // setStatus(res?.status) + // setSource(res?.source) + // setUsers(res?.users) + // setContacts(res?.contacts) + // setTeams(res?.teams) + // setComments(res?.comments) + } + }) + .catch((err) => { + // console.error('Error:', err) + < Snackbar open={err} autoHideDuration={4000} onClose={() => navigate('/app/opportunities')} > + navigate('/app/opportunities')} severity="error" sx={{ width: '100%' }}> + Failed to load! + + + }) + } + const accountCountry = (country: string) => { + let countryName: string[] | undefined; + for (countryName of countries) { + if (Array.isArray(countryName) && countryName.includes(country)) { + const ele = countryName; + break; + } + } + return countryName?.[1] + } const editHandle = () => { - navigate('/opportunities/edit-opportunities', - // { - // state: { - // opportunities, - // opportunitiesId: opportunities.id, - // stage: state.stage, - // lead_source: state.lead_source, - // currency: state.currency, - // contacts_list: state.contacts_list, - // tags: state.tags, - // accounts_list: state.accounts_list - // } - // } + // navigate('/contacts/edit-contacts', { state: { value: contactDetails, address: newAddress } }) + let country: string[] | undefined; + for (country of countries) { + if (Array.isArray(country) && country.includes(opportunityDetails?.country || '')) { + const firstElement = country[0]; + break; + } + } + navigate('/app/opportunities/edit-opportunity', { + state: { + value: { + name: opportunityDetails?.name, + account: opportunityDetails?.account?.id, + amount: opportunityDetails?.amount, + currency: opportunityDetails?.currency, + stage: opportunityDetails?.stage, + teams: opportunityDetails?.teams, + lead_source: opportunityDetails?.lead_source, + probability: opportunityDetails?.probability, + description: opportunityDetails?.description, + assigned_to: opportunityDetails?.assigned_to, + contact_name: opportunityDetails?.contact_name, + due_date: opportunityDetails?.closed_on, + tags: opportunityDetails?.tags, + opportunity_attachment: opportunityDetails?.opportunity_attachment, + }, id: state?.opportunityId, + contacts: state?.contacts || [], leadSource: state?.leadSource || [], currency: state?.currency || [], tags: state?.tags || [], account: state?.account || [], stage: state?.stage || [], users: state?.users || [], teams: state?.teams || [], countries: state?.countries || [] + } + } ) } const backbtnHandle = () => { - navigate('/opportunities') + navigate('/app/opportunities') } + const module = 'Opportunities' - const crntPage = 'Opportunities Title' + const crntPage = 'Opportunity Details' const backBtn = 'Back To Opportunities' + console.log(state, 'oppdetail'); return (
-
- -
-
-
- - {/* opportunity Information */} -
-
-
- Opportunity Information -
-
-
-
- created on   - {/* {formatDate(opportunities.opportunity_obj && opportunities.opportunity_obj.created_on ? opportunities.opportunity_obj.created_on : '')} by   */} - - {/* { - opportunities.user_details && opportunities.user_details ? opportunities.user_details.map((userName) => ( - userName.profile_pic ? - - : - {userName.first_name.charAt(0)} - - )) - :"" - } */} - -   - -   - {/* {opportunities.opportunity_obj && opportunities.opportunity_obj.created_by ? opportunities.opportunity_obj.created_by.user_details.first_name : ''} - {opportunities.opportunity_obj && opportunities.opportunity_obj.created_by ? opportunities.opportunity_obj.created_by.user_details.last_name : ''} */} -   -   -
-
- Last Updated: - {/* {opportunities.opportunity_obj && opportunities.opportunity_obj.created_on_arrow ? opportunities.opportunity_obj.created_on_arrow : ''} */} -
-
-
+ + + + +
+
+ Opportunity Information
-
-
- Opportunity Title +
+
+ created   + {FormateTime(opportunityDetails?.created_at)}   by   + +   +   + {opportunityDetails?.created_by?.email} + {/* {opportunityDetails?.first_name}  + {opportunityDetails?.last_name} */}
-
+ +
+
+
+
+ {opportunityDetails?.name} + {/* { - opportunities && opportunities.tagLabel - ? opportunities.tagLabel.map((tagData:any) => ( - - )) - : ' ' - } */} -
+ lead.assigned_to && lead.assigned_to.map((assignItem) => ( + assignItem.user_details.profile_pic + ? */} + {users?.length ? users.map((val: any, i: any) => + + ) : '' + } +
-
-
-
- Name -
-
- {/* {opportunities.opportunity_obj && opportunities.opportunity_obj.name ? opportunities.opportunity_obj.name : '--'} */} -
+ + {opportunityDetails?.tags?.length ? opportunityDetails?.tags.map((tagData: any) => ( + +
+
+
+
Name
+
+ {opportunityDetails?.name || '----'}
-
-
- Lead Source -
-
- {/* {opportunities.opportunity_obj && opportunities.opportunity_obj.lead_source ? opportunities.opportunity_obj.lead_source : '--'} */} -
+
+
+
Lead Source
+
+ {opportunityDetails?.lead_source || '----'}
-
-
- Account -
-
- {/* {opportunities && opportunities.account ? opportunities.account.name : '--'} */} -
+
+
+
Account
+
+ {opportunityDetails?.account?.name || '----'}
-
-
-
- Probability -
-
- {/* {opportunities.opportunity_obj ? opportunities.opportunity_obj.probability : '--'} */} -
+
+
+
+
Probability
+
+ {/* {lead.pipeline ? lead.pipeline : '------'} */} + {opportunityDetails?.probability || '----'}
-
-
- Ammount -
-
- {/* $ {opportunities.opportunity_obj && opportunities.opportunity_obj.amount ? opportunities.opportunity_obj.amount : '--'} */} -
+
+
+
Amount
+
+ {opportunityDetails?.amount || '----'}
-
-
- Team -
-
- - {/* {opportunities && opportunities.teams ? opportunities.teams:"--"} */} - -
+
+
+
Team
+
+ {opportunityDetails?.teams?.length ? opportunityDetails?.teams.map((team: any) => + + ) : '----'} +
-
-
-
- Currency -
-
- {/* {opportunities.opportunity_obj && opportunities.opportunity_obj.currency ? opportunities.opportunity_obj.currency : '--'} */} -
+
+
+
+
Currency
+
+ {opportunityDetails?.currency || '----'}
-
-
- Users -
-
- - {/* {opportunities && opportunities.users ? opportunities.users :"--"} */} - -
+
+
+
Users
+
+ {opportunityDetails?.users || '----'}
-
-
- Contacts -
-
- {/* {opportunities && opportunities.contacts ? opportunities.contacts.name:"--" } */} -
+
+
+
Contacts
+
+ {opportunityDetails?.contact_name || '----'}
-
-
-
- Stage -
-
- {/* {opportunities.opportunity_obj && opportunities.opportunity_obj.stage ? opportunities.opportunity_obj.stage : '--'} */} -
+
+
+
+
Stage
+
+ {opportunityDetails?.stage || '----'}
-
-
- Assigned Users -
-
- - {/* {opportunities.assigned_to && opportunities.assigned_to ? opportunities.assigned_to : "--"} */} - -
+
+
+
Assigned Users
+
+ {opportunityDetails?.assigned_to || '----'}
-
-
- Close Date -
-
- - {/* {opportunities.opportunity_obj && opportunities.opportunity_obj.closed_on ? opportunities.opportunity_obj.closed_on : '--'} */} - -
+
+
+
Closed Date
+
+ {opportunityDetails?.closed_on || '----'}
+ {/*
*/} {/* Description */} -
-
-
+
+
+
Description
-
-

- {/* {opportunities.opportunity_obj && opportunities.opportunity_obj.description ? opportunities.opportunity_obj.description : '--'} */} -

+

+ {opportunityDetails?.description || '----'} +

+
+ + + + + +
+
+ Attachments
+ +
+ +
+ {opportunityDetails?.opportunity_attachment?.length ? opportunityDetails?.opportunity_attachment.map((pic: any, i: any) => + + {pic} + + ) : ''}
- -
-
+ + +
) diff --git a/src/pages/users/AddUsers.tsx b/src/pages/users/AddUsers.tsx index 2a337eb5..f970ff01 100644 --- a/src/pages/users/AddUsers.tsx +++ b/src/pages/users/AddUsers.tsx @@ -14,17 +14,23 @@ import { Input, Avatar, IconButton, - Stack + Stack, + Divider, + Select, + FormControl, + FormHelperText } from '@mui/material' // import { makeStyles } from '@mui/styles' // import isEmail from 'validator/lib/isEmail' import '../../styles/style.css' -import { UsersUrl } from '../../services/ApiUrls' +import { Header, UsersUrl } from '../../services/ApiUrls' import { fetchData } from '../../components/FetchData' import { CustomAppBar } from '../../components/CustomAppBar' import { FaArrowAltCircleDown, FaArrowDown, FaTimes, FaUpload } from 'react-icons/fa' import { AntSwitch, CustomSelectField, CustomSelectTextField, RequiredTextField } from '../../styles/CssStyled' +import { FiChevronDown } from '@react-icons/all-files/fi/FiChevronDown' +import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp' type FormErrors = { email?: string[]; @@ -64,11 +70,13 @@ export function AddUsers() { const { state } = useLocation() const navigate = useNavigate() + const [roleSelectOpen, setRoleSelectOpen] = useState(false) const [error, setError] = useState(false) // const [desc, setDesc] = useState('') const [msg, setMsg] = useState('') const [responceError, setResponceError] = useState(false) + // const [assign, setAssignTo] = useState('') // const [source, setSource] = useState('') // const [status, setStatus] = useState('') @@ -210,13 +218,6 @@ export function AddUsers() { } }; - - const headers = { - Accept: 'application/json', - 'Content-Type': 'application/json', - Authorization: localStorage.getItem('Token'), - org: localStorage.getItem('org') - } const submitForm = () => { // console.log('Form data:', data); @@ -237,7 +238,7 @@ export function AddUsers() { is_organization_admin: formData.is_organization_admin } - fetchData(`${UsersUrl}/`, 'POST', JSON.stringify(data), headers) + fetchData(`${UsersUrl}/`, 'POST', JSON.stringify(data), Header) .then((res: any) => { console.log('Form data:', res); if (!res.error) { @@ -307,23 +308,18 @@ export function AddUsers() { return ( - +
- } - > -
- - User Information - -
+ }> + Account Information +
Role
- - {['ADMIN', 'USER'].map((option) => ( - - {option} - - ))} - + + + {/* {errors?.[0] ? errors[0] : ''} */} +
@@ -510,17 +509,10 @@ export function AddUsers() { {/* Email Information */} {/*
- } - aria-controls='panel1a-content' - id='panel1a-header' - > -
- Email Information -
+ }> + Account Information + - } - > -
- - Address - -
+ }> + Account Information + Address Lane
- } - aria-controls='panel1a-content' - id='panel1a-header' - > -
- - Business Hours - -
+ }> + Account Information + - } - aria-controls='panel1a-content' - id='panel1a-header' - > -
- - Preferences - -
+ }> + Account Information + - } - aria-controls='panel1a-content' - id='panel1a-header' - > -
- Signature Block -
+ }> + Account Information + { const { onClose, open, modalDialog, modalTitle, id } = props - const headers = { - Accept: 'application/json', - 'Content-Type': 'application/json', - Authorization: localStorage.getItem('Token'), - org: localStorage.getItem('org') - } useEffect(() => { }, [id]) const deleteId = () => { - fetchData(`${UserUrl}/${id}/`, 'DELETE', null as any, headers) + fetchData(`${UserUrl}/${id}/`, 'DELETE', null as any, Header) .then((res: any) => { console.log('delete:', res); if (!res.error) { diff --git a/src/pages/users/EditUser.tsx b/src/pages/users/EditUser.tsx index 57ab10b8..be8b720a 100644 --- a/src/pages/users/EditUser.tsx +++ b/src/pages/users/EditUser.tsx @@ -14,14 +14,19 @@ import { Input, Avatar, IconButton, - Stack + Stack, + Divider, + Select, + FormControl } from '@mui/material' import '../../styles/style.css' -import { UserUrl } from '../../services/ApiUrls' +import { Header, UserUrl } from '../../services/ApiUrls' import { fetchData } from '../../components/FetchData' import { CustomAppBar } from '../../components/CustomAppBar' import { FaArrowDown, FaTimes, FaUpload } from 'react-icons/fa' import { AntSwitch, RequiredTextField } from '../../styles/CssStyled' +import { FiChevronDown } from '@react-icons/all-files/fi/FiChevronDown' +import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp' type FormErrors = { email?: string[]; @@ -34,10 +39,10 @@ type FormErrors = { state?: string[]; pincode?: string[]; country?: string[]; - profile_pic?: string[]; - has_sales_access?: string[]; - has_marketing_access?: string[]; - is_organization_admin?: string[]; + // profile_pic?: string[]; + // has_sales_access?: string[]; + // has_marketing_access?: string[]; + // is_organization_admin?: string[]; }; interface FormData { email: string, @@ -50,10 +55,10 @@ interface FormData { state: string, pincode: string, country: string, - profile_pic: string | null, - has_sales_access: boolean, - has_marketing_access: boolean, - is_organization_admin: boolean + // profile_pic: string | null, + // has_sales_access: boolean, + // has_marketing_access: boolean, + // is_organization_admin: boolean } @@ -66,6 +71,7 @@ export function EditUser() { const [errors, setErrors] = useState({}); const [profileErrors, setProfileErrors] = useState({}); const [userErrors, setUserErrors] = useState({}); + const [roleSelectOpen, setRoleSelectOpen] = useState(false) const [formData, setFormData] = useState({ email: '', role: 'ADMIN', @@ -77,10 +83,10 @@ export function EditUser() { state: '', pincode: '', country: '', - profile_pic: null, - has_sales_access: false, - has_marketing_access: false, - is_organization_admin: false + // profile_pic: null, + // has_sales_access: false, + // has_marketing_access: false, + // is_organization_admin: false }) useEffect(() => { @@ -122,24 +128,18 @@ export function EditUser() { submitForm(); } - const handleFileChange = (event: ChangeEvent) => { - const file = event.target.files?.[0] || null; - if (file) { - const reader = new FileReader(); - reader.onload = () => { - setFormData({ ...formData, profile_pic: reader.result as string }); - }; - reader.readAsDataURL(file); - } - }; + // const handleFileChange = (event: ChangeEvent) => { + // const file = event.target.files?.[0] || null; + // if (file) { + // const reader = new FileReader(); + // reader.onload = () => { + // setFormData({ ...formData, profile_pic: reader.result as string }); + // }; + // reader.readAsDataURL(file); + // } + // }; - const headers = { - Accept: 'application/json', - 'Content-Type': 'application/json', - Authorization: localStorage.getItem('Token'), - org: localStorage.getItem('org') - } // const getEditDetail = (id: any) => { // fetchData(`${UserUrl}/${id}/`, 'GET', null as any, headers) // .then((res: any) => { @@ -183,13 +183,13 @@ export function EditUser() { state: formData.state, pincode: formData.pincode, country: formData.country, - profile_pic: formData.profile_pic, - has_sales_access: formData.has_sales_access, - has_marketing_access: formData.has_marketing_access, - is_organization_admin: formData.is_organization_admin + // profile_pic: formData.profile_pic, + // has_sales_access: formData.has_sales_access, + // has_marketing_access: formData.has_marketing_access, + // is_organization_admin: formData.is_organization_admin } - fetchData(`${UserUrl}/${state?.id}/`, 'PUT', JSON.stringify(data), headers) + fetchData(`${UserUrl}/${state?.id}/`, 'PUT', JSON.stringify(data), Header) .then((res: any) => { // console.log('editsubmit:', res); if (!res.error) { @@ -216,11 +216,11 @@ export function EditUser() { city: '', state: '', pincode: '', - country: '', - profile_pic: null, - has_sales_access: false, - has_marketing_access: false, - is_organization_admin: false + country: '' + // profile_pic: null, + // has_sales_access: false, + // has_marketing_access: false, + // is_organization_admin: false }); setProfileErrors({}) setUserErrors({}) @@ -241,20 +241,15 @@ export function EditUser() { return ( - +
- } - > -
- - User Information - -
+ }> + Account Information +
Role
- - {['ADMIN', 'USER'].map((option) => ( - - {option} - - ))} - + + + {/* {errors?.[0] ? errors[0] : ''} */} +
@@ -333,7 +331,7 @@ export function EditUser() {
-
+ {/*
Profile picture
@@ -397,7 +395,7 @@ export function EditUser() { onChange={handleChange} />
-
+
*/} @@ -405,17 +403,10 @@ export function EditUser() { {/* Email Information */} {/*
- } - aria-controls='panel1a-content' - id='panel1a-header' - > -
- Email Information -
+ }> + Account Information + - } - > -
- - Address Details - -
+ }> + Account Information + Address Lane
(null) - const headers = { - Accept: 'application/json', - 'Content-Type': 'application/json', - Authorization: localStorage.getItem('Token'), - org: localStorage.getItem('org') - } useEffect(() => { getUserDetail(state.userId) }, [state.userId]) @@ -67,7 +61,7 @@ export default function UserDetails() { // }, [state.contactId.id]) const getUserDetail = (id: any) => { - fetchData(`${UserUrl}/${id}/`, 'GET', null as any, headers) + fetchData(`${UserUrl}/${id}/`, 'GET', null as any, Header) .then((res) => { console.log(res, 'res'); if (!res.error) { @@ -133,14 +127,14 @@ export default function UserDetails() {
- +
-
+
User Information
- {/*
+ {/*
created on {formatDate(contactDetails?.created_on)} @@ -162,8 +156,8 @@ export default function UserDetails() {
{/*
-
Account Title
-
+
Account Title
+
*/}
-
Email Name
-
+
Email Name
+
{userDetails?.user_details?.email || '---'}
-
Is Active
-
+
Is Active
+
-
Profile pic
-
+
Profile pic
+
{userDetails?.user_details?.profile_pic} @@ -208,20 +202,20 @@ export default function UserDetails() {
-
Role
-
+
Role
+
{userDetails?.role || '---'}
-
Mobile Number
-
+
Mobile Number
+
{userDetails?.phone || '---'}
-
Marketing Access
-
+
Marketing Access
+
@@ -231,20 +225,20 @@ export default function UserDetails() { // , justifyContent: 'space-between' }}>
-
Sales Access
-
+
Sales Access
+
-
Date of joining
-
+
Date of joining
+
{userDetails?.date_of_joining || '---'}
{/*
-
Do Not Call
-
+
Do Not Call
+
@@ -254,46 +248,46 @@ export default function UserDetails() { {/* Address details */}
-
+
Address
-
Address Lane
-
+
Address Lane
+
{userDetails?.address?.address_line || '---'}
-
Street
-
+
Street
+
{userDetails?.address?.street || '---'}
-
City
-
+
City
+
{userDetails?.address?.city || '---'}
-
Pincode
-
+
Pincode
+
{userDetails?.address?.postcode || '---'}
-
State
-
+
State
+
{userDetails?.address?.state || '---'}
-
Country
-
+
Country
+
{userDetails?.address?.country || '---'}
@@ -302,11 +296,11 @@ export default function UserDetails() { {/* Description */} {/*
-
+
Description
-

+

{contactDetails?.description || '---'}

*/} @@ -315,22 +309,22 @@ export default function UserDetails() { {/*
-
+
Social
-
+
-
+
LinkedIn URL
@@ -341,7 +335,7 @@ export default function UserDetails() { sx={{ height: '40px', width: '100%', mt: 1 }} />
-
+
Facebook URL
@@ -352,7 +346,7 @@ export default function UserDetails() { sx={{ height: '40px', width: '100%', mt: 1 }} />
-
+
Twitter URL
diff --git a/src/pages/users/Users.tsx b/src/pages/users/Users.tsx index fad5b85d..fb6fb95e 100644 --- a/src/pages/users/Users.tsx +++ b/src/pages/users/Users.tsx @@ -7,7 +7,7 @@ import { CustomTab, CustomToolbar, FabLeft, FabRight } from '../../styles/CssSty import { getComparator, stableSort } from '../../components/Sorting'; import { FaAd, FaEdit, FaTrashAlt } from 'react-icons/fa'; import { fetchData } from '../../components/FetchData'; -import { AccountsUrl, UsersUrl, UserUrl } from '../../services/ApiUrls'; +import { AccountsUrl, Header, UsersUrl, UserUrl } from '../../services/ApiUrls'; import { DialogModal } from './DeleteModal' import { useNavigate } from 'react-router-dom'; import { DeleteModal } from '../../components/DeleteModal'; @@ -89,7 +89,7 @@ function EnhancedTableHead(props: any) { return ( - + {/* - + */} { headCells.map((headCell) => ( headCell.label === 'Actions' ? @@ -162,15 +162,8 @@ const EnhancedTableToolbar = (props: any) => { // setTab(newValue) // } - const headers = { - Accept: 'application/json', - 'Content-Type': 'application/json', - Authorization: `jwt ${localStorage.getItem('Token')}`, - org: localStorage.getItem('org') - } - const onDelete = (id: any) => { - fetchData(`${AccountsUrl}/${id}/`, 'delete', null as any, headers) + fetchData(`${AccountsUrl}/${id}/`, 'delete', null as any, Header) .then((data: any) => { if (!data.error) { props.getAccount() @@ -315,15 +308,10 @@ export default function Users() { setPage(0) setValues(parseInt(event.target.value, 10)) } - const headers = { - Accept: 'application/json', - 'Content-Type': 'application/json', - Authorization: localStorage.getItem('Token'), - org: localStorage.getItem('org') - } + const getUsers = () => { - fetchData(`${UsersUrl}/?offset=${tab === "active" ? openOffset : closeOffset}`, 'GET', null as any, headers) - // fetchData(`${UsersUrl}/`, 'GET', null as any, headers) + fetchData(`${UsersUrl}/?offset=${tab === "active" ? openOffset : closeOffset}`, 'GET', null as any, Header) + // fetchData(`${UsersUrl}/`, 'GET', null as any, Header) .then((res: any) => { if (!res.error) { console.log(res, 'users') @@ -537,7 +525,7 @@ export default function Users() { } const onDelete = (id: any) => { - fetchData(`${UsersUrl}/${id}/`, 'delete', null as any, headers) + fetchData(`${UsersUrl}/${id}/`, 'delete', null as any, Header) .then((data) => { if (!data.error) { getUsers() @@ -573,7 +561,7 @@ export default function Users() { } const getUserDetail = (id: any) => { - fetchData(`${UserUrl}/${id}/`, 'GET', null as any, headers) + fetchData(`${UserUrl}/${id}/`, 'GET', null as any, Header) .then((res) => { console.log(res, 'res'); if (!res.error) { @@ -625,7 +613,7 @@ export default function Users() { setSelectedId([]) } const DeleteItem = () => { - fetchData(`${UserUrl}/${selectedId}/`, 'DELETE', null as any, headers) + fetchData(`${UserUrl}/${selectedId}/`, 'DELETE', null as any, Header) .then((res: any) => { console.log('delete:', res); if (!res.error) { @@ -677,7 +665,7 @@ export default function Users() { const modalDialog = 'Are You Sure You want to delete this User?' const modalTitle = 'Delete User' - const recordsList = [10, 20, 30, 40, 50] + const recordsList = [[10, '10 Records per page'], [20, '20 Records per page'], [30, '30 Records per page'], [40, '40 Records per page'], [50, '50 Records per page']] // console.log(!!(selectedId?.length === 0), 'asd'); return ( @@ -699,45 +687,29 @@ export default function Users() { - - Records Per Page - - + - - - 0 && { - // bgcolor: (theme) => - // alpha( - // theme.palette.primary.main, - // theme.palette.action.activatedOpacity - // ), - // }), - }} - > + + + {/*