\r\n {actions.length > 0 && (\r\n \r\n {actionHandleIcon || \r\n )}\r\n {childrenWithProps}\r\n {overlay.colors && \r\n \r\n {/* \r\n \r\n );\r\n};\r\n\r\nexport default SalesReportGraph;\r\n","import { getCustomDateTime, getNewDate } from '../../@jumbo/utils/dateHelper';\r\n\r\nconst today = new Date();\r\nconst monthNames = [\r\n 'January',\r\n 'February',\r\n 'March',\r\n 'April',\r\n 'May',\r\n 'June',\r\n 'July',\r\n 'August',\r\n 'September',\r\n 'October',\r\n 'November',\r\n 'December',\r\n];\r\nconst currentMonth = monthNames[today.getMonth()];\r\nconst pastMonth = monthNames[today.getMonth() - 1];\r\n\r\nexport const intranet = {\r\n members: [\r\n {\r\n id: 1,\r\n name: 'Albert Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 2,\r\n name: 'John Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 3,\r\n name: 'Jackson Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 4,\r\n name: 'Jonty Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 5,\r\n name: 'Jonathan Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 6,\r\n name: 'Shane Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 7,\r\n name: 'Lisa Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 8,\r\n name: 'Cheeni Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 9,\r\n name: 'Chilbram Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 10,\r\n name: 'Danny Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n ],\r\n projectsList: [\r\n {\r\n id: 21,\r\n name: 'Jumbo React',\r\n dueDate: 'July 30, 2020',\r\n isDelayed: false,\r\n progress: 70,\r\n team: [1, 2, 5, 6, 8, 9],\r\n },\r\n {\r\n id: 22,\r\n name: 'Wieldy',\r\n dueDate: 'July 25, 2020',\r\n isDelayed: false,\r\n progress: 60,\r\n team: [1, 2, 3, 5],\r\n },\r\n {\r\n id: 24,\r\n name: 'Mouldify',\r\n dueDate: 'July 09, 2020',\r\n isDelayed: true,\r\n progress: 90,\r\n team: [2, 6, 9, 10],\r\n },\r\n {\r\n id: 28,\r\n name: 'Jumbo React Admin',\r\n dueDate: 'July 15, 2020',\r\n isDelayed: false,\r\n progress: 20,\r\n team: [2, 3, 4, 5, 6, 8],\r\n },\r\n {\r\n id: 29,\r\n name: 'Drift Angular',\r\n dueDate: 'July 15, 2020',\r\n isDelayed: false,\r\n progress: 40,\r\n team: [1, 2, 3, 5, 6, 8, 9, 10],\r\n },\r\n {\r\n id: 30,\r\n name: 'Jumbo React',\r\n dueDate: 'July 15, 2020',\r\n isDelayed: false,\r\n progress: 70,\r\n team: [2, 3, 5, 6, 7, 8],\r\n },\r\n {\r\n id: 32,\r\n name: 'Wieldy',\r\n dueDate: 'July 15, 2020',\r\n isDelayed: false,\r\n progress: 60,\r\n team: [1, 2, 3, 6, 9],\r\n },\r\n {\r\n id: 34,\r\n name: 'Mouldify',\r\n dueDate: 'July 15, 2020',\r\n isDelayed: true,\r\n progress: 90,\r\n team: [5, 6, 7],\r\n },\r\n {\r\n id: 38,\r\n name: 'Jumbo React Admin',\r\n dueDate: 'July 15, 2020',\r\n isDelayed: false,\r\n progress: 20,\r\n team: [1, 2, 5, 6, 7, 8],\r\n },\r\n {\r\n id: 39,\r\n name: 'Drift Angular',\r\n dueDate: 'July 15, 2020',\r\n isDelayed: false,\r\n progress: 40,\r\n team: [1, 2, 3, 4, 5, 6],\r\n },\r\n {\r\n id: 41,\r\n name: 'Jumbo React',\r\n dueDate: 'July 15, 2020',\r\n isDelayed: false,\r\n progress: 70,\r\n team: [4, 5, 8, 9],\r\n },\r\n {\r\n id: 42,\r\n name: 'Wieldy',\r\n dueDate: '06-25-2020',\r\n isDelayed: false,\r\n progress: 60,\r\n team: [4, 5, 6, 2, 3],\r\n },\r\n {\r\n id: 44,\r\n name: 'Mouldify',\r\n dueDate: 'July 15, 2020',\r\n isDelayed: true,\r\n progress: 90,\r\n team: [1, 5, 9],\r\n },\r\n {\r\n id: 48,\r\n name: 'Jumbo React Admin',\r\n dueDate: 'July 15, 2020',\r\n isDelayed: false,\r\n progress: 20,\r\n team: [1, 2, 4, 5],\r\n },\r\n {\r\n id: 49,\r\n name: 'Drift Angular',\r\n dueDate: 'July 15, 2020',\r\n isDelayed: false,\r\n progress: 40,\r\n team: [1, 2, 3, 4, 5, 6, 8, 9],\r\n },\r\n ],\r\n userActivities: [\r\n {\r\n id: 1,\r\n date: 'July 10, 2020',\r\n title: 'ios App Launched',\r\n description: \"Chat project's ios app is released today\",\r\n logo: '/images/dashboard/intranet/companyLogo1.svg',\r\n color: '#5F5F5F',\r\n },\r\n {\r\n id: 2,\r\n date: 'July 09, 2020',\r\n title: 'Android App Launched',\r\n description: \"Chat project's Android app is released today\",\r\n logo: '/images/dashboard/intranet/companyLogo2.svg',\r\n color: '#EE7200',\r\n },\r\n {\r\n id: 3,\r\n date: 'July 09, 2020',\r\n title: 'Wieldy Hook version launched',\r\n description: 'Wieldy Hook version is launched.',\r\n logo: '/images/dashboard/intranet/companyLogo3.svg',\r\n color: '#005FEE',\r\n },\r\n {\r\n id: 4,\r\n date: 'July 08, 2020',\r\n title: 'Jumbo React design launched',\r\n description: 'Jumbo React design is ready to be implemented.',\r\n logo: '/images/dashboard/intranet/companyLogo4.svg',\r\n color: '#BA57DD',\r\n },\r\n {\r\n id: 5,\r\n date: 'July 08, 2020',\r\n title: 'Gest App launched',\r\n description: \"Gest project's ios app is released today\",\r\n logo: '/images/dashboard/intranet/companyLogo1.svg',\r\n color: '#C03F3F',\r\n },\r\n {\r\n id: 6,\r\n date: 'July 07, 2020',\r\n title: 'App Status changed',\r\n description: 'App status has been changed to launched.',\r\n logo: '/images/dashboard/intranet/companyLogo2.svg',\r\n color: '#17A9FC',\r\n },\r\n ],\r\n newRequests: [\r\n {\r\n id: 32,\r\n user: {\r\n id: 21,\r\n name: 'Julia Robert',\r\n username: 'julia.robert',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n created_at: getCustomDateTime(),\r\n },\r\n {\r\n id: 33,\r\n user: {\r\n id: 22,\r\n name: 'Joe Lee',\r\n username: 'joe.lee',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n created_at: getCustomDateTime(-1),\r\n },\r\n {\r\n id: 34,\r\n user: {\r\n id: 23,\r\n name: 'Chang Lee',\r\n username: 'chang.lee',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n created_at: getCustomDateTime(-15, 'days', 'MMMM DD, YYYY'),\r\n },\r\n {\r\n id: 35,\r\n user: {\r\n id: 24,\r\n name: 'Mickey Arthur',\r\n username: 'mickey.arthur',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n created_at: getCustomDateTime(-32, 'days', 'MMMM DD, YYYY'),\r\n },\r\n {\r\n id: 36,\r\n user: {\r\n id: 25,\r\n name: 'Shane Watson',\r\n username: 'shane.watson',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n created_at: getCustomDateTime(-35, 'days', 'MMMM DD, YYYY'),\r\n },\r\n ],\r\n headerChartData: [\r\n { name: 'Jan', Income: 12000, Expanse: 3000 },\r\n { name: 'Feb', Income: 45000, Expanse: 30000 },\r\n { name: 'Mar', Income: 7000, Expanse: 27000 },\r\n { name: 'Apr', Income: 35000, Expanse: 17000 },\r\n { name: 'May', Income: 33000, Expanse: 22000 },\r\n { name: 'Jun', Income: 34000, Expanse: 16000 },\r\n { name: 'Jul', Income: 45000, Expanse: 19000 },\r\n { name: 'Aug', Income: 10000, Expanse: 2000 },\r\n { name: 'Sep', Income: 25000, Expanse: 14000 },\r\n { name: 'Oct', Income: 6000, Expanse: 3000 },\r\n { name: 'Nov', Income: 50000, Expanse: 20000 },\r\n { name: 'Dec', Income: 43000, Expanse: 4000 },\r\n { name: '', Income: 10000, Expanse: 2000 },\r\n ],\r\n userDetails: {\r\n id: 123,\r\n name: 'John Doe',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n job_title: 'General Manager',\r\n bio: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',\r\n badge: '/images/dashboard/intranet/badge.png',\r\n stats: {\r\n followers: 457,\r\n courses: 12,\r\n following: 697,\r\n },\r\n },\r\n productsList: [\r\n {\r\n id: 1,\r\n name: 'Jumbo',\r\n logo: 'https://via.placeholder.com/40x40',\r\n colorCode: '#03DAC5',\r\n sales_data: {\r\n income: 1800,\r\n sold_qty: 250,\r\n sales_inflation: 100,\r\n },\r\n },\r\n {\r\n id: 2,\r\n name: 'React',\r\n logo: 'https://via.placeholder.com/40x40',\r\n colorCode: '#FF9F1C',\r\n sales_data: {\r\n income: 890,\r\n sold_qty: 100,\r\n sales_inflation: 20,\r\n },\r\n },\r\n {\r\n id: 3,\r\n name: 'Flexile',\r\n logo: 'https://via.placeholder.com/40x40',\r\n colorCode: '#55DDE0',\r\n sales_data: {\r\n income: 3500,\r\n sold_qty: 450,\r\n sales_inflation: 120,\r\n },\r\n },\r\n {\r\n id: 4,\r\n name: 'Drift',\r\n logo: 'https://via.placeholder.com/40x40',\r\n colorCode: '#2BA444',\r\n sales_data: {\r\n income: 380,\r\n sold_qty: 135,\r\n sales_inflation: -25,\r\n },\r\n },\r\n {\r\n id: 5,\r\n name: 'Wield',\r\n logo: 'https://via.placeholder.com/40x40',\r\n colorCode: '#EF8354',\r\n sales_data: {\r\n income: 9000,\r\n sold_qty: 1250,\r\n sales_inflation: 125,\r\n },\r\n },\r\n {\r\n id: 6,\r\n name: 'Apple',\r\n logo: 'https://via.placeholder.com/40x40',\r\n colorCode: '#ce93d8',\r\n sales_data: {\r\n income: 1800,\r\n sold_qty: 250,\r\n sales_inflation: 100,\r\n },\r\n },\r\n {\r\n id: 7,\r\n name: 'Oracle',\r\n logo: 'https://via.placeholder.com/40x40',\r\n colorCode: '#dce775',\r\n sales_data: {\r\n income: 890,\r\n sold_qty: 100,\r\n sales_inflation: 20,\r\n },\r\n },\r\n {\r\n id: 8,\r\n name: 'eBook',\r\n logo: 'https://via.placeholder.com/40x40',\r\n colorCode: '#bdbdbd',\r\n sales_data: {\r\n income: 3500,\r\n sold_qty: 450,\r\n sales_inflation: 120,\r\n },\r\n },\r\n ],\r\n userPhotos: [\r\n {\r\n id: 1,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Beauty with Beast',\r\n thumb: '',\r\n size: 2.5,\r\n },\r\n {\r\n id: 2,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Nature Love',\r\n thumb: '',\r\n size: 2,\r\n },\r\n {\r\n id: 3,\r\n photo_url: 'https://via.placeholder.com/400x400',\r\n caption: 'Forest',\r\n thumb: '',\r\n size: 3.5,\r\n },\r\n {\r\n id: 4,\r\n photo_url: 'https://via.placeholder.com/400x400',\r\n caption: 'Nature at its best',\r\n thumb: '',\r\n size: 5,\r\n },\r\n {\r\n id: 5,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Sea House',\r\n thumb: '',\r\n size: 3.5,\r\n },\r\n {\r\n id: 6,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Minimal',\r\n thumb: '',\r\n size: 4,\r\n },\r\n {\r\n id: 7,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Beauty with Beast',\r\n thumb: '',\r\n size: 2.5,\r\n },\r\n {\r\n id: 8,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Nature Love',\r\n thumb: '',\r\n size: 2,\r\n },\r\n {\r\n id: 9,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Forest',\r\n thumb: '',\r\n size: 3.5,\r\n },\r\n {\r\n id: 10,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Nature at its best',\r\n thumb: '',\r\n size: 5,\r\n },\r\n {\r\n id: 11,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Sea House',\r\n thumb: '',\r\n size: 3.5,\r\n },\r\n {\r\n id: 12,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Minimal',\r\n thumb: '',\r\n size: 4,\r\n },\r\n ],\r\n calendarEvents: [\r\n {\r\n id: 123,\r\n event_name: 'Meeting with John',\r\n color: '#0795F4',\r\n isAttended: true,\r\n scheduled_with: { id: 12, name: 'John Doe' },\r\n date: getNewDate(4, 'DD MMM, YYYY, hh:mm a'),\r\n },\r\n {\r\n id: 124,\r\n event_name: 'Launch of App',\r\n color: '#5D9405',\r\n isAttended: false,\r\n scheduled_with: { id: 12, name: 'Robert Key' },\r\n date: getNewDate(3, 'DD MMM, YYYY, hh:mm a'),\r\n },\r\n {\r\n id: 125,\r\n event_name: 'Call with Era',\r\n color: '#03DAC5',\r\n isAttended: false,\r\n scheduled_with: { id: 12, name: 'Era' },\r\n date: getNewDate(2, 'DD MMM, YYYY, hh:mm a'),\r\n },\r\n {\r\n id: 126,\r\n event_name: 'Pay credit card bill',\r\n color: '#FF8C00',\r\n isAttended: true,\r\n scheduled_with: { id: 12, name: 'Credit Manager' },\r\n date: getNewDate(1, 'DD MMM, YYYY, hh:mm a'),\r\n },\r\n {\r\n id: 127,\r\n event_name: 'Visit the client',\r\n color: '#03DAC5',\r\n isAttended: false,\r\n scheduled_with: { id: 12, name: 'Dhruva Sharma' },\r\n date: getNewDate(1, 'DD MMM, YYYY, hh:mm a'),\r\n },\r\n {\r\n id: 128,\r\n event_name: 'Team Meeting',\r\n color: '#5D9405',\r\n isAttended: true,\r\n scheduled_with: { id: 12, name: 'Team' },\r\n date: getNewDate(0, 'DD MMM, YYYY, hh:mm a'),\r\n },\r\n {\r\n id: 129,\r\n event_name: 'Tech Seminar',\r\n color: '#0795F4',\r\n isAttended: true,\r\n scheduled_with: { id: 12, name: 'Denly Jack' },\r\n date: getNewDate(0, 'DD MMM, YYYY, hh:mm a'),\r\n },\r\n {\r\n id: 130,\r\n event_name: 'Visit Mr. John',\r\n color: '#5D9405',\r\n isAttended: false,\r\n scheduled_with: { id: 12, name: 'John Doe' },\r\n date: getNewDate(0, 'DD MMM, YYYY, hh:mm a'),\r\n },\r\n {\r\n id: 131,\r\n event_name: 'Launch Gest Web App',\r\n color: '#FF8C00',\r\n isAttended: false,\r\n scheduled_with: { id: 12, name: 'CJ' },\r\n date: getNewDate(0, 'DD MMM, YYYY, hh:mm a'),\r\n },\r\n {\r\n id: 132,\r\n event_name: 'Team Lunch',\r\n color: '#0795F4',\r\n isAttended: false,\r\n scheduled_with: { id: 12, name: 'Team' },\r\n date: getNewDate(-1, 'DD MMM, YYYY, hh:mm a'),\r\n },\r\n {\r\n id: 133,\r\n event_name: 'Talk with Google representative',\r\n color: '#5D9405',\r\n isAttended: true,\r\n scheduled_with: { id: 12, name: 'Jacky Google' },\r\n date: getNewDate(-2, 'DD MMM, YYYY, hh:mm a'),\r\n },\r\n {\r\n id: 134,\r\n event_name: 'Corona Test',\r\n color: '#FF8C00',\r\n isAttended: false,\r\n scheduled_with: { id: 12, name: 'Team' },\r\n date: getNewDate(-3, 'DD MMM, YYYY, hh:mm a'),\r\n },\r\n ],\r\n taskCategories: [\r\n { id: 12, label: 'Personal Tasks', slug: 'personal' },\r\n { id: 13, label: 'Professional Tasks', slug: 'professional' },\r\n { id: 14, label: 'Extra Tasks', slug: 'extra' },\r\n ],\r\n tasksList: [\r\n {\r\n id: 1,\r\n title: 'Home Page Changes',\r\n description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',\r\n unreadComments: 2,\r\n isCompleted: true,\r\n category: 'personal',\r\n },\r\n {\r\n id: 2,\r\n title: 'Launch Gest App',\r\n description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',\r\n unreadComments: 4,\r\n isCompleted: false,\r\n category: 'professional',\r\n },\r\n {\r\n id: 3,\r\n title: 'Visit to John',\r\n description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',\r\n unreadComments: 0,\r\n isCompleted: true,\r\n category: 'extra',\r\n },\r\n {\r\n id: 4,\r\n title: 'Work on personal website',\r\n description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',\r\n unreadComments: 5,\r\n isCompleted: false,\r\n category: 'personal',\r\n },\r\n {\r\n id: 5,\r\n title: 'Work on Jumbo React',\r\n description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',\r\n unreadComments: 2,\r\n isCompleted: false,\r\n category: 'professional',\r\n },\r\n {\r\n id: 6,\r\n title: 'Take Team for Lunch',\r\n description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',\r\n unreadComments: 1,\r\n isCompleted: false,\r\n category: 'extra',\r\n },\r\n {\r\n id: 7,\r\n title: 'Call Designer',\r\n description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',\r\n unreadComments: 0,\r\n isCompleted: true,\r\n category: 'personal',\r\n },\r\n {\r\n id: 8,\r\n title: 'Team Meeting',\r\n description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',\r\n unreadComments: 2,\r\n isCompleted: true,\r\n category: 'professional',\r\n },\r\n {\r\n id: 9,\r\n title: 'Review System and Hardwares',\r\n description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',\r\n unreadComments: 2,\r\n isCompleted: false,\r\n category: 'extra',\r\n },\r\n {\r\n id: 10,\r\n title: 'Meet Mr. Era',\r\n description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',\r\n unreadComments: 0,\r\n isCompleted: false,\r\n category: 'personal',\r\n },\r\n {\r\n id: 11,\r\n title: 'Start Table Tennis',\r\n description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',\r\n unreadComments: 2,\r\n isCompleted: true,\r\n category: 'extra',\r\n },\r\n {\r\n id: 12,\r\n title: 'Work on Wieldy ',\r\n description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',\r\n unreadComments: 0,\r\n isCompleted: false,\r\n category: 'professional',\r\n },\r\n ],\r\n dailyFeed: [\r\n {\r\n id: 1,\r\n user: {\r\n id: 100,\r\n name: 'Atul Midha',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'PROJECT_INVITATION',\r\n metaData: {\r\n sender: {\r\n id: 123,\r\n name: 'Murli Swami',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n project: { id: 12, name: 'Mouldify' },\r\n },\r\n likes: 123,\r\n shares: 25,\r\n timeRange: '10:30 am - 22.07.20', // timeFromNow(),\r\n createdAt: getCustomDateTime(-5, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n id: 2,\r\n user: {\r\n id: 101,\r\n name: 'Dinesh Suthar',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'PHOTOS_UPLOADED',\r\n metaData: {\r\n user: {\r\n id: 1234,\r\n name: 'Tanmay Goswami',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n group: 'Art Lovers',\r\n count: 6,\r\n photos: [\r\n {\r\n id: 1,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Beauty with Beast',\r\n },\r\n {\r\n id: 2,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Nature Love',\r\n },\r\n {\r\n id: 3,\r\n photo_url: 'https://via.placeholder.com/400x400',\r\n caption: 'Forest',\r\n },\r\n {\r\n id: 4,\r\n photo_url: 'https://via.placeholder.com/400x400',\r\n caption: 'Nature at its best',\r\n },\r\n {\r\n id: 5,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Sea House',\r\n },\r\n {\r\n id: 6,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Minimal',\r\n },\r\n ],\r\n },\r\n likes: 129,\r\n shares: 25,\r\n timeRange: '09:30 am - 22.07.20',\r\n createdAt: getCustomDateTime(-7, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n id: 3,\r\n user: {\r\n id: 102,\r\n name: 'John Doe',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'SHARED_POST',\r\n metaData: {\r\n user: {\r\n id: 124,\r\n name: 'Jacky Roy',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n post: { title: 'This is Beginning' },\r\n },\r\n likes: 5677,\r\n shares: 345,\r\n timeRange: '06:30 am - 22.07.20',\r\n createdAt: getCustomDateTime(-8, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n id: 4,\r\n user: {\r\n id: 105,\r\n name: 'North Taylor',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'PROJECT_INVITATION',\r\n metaData: {\r\n sender: {\r\n id: 130,\r\n name: 'Joe Root',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n project: { id: 13, name: 'Jumbo' },\r\n },\r\n likes: 234,\r\n shares: 86,\r\n timeRange: '03:30 am - 22.07.20',\r\n createdAt: getCustomDateTime(-10, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n id: 5,\r\n user: {\r\n id: 756,\r\n name: 'Peter Broad',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'PHOTOS_UPLOADED',\r\n metaData: {\r\n user: {\r\n id: 1234,\r\n name: 'James Anderson',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n count: 8,\r\n group: 'Javascript Experts',\r\n photos: [\r\n {\r\n id: 1,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Beauty with Beast',\r\n },\r\n {\r\n id: 2,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Nature Love',\r\n },\r\n {\r\n id: 3,\r\n photo_url: 'https://via.placeholder.com/400x400',\r\n caption: 'Forest',\r\n },\r\n {\r\n id: 4,\r\n photo_url: 'https://via.placeholder.com/400x400',\r\n caption: 'Nature at its best',\r\n },\r\n {\r\n id: 5,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Sea House',\r\n },\r\n {\r\n id: 6,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Minimal',\r\n },\r\n {\r\n id: 7,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Beauty with Beast',\r\n },\r\n {\r\n id: 8,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Nature Love',\r\n },\r\n ],\r\n },\r\n likes: 457,\r\n shares: 54,\r\n timeRange: '12:30 am - 22.07.20',\r\n createdAt: getCustomDateTime(-15, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n id: 6,\r\n user: {\r\n id: 455,\r\n name: 'Rose Taylor',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'SHARED_POST',\r\n metaData: {\r\n user: {\r\n id: 765,\r\n name: 'Robert Twose',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n post: { title: 'Introduction to Javascript' },\r\n },\r\n likes: 768,\r\n shares: 567,\r\n timeRange: '11:30 pm - 21.07.20',\r\n createdAt: getCustomDateTime(-1, 'hours', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n id: 7,\r\n user: {\r\n id: 676,\r\n name: 'Williams Blake',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'PROJECT_INVITATION',\r\n metaData: {\r\n sender: {\r\n id: 544,\r\n name: 'Janifer decibel',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n project: { id: 16, name: 'Wieldy' },\r\n },\r\n likes: 856,\r\n shares: 45,\r\n timeRange: '10:30 pm - 21.07.20',\r\n createdAt: getCustomDateTime(-3, 'hours', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n id: 8,\r\n user: {\r\n id: 906,\r\n name: 'Steve Law',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'PHOTOS_UPLOADED',\r\n metaData: {\r\n user: {\r\n id: 786,\r\n name: 'Dhruva Sharma',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n count: 3,\r\n group: 'React Lovers',\r\n photos: [\r\n {\r\n id: 1,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Beauty with Beast',\r\n },\r\n {\r\n id: 2,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Nature Love',\r\n },\r\n {\r\n id: 3,\r\n photo_url: 'https://via.placeholder.com/400x400',\r\n caption: 'Forest',\r\n },\r\n ],\r\n },\r\n likes: 768,\r\n shares: 43,\r\n timeRange: '09:30 pm - 21.07.20',\r\n createdAt: getCustomDateTime(-6, 'hours', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n id: 9,\r\n user: {\r\n id: 678,\r\n name: 'Brett Heavy',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'SHARED_POST',\r\n metaData: {\r\n user: {\r\n id: 657,\r\n name: 'Ian hughes',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n post: { title: 'A road to good development' },\r\n },\r\n likes: 76656,\r\n shares: 4566,\r\n timeRange: '05:30 pm - 21.07.20',\r\n createdAt: getCustomDateTime(-10, 'hours', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n ],\r\n latestNotifications: [\r\n {\r\n type: 'INVITATION',\r\n total: 5,\r\n records: [\r\n {\r\n id: 1,\r\n user: {\r\n id: 100,\r\n name: 'Atul Midha',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'PROJECT_INVITATION',\r\n metaData: {\r\n sender: {\r\n id: 123,\r\n name: 'Murli Swami',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n project: { id: 12, name: 'Mouldify' },\r\n },\r\n timeRange: '10:30 am - 22.07.20', // timeFromNow(),\r\n createdAt: getCustomDateTime(-5, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n id: 2,\r\n user: {\r\n id: 676,\r\n name: 'Williams Blake',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'PROJECT_INVITATION',\r\n metaData: {\r\n sender: {\r\n id: 544,\r\n name: 'Janifer decibel',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n project: { id: 16, name: 'Wieldy' },\r\n },\r\n timeRange: '10:30 pm - 21.07.20',\r\n createdAt: getCustomDateTime(-3, 'hours', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n ],\r\n },\r\n {\r\n type: 'MESSAGES',\r\n total: 2,\r\n records: [\r\n {\r\n id: 1,\r\n name: 'Remy Sharp',\r\n content: 'You have a new friend suggestion: ',\r\n avatar: 'https://via.placeholder.com/150x150',\r\n icon: 'all-inclusive',\r\n time: '5h',\r\n media: '',\r\n status: 'unread',\r\n },\r\n {\r\n id: 2,\r\n name: 'Travis Howard',\r\n content: 'You have a new friend suggestion: ',\r\n avatar: 'https://via.placeholder.com/150x150',\r\n icon: 'info',\r\n time: '10h',\r\n media: '',\r\n status: 'unread',\r\n },\r\n ],\r\n },\r\n {\r\n type: 'FEEDS',\r\n total: 25,\r\n records: [\r\n {\r\n id: 1,\r\n user: {\r\n id: 100,\r\n name: 'Atul Midha',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'PROJECT_INVITATION',\r\n metaData: {\r\n sender: {\r\n id: 123,\r\n name: 'Harmayni Croft',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n project: { id: 12, name: 'Mouldify' },\r\n },\r\n likes: 123,\r\n shares: 25,\r\n timeRange: '10:30 am - 22.07.20',\r\n createdAt: getCustomDateTime(-7, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n id: 2,\r\n user: {\r\n id: 101,\r\n name: 'Dinesh Suthar',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'PHOTOS_UPLOADED',\r\n metaData: {\r\n user: {\r\n id: 1234,\r\n name: 'Tanmay Goswami',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n group: 'Art Lovers',\r\n count: 5,\r\n photos: [\r\n {\r\n id: 1,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Beauty with Beast',\r\n },\r\n {\r\n id: 2,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Nature Love',\r\n },\r\n {\r\n id: 3,\r\n photo_url: 'https://via.placeholder.com/400x400',\r\n caption: 'Forest',\r\n },\r\n {\r\n id: 4,\r\n photo_url: 'https://via.placeholder.com/400x400',\r\n caption: 'Nature at its best',\r\n },\r\n {\r\n id: 5,\r\n photo_url: 'https://via.placeholder.com/600x400',\r\n caption: 'Sea House',\r\n },\r\n ],\r\n },\r\n timeRange: '09:30 am - 22.07.20',\r\n createdAt: getCustomDateTime(-7, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n id: 3,\r\n user: {\r\n id: 102,\r\n name: 'John Doe',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'SHARED_POST',\r\n metaData: {\r\n user: {\r\n id: 124,\r\n name: 'Jacky Roy',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n post: { title: 'This is Beginning' },\r\n },\r\n likes: 5677,\r\n shares: 345,\r\n timeRange: '06:30 am - 22.07.20',\r\n createdAt: getCustomDateTime(-8, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n ],\r\n },\r\n ],\r\n projectWorked: {\r\n id: 1,\r\n projectName: 'Jumbo React',\r\n workedHours: [\r\n {\r\n workDate: '',\r\n hours: 2,\r\n },\r\n {\r\n workDate: '',\r\n hours: 2,\r\n },\r\n {\r\n workDate: '',\r\n hours: 2,\r\n },\r\n ],\r\n },\r\n projects: [\r\n {\r\n label: 'jumbo react',\r\n value: 'jumbo-react',\r\n color: '#6200EE',\r\n totalHours: 20,\r\n dailyAverageHours: 11,\r\n data: [\r\n { month: 'Jan', queries: 400, deals: 400 },\r\n { month: 'Feb', queries: 500, deals: 600 },\r\n { month: 'Mar', queries: 400, deals: 300 },\r\n { month: 'Apr', queries: 350, deals: 200 },\r\n { month: 'May', queries: 700, deals: 700 },\r\n { month: 'Jun', queries: 100, deals: 600 },\r\n { month: 'Jul', queries: 500, deals: 50 },\r\n { month: 'Aug', queries: 350, deals: 550 },\r\n { month: 'Sep', queries: 300, deals: 200 },\r\n { month: 'Oct', queries: 200, deals: 500 },\r\n { month: 'Nov', queries: 200, deals: 600 },\r\n { month: 'Dec', queries: 200, deals: 100 },\r\n ],\r\n },\r\n {\r\n label: 'Wieldy',\r\n value: 'wieldy',\r\n color: '#F5A32F',\r\n totalHours: 15,\r\n dailyAverageHours: 7,\r\n data: [\r\n { month: 'Jan', queries: 400, deals: 400 },\r\n { month: 'Feb', queries: 500, deals: 700 },\r\n { month: 'Mar', queries: 400, deals: 300 },\r\n { month: 'Apr', queries: 350, deals: 400 },\r\n { month: 'May', queries: 700, deals: 700 },\r\n { month: 'Jun', queries: 100, deals: 800 },\r\n { month: 'Jul', queries: 500, deals: 50 },\r\n { month: 'Aug', queries: 350, deals: 550 },\r\n { month: 'Sep', queries: 300, deals: 300 },\r\n { month: 'Oct', queries: 200, deals: 500 },\r\n { month: 'Nov', queries: 200, deals: 700 },\r\n { month: 'Dec', queries: 200, deals: 200 },\r\n ],\r\n },\r\n {\r\n label: 'Drift Angular',\r\n value: 'drift-angular',\r\n color: '#FF4081',\r\n totalHours: 18,\r\n dailyAverageHours: 9,\r\n data: [\r\n { month: 'Jan', queries: 400, deals: 500 },\r\n { month: 'Feb', queries: 500, deals: 400 },\r\n { month: 'Mar', queries: 400, deals: 600 },\r\n { month: 'Apr', queries: 350, deals: 200 },\r\n { month: 'May', queries: 700, deals: 900 },\r\n { month: 'Jun', queries: 100, deals: 600 },\r\n { month: 'Jul', queries: 500, deals: 50 },\r\n { month: 'Aug', queries: 350, deals: 600 },\r\n { month: 'Sep', queries: 300, deals: 200 },\r\n { month: 'Oct', queries: 200, deals: 500 },\r\n { month: 'Nov', queries: 200, deals: 800 },\r\n { month: 'Dec', queries: 200, deals: 300 },\r\n ],\r\n },\r\n ],\r\n popularProducts: [\r\n {\r\n id: 1,\r\n name: 'Creative Watch',\r\n description: 'Lorem Ipsum is simply dummy text of the printing ',\r\n price: 200,\r\n sale_price: 180,\r\n featured_image: 'https://via.placeholder.com/80x80',\r\n variants: [\r\n {\r\n label: 'Color',\r\n type: 'color',\r\n options: [\r\n { slug: 'purple', value: 'purple' },\r\n { slug: 'green', value: 'green' },\r\n { slug: 'yellow', value: 'yellow' },\r\n ],\r\n },\r\n ],\r\n inStock: true,\r\n },\r\n {\r\n id: 2,\r\n name: 'Galaxy Sonic Headphone',\r\n description: 'Lorem Ipsum is simply dummy text of the printing ',\r\n price: 100,\r\n sale_price: 80,\r\n featured_image: 'https://via.placeholder.com/80x80',\r\n variants: [\r\n {\r\n label: 'Color',\r\n type: 'color',\r\n options: [\r\n { slug: 'black', value: 'black' },\r\n { slug: 'red', value: 'red' },\r\n { slug: 'blue', value: 'blue' },\r\n ],\r\n },\r\n ],\r\n inStock: true,\r\n },\r\n {\r\n id: 3,\r\n name: 'Smart Lamp',\r\n description: 'Lorem Ipsum is simply dummy text of the printing ',\r\n price: 300,\r\n sale_price: 250,\r\n featured_image: 'https://via.placeholder.com/80x80',\r\n variants: [\r\n {\r\n label: 'Color',\r\n type: 'color',\r\n options: [\r\n { slug: 'red', value: 'red' },\r\n { slug: 'green', value: 'green' },\r\n { slug: 'orange', value: 'orange' },\r\n ],\r\n },\r\n ],\r\n inStock: false,\r\n },\r\n {\r\n id: 4,\r\n name: 'iPower Speaker',\r\n description: 'Lorem Ipsum is simply dummy text of the printing ',\r\n price: 400,\r\n sale_price: 300,\r\n featured_image: 'https://via.placeholder.com/80x80',\r\n variants: [\r\n {\r\n label: 'Size',\r\n type: 'size',\r\n options: [\r\n { slug: '30wt', value: '30Wt' },\r\n { slug: '40wt', value: '40Wt' },\r\n { slug: '50wt', value: '50Wt' },\r\n ],\r\n },\r\n ],\r\n inStock: true,\r\n },\r\n {\r\n id: 5,\r\n name: 'Study Lamp',\r\n description: 'Lorem Ipsum is simply dummy text of the printing ',\r\n price: 200,\r\n sale_price: 160,\r\n featured_image: 'https://via.placeholder.com/80x80',\r\n variants: [\r\n {\r\n label: 'Color',\r\n type: 'color',\r\n options: [\r\n { slug: 'red', value: 'red' },\r\n { slug: 'blue', value: 'blue' },\r\n ],\r\n },\r\n ],\r\n inStock: true,\r\n },\r\n {\r\n id: 6,\r\n name: 'T-Shirt',\r\n description: 'Lorem Ipsum is simply dummy text of the printing ',\r\n price: 150,\r\n sale_price: 120,\r\n featured_image: 'https://via.placeholder.com/600x400',\r\n variants: [\r\n {\r\n label: 'Size',\r\n type: 'size',\r\n options: [\r\n { slug: 'small', value: 'Small' },\r\n { slug: 'medium', value: 'Medium' },\r\n { slug: 'large', value: 'Large' },\r\n ],\r\n },\r\n ],\r\n inStock: true,\r\n },\r\n {\r\n id: 7,\r\n name: 'Bizinto 1 Three Pin',\r\n description: 'Lorem Ipsum is simply dummy text of the printing ',\r\n price: 150,\r\n sale_price: 120,\r\n featured_image: 'https://via.placeholder.com/600x400',\r\n inStock: true,\r\n },\r\n {\r\n id: 8,\r\n name: 'Running Shoes',\r\n description: 'Lorem Ipsum is simply dummy text of the printing ',\r\n price: 150,\r\n sale_price: 120,\r\n featured_image: 'https://via.placeholder.com/600x450',\r\n inStock: true,\r\n },\r\n {\r\n id: 9,\r\n name: 'football',\r\n description: 'Lorem Ipsum is simply dummy text of the printing ',\r\n price: 150,\r\n sale_price: 120,\r\n featured_image: 'https://via.placeholder.com/600x400',\r\n inStock: true,\r\n },\r\n ],\r\n ourOfficeData: {\r\n title: 'Our Office',\r\n description: 'Fusce eget dolor id justo lictus commodo pharetra nisi. Donec velit libero',\r\n socialProfiles: [\r\n { title: 'twitter', url: '' },\r\n { title: 'facebook', url: '' },\r\n { title: 'instagram', url: '' },\r\n ],\r\n addresses: [\r\n {\r\n label: 'Head Office',\r\n addressLine1: '488, blingum road',\r\n addressLine2: 'JP Street',\r\n city: 'NJ',\r\n state: 'California',\r\n zipCode: 455473,\r\n phoneNumber: '+01-992856-8535',\r\n emailAddress: 'bob.bulider@jobportal.com',\r\n mapDirectionLink:\r\n 'https://www.google.com/maps/place/RSETI,SBI,BIKANER/@28.017662,73.3346816,19z/data=!4m12!1m6!3m5!1s0x0:0x728b47887e97d499!2sLotus+Dairy!8m2!3d28.0161051!4d73.3321255!3m4!1s0x393fdd88866b7461:0x92ed0b10ac41fa6d!8m2!3d28.0177013!4d73.3361341',\r\n },\r\n {\r\n label: 'Representative Office',\r\n addressLine1: 'Rani bajar',\r\n addressLine2: 'Jaipur road',\r\n city: 'Bikaner',\r\n state: 'Rajasthan',\r\n zipCode: 334004,\r\n phoneNumber: '+01-336558-8535',\r\n emailAddress: 'john-smith@jobportal.com',\r\n mapDirectionLink:\r\n 'https://www.google.com/maps/place/RSETI,SBI,BIKANER/@28.017662,73.3346816,19z/data=!4m12!1m6!3m5!1s0x0:0x728b47887e97d499!2sLotus+Dairy!8m2!3d28.0161051!4d73.3321255!3m4!1s0x393fdd88866b7461:0x92ed0b10ac41fa6d!8m2!3d28.0177013!4d73.3361341',\r\n },\r\n ],\r\n },\r\n monthlyTopChart: {\r\n title: 'Views',\r\n hoverButton: {\r\n text: 'Monthly',\r\n color: '#5D9405',\r\n hoverText: 'Past Month',\r\n hoverColor: '#fff',\r\n },\r\n analyticData: {\r\n amount: '386,200',\r\n label: 'Total Views',\r\n percentage: '98%',\r\n onHover: {\r\n amount: '390,200',\r\n percentage: '98.8%',\r\n },\r\n },\r\n primaryColor: {\r\n solid: '#ADDC4C',\r\n light: '#D7F5B1',\r\n },\r\n secondaryColor: {\r\n solid: '#C8372D',\r\n light: '#FADEE3',\r\n },\r\n chartData: {\r\n current: [\r\n { label: 1 + ', ' + currentMonth, value: 100 },\r\n { label: 2 + ', ' + currentMonth, value: 120 },\r\n { label: 3 + ', ' + currentMonth, value: 130 },\r\n { label: 4 + ', ' + currentMonth, value: 120 },\r\n { label: 5 + ', ' + currentMonth, value: 110 },\r\n { label: 6 + ', ' + currentMonth, value: 105 },\r\n { label: 7 + ', ' + currentMonth, value: 110 },\r\n { label: 8 + ', ' + currentMonth, value: 120 },\r\n { label: 9 + ', ' + currentMonth, value: 130 },\r\n { label: 10 + ', ' + currentMonth, value: 140 },\r\n { label: 11 + ', ' + currentMonth, value: 145 },\r\n { label: 12 + ', ' + currentMonth, value: 140 },\r\n { label: 13 + ', ' + currentMonth, value: 130 },\r\n { label: 14 + ', ' + currentMonth, value: 125 },\r\n ],\r\n past: [\r\n { label: 1 + ', ' + pastMonth, value: 100 },\r\n { label: 2 + ', ' + pastMonth, value: 120 },\r\n { label: 3 + ', ' + pastMonth, value: 130 },\r\n { label: 4 + ', ' + pastMonth, value: 120 },\r\n { label: 5 + ', ' + pastMonth, value: 110 },\r\n { label: 6 + ', ' + pastMonth, value: 105 },\r\n { label: 7 + ', ' + pastMonth, value: 110 },\r\n { label: 8 + ', ' + pastMonth, value: 100 },\r\n { label: 9 + ', ' + pastMonth, value: 90 },\r\n { label: 10 + ', ' + pastMonth, value: 95 },\r\n { label: 11 + ', ' + pastMonth, value: 80 },\r\n { label: 12 + ', ' + pastMonth, value: 60 },\r\n { label: 13 + ', ' + pastMonth, value: 65 },\r\n { label: 14 + ', ' + pastMonth, value: 50 },\r\n ],\r\n },\r\n },\r\n annualTopChart: {\r\n title: 'Orders',\r\n hoverButton: {\r\n text: 'Annual',\r\n color: '#FF8C00',\r\n hoverText: 'Last Year',\r\n hoverColor: '#fff',\r\n },\r\n analyticData: {\r\n amount: '80,800',\r\n label: 'New Orders',\r\n percentage: '28%',\r\n onHover: {\r\n amount: '10,784',\r\n percentage: '40.8%',\r\n },\r\n },\r\n primaryColor: {\r\n solid: '#FF8C00',\r\n light: '#FFDE99',\r\n },\r\n secondaryColor: {\r\n solid: '#ADDC4C',\r\n light: '#D7F5B1',\r\n },\r\n chartData: {\r\n current: [\r\n { label: 'January', value: 100 },\r\n { label: 'February', value: 120 },\r\n { label: 'March', value: 130 },\r\n { label: 'April', value: 120 },\r\n { label: 'May', value: 110 },\r\n { label: 'June', value: 105 },\r\n { label: 'July', value: 110 },\r\n { label: 'August', value: 120 },\r\n { label: 'September', value: 130 },\r\n { label: 'October', value: 140 },\r\n { label: 'November', value: 145 },\r\n { label: 'December', value: 140 },\r\n ],\r\n past: [\r\n { label: 'January', value: 100 },\r\n { label: 'February', value: 120 },\r\n { label: 'March', value: 130 },\r\n { label: 'April', value: 120 },\r\n { label: 'May', value: 110 },\r\n { label: 'June', value: 105 },\r\n { label: 'July', value: 110 },\r\n { label: 'August', value: 100 },\r\n { label: 'September', value: 90 },\r\n { label: 'October', value: 95 },\r\n { label: 'November', value: 80 },\r\n { label: 'December', value: 60 },\r\n ],\r\n },\r\n },\r\n visitedChart: {\r\n today: [\r\n { label: '01 am', value: 100, visits: 125 },\r\n { label: '03 am', value: 120, visits: 103 },\r\n { label: '05 am', value: 130, visits: 89 },\r\n { label: '07 am', value: 120, visits: 96 },\r\n { label: '09 am', value: 110, visits: 122 },\r\n { label: '11 am', value: 105, visits: 111 },\r\n { label: '01 pm', value: 110, visits: 78 },\r\n { label: '03 pm', value: 120, visits: 91 },\r\n { label: '05 pm', value: 130, visits: 32 },\r\n { label: '07 pm', value: 140, visits: 35 },\r\n { label: '09 pm', value: 145, visits: 85 },\r\n { label: '11 pm', value: 140, visits: 123 },\r\n ],\r\n yesterday: [\r\n { label: '01 am', value: 100, visits: 100 },\r\n { label: '03 am', value: 120, visits: 100 },\r\n { label: '05 am', value: 130, visits: 100 },\r\n { label: '07 am', value: 120, visits: 100 },\r\n { label: '09 am', value: 110, visits: 100 },\r\n { label: '11 am', value: 105, visits: 100 },\r\n { label: '01 pm', value: 110, visits: 100 },\r\n { label: '03 pm', value: 100, visits: 100 },\r\n { label: '05 pm', value: 90, visits: 100 },\r\n { label: '07 pm', value: 95, visits: 100 },\r\n { label: '09 pm', value: 80, visits: 100 },\r\n { label: '11 pm', value: 60, visits: 100 },\r\n ],\r\n },\r\n messages: [\r\n {\r\n user: {\r\n id: 1,\r\n name: 'Domnic Harris',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n message: 'I think its a good idea, lets do it then.',\r\n date: getCustomDateTime(-5, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n user: {\r\n id: 2,\r\n name: 'Joe Root',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n message: 'Hey, lets have a cricket match this sunday, what you say?',\r\n date: getCustomDateTime(-15, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n user: {\r\n id: 3,\r\n name: 'Dennis lilly',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n message: 'George has invited you for the dinner, will you go?',\r\n date: getCustomDateTime(-45, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n user: {\r\n id: 4,\r\n name: 'Sara Taylor',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n message: 'Hi, I have shared some documents with you, please go through them.',\r\n date: getCustomDateTime(-55, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n ],\r\n headerNotifications: [\r\n {\r\n id: 2,\r\n user: {\r\n id: 101,\r\n name: 'Dinesh Suthar',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'POSTING',\r\n metaData: {\r\n post: {\r\n type: 'album',\r\n title: 'This is Beginning',\r\n owner: {\r\n id: 545,\r\n name: 'Martin Guptil',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n },\r\n },\r\n createdAt: getCustomDateTime(-27, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n id: 3,\r\n user: {\r\n id: 102,\r\n name: 'John Doe',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'SHARED_POST',\r\n metaData: {\r\n post: {\r\n title: 'This is Beginning',\r\n owner: {\r\n id: 545,\r\n name: 'Martin Guptil',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n },\r\n },\r\n createdAt: getCustomDateTime(-50, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n id: 1,\r\n user: {\r\n id: 100,\r\n name: 'Atul Midha',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'INVITATION',\r\n metaData: {\r\n user: {\r\n id: 105,\r\n name: 'North Taylor',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n group: { id: 12, name: 'Global Health' },\r\n },\r\n date: getCustomDateTime(-90, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n {\r\n id: 4,\r\n user: {\r\n id: 105,\r\n name: 'Sara John',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n type: 'BIRTHDAY',\r\n createdAt: getCustomDateTime(-150, 'minutes', 'MMMM DD, YYYY, h:mm:ss a'),\r\n },\r\n ],\r\n siteVisitors: {\r\n title: 'Site Visitors Statistics',\r\n description: 'Lorem ipsum is dummy content Cenas in erat accumsan, hendrerit lorem vel,',\r\n countryList: [\r\n {\r\n name: 'United State',\r\n flagCode: 'us',\r\n visitors: '12,455',\r\n badgeColor: '#D72934',\r\n chartGradientColor: '#fef5f6',\r\n data: [\r\n { month: 'Jan', amount: 1000 },\r\n { month: 'Feb', amount: 850 },\r\n { month: 'Mar', amount: 1400 },\r\n { month: 'Apr', amount: 700 },\r\n { month: 'May', amount: 1100 },\r\n { month: 'Jun', amount: 900 },\r\n { month: 'Jul', amount: 1600 },\r\n { month: 'Aug', amount: 900 },\r\n { month: 'Sep', amount: 1250 },\r\n { month: 'Oct', amount: 1000 },\r\n { month: 'Nov', amount: 1400 },\r\n { month: 'Dec', amount: 1800 },\r\n ],\r\n },\r\n {\r\n name: 'France',\r\n flagCode: 'fr',\r\n visitors: '445',\r\n badgeColor: '#3F51B5',\r\n chartGradientColor: '#e8eaf5',\r\n data: [\r\n { month: 'Jan', amount: 800 },\r\n { month: 'Feb', amount: 850 },\r\n { month: 'Mar', amount: 1350 },\r\n { month: 'Apr', amount: 700 },\r\n { month: 'May', amount: 1100 },\r\n { month: 'Jun', amount: 900 },\r\n { month: 'Jul', amount: 1600 },\r\n { month: 'Aug', amount: 900 },\r\n { month: 'Sep', amount: 1250 },\r\n { month: 'Oct', amount: 1000 },\r\n { month: 'Nov', amount: 1200 },\r\n { month: 'Dec', amount: 800 },\r\n ],\r\n },\r\n {\r\n name: 'Germany',\r\n flagCode: 'gm',\r\n visitors: '36,855',\r\n badgeColor: '#FFA005',\r\n chartGradientColor: '#f8f4ed',\r\n data: [\r\n { month: 'Jan', amount: 1100 },\r\n { month: 'Feb', amount: 850 },\r\n { month: 'Mar', amount: 1400 },\r\n { month: 'Apr', amount: 800 },\r\n { month: 'May', amount: 1100 },\r\n { month: 'Jun', amount: 900 },\r\n { month: 'Jul', amount: 1200 },\r\n { month: 'Aug', amount: 900 },\r\n { month: 'Sep', amount: 1300 },\r\n { month: 'Oct', amount: 1000 },\r\n { month: 'Nov', amount: 800 },\r\n { month: 'Dec', amount: 900 },\r\n ],\r\n },\r\n {\r\n name: 'Spain',\r\n flagCode: 'es',\r\n visitors: '9,877',\r\n badgeColor: '#5D9405',\r\n chartGradientColor: '#f9fcec',\r\n data: [\r\n { month: 'Jan', amount: 600 },\r\n { month: 'Feb', amount: 850 },\r\n { month: 'Mar', amount: 1200 },\r\n { month: 'Apr', amount: 700 },\r\n { month: 'May', amount: 1300 },\r\n { month: 'Jun', amount: 900 },\r\n { month: 'Jul', amount: 1200 },\r\n { month: 'Aug', amount: 900 },\r\n { month: 'Sep', amount: 1320 },\r\n { month: 'Oct', amount: 800 },\r\n { month: 'Nov', amount: 1000 },\r\n { month: 'Dec', amount: 750 },\r\n ],\r\n },\r\n ],\r\n },\r\n};\r\n","import { getTodayDate, getYesterdayDate } from '../../@jumbo/utils/dateHelper';\r\n\r\nexport const crypto = {\r\n wallets: [\r\n { label: 'BTC', value: 74, rate: 8.75, color: '#89CB00' },\r\n { label: 'RPL', value: 18, rate: 1.23, color: '#FF8800' },\r\n { label: 'LTE', value: 8, rate: 0.71, color: '#E31D41' },\r\n ],\r\n orders: [\r\n {\r\n orderId: 1,\r\n currency: '0.24 BTC',\r\n rate: '1 BTC = $740',\r\n date: getTodayDate(),\r\n fee: '-$2.33',\r\n },\r\n {\r\n orderId: 2,\r\n currency: '0.34 RPL',\r\n rate: '1 BTC = $740',\r\n date: getYesterdayDate(),\r\n fee: '-$2.33',\r\n },\r\n {\r\n orderId: 3,\r\n currency: '0.24 BTC',\r\n rate: '1 BTC = $740',\r\n date: '22.06.2020',\r\n fee: '-$2.33',\r\n },\r\n {\r\n orderId: 4,\r\n currency: '0.22 BTC',\r\n rate: '1 BTC = $740',\r\n date: '21.06.2020',\r\n fee: '-$2.33',\r\n },\r\n {\r\n orderId: 5,\r\n currency: '0.74 LTE',\r\n rate: '1 BTC = $740',\r\n date: '20.06.2020',\r\n fee: '-$2.33',\r\n },\r\n ],\r\n cryptoNews: [\r\n {\r\n id: 1,\r\n category: 'bitcoin',\r\n isTrading: true,\r\n image: 'https://via.placeholder.com/575x480',\r\n title: 'Things to know about bitcoin',\r\n description:\r\n 'Cras tincidunt sit amet massa at accumsan. Mauris tincidunt tincidunt est, et pulvinar felis pharetra in vestibulum sed.',\r\n fullDescription:\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\" +\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\",\r\n author: { id: 1, name: 'Julia T' },\r\n views: 203,\r\n tags: ['BTC', 'Crypto', 'Trading', 'Tips', 'Cryptocurrency'],\r\n publishDate: '26 June 2020',\r\n favorite: true,\r\n },\r\n {\r\n id: 2,\r\n category: 'ripple',\r\n isTrading: true,\r\n image: 'https://via.placeholder.com/575x480',\r\n title: 'Getting started with Ripple',\r\n description:\r\n 'Cras tincidunt sit amet massa at accumsan. Mauris tincidunt tincidunt est, et pulvinar felis pharetra in vestibulum sed.',\r\n fullDescription:\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\" +\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\",\r\n author: { id: 2, name: 'John Tull' },\r\n views: 233,\r\n tags: ['BTC', 'Crypto', 'Trading', 'Tips', 'Cryptocurrency'],\r\n publishDate: '25 June 2020',\r\n favorite: false,\r\n },\r\n {\r\n id: 3,\r\n category: 'litecoin',\r\n isTrading: false,\r\n image: 'https://via.placeholder.com/575x480',\r\n title: 'Is litecoin worth buying?',\r\n description:\r\n 'Cras tincidunt sit amet massa at accumsan. Mauris tincidunt tincidunt est, et pulvinar felis pharetra in vestibulum sed.',\r\n fullDescription:\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\" +\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\",\r\n author: { id: 3, name: 'Amanda' },\r\n views: 303,\r\n tags: ['BTC', 'Crypto', 'Trading', 'Tips', 'Cryptocurrency'],\r\n publishDate: '24 June 2020',\r\n favorite: true,\r\n },\r\n {\r\n id: 4,\r\n category: 'bitcoin',\r\n isTrading: true,\r\n image: 'https://via.placeholder.com/575x480',\r\n title: 'What is bitcoin, 20 things about bitcoin.',\r\n description:\r\n 'Cras tincidunt sit amet massa at accumsan. Mauris tincidunt tincidunt est, et pulvinar felis pharetra in vestibulum sed.',\r\n fullDescription:\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\" +\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\",\r\n author: { id: 4, name: 'Shane' },\r\n views: 453,\r\n tags: ['BTC', 'Crypto', 'Trading', 'Tips', 'Cryptocurrency'],\r\n publishDate: '23 June 2020',\r\n favorite: false,\r\n },\r\n {\r\n id: 5,\r\n category: 'ripple',\r\n isTrading: false,\r\n image: 'https://via.placeholder.com/575x480',\r\n title: '10 things you must know about Ripple',\r\n description:\r\n 'Cras tincidunt sit amet massa at accumsan. Mauris tincidunt tincidunt est, et pulvinar felis pharetra in vestibulum sed.',\r\n fullDescription:\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\" +\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\",\r\n author: { id: 5, name: 'Dhruva' },\r\n views: 753,\r\n tags: ['BTC', 'Crypto', 'Trading', 'Tips', 'Cryptocurrency'],\r\n publishDate: '22 June 2020',\r\n favorite: true,\r\n },\r\n {\r\n id: 6,\r\n category: 'litecoin',\r\n isTrading: true,\r\n image: 'https://via.placeholder.com/575x480',\r\n title: 'Why litecoin can be the best cryptocurrency.',\r\n description:\r\n 'Cras tincidunt sit amet massa at accumsan. Mauris tincidunt tincidunt est, et pulvinar felis pharetra in vestibulum sed.',\r\n fullDescription:\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\" +\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\",\r\n author: { id: 6, name: 'Krishna' },\r\n views: 535,\r\n tags: ['BTC', 'Crypto', 'Trading', 'Tips', 'Cryptocurrency'],\r\n publishDate: '21 June 2020',\r\n favorite: false,\r\n },\r\n {\r\n id: 7,\r\n category: 'bitcoin',\r\n isTrading: false,\r\n image: 'https://via.placeholder.com/575x480',\r\n title: 'Bitcoin- Hottest cryptocurrency ever',\r\n description:\r\n 'Cras tincidunt sit amet massa at accumsan. Mauris tincidunt tincidunt est, et pulvinar felis pharetra in vestibulum sed.',\r\n fullDescription:\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\" +\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\",\r\n author: { id: 7, name: 'Rama' },\r\n views: 534,\r\n tags: ['BTC', 'Crypto', 'Trading', 'Tips', 'Cryptocurrency'],\r\n publishDate: '20 June 2020',\r\n favorite: true,\r\n },\r\n {\r\n id: 8,\r\n category: 'ripple',\r\n isTrading: true,\r\n image: 'https://via.placeholder.com/575x480',\r\n title: 'Price and inside details of Ripple',\r\n description:\r\n 'Cras tincidunt sit amet massa at accumsan. Mauris tincidunt tincidunt est, et pulvinar felis pharetra in vestibulum sed.',\r\n fullDescription:\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\" +\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\",\r\n author: { id: 8, name: 'Shaurya' },\r\n views: 873,\r\n tags: ['BTC', 'Crypto', 'Trading', 'Tips', 'Cryptocurrency'],\r\n publishDate: '19 June 2020',\r\n favorite: false,\r\n },\r\n {\r\n id: 9,\r\n category: 'litecoin',\r\n isTrading: true,\r\n image: 'https://via.placeholder.com/575x480',\r\n title: 'The journey of Litecoin',\r\n description:\r\n 'Cras tincidunt sit amet massa at accumsan. Mauris tincidunt tincidunt est, et pulvinar felis pharetra in vestibulum sed.',\r\n fullDescription:\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\" +\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\",\r\n author: { id: 10, name: 'Kushal' },\r\n views: 985,\r\n tags: ['BTC', 'Crypto', 'Trading', 'Tips', 'Cryptocurrency'],\r\n publishDate: '18 June 2020',\r\n favorite: true,\r\n },\r\n {\r\n id: 10,\r\n category: 'bitcoin',\r\n isTrading: false,\r\n image: 'https://via.placeholder.com/575x480',\r\n title: 'Steps to invest in Bitcoin',\r\n description:\r\n 'Cras tincidunt sit amet massa at accumsan. Mauris tincidunt tincidunt est, et pulvinar felis pharetra in vestibulum sed.',\r\n fullDescription:\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\" +\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\",\r\n author: { id: 10, name: 'Siddharth' },\r\n views: 345,\r\n tags: ['BTC', 'Crypto', 'Trading', 'Tips', 'Cryptocurrency'],\r\n publishDate: '17 June 2020',\r\n favorite: false,\r\n },\r\n {\r\n id: 11,\r\n category: 'ripple',\r\n isTrading: false,\r\n image: 'https://via.placeholder.com/575x480',\r\n title: 'Ripple - is it worth to invest in it?',\r\n description:\r\n 'Cras tincidunt sit amet massa at accumsan. Mauris tincidunt tincidunt est, et pulvinar felis pharetra in vestibulum sed.',\r\n fullDescription:\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\" +\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\",\r\n author: { id: 11, name: 'Varun' },\r\n views: 533,\r\n tags: ['BTC', 'Crypto', 'Trading', 'Tips', 'Cryptocurrency'],\r\n publishDate: '16 June 2020',\r\n favorite: true,\r\n },\r\n {\r\n id: 12,\r\n category: 'litecoin',\r\n isTrading: true,\r\n image: 'https://via.placeholder.com/575x480',\r\n title: 'Litecoin - Pros and cons of buying it',\r\n description:\r\n 'Cras tincidunt sit amet massa at accumsan. Mauris tincidunt tincidunt est, et pulvinar felis pharetra in vestibulum sed.',\r\n fullDescription:\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\" +\r\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\",\r\n author: { id: 12, name: 'Vishnu' },\r\n views: 665,\r\n tags: ['BTC', 'Crypto', 'Trading', 'Tips', 'Cryptocurrency'],\r\n publishDate: '15 June 2020',\r\n favorite: false,\r\n },\r\n ],\r\n newsCategories: [\r\n { id: 2, name: 'Bitcoin', slug: 'bitcoin' },\r\n { id: 3, name: 'Ripple', slug: 'ripple' },\r\n { id: 4, name: 'Litecoin', slug: 'litecoin' },\r\n ],\r\n revenueSummary: [\r\n { month: 'Jan', income: 500, expense: 300 },\r\n { month: 'Feb', income: 1000, expense: 600 },\r\n { month: 'Mar', income: 1500, expense: 1000 },\r\n { month: 'Apr', income: 900, expense: 400 },\r\n { month: 'May', income: 200, expense: 200 },\r\n { month: 'Jun', income: 500, expense: 1100 },\r\n { month: 'Jul', income: 800, expense: 1400 },\r\n { month: 'Aug', income: 1400, expense: 1700 },\r\n { month: 'Sep', income: 2000, expense: 2000 },\r\n { month: 'Oct', income: 1300, expense: 400 },\r\n { month: 'Nov', income: 700, expense: 700 },\r\n { month: 'Dec', income: 1300, expense: 2100 },\r\n ],\r\n payments: [\r\n {\r\n id: '13',\r\n user: {\r\n id: 1,\r\n avatar: 'https://via.placeholder.com/150x150',\r\n name: 'Fannie Hudson',\r\n position: 'Sr. IOS Developer',\r\n },\r\n lastPaymentDate: 'June 26, 2020',\r\n totalAmount: 15000,\r\n pendingAmount: 5000,\r\n rate: '$15/Hr',\r\n workingHour: 150,\r\n },\r\n {\r\n id: '234',\r\n user: {\r\n id: 14,\r\n avatar: 'https://via.placeholder.com/150x150',\r\n name: 'Dhruva Sharma',\r\n position: 'Sr. React Developer',\r\n },\r\n lastPaymentDate: 'June 24, 2020',\r\n totalAmount: 45444,\r\n pendingAmount: 3433,\r\n rate: '$15/Hr',\r\n workingHour: 235,\r\n },\r\n {\r\n id: '6545',\r\n user: {\r\n id: 14,\r\n avatar: 'https://via.placeholder.com/150x150',\r\n name: 'Siddharth Gautam',\r\n position: 'Sr. IOS Developer',\r\n },\r\n lastPaymentDate: 'June 20, 2020',\r\n totalAmount: 56654,\r\n pendingAmount: 3456,\r\n rate: '$15/Hr',\r\n workingHour: 100,\r\n },\r\n {\r\n id: '6745',\r\n user: {\r\n id: 1,\r\n avatar: 'https://via.placeholder.com/150x150',\r\n name: 'Vishnu Sharma',\r\n position: 'Java Developer',\r\n },\r\n lastPaymentDate: 'June 18, 2020',\r\n totalAmount: 87655,\r\n pendingAmount: 34657,\r\n rate: '$15/Hr',\r\n workingHour: 436,\r\n },\r\n {\r\n id: '8754',\r\n user: {\r\n id: 1,\r\n avatar: 'https://via.placeholder.com/150x150',\r\n name: 'Rahul Sharma',\r\n position: 'Frontend Developer',\r\n },\r\n lastPaymentDate: 'June 16, 2020',\r\n totalAmount: 43323,\r\n pendingAmount: 23543,\r\n rate: '$15/Hr',\r\n workingHour: 231,\r\n },\r\n {\r\n id: '7556',\r\n user: {\r\n id: 1,\r\n avatar: 'https://via.placeholder.com/150x150',\r\n name: 'Mukul Kumar',\r\n position: 'Python Developer',\r\n },\r\n lastPaymentDate: 'June 15, 2020',\r\n totalAmount: 54332,\r\n pendingAmount: 4323,\r\n rate: '$15/Hr',\r\n workingHour: 234,\r\n },\r\n ],\r\n bitcoin: [\r\n { month: 'Jan', price: 200 },\r\n { month: 'Feb', price: 300 },\r\n { month: 'Mar', price: 550 },\r\n { month: 'Apr', price: 500 },\r\n { month: 'May', price: 700 },\r\n { month: 'Jun', price: 450 },\r\n { month: 'Jul', price: 770 },\r\n { month: 'Aug', price: 900 },\r\n ],\r\n etherium: [\r\n { month: 'Jan', price: 450 },\r\n { month: 'Feb', price: 300 },\r\n { month: 'Mar', price: 1350 },\r\n { month: 'Apr', price: 275 },\r\n { month: 'May', price: 500 },\r\n { month: 'Jun', price: 250 },\r\n { month: 'Jul', price: 900 },\r\n { month: 'Aug', price: 550 },\r\n ],\r\n litCoin: [\r\n { month: 'Jan', price: 1500 },\r\n { month: '', price: 400 },\r\n { month: 'Feb', price: 2000 },\r\n { month: 'Mar', price: 1200 },\r\n { month: 'Apr', price: 2200 },\r\n { month: 'May', price: 2600 },\r\n { month: 'Jun', price: 4300 },\r\n { month: 'July', price: 2900 },\r\n { month: 'Aug', price: 3800 },\r\n { month: 'Sep', price: 1500 },\r\n ],\r\n ripple: [\r\n { month: 'Jan', price: 1500 },\r\n { month: '', price: 400 },\r\n { month: 'Feb', price: 2000 },\r\n { month: 'Mar', price: 1200 },\r\n { month: 'Apr', price: 2200 },\r\n { month: 'May', price: 2600 },\r\n { month: 'Jun', price: 4300 },\r\n { month: 'July', price: 2900 },\r\n { month: 'Aug', price: 3800 },\r\n { month: 'Sep', price: 1500 },\r\n ],\r\n growth: [\r\n { month: 'Jan', price: 100 },\r\n { month: 'Feb', price: 4000 },\r\n { month: 'Mar', price: 1200 },\r\n { month: 'Apr', price: 3000 },\r\n { month: 'May', price: 6000 },\r\n ],\r\n};\r\n","import Box from '@material-ui/core/Box';\r\nimport React from 'react';\r\nimport { getCustomDateTime } from '../../@jumbo/utils/dateHelper';\r\n\r\nexport const statisticsGraphData = [\r\n { month: 'Jan', price: 200 },\r\n { month: 'Feb', price: 300 },\r\n { month: 'Mar', price: 550 },\r\n { month: 'Apr', price: 500 },\r\n { month: 'May', price: 700 },\r\n { month: 'Jun', price: 450 },\r\n { month: 'Jul', price: 770 },\r\n { month: 'Aug', price: 900 },\r\n];\r\n\r\nexport const dealsAnalyticsData = [\r\n { month: 'Jan', queries: 400, deals: 400 },\r\n { month: 'Feb', queries: 500, deals: 600 },\r\n { month: 'Mar', queries: 400, deals: 300 },\r\n { month: 'Apr', queries: 350, deals: 200 },\r\n { month: 'May', queries: 700, deals: 700 },\r\n { month: 'Jun', queries: 100, deals: 600 },\r\n { month: 'Jul', queries: 500, deals: 50 },\r\n { month: 'Aug', queries: 350, deals: 550 },\r\n { month: 'Sep', queries: 300, deals: 200 },\r\n { month: 'Oct', queries: 200, deals: 500 },\r\n { month: 'Nov', queries: 200, deals: 600 },\r\n { month: 'Dec', queries: 200, deals: 100 },\r\n];\r\n\r\nexport const popularAgents = [\r\n {\r\n id: 1,\r\n name: 'Albert Hall',\r\n deals: 23,\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n rating: 3.5,\r\n profileCompleted: 10,\r\n },\r\n {\r\n id: 2,\r\n name: 'John Hall',\r\n deals: 20,\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n rating: 4.5,\r\n profileCompleted: 10,\r\n },\r\n {\r\n id: 3,\r\n name: 'Jackson Hall',\r\n deals: 21,\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n rating: 3.5,\r\n profileCompleted: 10,\r\n },\r\n {\r\n id: 4,\r\n name: 'Jonty Hall',\r\n deals: 22,\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n rating: 4.5,\r\n profileCompleted: 10,\r\n },\r\n {\r\n id: 5,\r\n name: 'Jonathan Hall',\r\n deals: 23,\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n rating: 3.5,\r\n profileCompleted: 10,\r\n },\r\n {\r\n id: 6,\r\n name: 'Shane Hall',\r\n deals: 24,\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n rating: 4.5,\r\n profileCompleted: 10,\r\n },\r\n {\r\n id: 7,\r\n name: 'Lisa Hall',\r\n deals: 25,\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n rating: 3.5,\r\n profileCompleted: 10,\r\n },\r\n {\r\n id: 8,\r\n name: 'Cheeni Hall',\r\n deals: 26,\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n rating: 4.5,\r\n profileCompleted: 10,\r\n },\r\n {\r\n id: 9,\r\n name: 'Chilbram Hall',\r\n deals: 27,\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n rating: 3.5,\r\n profileCompleted: 10,\r\n },\r\n {\r\n id: 10,\r\n name: 'Danny Hall',\r\n deals: 83,\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n rating: 4.5,\r\n profileCompleted: 10,\r\n },\r\n];\r\n\r\nexport const propertyTabCategories = [\r\n { name: 'New Jersey', slug: 'new_jersey' },\r\n { name: 'Colorado', slug: 'colorado' },\r\n { name: 'Albama', slug: 'albama' },\r\n];\r\n\r\nexport const propertiesList = [\r\n {\r\n id: 1,\r\n images: [\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 1',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 2',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 3',\r\n },\r\n ],\r\n title: 'Luxury family home at beach side',\r\n address: '2972, Washington Road, New Jersey',\r\n bedrooms: 3,\r\n bathrooms: 3,\r\n area: '1400 m2',\r\n owner: { id: 1, name: 'John Nash' },\r\n publishedDate: 'June 26, 2020',\r\n availability: 'sale',\r\n isTrending: true,\r\n price: '$670,500',\r\n pricePerSqFt: '$587/sqft',\r\n category: 'new_jersey',\r\n },\r\n {\r\n id: 2,\r\n images: [\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 1',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 2',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 3',\r\n },\r\n ],\r\n title: 'Sunset view Apartment in Colarado',\r\n address: '2972, Washington Road, New Jersey',\r\n bedrooms: 3,\r\n bathrooms: 3,\r\n area: '1400 m2',\r\n owner: { id: 1, name: 'John Nash' },\r\n publishedDate: 'June 25, 2020',\r\n availability: 'rent',\r\n isTrending: false,\r\n price: '$670,500',\r\n pricePerSqFt: '$587/sqft',\r\n category: 'colorado',\r\n },\r\n {\r\n id: 3,\r\n images: [\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 1',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 2',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 3',\r\n },\r\n ],\r\n title: 'Best property in Albama',\r\n address: '2972, Washington Road, New Jersey',\r\n bedrooms: 3,\r\n bathrooms: 3,\r\n area: '1400 m2',\r\n owner: { id: 1, name: 'John Nash' },\r\n publishedDate: 'June 23, 2020',\r\n availability: 'rent',\r\n isTrending: false,\r\n price: '$670,500',\r\n pricePerSqFt: '$587/sqft',\r\n category: 'albama',\r\n },\r\n {\r\n id: 4,\r\n images: [\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 1',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 2',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 3',\r\n },\r\n ],\r\n title: 'Best house deal in New jersey',\r\n address: '2972, Washington Road, New Jersey',\r\n bedrooms: 3,\r\n bathrooms: 3,\r\n area: '1400 m2',\r\n owner: { id: 1, name: 'John Nash' },\r\n publishedDate: 'June 24, 2020',\r\n availability: 'sale',\r\n isTrending: false,\r\n price: '$670,500',\r\n pricePerSqFt: '$587/sqft',\r\n category: 'new_jersey',\r\n },\r\n {\r\n id: 5,\r\n images: [\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 1',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 2',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 3',\r\n },\r\n ],\r\n title: 'Luxury apartment in Colarado',\r\n address: '2972, Washington Road, New Jersey',\r\n bedrooms: 3,\r\n bathrooms: 3,\r\n area: '1400 m2',\r\n owner: { id: 1, name: 'John Nash' },\r\n publishedDate: 'June 28, 2020',\r\n availability: 'rent',\r\n isTrending: true,\r\n price: '$670,500',\r\n pricePerSqFt: '$587/sqft',\r\n category: 'colorado',\r\n },\r\n {\r\n id: 6,\r\n images: [\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 1',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 2',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 3',\r\n },\r\n ],\r\n title: 'Plot in Albama',\r\n address: '2972, Washington Road, New Jersey',\r\n bedrooms: 3,\r\n bathrooms: 3,\r\n area: '1400 m2',\r\n owner: { id: 1, name: 'John Nash' },\r\n publishedDate: 'June 29, 2020',\r\n availability: 'sale',\r\n isTrending: true,\r\n price: '$670,500',\r\n pricePerSqFt: '$587/sqft',\r\n category: 'albama',\r\n },\r\n {\r\n id: 7,\r\n images: [\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 1',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 2',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 3',\r\n },\r\n ],\r\n title: 'House in New jersey',\r\n address: '2972, Washington Road, New Jersey',\r\n bedrooms: 3,\r\n bathrooms: 3,\r\n area: '1400 m2',\r\n owner: { id: 1, name: 'John Nash' },\r\n publishedDate: 'June 24, 2020',\r\n availability: 'sale',\r\n isTrending: false,\r\n price: '$670,500',\r\n pricePerSqFt: '$587/sqft',\r\n category: 'new_jersey',\r\n },\r\n {\r\n id: 8,\r\n images: [\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 1',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 2',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 3',\r\n },\r\n ],\r\n title: 'Flat in Colarado',\r\n address: '2972, Washington Road, New Jersey',\r\n bedrooms: 3,\r\n bathrooms: 3,\r\n area: '1400 m2',\r\n owner: { id: 1, name: 'John Nash' },\r\n publishedDate: 'June 20, 2020',\r\n availability: 'rent',\r\n isTrending: true,\r\n price: '$670,500',\r\n pricePerSqFt: '$587/sqft',\r\n category: 'colorado',\r\n },\r\n {\r\n id: 9,\r\n images: [\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 1',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 2',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 3',\r\n },\r\n ],\r\n title: '3 BHK house in Albama',\r\n address: '2972, Washington Road, New Jersey',\r\n bedrooms: 3,\r\n bathrooms: 3,\r\n area: '1400 m2',\r\n owner: { id: 1, name: 'John Nash' },\r\n publishedDate: 'June 28, 2020',\r\n availability: 'sale',\r\n isTrending: false,\r\n price: '$670,500',\r\n pricePerSqFt: '$587/sqft',\r\n category: 'albama',\r\n },\r\n {\r\n id: 10,\r\n images: [\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 1',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 2',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 3',\r\n },\r\n ],\r\n title: 'Best house for family in New Jersey',\r\n address: '2972, Washington Road, New Jersey',\r\n bedrooms: 3,\r\n bathrooms: 3,\r\n area: '1400 m2',\r\n owner: { id: 1, name: 'John Nash' },\r\n publishedDate: 'June 26, 2020',\r\n availability: 'rent',\r\n isTrending: true,\r\n price: '$670,500',\r\n pricePerSqFt: '$587/sqft',\r\n category: 'new_jersey',\r\n },\r\n {\r\n id: 11,\r\n images: [\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 1',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 2',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 3',\r\n },\r\n ],\r\n title: 'Villa in Colarado',\r\n address: '2972, Washington Road, New Jersey',\r\n bedrooms: 3,\r\n bathrooms: 3,\r\n area: '1400 m2',\r\n owner: { id: 1, name: 'John Nash' },\r\n publishedDate: 'June 16, 2020',\r\n availability: 'rent',\r\n isTrending: true,\r\n price: '$670,500',\r\n pricePerSqFt: '$587/sqft',\r\n category: 'colorado',\r\n },\r\n {\r\n id: 12,\r\n images: [\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 1',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 2',\r\n },\r\n {\r\n image: 'https://via.placeholder.com/640x420',\r\n title: 'image 3',\r\n },\r\n ],\r\n title: 'Sunrise view apartment in Albama',\r\n address: '2972, Washington Road, New Jersey',\r\n bedrooms: 3,\r\n bathrooms: 3,\r\n area: '1400 m2',\r\n owner: { id: 1, name: 'John Nash' },\r\n publishedDate: 'June 28, 2020',\r\n availability: 'sale',\r\n isTrending: false,\r\n price: '$670,500',\r\n pricePerSqFt: '$587/sqft',\r\n category: 'albama',\r\n },\r\n];\r\n\r\nexport const recentActivities = [\r\n {\r\n id: 1,\r\n date: getCustomDateTime(0, 'days', 'MMM DD, YYYY'),\r\n user: {\r\n id: 12,\r\n name: 'Alex Dolgove',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n mediaList: [\r\n {\r\n id: 123,\r\n name: 'Media1',\r\n mediaUrl: 'https://via.placeholder.com/640x420',\r\n },\r\n {\r\n id: 124,\r\n name: 'Media2',\r\n mediaUrl: 'https://via.placeholder.com/640x420',\r\n },\r\n {\r\n id: 125,\r\n name: 'Media3',\r\n mediaUrl: 'https://via.placeholder.com/640x420',\r\n },\r\n ],\r\n content: [\r\n \r\n Alex Dolgove\r\n ,\r\n 'left a 5 star review on Albama’s House',\r\n ],\r\n },\r\n {\r\n id: 2,\r\n date: getCustomDateTime(0, 'days', 'MMM DD, YYYY'),\r\n user: {\r\n id: 12,\r\n name: 'Kailasha',\r\n profilePic: '',\r\n },\r\n mediaList: [],\r\n content: [\r\n \r\n Kailasha\r\n ,\r\n 'is looking for a house in New Jersey, USA',\r\n ],\r\n },\r\n {\r\n id: 3,\r\n date: getCustomDateTime(0, 'days', 'MMM DD, YYYY'),\r\n user: {\r\n id: 12,\r\n name: 'Chelsea Johns',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n mediaList: [],\r\n content: [\r\n 'Agent ',\r\n \r\n Chelsea Johns\r\n ,\r\n 'has added 7 new photos to the property ',\r\n \r\n Albama's house\r\n ,\r\n ],\r\n },\r\n {\r\n id: 4,\r\n date: getCustomDateTime(-1, 'days', 'MMM DD, YYYY'),\r\n user: {\r\n id: 12,\r\n name: 'Domnic Brown',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n mediaList: [\r\n {\r\n id: 123,\r\n name: 'Media1',\r\n mediaUrl: 'https://via.placeholder.com/640x420',\r\n },\r\n {\r\n id: 124,\r\n name: 'Media1',\r\n mediaUrl: 'https://via.placeholder.com/640x420',\r\n },\r\n {\r\n id: 125,\r\n name: 'Media1',\r\n mediaUrl: 'https://via.placeholder.com/640x420',\r\n },\r\n ],\r\n content: [\r\n 'Welcome to a new agent ',\r\n \r\n Domnic Brown\r\n ,\r\n 'in the company.',\r\n ],\r\n },\r\n {\r\n id: 5,\r\n date: getCustomDateTime(-1, 'days', 'MMM DD, YYYY'),\r\n user: {\r\n id: 12,\r\n name: 'Michael Dogov',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n mediaList: [],\r\n content: [\r\n \r\n Michael Dogov\r\n ,\r\n 'is looking for an office space in Colarado, USA.',\r\n ],\r\n },\r\n {\r\n id: 6,\r\n date: getCustomDateTime(-2, 'days', 'MMM DD, YYYY'),\r\n user: {\r\n id: 12,\r\n name: 'Domnic Harris',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n mediaList: [],\r\n content: [\r\n \r\n Domnic Harris\r\n ,\r\n \"left a 5 star rating on Albama's property.\",\r\n ],\r\n },\r\n {\r\n id: 7,\r\n date: getCustomDateTime(-2, 'days', 'MMM DD, YYYY'),\r\n user: {\r\n id: 12,\r\n name: 'Garry Sobars',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n mediaList: [],\r\n content: [\r\n ' Callback request from ',\r\n \r\n Garry Sobars\r\n ,\r\n 'for the property ',\r\n \r\n Dmitri house\r\n ,\r\n ],\r\n },\r\n {\r\n id: 8,\r\n date: getCustomDateTime(0, 'days', 'MMM DD, YYYY'),\r\n user: {\r\n id: 12,\r\n name: 'Guptil Sharma',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n mediaList: [\r\n {\r\n id: 123,\r\n name: 'Media1',\r\n mediaUrl: 'https://via.placeholder.com/122x122',\r\n },\r\n {\r\n id: 124,\r\n name: 'Media2',\r\n mediaUrl: 'https://via.placeholder.com/122x122',\r\n },\r\n {\r\n id: 125,\r\n name: 'Media3',\r\n mediaUrl: 'https://via.placeholder.com/122x122',\r\n },\r\n ],\r\n content: [\r\n \r\n Guptil Sharma\r\n ,\r\n \"left a 5 star rating on Aloboma's house\",\r\n ],\r\n },\r\n {\r\n id: 9,\r\n date: getCustomDateTime(0, 'days', 'MMM DD, YYYY'),\r\n user: {\r\n id: 12,\r\n name: 'Jeson Born',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n mediaList: [],\r\n content: [\r\n \r\n Jeson Born\r\n ,\r\n 'is looking for a house in New jersey, USA.',\r\n ],\r\n },\r\n {\r\n id: 10,\r\n date: getCustomDateTime(0, 'days', 'MMM DD, YYYY'),\r\n user: {\r\n id: 12,\r\n name: 'Jimmy Jo',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n mediaList: [],\r\n content: [\r\n 'Agent ',\r\n \r\n Jimmy Jo\r\n ,\r\n 'has added 7 new photos to the property ',\r\n \r\n Albama's house\r\n ,\r\n ],\r\n },\r\n {\r\n id: 11,\r\n date: getCustomDateTime(-1, 'days', 'MMM DD, YYYY'),\r\n user: {\r\n id: 12,\r\n name: 'Jonathan Lee',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n mediaList: [\r\n {\r\n id: 123,\r\n name: 'Media1',\r\n mediaUrl: 'https://via.placeholder.com/122x122',\r\n },\r\n {\r\n id: 124,\r\n name: 'Media1',\r\n mediaUrl: 'https://via.placeholder.com/122x122',\r\n },\r\n {\r\n id: 125,\r\n name: 'Media1',\r\n mediaUrl: 'https://via.placeholder.com/122x122',\r\n },\r\n ],\r\n content: [\r\n 'Welcome to a new agent ',\r\n \r\n Jonathan Lee\r\n ,\r\n 'in the company.',\r\n ],\r\n },\r\n {\r\n id: 12,\r\n date: getCustomDateTime(-1, 'days', 'MMM DD, YYYY'),\r\n user: {\r\n id: 12,\r\n name: 'Joshua',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n mediaList: [],\r\n content: [\r\n \r\n Joshua\r\n ,\r\n 'is looking for an office space in Colarado, USA.',\r\n ],\r\n },\r\n {\r\n id: 13,\r\n date: getCustomDateTime(-2, 'days', 'MMM DD, YYYY'),\r\n user: {\r\n id: 12,\r\n name: 'Stella Johnson',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n mediaList: [],\r\n content: [\r\n \r\n Stella Johnson\r\n ,\r\n \"left a 5 star rating on Albama's property.\",\r\n ],\r\n },\r\n];\r\n\r\nexport const newCustomers = [\r\n {\r\n id: 1,\r\n name: 'Albert Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 2,\r\n name: 'John Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n { id: 3, name: 'Jackson Hall', profilePic: '' },\r\n {\r\n id: 4,\r\n name: 'Jonty Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 5,\r\n name: 'Jonathan Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 6,\r\n name: 'Shane Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 7,\r\n name: 'Lisa Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n { id: 8, name: 'Cheeni Hall', profilePic: '' },\r\n {\r\n id: 9,\r\n name: 'Chilbram Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 10,\r\n name: 'Danny Hall',\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n },\r\n];\r\n","import React from 'react';\r\nimport { getTodayDate, getYesterdayDate } from '../../@jumbo/utils/dateHelper';\r\nimport {\r\n EventAvailable,\r\n DateRange,\r\n LocalAtm,\r\n EventNote,\r\n RotateLeft,\r\n Cake,\r\n Error,\r\n Warning,\r\n Replay,\r\n Subscriptions,\r\n Share,\r\n TouchApp,\r\n} from '@material-ui/icons';\r\n\r\nexport const eCommerce = {\r\n newOrders: {\r\n title: 'New Orders',\r\n desc: '32 new this Month',\r\n orderList: [\r\n {\r\n id: 21,\r\n name: 'Julia Robert',\r\n email: '@julia.robert',\r\n orders: 3,\r\n status: 'rejected',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 22,\r\n name: 'Joe Lee',\r\n email: '@joe.lee',\r\n orders: 3,\r\n status: 'pending',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 23,\r\n name: 'Chang Lee',\r\n email: '@chang.lee',\r\n orders: 3,\r\n status: 'paid',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 24,\r\n name: 'Mickey Arthur',\r\n email: '@mickey.arthur',\r\n orders: 3,\r\n status: 'progress',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n {\r\n id: 25,\r\n name: 'Shane Watson',\r\n email: '@shane.watson',\r\n orders: 3,\r\n status: 'completed',\r\n profile_pic: 'https://via.placeholder.com/150x150',\r\n },\r\n ],\r\n },\r\n saleHistory: [\r\n { name: 'J', amt: 1400 },\r\n { name: 'F', amt: 2210 },\r\n { name: 'M', amt: 1000 },\r\n { name: 'A', amt: 2000 },\r\n { name: 'M', amt: 1400 },\r\n { name: 'J', amt: 2300 },\r\n { name: 'J', amt: 500 },\r\n { name: 'A', amt: 2000 },\r\n { name: 'S', amt: 1500 },\r\n { name: 'O', amt: 1000 },\r\n { name: 'N', amt: 2000 },\r\n { name: 'D', amt: 500 },\r\n { name: 'M', amt: 1000 },\r\n { name: 'A', amt: 2000 },\r\n { name: 'M', amt: 1400 },\r\n ],\r\n\r\n yearlyProfit: {\r\n title: 'Yearly Profit',\r\n subTitle: '$125K +',\r\n desc: 'Post 9 month data',\r\n chartData: [100, 300],\r\n },\r\n salesStatistic: {\r\n title: 'Sales Statistic',\r\n statisticList: [\r\n {\r\n icon: \r\n \r\n \r\n );\r\n};\r\n\r\nexport default YearlySalesReport;\r\n","import React, { useEffect, useState } from 'react';\r\nimport GridContainer from '../../../@jumbo/components/GridContainer';\r\nimport PageContainer from '../../../@jumbo/components/PageComponents/layouts/PageContainer';\r\nimport IntlMessages from '../../../@jumbo/utils/IntlMessages';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport IdeasWidget from '../../Metrics/Classic/IdeasWidget';\r\nimport YearlySalesReport from '../../YearlySalesReport';\r\nimport AssignmentIcon from '@mui/icons-material/Assignment';\r\n//icons\r\nimport WbSunnyIcon from '@material-ui/icons/WbSunny';\r\nimport Money from '@material-ui/icons/Money';\r\nimport ReceiptIcon from '@material-ui/icons/Receipt';\r\nimport EuroIcon from '@material-ui/icons/Euro';\r\nimport {\r\n FETCH_ERROR,\r\n FETCH_START,\r\n FETCH_SUCCESS,\r\n // INIT_URL,\r\n // SIGNOUT_USER_SUCCESS,\r\n // USER_DATA,\r\n // USER_TOKEN_SET,\r\n} from '../constants/ActionTypes';\r\nimport axios from '../util/Api';\r\nimport authHeader from '../../../services/auth/jwt/auth-header';\r\n\r\n//react redux\r\nimport { useDispatch } from 'react-redux';\r\nimport customAxios from '../util/Api';\r\nimport PermContactCalendarIcon from '@mui/icons-material/PermContactCalendar';\r\nimport AddTaskIcon from '@mui/icons-material/AddTask';\r\n\r\nconst breadcrumbs = [\r\n { label: \r\n \r\n \r\n \r\n {data.length > 0\r\n ? data.map((item, index) => (\r\n \r\n \r\n ))\r\n : null}\r\n\r\n \r\n \r\n\r\n {/* \r\n \r\n\r\n \r\n */}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default DashboardPage;\r\n","import React from 'react';\r\nimport { Breadcrumb, BreadcrumbItem } from 'reactstrap';\r\n\r\nconst getDisplayString = sub => {\r\n const arr = sub.split('-');\r\n if (arr.length > 1) {\r\n return arr[0].charAt(0).toUpperCase() + arr[0].slice(1) + ' ' + arr[1].charAt(0).toUpperCase() + arr[1].slice(1);\r\n } else {\r\n return sub.charAt(0).toUpperCase() + sub.slice(1);\r\n }\r\n};\r\nconst getUrlString = (path, sub, index) => {\r\n if (index === 0) {\r\n return '/';\r\n } else {\r\n return '/' + path.split(sub)[0] + sub;\r\n }\r\n};\r\n\r\nconst ContainerHeader = ({ title, match }) => {\r\n const path = match.path.substr(1);\r\n const subPath = path.split('/');\r\n return (\r\n \r\n
\r\n {title}\r\n \r\n\r\n \r\n {subPath.map((sub, index) => {\r\n return (\r\n \r\n {getDisplayString(sub)}\r\n \r\n );\r\n })}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ContainerHeader;\r\n","import React from 'react';\r\nimport {FormattedMessage, injectIntl} from 'react-intl';\r\n\r\nconst InjectMassage = props => \r\n \r\n {details.length === 0 ? \r\n × \r\n \r\n \r\n \r\n \r\n {errors.apiError && {errors.apiError?.message}
}\r\n \r\n
\r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
\r\n \r\n \r\n {details.length === 0 ? \r\n Cancel \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default CreateTeam;\r\n","import React from 'react';\r\n\r\nimport Snackbar from '@mui/material/Snackbar';\r\n\r\nimport MuiAlert from '@mui/material/Alert';\r\nimport { Slide } from '@material-ui/core';\r\nconst Alert = React.forwardRef(function Alert(props, ref) {\r\n return \r\n \r\n User {inviteEmail} Invited Successfully\r\n \r\n \r\n );\r\n};\r\n\r\nexport default Tostify;\r\n","import React, { useState, useRef, useEffect } from 'react';\r\n\r\nexport default function Dropdown({\r\n addWindow,\r\n options,\r\n defaultVal,\r\n id,\r\n label,\r\n prompt,\r\n value,\r\n onChange,\r\n onClick,\r\n placeholder,\r\n handleCreate,\r\n}) {\r\n const [open, setOpen] = useState(false);\r\n const [defaultText, setDefaultText] = useState(defaultVal ? defaultVal : '');\r\n const [query, setQuery] = useState('');\r\n const [newProduct, setNewProduct] = useState('');\r\n const ref = useRef(null);\r\n const refAddInput = useRef(null);\r\n\r\n useEffect(() => {\r\n ['click', 'touchend'].forEach(e => {\r\n document.addEventListener(e, toggle);\r\n });\r\n return () => {\r\n ['click', 'touchend'].forEach(e => {\r\n document.removeEventListener(e, toggle);\r\n });\r\n };\r\n }, []);\r\n\r\n function toggle(e) {\r\n // console.dir(e.target, ref.current);\r\n setOpen((e && e.target === ref.current) || (e && e.target === refAddInput.current));\r\n }\r\n\r\n function filter(options) {\r\n return options.filter(option => option[label].indexOf(query) > -1);\r\n }\r\n\r\n function displayValue() {\r\n if (query.length > 0) return query;\r\n if (value) return value[label];\r\n if (defaultText) return defaultText[label];\r\n return '';\r\n }\r\n return (\r\n \r\n
setOpen(prev => !prev)}\r\n >\r\n \r\n {\r\n setQuery(e.target.value);\r\n // onChange(null);\r\n }}\r\n onClick={\r\n // () => setOpen(prev => !prev)\r\n toggle\r\n }\r\n onTouchEnd={toggle}\r\n />\r\n
\r\n
\r\n \r\n {filter(options).map(option => (\r\n
{\r\n setQuery('');\r\n onChange(option);\r\n setOpen(false);\r\n }}\r\n onTouchEnd={() => {\r\n setQuery('');\r\n onChange(option);\r\n setOpen(false);\r\n }}>\r\n {option[label]}\r\n \r\n setNewProduct(e.target.value)}\r\n />\r\n {\r\n handleCreate(newProduct);\r\n setNewProduct('');\r\n }}\r\n disabled={newProduct.length === 0}>\r\n Invite\r\n \r\n
\r\n )}\r\n \r\n );\r\n}\r\n","export const getEmailBody = (emailList, type, Team, TeamName = '') => {\r\n let bodyParms = {\r\n mainHeading: '',\r\n madeBy: '',\r\n madeOn: '',\r\n mainMessage: '',\r\n };\r\n console.log(emailList, type, 'email function');\r\n\r\n switch (type) {\r\n case 'delete':\r\n bodyParms.mainHeading = `Team Member removed from the ${Team} team - ${TeamName}`;\r\n bodyParms.madeBy = emailList[0];\r\n bodyParms.madeOn = new Date().toISOString();\r\n bodyParms.mainMessage = `${emailList[emailList.length - 1]} has been removed from the ${Team} team - ${TeamName}`;\r\n break;\r\n case 'add':\r\n bodyParms.mainHeading = `New team member added in the ${Team} Team - ${TeamName}`;\r\n bodyParms.madeBy = emailList[0];\r\n bodyParms.madeOn = new Date().toISOString();\r\n bodyParms.mainMessage = `${emailList[emailList.length - 1]} has been Added in ${Team} team - ${TeamName}`;\r\n break;\r\n case 'leave':\r\n bodyParms.mainHeading = `Team member leaves the ${Team} team - ${TeamName}`;\r\n bodyParms.madeBy = emailList[emailList.length - 1];\r\n bodyParms.madeOn = new Date().toISOString();\r\n bodyParms.mainMessage = `${emailList[emailList.length - 1]} has left ${Team} team - ${TeamName}`;\r\n break;\r\n default:\r\n bodyParms.mainHeading = `General mail `;\r\n bodyParms.madeBy = ``;\r\n bodyParms.madeOn = new Date().toISOString();\r\n bodyParms.mainMessage = `General mail`;\r\n }\r\n\r\n let emailBody = `\r\n \r\n Email template \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Focus247 \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n ${`\r\n ${bodyParms.mainHeading} \r\n \r\n
Updated By : ${\r\n bodyParms.madeBy\r\n }
\r\n
\r\n
Updated On : ${bodyParms.madeOn.slice(\r\n 0,\r\n 10,\r\n )}
\r\n
\r\n
Update Message : ${\r\n bodyParms.mainMessage\r\n }
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n Manage Team\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n );\r\n};\r\n\r\nexport default TeamDetailsDrawer;\r\n","import React from 'react';\r\nimport Dialog from '@mui/material/Dialog';\r\nimport DialogActions from '@mui/material/DialogActions';\r\nimport DialogContent from '@mui/material/DialogContent';\r\nimport DialogContentText from '@mui/material/DialogContentText';\r\nimport DialogTitle from '@mui/material/DialogTitle';\r\nimport { Button } from '@mui/material';\r\nconst ConfirmationModal = props => {\r\n const { isModalOpen, handleSave, handleClose, modalTitle, modalMainText, hideCloseBtn, cancelBtnTxt, saveBtnText } = {\r\n ...props.confirmationObj,\r\n };\r\n\r\n return (\r\n \r\n {/* //Subscribe */}\r\n\r\n {modalTitle} \r\n \r\n {modalMainText} \r\n \r\n\r\n \r\n \r\n {cancelBtnTxt || 'Cancel'}\r\n \r\n \r\n {saveBtnText || 'Ok'}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ConfirmationModal;\r\n","import * as React from 'react';\r\nimport Skeleton from '@mui/material/Skeleton';\r\nimport Stack from '@mui/material/Stack';\r\n\r\nexport default function AvatarLoader() {\r\n return (\r\n \r\n {/* For variant=\"text\", adjust the height via font-size */}\r\n\r\n {/* For other variants, adjust the size with `width` and `height` */}\r\n \r\n
\r\n \r\n );\r\n}\r\n","/**\r\n * Version 2.0\r\n * Vikas W\r\n * 19.05.2022\r\n * -\r\n * This component is the page where the invoices are shown\r\n */\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport ContainerHeader from '../../components/ContainerHeader/index';\r\nimport IntlMessages from '../../util/IntlMessages';\r\nimport { useDispatch } from 'react-redux';\r\nimport CreateTeam from './CreateTeam';\r\nimport {\r\n FETCH_ERROR,\r\n FETCH_START,\r\n FETCH_SUCCESS,\r\n // INIT_URL,\r\n // SIGNOUT_USER_SUCCESS,\r\n // USER_DATA,\r\n // USER_TOKEN_SET,\r\n} from '../../constants/ActionTypes';\r\nimport customAxios from '../../util/Api';\r\nimport authHeader from '../../../../services/auth/jwt/auth-header';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\n\r\n/* Material Tables */\r\nimport DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport Button from '@material-ui/core/Button';\r\nimport PropTypes from 'prop-types';\r\nimport { lighten, makeStyles } from '@material-ui/core/styles';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TablePagination from '@material-ui/core/TablePagination';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport LogoutIcon from '@mui/icons-material/Logout';\r\n\r\nimport { Box } from '@material-ui/core';\r\n\r\nimport MoreHorizIcon from '@material-ui/icons/MoreHoriz';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport Menu from '@material-ui/core/Menu';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport TeamDetailsDrawer from './TeamDetailsDrawer';\r\n\r\nimport Avatar from '@mui/material/Avatar';\r\nimport AvatarGroup from '@mui/material/AvatarGroup';\r\n\r\nimport InputBase from '@mui/material/InputBase';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { styled, alpha } from '@mui/material/styles';\r\nimport ConfirmationModal from '../TaskmanagementPage/ConfirmationModal';\r\nimport AvatarLoader from 'routes/Pages/components/loaders/AvatarLoader';\r\nimport { getEmailBody } from 'routes/Pages/components/emailBody/emailBody';\r\n\r\nfunction descendingComparator(a, b, orderBy) {\r\n if (b[orderBy] < a[orderBy]) {\r\n return -1;\r\n }\r\n if (b[orderBy] > a[orderBy]) {\r\n return 1;\r\n }\r\n return 0;\r\n}\r\n\r\nfunction getComparator(order, orderBy) {\r\n return order === 'desc' ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);\r\n}\r\n\r\nfunction stableSort(array, comparator) {\r\n const stabilizedThis = array.map((el, index) => [el, index]);\r\n stabilizedThis.sort((a, b) => {\r\n const order = comparator(a[0], b[0]);\r\n if (order !== 0) return order;\r\n return a[1] - b[1];\r\n });\r\n return stabilizedThis.map(el => el[0]);\r\n}\r\n\r\nconst headCells = [\r\n {\r\n id: 'tmTeamName',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Name',\r\n minWidth: 80,\r\n },\r\n {\r\n id: 'tmTeamDesc',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Biography',\r\n minWidth: 150,\r\n },\r\n {\r\n id: 'tmTeam',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Team',\r\n minWidth: 150,\r\n },\r\n {\r\n id: 'admins',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Admins',\r\n minWidth: 150,\r\n },\r\n {\r\n id: 'TaskRefPrefix',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Task Prefix',\r\n minWidth: 150,\r\n },\r\n {\r\n id: 'Action',\r\n numeric: false,\r\n disablePadding: false,\r\n label: '',\r\n minWidth: 100,\r\n },\r\n];\r\n\r\nfunction EnhancedTableHead(props) {\r\n const {\r\n classes,\r\n order,\r\n orderBy,\r\n onRequestSort,\r\n // onSelectAllClick,\r\n // numSelected,\r\n // rowCount,\r\n } = props;\r\n\r\n const createSortHandler = property => event => {\r\n onRequestSort(event, property);\r\n };\r\n\r\n return (\r\n \r\n \r\n {headCells.map(headCell => (\r\n \r\n \r\n {headCell.label}\r\n {orderBy === headCell.id ? (\r\n {order === 'desc' ? 'sorted descending' : 'sorted ascending'} \r\n ) : null}\r\n \r\n \r\n ))}\r\n \r\n \r\n );\r\n}\r\n\r\nEnhancedTableHead.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n numSelected: PropTypes.number.isRequired,\r\n onRequestSort: PropTypes.func.isRequired,\r\n // onSelectAllClick: PropTypes.func.isRequired,\r\n order: PropTypes.oneOf(['asc', 'desc']).isRequired,\r\n orderBy: PropTypes.string.isRequired,\r\n rowCount: PropTypes.number.isRequired,\r\n};\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n width: '100%',\r\n },\r\n paper: {\r\n width: '100%',\r\n marginBottom: theme.spacing(4),\r\n backgroundColor: lighten(theme.palette.background.paper, 0.1),\r\n },\r\n table: {\r\n minWidth: 750,\r\n },\r\n visuallyHidden: {\r\n border: 0,\r\n clip: 'rect(0 0 0 0)',\r\n height: 1,\r\n margin: -1,\r\n overflow: 'hidden',\r\n padding: 0,\r\n position: 'absolute',\r\n top: 20,\r\n width: 1,\r\n },\r\n actionIcon: {\r\n cursor: 'pointer',\r\n },\r\n}));\r\n\r\nconst Search = styled('div')(({ theme }) => ({\r\n position: 'relative',\r\n borderRadius: theme.shape.borderRadius,\r\n backgroundColor: alpha(theme.palette.common.white, 0.15),\r\n '&:hover': {\r\n backgroundColor: alpha(theme.palette.common.white, 0.25),\r\n },\r\n marginLeft: 0,\r\n width: '100%',\r\n borderWidth: '1px',\r\n borderColor: '#f8f9fa',\r\n [theme.breakpoints.up('sm')]: {\r\n marginLeft: theme.spacing(1),\r\n width: 'auto',\r\n },\r\n}));\r\n\r\nconst SearchIconWrapper = styled('div')(({ theme }) => ({\r\n padding: theme.spacing(0, 2),\r\n height: '100%',\r\n position: 'absolute',\r\n pointerEvents: 'none',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n}));\r\n\r\nconst StyledInputBase = styled(InputBase)(({ theme }) => ({\r\n color: 'inherit',\r\n '& .MuiInputBase-input': {\r\n padding: theme.spacing(1, 1, 1, 0),\r\n // vertical padding + font size from searchIcon\r\n paddingLeft: `calc(1em + ${theme.spacing(4)})`,\r\n transition: theme.transitions.create('width'),\r\n border: '1px solid #d8d8d8',\r\n marginRight: '10px',\r\n width: '100%',\r\n [theme.breakpoints.up('sm')]: {\r\n width: '12ch',\r\n '&:focus': {\r\n width: '20ch',\r\n },\r\n },\r\n },\r\n}));\r\n\r\nconst TaskManageTeamsPage = props => {\r\n const dispatch = useDispatch();\r\n const [data, setData] = useState([]);\r\n const [customData, setCustomData] = useState([]);\r\n const [tmMembers, setTmMembers] = useState([]);\r\n\r\n /* Modal open/close */\r\n const [details, setDetails] = useState([]);\r\n const [open, setOpen] = useState(false);\r\n\r\n // search\r\n const [searchKey, setSearchKey] = useState('');\r\n const inputRef = useRef(null);\r\n\r\n //table config\r\n const classes = useStyles();\r\n const [order, setOrder] = React.useState('asc');\r\n const [orderBy, setOrderBy] = React.useState('calories');\r\n const [selected, setSelected] = React.useState([]);\r\n const [page, setPage] = React.useState(0);\r\n const [dense, setDense] = React.useState(false);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(10);\r\n\r\n /* START: Team Details */\r\n const [openDrawer, setOpenDrawer] = React.useState(false);\r\n const [teamDetails, setTeamDetails] = React.useState(false);\r\n const [teamAdminFilter, setTeamAdminFilter] = useState(null);\r\n const toggleDrawer = () => event => {\r\n setOpenDrawer(!openDrawer);\r\n };\r\n\r\n /* END: Team Details */\r\n\r\n //leave team\r\n //confirmation modal\r\n //default params\r\n const defaultConfirmationModalObj = {\r\n isModalOpen: false,\r\n handleSave: null,\r\n handleClose: null,\r\n modalTitle: '',\r\n modalMainText: '',\r\n hideCloseBtn: false,\r\n cancelBtnTxt: null,\r\n saveBtnText: null,\r\n teamId: null,\r\n };\r\n\r\n const [confirmationData, setConfirmationData] = useState({ ...defaultConfirmationModalObj });\r\n const [userDetails, setUserDetails] = useState();\r\n\r\n const handleRequestSort = (event, property) => {\r\n const isAsc = orderBy === property && order === 'asc';\r\n setOrder(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n\r\n // const handleSelectAllClick = event => {\r\n // if (event.target.checked) {\r\n // const newSelecteds = data.map(n => n.ClientName);\r\n // setSelected(newSelecteds);\r\n // return;\r\n // }\r\n // setSelected([]);\r\n // };\r\n\r\n const teamActionHandler = (action, data) => {\r\n setTeamDetails(data);\r\n if (action === 'detail') {\r\n setOpenDrawer(!openDrawer);\r\n }\r\n if (action === 'delete') {\r\n deleteTeam(data.Id);\r\n }\r\n if (action === 'leaveTeam') {\r\n openteamLeaveModal(data.Id, data.IsAdmin);\r\n const filterAdmin = tmMembers.filter(element => data.Id === element.TeamId);\r\n setTeamAdminFilter(filterAdmin);\r\n }\r\n setAnchorEl(null);\r\n };\r\n\r\n /** Delete company **/\r\n function deleteTeam(id) {\r\n let url = 'TaskTeams/DeleteTaskTeam/' + id;\r\n dispatch({ type: FETCH_START });\r\n customAxios\r\n .delete(url, { headers: authHeader() })\r\n .then(data => {\r\n getTeams();\r\n dispatch({ type: FETCH_SUCCESS });\r\n })\r\n .catch(function(error) {\r\n dispatch({ type: FETCH_ERROR, payload: error.message });\r\n });\r\n }\r\n\r\n const handleClick = (event, data) => {\r\n data.edit = true;\r\n\r\n const selectedIndex = selected.indexOf(data.name);\r\n let newSelected = [];\r\n\r\n if (selectedIndex === -1) {\r\n newSelected = newSelected.concat(selected, data.name);\r\n } else if (selectedIndex === 0) {\r\n newSelected = newSelected.concat(selected.slice(1));\r\n } else if (selectedIndex === selected.length - 1) {\r\n newSelected = newSelected.concat(selected.slice(0, -1));\r\n } else if (selectedIndex > 0) {\r\n newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));\r\n }\r\n\r\n setSelected(newSelected);\r\n\r\n /* Open Team details Drawer */\r\n // setOpenDrawer(!openDrawer);\r\n // setTeamDetails(data);\r\n };\r\n\r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = event => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n\r\n const isSelected = name => selected.indexOf(name) !== -1;\r\n\r\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);\r\n\r\n const getTeams = () => {\r\n dispatch({ type: FETCH_START });\r\n try {\r\n customAxios\r\n .get('TaskTeams/GetTaskTeams', { headers: authHeader() })\r\n .then(({ data }) => {\r\n if (data) {\r\n setData(data);\r\n setCustomData(data);\r\n updatedData();\r\n dispatch({ type: FETCH_SUCCESS });\r\n } else {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error' });\r\n }\r\n })\r\n .catch(error => {});\r\n } catch (e) {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error' });\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n setDense(false);\r\n getTeams();\r\n getUserProfileDetails();\r\n }, []);\r\n\r\n const updatedData = () => {\r\n if (customData.length > 0) {\r\n // console.log(customData)\r\n const getTeamMembersByTeam = async obj => {\r\n const responses = [];\r\n for (let i = 0; i < customData.length; i++) {\r\n let url = 'TaskTeams/GetTaskTeamMembers/' + customData[i].Id;\r\n responses.push(await customAxios.get(url, { headers: authHeader() }));\r\n }\r\n if (responses) {\r\n // console.log(responses);\r\n const teamMembers = [];\r\n for (let i = 0; i < responses.length; i++) {\r\n responses[i].data.forEach(element => {\r\n teamMembers.push(element);\r\n });\r\n }\r\n // console.log(teamMembers);\r\n setTmMembers(teamMembers);\r\n }\r\n };\r\n getTeamMembersByTeam();\r\n }\r\n\r\n return () => {\r\n setTmMembers([]);\r\n };\r\n };\r\n\r\n useEffect(() => {\r\n updatedData();\r\n getTeamMembers();\r\n getTeamAdmin();\r\n }, [customData]);\r\n\r\n const onClientsClose = () => {\r\n setOpen(false);\r\n getTeams();\r\n };\r\n\r\n //modal open/close\r\n const [modal, setModal] = useState(false);\r\n const toggle = () => {\r\n setModal(!modal);\r\n setDetails([]);\r\n };\r\n\r\n /* Action Menu eg. edit/delete */\r\n const ITEM_HEIGHT = 48;\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n\r\n // const handleActionMenuClick = event => {\r\n // setAnchorEl(event.currentTarget);\r\n // };\r\n const handleActionMenuClick = (index, event) => {\r\n setAnchorEl({ [index]: event.currentTarget });\r\n };\r\n const handleMenuClose = () => {\r\n setAnchorEl(null);\r\n };\r\n const getCRMTeamHandler = () => {\r\n getTeams();\r\n };\r\n\r\n /* Get Team members by Id */\r\n const getTeamMembers = id => {\r\n const tmMem = tmMembers.filter(tm => +tm.TeamId === +id);\r\n return tmMem.length === 0 ? (\r\n \r\n {tmMem &&\r\n tmMem.map((tm, index) => {\r\n return {tm.Email.slice(0, 2)} ;\r\n })}\r\n \r\n );\r\n };\r\n\r\n const getTeamAdmin = (team, id) => {\r\n const tmMem = tmMembers.filter(tm => +tm.IsAdmin === 1 && +tm.TeamId === +id);\r\n\r\n return tmMem.length === 0 ? (\r\n \r\n {tmMem &&\r\n tmMem.map((tm, index) => {\r\n return {tm.Email.slice(0, 2)} ;\r\n })}\r\n \r\n );\r\n };\r\n\r\n const searchCRMData = event => {\r\n let searchkey = event.target.value;\r\n setSearchKey(searchkey);\r\n // return data.filter(data => option[label].toLowerCase().indexOf(query.toLowerCase()) > -1);\r\n let filteredDraftRows = [];\r\n let filteredSentRows = [];\r\n filteredDraftRows = getArrayFilterData(data, searchkey);\r\n // filteredSentRows = getArrayFilterData(completedData, searchkey);\r\n\r\n if (searchkey.length <= 0) {\r\n setCustomData(data);\r\n // setSearchSentData(completedData);\r\n } else {\r\n setCustomData(filteredDraftRows);\r\n // setSearchSentData(filteredSentRows);\r\n }\r\n };\r\n\r\n const getArrayFilterData = (arr, searchkey) => {\r\n const result = arr.filter(row => {\r\n return (\r\n row.tmTeamDesc\r\n .toString()\r\n .toLowerCase()\r\n .includes(searchkey.toString().toLowerCase()) ||\r\n row.tmTeamName\r\n .toString()\r\n .toLowerCase()\r\n .includes(searchkey.toString().toLowerCase())\r\n );\r\n });\r\n return result;\r\n };\r\n\r\n const clearSearchData = () => {\r\n inputRef.current.focus();\r\n setSearchKey('');\r\n setCustomData(data);\r\n // setSearchDraftData(data);\r\n // setSearchSentData(customData);\r\n };\r\n const getUserProfileDetails = () => {\r\n dispatch({ type: FETCH_START });\r\n\r\n try {\r\n customAxios\r\n .get('Users/GetUserProfile', { headers: authHeader() })\r\n .then(({ data }) => {\r\n let correctedData = data;\r\n\r\n setUserDetails(correctedData);\r\n dispatch({ type: FETCH_SUCCESS });\r\n })\r\n .catch(error => {});\r\n } catch (e) {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error' });\r\n }\r\n };\r\n function openteamLeaveModal(id, isAdmin) {\r\n let confirmationObj = { ...confirmationData };\r\n confirmationObj.handleClose = closeConfirmationModal;\r\n confirmationObj.modalTitle = 'Leave Team';\r\n if (isAdmin) {\r\n confirmationObj.hideCloseBtn = true;\r\n\r\n confirmationObj.modalMainText = ' You can not leave this team, as you are an admin';\r\n confirmationObj.saveBtnText = 'Ok';\r\n confirmationObj.handleSave = closeConfirmationModal;\r\n } else {\r\n confirmationObj.hideCloseBtn = false;\r\n confirmationObj.modalMainText = ' Do you want to leave this team?';\r\n confirmationObj.saveBtnText = 'Yes';\r\n confirmationObj.cancelBtnTxt = 'No';\r\n confirmationObj.handleSave = () => leaveTeam(id);\r\n }\r\n\r\n confirmationObj.teamId = id;\r\n\r\n confirmationObj.isModalOpen = true;\r\n setConfirmationData({ ...confirmationObj });\r\n }\r\n\r\n const sendActivityEmail = async id => {\r\n let emailList = teamAdminFilter.map(element => {\r\n return element.Email;\r\n });\r\n emailList.push(userDetails.EmailAddress);\r\n let teamMemberTeamName = customData.filter(teamData => teamData.Id == id);\r\n let teamName = '';\r\n if (teamMemberTeamName.length > 0) {\r\n teamName = teamMemberTeamName[0].tmTeamName;\r\n }\r\n\r\n const bodyParameters = {\r\n EmailSubject: `A member of the ${teamName} team leaves`,\r\n EmailHtmlBody: getEmailBody(emailList, 'leave', 'Planning', teamName),\r\n ToList: emailList,\r\n };\r\n\r\n try {\r\n customAxios\r\n .post(`General/SendEmail`, JSON.stringify(bodyParameters), { headers: authHeader() })\r\n .then(({ data }) => {})\r\n .catch(error => {\r\n dispatch({ type: FETCH_ERROR, payload: 'Failed to accept' });\r\n return false;\r\n });\r\n } catch (e) {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error' });\r\n }\r\n };\r\n\r\n function leaveTeam(id) {\r\n let obj = {\r\n tmTeamId: id,\r\n tmMemberUserId: userDetails.UserId,\r\n };\r\n // console.log(obj,\"leve tem\");\r\n // return;\r\n dispatch({ type: FETCH_START });\r\n\r\n try {\r\n customAxios\r\n .post('TaskTeams/DeleteTaskTeamMember', obj, { headers: authHeader() })\r\n .then(({ data }) => {\r\n dispatch({ type: FETCH_SUCCESS });\r\n sendActivityEmail(id);\r\n closeConfirmationModal();\r\n getTeams();\r\n })\r\n .catch(error => {});\r\n } catch (e) {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error' });\r\n }\r\n }\r\n\r\n function closeConfirmationModal() {\r\n setConfirmationData(defaultConfirmationModalObj);\r\n }\r\n\r\n return (\r\n \r\n
} />\r\n
\r\n \r\n \r\n \r\n searchCRMData(e)}\r\n value={searchKey}\r\n inputRef={inputRef}\r\n />\r\n {searchKey && (\r\n \r\n \r\n Add Team\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {stableSort(customData, getComparator(order, orderBy))\r\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\r\n .map((row, index) => {\r\n // const isItemSelected = isSelected(row.CompanyName);\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n\r\n return (\r\n handleClick(event, row)}\r\n // role=\"checkbox\"\r\n // aria-checked={isItemSelected}\r\n tabIndex={-1}\r\n // selected={isItemSelected}\r\n key={index}>\r\n \r\n {row.tmTeamName}\r\n \r\n {row.tmTeamDesc} \r\n {getTeamMembers(row.Id)} \r\n {getTeamAdmin(row.IsAdmin, row.Id)} \r\n {row.TaskRefPrefix} \r\n \r\n handleActionMenuClick(index, e)}>\r\n \r\n \r\n {row.IsAdmin === 1 ? (\r\n teamActionHandler('detail', row)}>\r\n \r\n ) : null}\r\n {row.IsAdmin === 1 ? (\r\n teamActionHandler('delete', row)}>\r\n \r\n ) : null}\r\n teamActionHandler('leaveTeam', row)}>\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n {emptyRows > 0 && (\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n {/* {modal && (\r\n
\r\n )} */}\r\n {modal && (\r\n
\r\n )}\r\n {openDrawer && (\r\n
\r\n )}\r\n
\r\n
\r\n \r\n \r\n \r\n {selectedTeam?.TMPrefix}:{tRefNumber}\r\n \r\n {!PriorityId ? null : (\r\n <>\r\n \r\n {getPriorityName()} \r\n \r\n \r\n )}\r\n \r\n \r\n {add3Dots(title, 100)}{' '}\r\n
\r\n {!project || !ProjectId ? null : (\r\n <>\r\n \r\n {project?.label || ''} \r\n \r\n \r\n )}\r\n\r\n \r\n
avatarClickHandler()}>\r\n {assignTaskTeam && returnAvatarName(assigned)}\r\n
\r\n
\r\n {openTeam && (\r\n \r\n c.value == (tmMember ? tmMember.value : AssignedTo))}\r\n onChange={chooseTeamHandler}\r\n />\r\n \r\n )}\r\n \r\n
\r\n
\r\n {updateDate ? (\r\n
\r\n {getDateText(getFormattedDate(updateDate, 'MMM DD, YYYY'))}\r\n \r\n ) : (\r\n tDueDate && (\r\n
\r\n {getDateText(getFormattedDate(tDueDate, 'MMM DD, YYYY'))}\r\n \r\n )\r\n )}\r\n\r\n
\r\n taskCompleteHandler(e.target.checked)}\r\n />\r\n \r\n
\r\n );\r\n}, propsAreEqual);\r\n","import React, { useEffect, useMemo, useRef, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ReactQuill, { Quill } from 'react-quill';\r\nimport 'react-quill/dist/quill.snow.css';\r\nimport 'quill-mention';\r\nimport 'quill-mention/dist/quill.mention.css';\r\nimport 'react-quill/dist/quill.bubble.css';\r\nimport customAxios from 'routes/Pages/util/Api';\r\nimport authHeader from 'services/auth/jwt/auth-header';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport {\r\n FETCH_ERROR,\r\n FETCH_START,\r\n FETCH_SUCCESS,\r\n // INIT_URL,\r\n // SIGNOUT_USER_SUCCESS,\r\n // USER_DATA,\r\n // USER_TOKEN_SET,\r\n} from '../../../constants/ActionTypes';\r\n\r\nconst modules = {\r\n toolbar: [\r\n // [{ font: [] }],\r\n [{ header: [1, 2, 3, 4, 5, 6, false] }],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{ color: [] }, { background: [] }],\r\n [{ script: 'sub' }, { script: 'super' }],\r\n ['blockquote', 'code-block'],\r\n [{ list: 'ordered' }, { list: 'bullet' }],\r\n [{ indent: '-1' }, { indent: '+1' }, { align: [] }],\r\n ['link', 'image' /* \"video\"*/],\r\n // [\"clean\"],\r\n // [\"fullscreen\"]\r\n ],\r\n};\r\n\r\nconst DescriptionInput = ({\r\n type,\r\n name,\r\n id,\r\n fullWidth,\r\n size,\r\n value,\r\n onBlur,\r\n onChange,\r\n helperText,\r\n variant,\r\n error,\r\n height,\r\n members,\r\n handleDescKeyDown,\r\n isEdtingDescription,\r\n editorRef,\r\n tmTeamId,\r\n tmTaskId,\r\n setMentionCount,\r\n getTaskContributors,\r\n handleDescBlurEditor,\r\n addNotification,\r\n selectedCard,\r\n getCorrectedHTML,\r\n addNotificaiton,\r\n kanbanBoard,\r\n ...rest\r\n}) => {\r\n const newRef = useRef(null);\r\n const [contributorId, setContributorId] = useState();\r\n const { authUser } = useSelector(({ auth }) => auth);\r\n const dispatch = useDispatch();\r\n\r\n const module = useMemo(() => {\r\n return {\r\n toolbar: [\r\n // [{ font: [] }],\r\n // [{ header: [1, 2, 3, 4, 5, 6, false] }],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{ color: [] }, { background: [] }],\r\n [{ script: 'sub' }, { script: 'super' }],\r\n ['blockquote', 'code-block'],\r\n // [{ list: \"ordered\" }, { list: \"bullet\" }],\r\n [{ indent: '-1' }, { indent: '+1' }, { align: [] }],\r\n ['link', 'image', 'video'],\r\n // [\"clean\"],\r\n // [\"fullscreen\"]\r\n ],\r\n history: {\r\n delay: 500,\r\n maxStack: 100,\r\n userOnly: true,\r\n },\r\n mention: {\r\n allowedChars: /^[A-Za-z\\sÅÄÖåäö]*$/,\r\n mentionDenotationChars: ['@'],\r\n source: function(searchTerm, renderItem, mentionChar) {\r\n let values;\r\n if (mentionChar === '@') {\r\n values = members;\r\n }\r\n if (searchTerm.length === 0) {\r\n renderItem(values, searchTerm);\r\n } else {\r\n const matches = [];\r\n for (let i = 0; i < values.length; i += 1)\r\n if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) {\r\n matches.push(values[i]);\r\n }\r\n renderItem(matches, searchTerm);\r\n }\r\n },\r\n onSelect: function(item, insertItem) {\r\n insertItem(item, true);\r\n let newValues = [];\r\n // const updateName = {};\r\n newValues.push(item);\r\n\r\n newValues.forEach((value, key) => {\r\n setContributorId(+value.id);\r\n });\r\n setMentionCount(preV => preV + 1);\r\n },\r\n },\r\n };\r\n }, [members, editorRef?.current?.state?.value]);\r\n\r\n useEffect(() => {}, [editorRef?.current?.state?.value]);\r\n\r\n useEffect(() => {\r\n if (contributorId) {\r\n addTaskContributors();\r\n }\r\n }, [contributorId]);\r\n\r\n const addTaskContributors = () => {\r\n const bodyDescription = {\r\n tmTeamId: tmTeamId,\r\n tmTaskId: tmTaskId,\r\n contributorId: contributorId,\r\n };\r\n\r\n dispatch({ type: FETCH_START });\r\n\r\n customAxios\r\n .post('Task/AddTaskContributors', bodyDescription, { headers: authHeader() })\r\n .then(({ data }) => {\r\n getTaskContributors();\r\n const noteObj = {\r\n UserIdTo: contributorId,\r\n ActivityId: selectedCard.id,\r\n NotifyMessage: 'You are Added as Task Contributor on Task Ref:' + selectedCard.tRefNumber,\r\n FunctionalityId: selectedCard.StatusId,\r\n TeamId: selectedCard.TeamId,\r\n IsClicked: 0,\r\n };\r\n const emailObj = {\r\n type: 'taskContributors',\r\n cardData: selectedCard,\r\n doneBy: authUser?.Email,\r\n message: 'task contributor update',\r\n };\r\n handleDescBlurEditor();\r\n addNotification(noteObj, emailObj);\r\n if (data) {\r\n dispatch({ type: FETCH_SUCCESS });\r\n }\r\n })\r\n .catch(error => {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error' });\r\n return error;\r\n });\r\n };\r\n\r\n const checking = () => {\r\n if (editorRef.current) {\r\n editorRef.current.focus();\r\n }\r\n };\r\n\r\n const quillId = 'myQuill';\r\n\r\n function setFocus() {\r\n const quillNode = document.getElementById(quillId);\r\n if (quillNode) {\r\n quillNode.focus();\r\n }\r\n }\r\n // const testing = document.getElementsByClassName('.description-conatiner');\r\n\r\n useEffect(() => {\r\n checking();\r\n setFocus();\r\n }, [editorRef.current]);\r\n\r\n return (\r\n \r\n {\r\n // onChange(content, delta, source, editor);\r\n // }}\r\n formats={[\r\n 'header',\r\n 'bold',\r\n 'italic',\r\n 'underline',\r\n 'strike',\r\n 'blockquote',\r\n 'list',\r\n 'bullet',\r\n 'indent',\r\n 'link',\r\n 'image',\r\n 'mention',\r\n 'color',\r\n 'background',\r\n ]}\r\n />\r\n
\r\n );\r\n};\r\n\r\nDescriptionInput.prototype = {\r\n type: PropTypes.string,\r\n name: PropTypes.string,\r\n id: PropTypes.string,\r\n fullWidth: PropTypes.bool,\r\n value: PropTypes.string,\r\n variant: PropTypes.string,\r\n size: PropTypes.string,\r\n height: PropTypes.string,\r\n onBlur: PropTypes.func,\r\n error: PropTypes.bool,\r\n helperText: PropTypes.bool,\r\n members: PropTypes.array,\r\n editorRef: PropTypes.func,\r\n handleDescKeyDown: PropTypes.func,\r\n isEdtingDescription: PropTypes.bool,\r\n};\r\n\r\nDescriptionInput.defaultProps = {\r\n type: 'text',\r\n fullWidth: true,\r\n size: 'small',\r\n error: false,\r\n helperText: '',\r\n};\r\n\r\nexport default DescriptionInput;\r\n\r\n// import React, { useMemo, useRef } from 'react'\r\n// import PropTypes from 'prop-types';\r\n// import ReactQuill from 'react-quill';\r\n// import 'react-quill/dist/quill.snow.css';\r\n\r\n// import {\r\n// FETCH_ERROR,\r\n// FETCH_START,\r\n// FETCH_SUCCESS,\r\n// // INIT_URL,\r\n// // SIGNOUT_USER_SUCCESS,\r\n// // USER_DATA,\r\n// // USER_TOKEN_SET,\r\n// } from '../../../constants/ActionTypes';\r\n// import customAxios from '../../../util/Api';\r\n// import authHeader from '../../../../../services/auth/jwt/auth-header';\r\n\r\n// // const modules = {\r\n// // toolbar: [\r\n// // [{ font: [] }],\r\n// // [{ header: [1, 2, 3, 4, 5, 6, false] }],\r\n// // [\"bold\", \"italic\", \"underline\", \"strike\"],\r\n// // [{ color: [] }, { background: [] }],\r\n// // [{ script: \"sub\" }, { script: \"super\" }],\r\n// // [\"blockquote\", \"code-block\"],\r\n// // [{ list: \"ordered\" }, { list: \"bullet\" }],\r\n// // [{ indent: \"-1\" }, { indent: \"+1\" }, { align: [] }],\r\n// // [\"link\", \"image\", \"video\"],\r\n// // [\"clean\"],\r\n// // [\"fullscreen\"]\r\n// // ],\r\n// // };\r\n\r\n// const DescriptionInput = ({ type, name, id, fullWidth, size, value, onBlur, helperText, variant, error, height, ...rest }) => {\r\n// const quillRef = useRef();\r\n// const imageHandler = (e) => {\r\n// const editor = quillRef.current.getEditor();\r\n// console.log(editor)\r\n// const input = document.createElement(\"input\");\r\n// input.setAttribute(\"type\", \"file\");\r\n// input.setAttribute(\"accept\", \"image/*\");\r\n// input.click();\r\n\r\n// input.onchange = async () => {\r\n// const file = input.files[0];\r\n// if (/^image\\//.test(file.type)) {\r\n// console.log(file);\r\n// const bodyAddAttachment = {\r\n// TaskId: id,\r\n// AttachmentBlob: \"\",\r\n// Attachment: URL.createObjectURL(file),\r\n// AttachmentName: file.name\r\n// };\r\n\r\n// // const formData = new FormData();\r\n// // formData.append(\"TaskId\", id);\r\n// // formData.append(\"AttachmentBlob\", \"\");\r\n// // formData.append(\"Attachment\", file);\r\n// // formData.append(\"AttachmentName\", file.name);\r\n// // const res = await ImageUpload(formData); // upload data into server or aws or cloudinary\r\n// const res = await customAxios.post('/Task/AddAttachment', bodyAddAttachment, { headers: authHeader() })\r\n// console.log(res);\r\n// // const url = res?.data?.url;\r\n// // editor.insertEmbed(editor.getSelection(), \"image\", url);\r\n// } else {\r\n// // ErrorToast('You could only upload images.');\r\n// }\r\n// };\r\n// }\r\n// const modules = useMemo(() => ({\r\n// toolbar: {\r\n// container: [\r\n// [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\r\n// ['bold', 'italic', 'underline', \"strike\"],\r\n// [{ 'list': 'ordered' }, { 'list': 'bullet' },\r\n// { 'indent': '-1' }, { 'indent': '+1' }],\r\n// ['image', \"link\",],\r\n// [{ 'color': ['#000000', '#e60000', '#ff9900', '#ffff00', '#008a00', '#0066cc', '#9933ff', '#ffffff', '#facccc', '#ffebcc', '#ffffcc', '#cce8cc', '#cce0f5', '#ebd6ff', '#bbbbbb', '#f06666', '#ffc266', '#ffff66', '#66b966', '#66a3e0', '#c285ff', '#888888', '#a10000', '#b26b00', '#b2b200', '#006100', '#0047b2', '#6b24b2', '#444444', '#5c0000', '#663d00', '#666600', '#003700', '#002966', '#3d1466'] }]\r\n// ],\r\n// handlers: {\r\n// image: imageHandler\r\n// }\r\n// },\r\n// }), [])\r\n\r\n// return (\r\n// \r\n//
\r\n// );\r\n// };\r\n\r\n// DescriptionInput.prototype = {\r\n// type: PropTypes.string,\r\n// name: PropTypes.string,\r\n// id: PropTypes.string,\r\n// fullWidth: PropTypes.bool,\r\n// value: PropTypes.string,\r\n// variant: PropTypes.string,\r\n// size: PropTypes.string,\r\n// height: PropTypes.string,\r\n// onBlur: PropTypes.func,\r\n// error: PropTypes.bool,\r\n// helperText: PropTypes.bool,\r\n// };\r\n\r\n// DescriptionInput.defaultProps = {\r\n// type: 'text',\r\n// fullWidth: true,\r\n// size: 'small',\r\n// error: false,\r\n// helperText: '',\r\n// };\r\n\r\n// export default DescriptionInput;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ReactQuill, { Quill } from 'react-quill';\r\nimport 'quill-mention';\r\nimport 'quill-mention/dist/quill.mention.css';\r\nimport 'react-quill/dist/quill.snow.css';\r\nimport 'react-quill/dist/quill.bubble.css';\r\n\r\nimport customAxios from 'routes/Pages/util/Api';\r\nimport authHeader from 'services/auth/jwt/auth-header';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport {\r\n FETCH_ERROR,\r\n FETCH_START,\r\n FETCH_SUCCESS,\r\n // INIT_URL,\r\n // SIGNOUT_USER_SUCCESS,\r\n // USER_DATA,\r\n // USER_TOKEN_SET,\r\n} from '../../../constants/ActionTypes';\r\n\r\nconst modules = {\r\n toolbar: [\r\n // [{ font: [] }],\r\n // [{ header: [1, 2, 3, 4, 5, 6, false] }],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{ color: [] }, { background: [] }],\r\n [{ script: 'sub' }, { script: 'super' }],\r\n ['blockquote', 'code-block'],\r\n // [{ list: \"ordered\" }, { list: \"bullet\" }],\r\n [{ indent: '-1' }, { indent: '+1' }, { align: [] }],\r\n ['link', 'image', 'video'],\r\n // [\"clean\"],\r\n // [\"fullscreen\"]\r\n ],\r\n};\r\nconst CommentsInput = ({\r\n addNotification,\r\n selectedCard,\r\n tmTeamId,\r\n tmTaskId,\r\n type,\r\n name,\r\n id,\r\n fullWidth,\r\n size,\r\n value,\r\n onBlur,\r\n onChange,\r\n helperText,\r\n variant,\r\n error,\r\n height,\r\n commentRef,\r\n members,\r\n setMentionCount,\r\n handleDescBlurEditor,\r\n\r\n ...rest\r\n}) => {\r\n // const Quill = ReactQuill.Quill;\r\n\r\n // var Block = Quill.import('blots/block');\r\n // Block.tagName = 'div';\r\n // Quill.register(Block);\r\n\r\n const [contributorId, setContributorId] = useState();\r\n const { authUser } = useSelector(({ auth }) => auth);\r\n const dispatch = useDispatch();\r\n const [ReadOnly, setReadOnly] = useState(true);\r\n const module = useMemo(() => {\r\n return {\r\n toolbar: [\r\n // [{ font: [] }],\r\n // [{ header: [1, 2, 3, 4, 5, 6, false] }],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{ color: [] }, { background: [] }],\r\n [{ script: 'sub' }, { script: 'super' }],\r\n ['blockquote', 'code-block'],\r\n // [{ list: \"ordered\" }, { list: \"bullet\" }],\r\n [{ indent: '-1' }, { indent: '+1' }, { align: [] }],\r\n ['link', 'image', 'video'],\r\n // [\"clean\"],\r\n // [\"fullscreen\"]\r\n ],\r\n history: {\r\n delay: 500,\r\n maxStack: 100,\r\n userOnly: true,\r\n },\r\n mention: {\r\n allowedChars: /^[A-Za-z\\sÅÄÖåäö]*$/,\r\n mentionDenotationChars: ['@'],\r\n linkTarget: 'https://www.google.com',\r\n source: function(searchTerm, renderItem, mentionChar) {\r\n // console.log('01010check');\r\n let values;\r\n if (mentionChar === '@') {\r\n values = members;\r\n }\r\n if (searchTerm.length === 0) {\r\n renderItem(values, searchTerm);\r\n } else {\r\n const matches = [];\r\n for (let i = 0; i < values.length; i += 1)\r\n if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) {\r\n matches.push(values[i]);\r\n }\r\n renderItem(matches, searchTerm);\r\n }\r\n },\r\n onSelect: function(item, insertItem) {\r\n insertItem(item, true);\r\n let newValues = [];\r\n // const updateName = {};\r\n newValues.push(item);\r\n newValues.forEach((value, key) => {\r\n setContributorId(+value.id);\r\n });\r\n setMentionCount(preV => preV + 1);\r\n },\r\n },\r\n };\r\n }, [members, commentRef?.current?.state?.value]);\r\n\r\n const handleProcedureContentChange = (content, delta, source, editor) => {\r\n //let has_attribues = delta.ops[1].attributes || \"\";\r\n //console.log(has_attribues);\r\n //const cursorPosition = e.quill.getSelection().index;\r\n // this.quill.insertText(cursorPosition, \"★\");\r\n //this.quill.setSelection(cursorPosition + 1);\r\n };\r\n\r\n useEffect(() => {\r\n if (contributorId) {\r\n addTaskContributors();\r\n console.log('running');\r\n }\r\n }, [contributorId]);\r\n\r\n const addTaskContributors = () => {\r\n const bodyDescription = {\r\n tmTeamId: tmTeamId,\r\n tmTaskId: tmTaskId,\r\n contributorId: contributorId,\r\n };\r\n\r\n dispatch({ type: FETCH_START });\r\n\r\n customAxios\r\n .post('Task/AddTaskContributors', bodyDescription, { headers: authHeader() })\r\n .then(({ data }) => {\r\n const noteObj = {\r\n UserIdTo: contributorId,\r\n ActivityId: selectedCard.id,\r\n NotifyMessage: 'You are Added as Task Contributor on Task Ref:' + selectedCard.tRefNumber,\r\n FunctionalityId: selectedCard.StatusId,\r\n TeamId: selectedCard.TeamId,\r\n IsClicked: 0,\r\n };\r\n const emailObj = {\r\n type: 'taskContributors',\r\n cardData: selectedCard,\r\n doneBy: authUser?.Email,\r\n message: 'task contributor update',\r\n };\r\n handleDescBlurEditor();\r\n addNotification(noteObj, emailObj);\r\n if (data) {\r\n dispatch({ type: FETCH_SUCCESS });\r\n }\r\n })\r\n .catch(error => {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error' });\r\n return error;\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n checking();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [commentRef.current]);\r\n\r\n const checking = () => {\r\n if (commentRef.current) {\r\n commentRef.current.blur();\r\n }\r\n };\r\n\r\n // useEffect(() => {\r\n // handleButtonClick();\r\n // }, [commentRef]);\r\n\r\n // const handleButtonClick = () => {\r\n // // Set focus on second Quill instance\r\n // commentRef.current.getEditor().blur();\r\n // console.log(commentRef.current.getEditor().blur(), '909090');\r\n // };\r\n\r\n const handleOnBlur = valuess => {};\r\n\r\n return (\r\n setReadOnly(false)}>\r\n {\r\n // onChange(content, delta, source, editor);\r\n // }}\r\n onBlur={handleOnBlur}\r\n onChange={(content, delta, source, editor) => handleProcedureContentChange(content, delta, source, editor)}\r\n theme=\"snow\"\r\n formats={[\r\n 'header',\r\n 'bold',\r\n 'italic',\r\n 'underline',\r\n 'strike',\r\n 'blockquote',\r\n 'list',\r\n 'bullet',\r\n 'indent',\r\n 'link',\r\n 'image',\r\n 'mention',\r\n 'color',\r\n 'background',\r\n ]}\r\n placeholder=\"Add comments\"\r\n />\r\n
\r\n );\r\n};\r\n\r\nCommentsInput.prototype = {\r\n type: PropTypes.string,\r\n name: PropTypes.string,\r\n id: PropTypes.string,\r\n fullWidth: PropTypes.bool,\r\n value: PropTypes.string,\r\n variant: PropTypes.string,\r\n size: PropTypes.string,\r\n height: PropTypes.string,\r\n onBlur: PropTypes.func,\r\n error: PropTypes.bool,\r\n helperText: PropTypes.bool,\r\n members: PropTypes.array,\r\n commentRef: PropTypes.func,\r\n};\r\n\r\nCommentsInput.defaultProps = {\r\n type: 'text',\r\n fullWidth: true,\r\n size: 'small',\r\n error: false,\r\n helperText: '',\r\n};\r\n\r\nexport default CommentsInput;\r\n\r\n// import React, { useMemo, useRef } from 'react'\r\n// import PropTypes from 'prop-types';\r\n// import ReactQuill from 'react-quill';\r\n// import 'react-quill/dist/quill.snow.css';\r\n\r\n// import {\r\n// FETCH_ERROR,\r\n// FETCH_START,\r\n// FETCH_SUCCESS,\r\n// // INIT_URL,\r\n// // SIGNOUT_USER_SUCCESS,\r\n// // USER_DATA,\r\n// // USER_TOKEN_SET,\r\n// } from '../../../constants/ActionTypes';\r\n// import customAxios from '../../../util/Api';\r\n// import authHeader from '../../../../../services/auth/jwt/auth-header';\r\n\r\n// // const modules = {\r\n// // toolbar: [\r\n// // [{ font: [] }],\r\n// // [{ header: [1, 2, 3, 4, 5, 6, false] }],\r\n// // [\"bold\", \"italic\", \"underline\", \"strike\"],\r\n// // [{ color: [] }, { background: [] }],\r\n// // [{ script: \"sub\" }, { script: \"super\" }],\r\n// // [\"blockquote\", \"code-block\"],\r\n// // [{ list: \"ordered\" }, { list: \"bullet\" }],\r\n// // [{ indent: \"-1\" }, { indent: \"+1\" }, { align: [] }],\r\n// // [\"link\", \"image\", \"video\"],\r\n// // [\"clean\"],\r\n// // [\"fullscreen\"]\r\n// // ],\r\n// // };\r\n\r\n// const CommentsInput = ({ type, name, id, fullWidth, size, value, onBlur, helperText, variant, error, height, ...rest }) => {\r\n// const quillRef = useRef();\r\n// const imageHandler = (e) => {\r\n// const editor = quillRef.current.getEditor();\r\n// console.log(editor)\r\n// const input = document.createElement(\"input\");\r\n// input.setAttribute(\"type\", \"file\");\r\n// input.setAttribute(\"accept\", \"image/*\");\r\n// input.click();\r\n// input.onchange = async () => {\r\n// const file = input.files[0];\r\n// if (/^image\\//.test(file.type)) {\r\n// console.log(file);\r\n// const bodyAddAttachment = {\r\n// TaskId: id,\r\n// AttachmentBlob: \"\",\r\n// Attachment: URL.createObjectURL(file),\r\n// AttachmentName: file.name\r\n// };\r\n\r\n// // const formData = new FormData();\r\n// // formData.append(\"TaskId\", id);\r\n// // formData.append(\"AttachmentBlob\", \"\");\r\n// // formData.append(\"Attachment\", file);\r\n// // formData.append(\"AttachmentName\", file.name);\r\n// // const res = await ImageUpload(formData); // upload data into server or aws or cloudinary\r\n// const res = await customAxios.post('/Task/AddAttachment', bodyAddAttachment, { headers: authHeader() })\r\n// console.log(res);\r\n// // const url = res?.data?.url;\r\n// // editor.insertEmbed(editor.getSelection(), \"image\", url);\r\n// } else {\r\n// // ErrorToast('You could only upload images.');\r\n// }\r\n// };\r\n// }\r\n// const modules = useMemo(() => ({\r\n// toolbar: {\r\n// container: [\r\n// [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\r\n// ['bold', 'italic', 'underline', \"strike\"],\r\n// [{ 'list': 'ordered' }, { 'list': 'bullet' },\r\n// { 'indent': '-1' }, { 'indent': '+1' }],\r\n// ['image', \"link\",],\r\n// [{ 'color': ['#000000', '#e60000', '#ff9900', '#ffff00', '#008a00', '#0066cc', '#9933ff', '#ffffff', '#facccc', '#ffebcc', '#ffffcc', '#cce8cc', '#cce0f5', '#ebd6ff', '#bbbbbb', '#f06666', '#ffc266', '#ffff66', '#66b966', '#66a3e0', '#c285ff', '#888888', '#a10000', '#b26b00', '#b2b200', '#006100', '#0047b2', '#6b24b2', '#444444', '#5c0000', '#663d00', '#666600', '#003700', '#002966', '#3d1466'] }]\r\n// ],\r\n// handlers: {\r\n// image: imageHandler\r\n// }\r\n// },\r\n// }), [])\r\n\r\n// return (\r\n// \r\n//
\r\n// );\r\n// };\r\n\r\n// CommentsInput.prototype = {\r\n// type: PropTypes.string,\r\n// name: PropTypes.string,\r\n// id: PropTypes.string,\r\n// fullWidth: PropTypes.bool,\r\n// value: PropTypes.string,\r\n// variant: PropTypes.string,\r\n// size: PropTypes.string,\r\n// height: PropTypes.string,\r\n// onBlur: PropTypes.func,\r\n// error: PropTypes.bool,\r\n// helperText: PropTypes.bool,\r\n// };\r\n\r\n// CommentsInput.defaultProps = {\r\n// type: 'text',\r\n// fullWidth: true,\r\n// size: 'small',\r\n// error: false,\r\n// helperText: '',\r\n// };\r\n\r\n// export default CommentsInput;\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { IntlProvider } from 'react-intl';\r\nimport Lightbox from 'react-image-lightbox';\r\n\r\nconst LightboxGallery = ({ data }) => {\r\n const [photoIndex, setPhotoIndex] = useState(0);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [imagesData, setImagesData] = useState([]);\r\n\r\n const images = [\r\n { url: 'https://picsum.photos/200/300' },\r\n { url: 'https://picsum.photos/200' },\r\n { url: 'https://picsum.photos/id/237/200/300' },\r\n { url: 'https://picsum.photos/seed/picsum/200/300' },\r\n { url: 'https://picsum.photos/200' },\r\n { url: 'https://picsum.photos/200/300?grayscale' },\r\n ];\r\n\r\n useEffect(() => {\r\n if (data.length > 0) {\r\n let newImgs = [];\r\n data.forEach(elem => {\r\n if (\r\n elem.metaData.type.split('/')[1] === 'jpeg' ||\r\n elem.metaData.type.split('/')[1] === 'jpg' ||\r\n elem.metaData.type.split('/')[1] === 'gif' ||\r\n elem.metaData.type.split('/')[1] === 'png'\r\n ) {\r\n newImgs.push({ url: elem.fullImage });\r\n }\r\n });\r\n console.log(newImgs);\r\n // setImagesData(newImgs);\r\n }\r\n }, [data]);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n
\r\n {imagesData.length > 0 &&\r\n imagesData.map((img1, index) => (\r\n
{\r\n setIsOpen(true);\r\n setPhotoIndex(index);\r\n }}\r\n width=\"40px\"\r\n height=\"40px\"\r\n />\r\n ))}\r\n \r\n
\r\n\r\n {isOpen && (\r\n
setIsOpen(false)}\r\n onMovePrevRequest={() => setPhotoIndex((photoIndex + imagesData.length - 1) % imagesData.length)}\r\n onMoveNextRequest={() => setPhotoIndex((photoIndex + 1) % imagesData.length)}\r\n />\r\n )}\r\n \r\n {taskHistory.map((item, index) => {\r\n return (\r\n \r\n \r\n \r\n {dateFormater(item.ModifiedAtTime)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {item.ModifiedByName}\r\n \r\n {item.ColumnName} \r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n );\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport {\r\n FETCH_ERROR,\r\n FETCH_START,\r\n FETCH_SUCCESS,\r\n // INIT_URL,\r\n // SIGNOUT_USER_SUCCESS,\r\n // USER_DATA,\r\n // USER_TOKEN_SET,\r\n} from '../../../constants/ActionTypes';\r\nimport customAxios from '../../../util/Api';\r\nimport authHeader from '../../../../../services/auth/jwt/auth-header';\r\nimport { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';\r\n\r\nconst styleObj = {\r\n fontFamily: 'normal',\r\n};\r\n\r\nconst styleObjTotal = {\r\n fontFamily: 'normal',\r\n fontWeight: 'bold',\r\n};\r\n\r\nconst TaskTimeHistory = ({ selectedCard }) => {\r\n const [taskTimeData, setTaskTimeData] = useState(null);\r\n const [formattedTime, setFormattedTime] = useState(null);\r\n const dispatch = useDispatch();\r\n const getTaskTime = () => {\r\n let url = `Task/GetTaskTimeRegistrations?tmTaskId=${selectedCard.id}`;\r\n dispatch({ type: FETCH_START });\r\n\r\n try {\r\n customAxios\r\n .get(url, { headers: authHeader() })\r\n .then(({ data }) => {\r\n // setTaskTimeData(data);\r\n let totalHours = 0;\r\n let totalMinutes = 0;\r\n\r\n // Calculate total hours and minutes\r\n data.forEach(entry => {\r\n totalHours += entry.TimeHours;\r\n totalMinutes += entry.TimeMinutes;\r\n });\r\n\r\n // Adjust total hours if minutes exceed 60\r\n totalHours += Math.floor(totalMinutes / 60);\r\n totalMinutes %= 60;\r\n\r\n // Format total hours and minutes in hh:mm format\r\n const formattedTotal = `${totalHours > 9 ? totalHours : '0' + totalHours}:${totalMinutes\r\n .toString()\r\n .padStart(2, '0')}`;\r\n\r\n setTaskTimeData(data);\r\n console.log(data);\r\n setFormattedTime(formattedTotal);\r\n })\r\n .catch(error => {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error' });\r\n });\r\n } catch (e) {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error' });\r\n }\r\n };\r\n useEffect(() => {\r\n if (selectedCard) {\r\n getTaskTime();\r\n }\r\n }, [selectedCard]);\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n Name \r\n Time(hh/mm) \r\n Date \r\n \r\n \r\n \r\n {taskTimeData?.map((entry, index) => (\r\n \r\n {`${entry?.FirstName} ${entry?.LastName}`} \r\n {`${\r\n entry?.TimeHours > 9 ? entry?.TimeHours : '0' + entry?.TimeHours\r\n }:${entry.TimeMinutes.toString().padStart(2, '0')}`} \r\n {new Date(entry?.LogDateTime)?.toLocaleDateString()} \r\n \r\n ))}\r\n \r\n \r\n Total Time\r\n \r\n {formattedTime} \r\n \r\n \r\n
\r\n \r\n
\r\n {/*
{user} */}\r\n
\r\n {date.substring(0, 10)} {date.substring(11, 19)}\r\n \r\n\r\n
\r\n {data && extractContent(data).length > 200 ? (\r\n
\r\n \r\n \r\n {isReadMore ? 'more' : 'less'}\r\n \r\n
\r\n ) : (\r\n
\r\n )}\r\n {/* {data && data.length >150 ?\r\n :''} */}\r\n \r\n
\r\n {value === index && (\r\n \r\n \r\n {children}\r\n \r\n \r\n )}\r\n \r\n );\r\n}\r\nconst TabWithCount = ({ children, count }) => {\r\n return (\r\n \r\n {count ? (\r\n \r\n {count}\r\n \r\n ) : null}\r\n {children} \r\n \r\n );\r\n};\r\nTabPanel.propTypes = {\r\n children: PropTypes.node,\r\n index: PropTypes.number.isRequired,\r\n value: PropTypes.number.isRequired,\r\n};\r\n\r\nconst tabHeaderSxProps = {\r\n ontSize: '0.8rem',\r\n fontFamily: 'normal',\r\n fontWeight: '600',\r\n textTransform: 'capitalize',\r\n fontSize: '14px',\r\n};\r\n\r\nconst CommentDisplay = ({ commentsData, kanbanBoard, TeamId, selectedCard, projectList, members }) => {\r\n // const[comments,setComments] = useState([]);\r\n // useEffect(()=>{\r\n // console.log(commentsData)\r\n // setComments(commentsData)\r\n // },[commentsData])\r\n const [value, setValue] = useState(0);\r\n // const [taskHistory, setTaskHistory] = useState();\r\n\r\n // const TASK_HISTORY_URL = 'http://api.focus247.online/api/Task/GetTaskHistory';\r\n\r\n // useEffect(() => {\r\n // loadTaskHistoryData();\r\n // }, []);\r\n\r\n // const loadTaskHistoryData = async () => {\r\n // const response = await fetch(TASK_HISTORY_URL);\r\n // const data = await response.json();\r\n // setTaskHistory(data);\r\n // };\r\n // console.log(selectedCard, kanbanBoard, 'selectedCard');\r\n\r\n const teamData = kanbanBoard?.tmTeams;\r\n\r\n const filterTeam = teamData?.find(team => {\r\n return team?.TeamId === selectedCard?.tmTeamId;\r\n });\r\n\r\n const filterTeamMember = teamData?.find(member => {\r\n return member.TMUserId === selectedCard?.memberIds;\r\n });\r\n\r\n const filterProject = projectList.find(project => {\r\n return project?.value === selectedCard?.ProjectId;\r\n });\r\n\r\n // console.log(projectList, 'projects');\r\n\r\n // Example POST method implementation:\r\n // async function postData(url = '', data = {}) {\r\n // const response = await fetch(url, {\r\n // method: 'POST',\r\n // mode: 'cors',\r\n // cache: 'no-cache',\r\n // credentials: 'same-origin',\r\n // headers: {\r\n // 'Content-Type': 'application/json',\r\n // },\r\n // redirect: 'follow',\r\n // referrerPolicy: 'no-referrer',\r\n // body: JSON.stringify(data),\r\n // });\r\n // return response.json();\r\n // }\r\n\r\n // postData('http://api.focus247.online/api/Task/GetTaskHistory', { answer: 42 }).then(data => {\r\n // console.log(data, 'task data'); // JSON data parsed by `data.json()` call\r\n // });\r\n\r\n const handleChange = (event, newValue) => {\r\n setValue(newValue);\r\n };\r\n function stringAvatar(obj) {\r\n let children = '';\r\n if (obj && obj?.email) {\r\n let objId = obj.email;\r\n let img = members.filter(item => item.label === objId);\r\n if (img.length > 0 && img[0].image) {\r\n children = (\r\n \r\n \r\n \r\n \r\n {commentsData.length}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {commentsData &&\r\n commentsData.map((comment, index) => {\r\n return (\r\n \r\n {/* \r\n \r\n Delivered\r\n \r\n \r\n {item.TimeStart.substring(0, 10)} - {item.TimeStart.substring(11)}\r\n \r\n */}\r\n \r\n {/* \r\n \r\n \r\n \r\n {index != 0 && \r\n {/* \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport { CommentDisplay, timeLineStyle, ReadMore, readMoreCardStyles };\r\n","import React, { useEffect, useState } from 'react';\r\nimport List from '@mui/material/List';\r\nimport ListItem from '@mui/material/ListItem';\r\n// import Divider from '@mui/material/Divider';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemAvatar from '@mui/material/ListItemAvatar';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { Typography, Popover, AvatarGroup, Tooltip } from '@mui/material';\r\nimport { makeStyles } from '@material-ui/styles';\r\n// import { fontSize } from '@mui/system';\r\n// import { Cursor } from '@amcharts/amcharts4/charts';\r\nconst ListViewStyles = makeStyles(theme => ({\r\n root: {\r\n background: 'white',\r\n\r\n '& .MuiList-root': {\r\n padding: 0,\r\n },\r\n '& .MuiListItem-root': {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n cursor: 'pointer',\r\n paddingTop: '4px',\r\n paddingBottom: '4px',\r\n paddingRight: '8px',\r\n paddingLeft: '8px',\r\n '& .MuiListItemAvatar-root': {\r\n minWidth: '40px',\r\n },\r\n '& .MuiAvatar-root': {\r\n width: '30px',\r\n height: '30px',\r\n fontSize: '0.95rem',\r\n },\r\n },\r\n },\r\n}));\r\n\r\nArray.prototype.move = function(from, to) {\r\n this.splice(to, 0, this.splice(from, 1)[0]);\r\n};\r\n\r\nconst TeamDataListView = ({ SelectedTeamMembers, avatarClickHandler }) => {\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const [avatarIndex, setAvatarIndex] = useState(0);\r\n\r\n useEffect(() => {\r\n let isActive = false;\r\n let currIndex = 0;\r\n SelectedTeamMembers.map((item, index) => {\r\n if (item.ClassName === 'avatar-selected') {\r\n currIndex = index;\r\n isActive = true;\r\n }\r\n });\r\n\r\n if (isActive) {\r\n setAvatarIndex(currIndex);\r\n } else {\r\n setAvatarIndex(0);\r\n }\r\n // console.log(SelectedTeamMembers);\r\n }, [SelectedTeamMembers]);\r\n\r\n const handleClick = event => {\r\n // console.log('on avatar click')\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n };\r\n function stringAvatar(obj) {\r\n let children = '';\r\n if (obj?.AvatarImage) {\r\n children = (\r\n \r\n {SelectedTeamMembers && (\r\n
4 ? handleClick : null}>\r\n {getUpdateOrder(SelectedTeamMembers).map((avatar, index) => (\r\n \r\n 4\r\n ? null\r\n : e => {\r\n avatarClickAction(e, avatar, index);\r\n }\r\n }\r\n className={avatar ? avatar.ClassName : ''}\r\n />\r\n \r\n ))}\r\n \r\n )}\r\n
\r\n
\r\n \r\n {SelectedTeamMembers &&\r\n SelectedTeamMembers?.map((avatar, index) => {\r\n return (\r\n setFilter(avatar)}\r\n style={{ display: 'flex', flexDirection: 'row', padding: '4px 8px ' }}>\r\n \r\n avatarClickHandler(avatar)}\r\n className={avatar.ClassName}\r\n sx={{ width: 30, height: 30, fontSize: '0.95rem' }}\r\n />\r\n \r\n \r\n \r\n {avatar?.Email}\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n
\r\n {taskContributors.map(contributor => {\r\n const user = mentionTeamMembers?.find(user => user.id === contributor?.ContributorUserId);\r\n\r\n return (\r\n
\r\n \r\n
\r\n {/* setGetDeleteContributorId(user.id)}\r\n />\r\n }>\r\n \r\n
*/}\r\n \r\n );\r\n })}\r\n
\r\n
\r\n \r\n \r\n + \r\n */}\r\n {mentionTeamMembers?.map(element => (\r\n \r\n {element.label}\r\n \r\n ))}\r\n \r\n \r\n
\r\n// {element.label}\r\n// \r\n// ))}\r\n","import React, { useState, useRef, useEffect } from 'react';\r\nimport { FormControl } from '@mui/material';\r\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\r\nimport Select from 'react-select';\r\n\r\nconst priorityList = [\r\n {\r\n id: 1,\r\n name: 'Critical',\r\n value: '1',\r\n label: 'Critical',\r\n },\r\n {\r\n id: 2,\r\n name: 'High',\r\n value: '2',\r\n label: 'High',\r\n },\r\n {\r\n id: 3,\r\n name: 'Medium',\r\n value: '3',\r\n label: 'Medium',\r\n },\r\n {\r\n id: 4,\r\n name: 'Low',\r\n value: '4',\r\n label: 'Low',\r\n },\r\n {\r\n id: 5,\r\n name: 'Lowest',\r\n value: '5',\r\n label: 'Lowest',\r\n },\r\n];\r\nconst getPriorityName = id => {\r\n let name = 'Lowest';\r\n if (id == 1) {\r\n name = 'Critical';\r\n } else if (id == 2) {\r\n name = 'High';\r\n } else if (id == 3) {\r\n name = 'Medium';\r\n } else if (id == 4) {\r\n name = 'Low';\r\n }\r\n return name;\r\n};\r\nconst getPriorityColor = id => {\r\n let color = '#0000FF';\r\n if (id == 1) {\r\n color = '#FF0000';\r\n } else if (id == 2) {\r\n color = '#FFA500';\r\n } else if (id == 3) {\r\n color = '#FFFF00';\r\n } else if (id == 4) {\r\n color = '#008000';\r\n }\r\n return color;\r\n};\r\nconst getPriorityTextColor = id => {\r\n let color = '#FFFFFF';\r\n if (id == 1) {\r\n color = '#FFFFFF';\r\n } else if (id == 2) {\r\n color = '#000000';\r\n } else if (id == 3) {\r\n color = '#000000';\r\n } else if (id == 4) {\r\n color = '#FFFFFF';\r\n }\r\n return color;\r\n};\r\nconst customStyle = {\r\n option: (provided, isSelected) => ({\r\n ...provided,\r\n // color: isSelected ? 'red' : 'blue',\r\n width: 300,\r\n }),\r\n container: () => ({\r\n width: 300,\r\n }),\r\n control: () => ({}),\r\n menu: () => ({}),\r\n menuList: () => ({}),\r\n};\r\nconst PriorityListDropdown = ({ currentPriority, cardData, priorityChangeHandler }) => {\r\n const [openPriorityMenu, setOpenPriorityMenu] = useState(false);\r\n const selectRef = useRef(null);\r\n const nodeRef = useRef(null);\r\n const [priority, setPriority] = useState(currentPriority);\r\n\r\n const handleSelectFocus = () => {\r\n setOpenPriorityMenu(!openPriorityMenu);\r\n };\r\n useEffect(() => {\r\n if (selectRef.current) {\r\n selectRef.current.focus();\r\n }\r\n }, [selectRef.current]);\r\n // useEffect(() => {\r\n // if (openPriorityMenu) {\r\n // selectRef.current.focus();\r\n // }\r\n // }, openPriorityMenu);\r\n useEffect(() => {\r\n document.addEventListener('click', handleClickOutside, true);\r\n return () => {\r\n document.removeEventListener('click', handleClickOutside, true);\r\n };\r\n }, []);\r\n const handleClickOutside = event => {\r\n if (nodeRef.current && !nodeRef.current.contains(event.target)) {\r\n setOpenPriorityMenu(false);\r\n }\r\n };\r\n const choosePriority = args => {\r\n setOpenPriorityMenu(false);\r\n setPriority(args);\r\n priorityChangeHandler(args, cardData.id);\r\n };\r\n return (\r\n \r\n \r\n
\r\n
\r\n {currentPriority ? (\r\n
\r\n \r\n {getPriorityName(currentPriority)}\r\n \r\n \r\n ) : (\r\n
\r\n Priority Not Set\r\n \r\n )}\r\n
\r\n {openPriorityMenu && (\r\n (option.value == priority ? priority.value : cardData.PriorityId))}\r\n onChange={choosePriority}\r\n // onBlur={false}\r\n />\r\n )}\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default PriorityListDropdown;\r\n","/* eslint-disable jsx-a11y/alt-text */\r\n/**\r\n * Version 1.0.2\r\n * Vikas W\r\n * 13-10-2022\r\n * -\r\n * \"Task Management\"\r\n */\r\nimport React, { useState, useEffect, useRef, useCallback } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { useDropzone } from 'react-dropzone';\r\n\r\n// React icon\r\nimport ClearIcon from '@mui/icons-material/Clear';\r\n\r\nimport DescriptionInput from '../components/DescriptionInput';\r\nimport CommentsInput from '../components/CommentsInput';\r\nimport PageContainer from '../../../../../@jumbo/components/PageComponents/layouts/PageContainer';\r\nimport IntlMessages from '../../../../../@jumbo/utils/IntlMessages';\r\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\r\nimport InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';\r\n\r\nimport Select from 'react-select';\r\n\r\n/* Sidebar drawer */\r\nimport Drawer from '@mui/material/Drawer';\r\nimport { Button, Box, TextField, Card, CardContent, Typography, Divider, FormControl } from '@mui/material';\r\nimport { Avatar, List, ListItem, ListItemAvatar, ListItemText } from '@mui/material';\r\nimport CalendarMonthIcon from '@mui/icons-material/CalendarMonth';\r\nimport PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';\r\nimport CollectionsIcon from '@mui/icons-material/Collections';\r\nimport VideoFileIcon from '@mui/icons-material/VideoFile';\r\nimport TextSnippetOutlinedIcon from '@mui/icons-material/TextSnippetOutlined';\r\nimport TextSnippetIcon from '@mui/icons-material/TextSnippet';\r\nimport CircularProgress from '@mui/material/CircularProgress';\r\nimport moment from 'moment';\r\nimport AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';\r\n\r\nimport {\r\n FETCH_ERROR,\r\n FETCH_START,\r\n FETCH_SUCCESS,\r\n // INIT_URL,\r\n // SIGNOUT_USER_SUCCESS,\r\n // USER_DATA,\r\n // USER_TOKEN_SET,\r\n} from '../../../constants/ActionTypes';\r\nimport customAxios from '../../../util/Api';\r\nimport authHeader from '../../../../../services/auth/jwt/auth-header';\r\n\r\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\r\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\r\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\r\nimport LightboxGallery from '../../../../../@focus/LightboxGallery';\r\nimport { CommentDisplay, ReadMore, timeLineStyle, readMoreCardStyles } from './CommentDisplay';\r\nimport DownloadIcon from '@mui/icons-material/Download';\r\nimport Delete from '@mui/icons-material/Delete';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport DescriptionIcon from '@mui/icons-material/Description';\r\nimport Modal from '@mui/material/Modal';\r\nimport fileDownload from 'js-file-download';\r\nimport Tooltip from '@mui/material/Tooltip';\r\nimport { getStore } from 'redux/store';\r\nimport { useHistory } from 'react-router';\r\n// import { getStore } from '../../../../redux/store';\r\nimport { ContentState, convertFromHTML, convertFromRaw, convertToRaw, EditorState } from 'draft-js';\r\nimport { Editor } from 'react-draft-wysiwyg';\r\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';\r\nimport 'draft-js/dist/Draft.css';\r\nimport draftToHtml from 'draftjs-to-html';\r\nimport htmlToDraft from 'html-to-draftjs';\r\nimport ContributorsList from '../components/ContributorsList';\r\nimport TeamDataListView from '../TaskToolbarComponent.js/TeamDataListView';\r\nimport TaskContributorsAvatar from '../components/TaskContributorsAvatar';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport SelectContributors from '../components/SelectContributors';\r\nimport PriorityListDropdown from './PriorityListDropdown';\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n // display: 'flex',\r\n // alignItems: 'center',\r\n // paddingTop: '11px',\r\n // width: '15%',\r\n // '& > * + *': {\r\n // marginTop: theme.spacing(2),\r\n // },\r\n },\r\n}));\r\n\r\nconst styleTaskModalImage = {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n width: '60vw',\r\n bgcolor: 'background.paper',\r\n\r\n boxShadow: 24,\r\n p: 4,\r\n};\r\n\r\n/* Dropzone img preview css */\r\nconst thumb = {\r\n display: 'inline-flex',\r\n borderRadius: 2,\r\n border: '1px solid #eaeaea',\r\n // marginBottom: 8,\r\n // marginRight: 8,\r\n margin: 0,\r\n width: 40,\r\n height: 40,\r\n padding: 4,\r\n boxSizing: 'border-box',\r\n};\r\n\r\nconst thumbInner = {\r\n display: 'flex',\r\n minWidth: 0,\r\n overflow: 'hidden',\r\n alignItems: 'center',\r\n width: '100%',\r\n};\r\n\r\nconst img = {\r\n display: 'block',\r\n width: 'auto',\r\n height: '100%',\r\n};\r\n\r\nconst Modalestyle = {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n width: 400,\r\n bgcolor: 'background.paper',\r\n // border: '2px solid #000',\r\n boxShadow: 24,\r\n p: 4,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n};\r\n\r\nconst TaskDrawer = ({\r\n openDrawer,\r\n selectedCard,\r\n toggleDrawer,\r\n onInputChangeHandler,\r\n getStatusHandler,\r\n TeamId,\r\n projectListData,\r\n handleDueDateChange,\r\n inputTeamChangeHandler,\r\n inputProjectChangeHandler,\r\n handleUpdateDescriptionInBoard,\r\n addNotification,\r\n descRef,\r\n commentRef,\r\n kanbanBoard,\r\n setMentionCount,\r\n mentionCount,\r\n priorityChangeHandler,\r\n}) => {\r\n const dispatch = useDispatch();\r\n const store = getStore().getState();\r\n const { tmSelectedTeam } = store.common;\r\n /* Team Dropdown */\r\n const [openTeam, setOpenTeam] = useState(false);\r\n const [openProject, setOpenProject] = useState(false);\r\n const [isEdtingDescription, setIsEdtingDescription] = useState(false);\r\n const [isEditingComment, setIsEditingComment] = useState(false);\r\n const [quillInputValue, setQuillInputValue] = useState('');\r\n const { tmTeamMembers } = store.common;\r\n const [selectedTeam, setSelectedTeam] = React.useState(null);\r\n\r\n const [dueDateValue, setDueDateValue] = React.useState(selectedCard?.dueDate ? new Date(selectedCard?.dueDate) : null);\r\n const [open, setOpen] = React.useState(false);\r\n const [openInitialProject, setOpenInitialProject] = useState(false);\r\n const [closeInitialProject, setCloseInitialProject] = useState(false);\r\n\r\n const handleDueDateHandler = (dateChange, cardId) => {\r\n setDueDateValue(dateChange);\r\n handleDueDateChange(dateChange, cardId);\r\n };\r\n\r\n const [getActivities, setGetActivities] = useState([]);\r\n const [members, setMembers] = useState([]);\r\n\r\n const [mentionTeamMembers, setMentionTeamMembers] = useState([]);\r\n const [mentionDescMembers, setMentionDescMembers] = useState([]);\r\n const [isSearchable, setIsSearchable] = useState(true);\r\n\r\n // const [selectedCard, setSelectedCard] = useState(null);\r\n /* Comments Lists */\r\n const [comments, setComments] = useState(null);\r\n const [taskDescription, setTaskDescription] = useState(null);\r\n\r\n const [commentsData, setCommentsData] = useState([]);\r\n\r\n const [value, setValue] = useState(null);\r\n const [teams, setTeams] = useState(null);\r\n const [projectList, setProjectList] = useState([]);\r\n const [project, setProject] = useState();\r\n const nodeRef = useRef(null);\r\n\r\n const closenodeRef = useRef(null);\r\n const [deleteAttachment, setDeleteAttachment] = useState([]);\r\n const [attachmentName, setAttachmentName] = useState();\r\n\r\n const [openModal, setOpenModal] = React.useState(false);\r\n const [openEditModal, setOpenEditModal] = useState(false);\r\n const [isClearable, setIsClearable] = useState(true);\r\n\r\n /* Dropzone files */\r\n // const { acceptedFiles, getRootProps, getInputProps } = useDropzone();\r\n const [files, setFiles] = useState([]);\r\n const responses = [];\r\n const [fileValue, setFileValue] = useState([]);\r\n const [replace, setReplace] = useState(false);\r\n const [replaceData, setReplaceData] = useState();\r\n const [assignTaskTeam, setAssignTaskTeam] = React.useState([]);\r\n const [checkProject, setCheckProject] = React.useState([]);\r\n const [showFocus, setShowFocus] = React.useState(false);\r\n const selectRef = useRef(null);\r\n const [pngData, setPngData] = useState('');\r\n const [isTMImagePDF, setIsTMImagePDF] = useState(null);\r\n\r\n const [openTaskModalImage, setOpenTaskModalImage] = React.useState(false);\r\n const handleOpenTaskModalImage = () => setOpenTaskModalImage(true);\r\n const handleCloseTaskModalImage = () => setOpenTaskModalImage(false);\r\n\r\n function base64toBlob(base64Data, contentType) {\r\n contentType = contentType || '';\r\n var sliceSize = 1024;\r\n var byteCharacters = atob(base64Data);\r\n var bytesLength = byteCharacters.length;\r\n var slicesCount = Math.ceil(bytesLength / sliceSize);\r\n var byteArrays = new Array(slicesCount);\r\n\r\n for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {\r\n var begin = sliceIndex * sliceSize;\r\n var end = Math.min(begin + sliceSize, bytesLength);\r\n\r\n var bytes = new Array(end - begin);\r\n for (var offset = begin, i = 0; offset < end; ++i, ++offset) {\r\n bytes[i] = byteCharacters[offset].charCodeAt(0);\r\n }\r\n byteArrays[sliceIndex] = new Uint8Array(bytes);\r\n }\r\n return new Blob(byteArrays, { type: contentType });\r\n }\r\n\r\n const convertBase64 = file => {\r\n return new Promise((resolve, reject) => {\r\n const fileReader = new FileReader();\r\n fileReader.readAsDataURL(file);\r\n\r\n fileReader.onload = () => {\r\n resolve(fileReader.result);\r\n };\r\n\r\n fileReader.onerror = error => {\r\n reject(error);\r\n };\r\n });\r\n };\r\n\r\n const handleViewButtonClick = file => {\r\n // dispatch({ type: FETCH_START });\r\n // customAxios\r\n // .get('/Task/GetAttachments?tmTeamId=' + TeamId + '&tId=' + selectedCard.id, { headers: authHeader() })\r\n // .then(data => {\r\n // dispatch({ type: FETCH_SUCCESS });\r\n // console.log(data, 'data');\r\n // })\r\n\r\n // .catch(error => console.error(error));\r\n const bodyDescription = {\r\n Id: file?.Id,\r\n tId: selectedCard.id,\r\n tmTeamId: TeamId,\r\n };\r\n dispatch({ type: FETCH_START });\r\n customAxios\r\n .post('/Task/DownloadAttachment', bodyDescription, { headers: authHeader(), responseType: 'blob' })\r\n .then(async res => {\r\n const base64 = await convertBase64(res.data);\r\n setPngData(base64);\r\n dispatch({ type: FETCH_SUCCESS });\r\n })\r\n .catch(function(error) {\r\n dispatch({ type: FETCH_ERROR, payload: error.message });\r\n });\r\n };\r\n\r\n // dispatch({ type: FETCH_START });\r\n // customAxios\r\n // .get('/Task/GetAttachments?tmTeamId=' + TeamId + '&tId=' + selectedCard.id, { headers: authHeader() })\r\n // .then(({ data, status }) => {\r\n // dispatch({ type: FETCH_SUCCESS });\r\n\r\n // eslint-disable-next-line react-hooks/rules-of-hooks\r\n const history = useHistory();\r\n\r\n // console.log(checkProject, 'checkProject');\r\n\r\n const fileDataCheck = () => {};\r\n\r\n const handleOpen = file => {\r\n setDeleteAttachment(file);\r\n setOpenModal(true);\r\n };\r\n const handleClose = () => setOpenModal(false);\r\n\r\n const edithandleClose = () => {\r\n setOpenEditModal(false);\r\n imageDataUpdate();\r\n };\r\n\r\n useEffect(() => {\r\n /* START: Close/open team selection dropdown on outside click or inside click */\r\n // const drop = document.querySelectorAll('.customAvatar');\r\n // drop.forEach(drp => {\r\n // drp.addEventListener('click', event => {\r\n // const boxes = document.querySelectorAll('.dropdown-s');\r\n // for (const box of boxes) {\r\n // box.classList.remove(\r\n // \"dropdown-s-active\"\r\n // );\r\n // }\r\n // // event.target.nextElementSibling.classList.add(\"dropdown-s-active\");\r\n // setTimeout(() => {\r\n // // console.log(event.target.className)\r\n // event.target.nextElementSibling.classList.add(\"dropdown-s-active\");\r\n // }, 1000);\r\n // });\r\n // });\r\n // document.getElementById('root').onclick = function (e) {\r\n // const drop = document.querySelectorAll('.customAvatar');\r\n // // console.log(!e.target.className.includes('customAvatar'))\r\n // if (!e.target.className.includes('customAvatar')) {\r\n // const boxes = document.querySelectorAll('.dropdown-s');\r\n // for (const box of boxes) {\r\n // box.classList.remove(\r\n // \"dropdown-s-active\"\r\n // );\r\n // }\r\n // }\r\n // }\r\n /* END: Close/open team selection dropdown on outside click or inside click */\r\n\r\n if (tmTeamMembers.length > 0) {\r\n // console.log(tmTeamMembers);\r\n var users = tmTeamMembers.map(c => ({ value: c.TMUserId, label: c?.Email, TeamId: c.TeamId, IsAdmin: c.IsAdmin }));\r\n setAssignTaskTeam(users);\r\n }\r\n if (tmSelectedTeam) {\r\n // console.log(tmSelectedTeam);\r\n setSelectedTeam(tmSelectedTeam);\r\n }\r\n }, [tmTeamMembers, tmSelectedTeam]);\r\n\r\n const { getRootProps, getInputProps } = useDropzone({\r\n // accept: ['image/*', 'video/*', 'application/*'],\r\n onDrop: acceptedFiles => {\r\n setFiles(\r\n acceptedFiles.map(file => {\r\n return Object.assign(file, {\r\n preview: URL.createObjectURL(file),\r\n });\r\n }),\r\n );\r\n\r\n acceptedFiles.map(\r\n file => {\r\n let filterData = files.filter(\r\n filename => filename?.tAttachmentName === file?.name,\r\n // {\r\n // if (filename?.tAttachmentName === file?.name) {\r\n // setReplaceData(filename);\r\n // setOpenEditModal(true);\r\n // }\r\n // }\r\n );\r\n if (filterData.length) {\r\n setOpenEditModal(true);\r\n setAttachmentName(file?.name);\r\n }\r\n const formdata = new FormData();\r\n formdata.append('tId', selectedCard.id);\r\n formdata.append('tmTeamId', TeamId);\r\n formdata.append('flagOverwrite', filterData?.length ? 1 : 0);\r\n formdata.append('file', file);\r\n\r\n filterData.length ? setReplaceData(formdata) : updateStages(formdata);\r\n // setReplaceData(formdata);\r\n\r\n // function readFileDataAsBase64(e) {\r\n // return new Promise((resolve, reject) => {\r\n // const reader = new FileReader();\r\n\r\n // reader.onload = event => {\r\n // resolve(event.target.result);\r\n // };\r\n\r\n // reader.onerror = err => {\r\n // reject(err);\r\n // };\r\n\r\n // reader.readAsDataURL(e);\r\n // }).then(function(result) {\r\n // //Create a new attachment to store in the DB\r\n // const formdata = new FormData();\r\n // formdata.append('tId', selectedCard.id);\r\n // formdata.append('tmTeamId', TeamId);\r\n // formdata.append('flagOverwrite', 0);\r\n // formdata.append('file', acceptedFiles[0]);\r\n // // const bodyAddAttachment = {\r\n // // tId: TeamId,\r\n // // tmTeameId: selectedCard.id,\r\n // // flagOverwrite: 0,\r\n // // file: result,\r\n // // // file: file.name,\r\n // // };\r\n // // const requestOptions = {\r\n // // method: 'POST',\r\n // // headers: authHeader(),\r\n // // body: JSON.stringify(bodyAddAttachment)\r\n // // };\r\n // // fetch('http://api.focus247.online/Task/AddAttachment', requestOptions);\r\n // console.log(formdata, 'formdata');\r\n // updateStages(formdata);\r\n // // responses.push(await customAxios.post('/Task/AddAttachment', bodyAddAttachment, { headers: authHeader() }));\r\n // });\r\n },\r\n\r\n // readFileDataAsBase64(file);\r\n );\r\n },\r\n });\r\n const updateStages = async obj => {\r\n responses.push(await customAxios.post('/Task/AddAttachment', obj, { headers: authHeader() }));\r\n imageDataUpdate();\r\n };\r\n\r\n const EditAttachmentFile = () => {\r\n updateStages(replaceData);\r\n setOpenEditModal(false);\r\n };\r\n const handleDownload = file => {\r\n const bodyDescription = {\r\n Id: file?.Id,\r\n tId: selectedCard.id,\r\n tmTeamId: TeamId,\r\n };\r\n dispatch({ type: FETCH_START });\r\n customAxios\r\n .post('/Task/DownloadAttachment', bodyDescription, { headers: authHeader(), responseType: 'blob' })\r\n .then(res => {\r\n fileDownload(res.data, file?.tAttachmentName);\r\n dispatch({ type: FETCH_SUCCESS });\r\n })\r\n .catch(function(error) {\r\n dispatch({ type: FETCH_ERROR, payload: error.message });\r\n });\r\n };\r\n\r\n const thumbs = files?.map((file, index) => {\r\n // const isPDF = file?.tAttachmentName?.split('.')[1] === 'pdf';\r\n\r\n let type = file?.name?.split('.')[1];\r\n return (\r\n \r\n
\r\n \r\n
\r\n
\r\n {type === 'pdf' ? (\r\n
\r\n ) : type === 'doc' || type === 'dot' ? (\r\n
\r\n ) : type === 'xls' || type === 'xlt' || type === 'xla' || type === 'xlsx' ? (\r\n
\r\n ) : type === 'txt' || type === 'csv' || type === 'odt' || type === 'pptx' ? (\r\n
\r\n ) : type === 'movie' ||\r\n type === 'mp4' ||\r\n type === 'ogv' ||\r\n type === 'webm' ||\r\n type === 'wmv' ||\r\n type === 'avi' ||\r\n type === 'f4v' ||\r\n type === 'flv' ||\r\n type === 'mpeg' ? (\r\n
\r\n ) : type === 'png' || type === 'jpeg' || type === 'jpg' || type === 'gif' ? (\r\n
\r\n ) : (\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n \r\n {/* {file?.tAttachmentName} */}\r\n {file?.tAttachmentName?.length > 20 ? file?.tAttachmentName.substring(0, 20) + '...' : file?.tAttachmentName}\r\n
\r\n \r\n {moment\r\n .utc(file?.tAttachmentDate)\r\n .local()\r\n .format('DD-MM-YYYY')}{' '}\r\n at {''}\r\n {moment\r\n .utc(file?.tAttachmentDate)\r\n .local()\r\n .format('hh:mm A')}\r\n
\r\n \r\n
{\r\n handleViewButtonClick(file);\r\n handleOpenTaskModalImage();\r\n }}\r\n style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n marginLeft: '5px',\r\n color: 'blue',\r\n cursor: 'pointer',\r\n fontSize: '12px',\r\n }}>\r\n Preview\r\n handleDownload(file)}\r\n style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n marginLeft: '5px',\r\n color: 'blue',\r\n cursor: 'pointer',\r\n fontSize: '12px',\r\n }}>\r\n Download\r\n \r\n handleOpen(file)}\r\n style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n marginLeft: '5px',\r\n color: '#b31616',\r\n cursor: 'pointer',\r\n fontSize: '12px',\r\n }}>\r\n Delete\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n );\r\n });\r\n // const files = acceptedFiles.map(file => (\r\n // \r\n // {file.path} - {file.size} bytes\r\n // {/* \r\n // ));\r\n\r\n const imageDataUpdate = () => {\r\n let attach = [];\r\n dispatch({ type: FETCH_START });\r\n customAxios\r\n .get('/Task/GetAttachments?tmTeamId=' + TeamId + '&tId=' + selectedCard.id, { headers: authHeader() })\r\n .then(({ data, status }) => {\r\n dispatch({ type: FETCH_SUCCESS });\r\n let id = 1;\r\n setFiles(data);\r\n\r\n // let imageData = data.map(c => {\r\n // console.log(c, 'cdsfkldjfksdjfklsd');\r\n // return {\r\n // Id: c.Id,\r\n // UserId: c.UserId,\r\n // tAttachmentDate: c.tAttachmentDate,\r\n // tAttachmentFullPath: c.tAttachmentFullPath,\r\n // tAttachmentName: c.tAttachmentName,\r\n // tDateModified: c.tDateModified,\r\n // tId: c.tId,\r\n // };\r\n // });\r\n\r\n // data.forEach(oneAttach => {\r\n // console.log(oneAttach, 'oneAttach');\r\n // //convert base64 string to file data\r\n // function dataURLtoFile(dataurl, filename) {\r\n // console.log(filename, 'dataurl');\r\n // var arr = filename?.split('.'),\r\n // mime = arr[0].match(/:(.*?);/)[1],\r\n // bstr = atob(arr[1]),\r\n // n = bstr.length,\r\n // u8arr = new Uint8Array(n);\r\n\r\n // while (n--) {\r\n // u8arr[n] = bstr.charCodeAt(n);\r\n // }\r\n // return new File([u8arr], filename, { type: mime });\r\n // }\r\n\r\n // let fileData = dataURLtoFile(oneAttach.tAttachmentFullPath, oneAttach.tAttachmentName);\r\n // console.log(fileData, 'fileData');\r\n // let newFile = {\r\n // id: id,\r\n // file: fileData,\r\n // metaData: { type: fileData.type, size: fileData.size },\r\n // name: fileData.name,\r\n // thumbnail: URL.createObjectURL(fileData),\r\n // fullImage: URL.createObjectURL(fileData),\r\n // isCoved: false,\r\n // type: 'attachment',\r\n // createdAt: oneAttach.tAttachmentDate,\r\n // // user: kanbanBoard.members[0],\r\n // };\r\n // attach.push(newFile);\r\n // id++;\r\n // });\r\n setGetActivities(attach);\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n imageDataUpdate();\r\n\r\n getComments();\r\n }, [selectedCard]);\r\n\r\n useEffect(\r\n () => () => {\r\n // Make sure to revoke the data uris to avoid memory leaks\r\n files.forEach(file => URL.revokeObjectURL(file.preview));\r\n },\r\n [files],\r\n );\r\n\r\n // console.log(files, 'files');\r\n const containsWhitespace = function me(node) {\r\n var childNodes = node.childNodes;\r\n\r\n if (childNodes.length == 0) {\r\n if (node.nodeName == 'IMG') return false;\r\n return true;\r\n }\r\n\r\n for (var i = 0, length = childNodes.length; i < length; i++) {\r\n if (childNodes[i].nodeType == 1) {\r\n return me(childNodes[i]);\r\n } else if (childNodes[i].nodeType == 3) {\r\n let t = !childNodes[i].data.replace(/\\s+/g, '');\r\n return t;\r\n }\r\n }\r\n };\r\n\r\n function getCorrectedHTML(s) {\r\n let test = document.createElement('div');\r\n test.innerHTML = s;\r\n let el = [].slice.call(test.getElementsByTagName('div'));\r\n\r\n el.filter(containsWhitespace).forEach(function(element) {\r\n element.remove();\r\n });\r\n return { data: test.innerHTML, len: test.childNodes.length };\r\n }\r\n // function extractContent(s) {\r\n // var span = document.createElement('span');\r\n // span.innerHTML = s;\r\n // // console.log(span.children);\r\n // // console.log(s);\r\n\r\n // return span.getElementsByTagName('img').length > 0 || span.innerText.replace(/\\s/g, '').length != 0;\r\n // }\r\n\r\n /* Get All comments by Task ID */\r\n const getComments = () => {\r\n customAxios\r\n .get('/Task/GetComments?tmTeamId=' + TeamId + '&tId=' + selectedCard.id, { headers: authHeader() })\r\n .then(({ data, status }) => {\r\n let commentData = [];\r\n data.forEach(oneComment => {\r\n commentData.push({\r\n id: oneComment.Id,\r\n user: {\r\n id: oneComment.UserId,\r\n name: oneComment?.Email,\r\n profilePic: 'https://via.placeholder.com/150x150',\r\n email: oneComment?.Email,\r\n },\r\n\r\n comment: oneComment.tComments,\r\n type: 'comment',\r\n createdAt: oneComment.tCommentDate,\r\n });\r\n });\r\n // console.log(commentData)\r\n setCommentsData(commentData);\r\n });\r\n };\r\n /* Add comments against Task ID */\r\n const addCommentHandler = () => {\r\n const value = commentRef.current.state.value;\r\n const updatedValue = value.replace(/\\u{0}+|\\u{feff}+|\\u{200b}+|\\u{200c}+|\\u{200d}/gu, '');\r\n\r\n let correctedHtmlObj = getCorrectedHTML(updatedValue);\r\n\r\n if (updatedValue && correctedHtmlObj.len) {\r\n // console.log(selectedCard)\r\n let commentObj = {\r\n TaskId: selectedCard.id,\r\n Comment: correctedHtmlObj.data,\r\n };\r\n\r\n const noteObj = {\r\n UserIdTo: selectedCard.AssignedTo,\r\n ActivityId: selectedCard.id,\r\n NotifyMessage: 'New Comment on Task Ref:' + selectedCard.tRefNumber,\r\n FunctionalityId: selectedCard.StatusId,\r\n TeamId: selectedCard.TeamId,\r\n IsClicked: 0,\r\n };\r\n const emailObj = {\r\n type: 'comment',\r\n cardData: selectedCard,\r\n doneBy: null,\r\n message: correctedHtmlObj.data,\r\n };\r\n console.log({ noteObj, emailObj });\r\n addNotification(noteObj, emailObj);\r\n\r\n // console.log(commentObj, 'commentObj');\r\n dispatch({ type: FETCH_START });\r\n customAxios\r\n .post('/Task/AddComment', commentObj, { headers: authHeader() })\r\n .then(data => {\r\n dispatch({ type: FETCH_SUCCESS });\r\n // sendNotification()\r\n setComments(null);\r\n // editorRef.current.state.value = null;\r\n commentRef.current.setEditorContents(commentRef.current.editor, null);\r\n getComments();\r\n })\r\n .catch(function(error) {\r\n dispatch({ type: FETCH_ERROR, payload: error.message });\r\n });\r\n }\r\n };\r\n const handleCommentEditor = useCallback((value, delta, source, editor) => {\r\n // const text = editor.getContents();\r\n });\r\n\r\n const handleDescChangeEditor = (html, delta, source) => {\r\n // console.log(html);\r\n // setTaskDescription(html);\r\n };\r\n const handleDescBlurEditor = () => {\r\n // setTimeout(() => {\r\n\r\n const bodyDescription = {\r\n ColumnName: 'TaskDescription',\r\n PrimaryKeyValue: selectedCard.id,\r\n NewValue: descRef?.current?.state?.value,\r\n TableName: 'TM_Tasks',\r\n TeamId: TeamId,\r\n };\r\n if (selectedCard.description === descRef?.current?.state?.value) return;\r\n selectedCard.description = descRef?.current?.state?.value;\r\n dispatch({ type: FETCH_START });\r\n customAxios\r\n .post('/Task/EditTask', bodyDescription, { headers: authHeader() })\r\n .then(data => {\r\n dispatch({ type: FETCH_SUCCESS });\r\n getStatusHandler();\r\n handleUpdateDescriptionInBoard(descRef?.current?.state?.value, selectedCard.id);\r\n setIsEdtingDescription(prevState => false);\r\n })\r\n .catch(function(error) {\r\n dispatch({ type: FETCH_ERROR, payload: error.message });\r\n setIsEdtingDescription(prevState => false);\r\n });\r\n\r\n // }, 50);\r\n };\r\n\r\n /* START: Team Members */\r\n const setTeamMemberSelectStatus = (args, selectStatus) => {\r\n let currMembersStatus = members;\r\n currMembersStatus.forEach(item => {\r\n if (item.value == args.value) {\r\n item.isSelectedMenber = selectStatus;\r\n } else {\r\n item.isSelectedMenber = !selectStatus;\r\n }\r\n });\r\n setMembers(currMembersStatus);\r\n setOpenTeam(false);\r\n };\r\n const chooseTeamHandler = args => {\r\n // console.log(args, 'args');\r\n setTeamMemberSelectStatus(args, true);\r\n setCloseInitialProject(false);\r\n setTeams(args);\r\n inputTeamChangeHandler(args, selectedCard?.id, TeamId);\r\n setOpenTeam(false);\r\n };\r\n\r\n useEffect(() => {\r\n getTaskTeamMembers();\r\n console.log(selectedCard);\r\n }, []);\r\n\r\n const DeleteAttachmentFile = () => {\r\n let newFiles = [];\r\n const bodyDescription = {\r\n Id: deleteAttachment?.Id,\r\n tId: selectedCard.id,\r\n tmTeamId: TeamId,\r\n };\r\n files.filter(object => {\r\n if (object?.Id !== deleteAttachment?.Id) {\r\n newFiles = object;\r\n }\r\n });\r\n dispatch({ type: FETCH_START });\r\n customAxios\r\n .post('/Task/DeleteAttachment', bodyDescription, { headers: authHeader() })\r\n .then(data => {\r\n setOpenModal(false);\r\n imageDataUpdate();\r\n dispatch({ type: FETCH_SUCCESS });\r\n })\r\n .catch(function(error) {\r\n dispatch({ type: FETCH_ERROR, payload: error.message });\r\n });\r\n };\r\n\r\n const setProjectSelectStatus = (args, selectStatus) => {\r\n let currProjectStatus = projectList;\r\n currProjectStatus.forEach(item => {\r\n if (item.value == args.value) {\r\n item.isSelectedProject = true;\r\n } else {\r\n item.isSelectedProject = false;\r\n }\r\n });\r\n // console.log('setProjectList', currProjectStatus);\r\n setProjectList(currProjectStatus);\r\n };\r\n\r\n const chooseProjectHandler = args => {\r\n setProjectSelectStatus(args, true);\r\n setOpenInitialProject(false);\r\n setProject(args);\r\n inputProjectChangeHandler(args, selectedCard.id, TeamId);\r\n // setIsClearable(state => !state);\r\n setOpenProject(false);\r\n };\r\n\r\n /* Get All Users */\r\n const getTaskTeamMembers = () => {\r\n customAxios.get('/TaskTeams/GetTaskTeamMembers/' + TeamId, { headers: authHeader() }).then(({ data }) => {\r\n if (data) {\r\n console.log(data);\r\n var users = data.map(c => ({\r\n value: c.TMUserId,\r\n label: c?.Email,\r\n isSelectedMenber: c.TMUserId == (teams ? teams.value : selectedCard.AssignedTo) ? true : false,\r\n image: c.AvatarImage,\r\n }));\r\n var mentionTeamList = data.map(c => ({\r\n value: c?.Email,\r\n id: c.TMUserId,\r\n label: c?.Email,\r\n text: c?.Email,\r\n image: c.AvatarImage,\r\n }));\r\n setMembers(users);\r\n setMentionTeamMembers(mentionTeamList);\r\n // setMentionDescMembers(mentionTeamList);\r\n }\r\n });\r\n };\r\n\r\n // Check project\r\n useEffect(() => {\r\n CheckProjectIsThere();\r\n }, []);\r\n\r\n /* END: Team Members */\r\n useEffect(() => {\r\n if (projectListData) {\r\n var project = projectListData.map(c => ({\r\n value: c.pId,\r\n label: c.pName,\r\n isSelectedProject: c.pId == (project ? project.value : selectedCard.ProjectId) ? true : false,\r\n ...c,\r\n }));\r\n setProjectList(project);\r\n }\r\n }, [projectListData]);\r\n\r\n /* START: Team Dropdown selection */\r\n const customDropdownStyles = {\r\n option: (provided, isSelected) => ({\r\n ...provided,\r\n // color: isSelected ? 'red' : 'blue',\r\n width: 300,\r\n }),\r\n container: () => ({\r\n width: 300,\r\n }),\r\n control: () => ({\r\n border: 'none',\r\n display: 'none',\r\n width: 0,\r\n }),\r\n menu: () => ({\r\n width: 300,\r\n background: 'white',\r\n border: '1px solid #e1e1e1',\r\n // marginTop: '13px',\r\n }),\r\n menuList: () => ({\r\n width: 300,\r\n height: 250,\r\n overflowX: 'hidden',\r\n overflowY: 'scroll',\r\n scrollbarWidth: '0px',\r\n webkitScrollbarWidth: 'none',\r\n msScrollbarWidth: 'none',\r\n }),\r\n };\r\n const customDropdownStylesLabel = {\r\n option: (provided, isSelected) => ({\r\n ...provided,\r\n // color: isSelected ? 'red' : 'blue',\r\n width: 300,\r\n }),\r\n container: () => ({\r\n width: 300,\r\n }),\r\n control: () => ({\r\n border: 'none',\r\n display: 'none',\r\n width: 0,\r\n }),\r\n menu: () => ({\r\n width: 300,\r\n background: 'white',\r\n border: '1px solid #e1e1e1',\r\n marginTop: '13px',\r\n marginLeft: '-13px',\r\n }),\r\n menuList: () => ({\r\n width: 300,\r\n height: 250,\r\n overflowX: 'hidden',\r\n overflowY: 'scroll',\r\n scrollbarWidth: '0px',\r\n webkitScrollbarWidth: 'none',\r\n msScrollbarWidth: 'none',\r\n }),\r\n };\r\n\r\n const customStyle = {\r\n option: (provided, isSelected) => ({\r\n ...provided,\r\n // color: isSelected ? 'red' : 'blue',\r\n width: 300,\r\n }),\r\n container: () => ({\r\n width: 300,\r\n }),\r\n control: () => ({}),\r\n menu: () => ({}),\r\n menuList: () => ({}),\r\n };\r\n const returnAvatarName = (teamId, isImg) => {\r\n const teamObj = members.filter(c => c.value == teamId);\r\n if (teamObj.length > 0) {\r\n if (teamObj[0].image && isImg) {\r\n return (\r\n my text
))));\r\n\r\n const onEditorStateChanges = newEditorState => {\r\n setEditorStates(newEditorState);\r\n };\r\n\r\n const handleContentStateChanges = contentState => {\r\n setConvertedContents(draftToHtml(contentState));\r\n };\r\n const handleDescBlurEditors = () => {\r\n const bodyDescription = {\r\n ColumnName: 'TaskDescription',\r\n PrimaryKeyValue: selectedCard.id,\r\n NewValue: convertedContents,\r\n TableName: 'TM_Tasks',\r\n TeamId: TeamId,\r\n };\r\n if (selectedCard.description === convertedContents) return;\r\n selectedCard.description = convertedContents;\r\n dispatch({ type: FETCH_START });\r\n customAxios\r\n .post('/Task/EditTask', bodyDescription, { headers: authHeader() })\r\n .then(data => {\r\n dispatch({ type: FETCH_SUCCESS });\r\n getStatusHandler();\r\n handleUpdateDescriptionInBoard(convertedContents, selectedCard.id);\r\n setIsEdtingDescription(prevState => false);\r\n })\r\n .catch(function(error) {\r\n dispatch({ type: FETCH_ERROR, payload: error.message });\r\n setIsEdtingDescription(prevState => false);\r\n });\r\n };\r\n\r\n const htmlToDraftBlocks = html => {\r\n const blocksFromHtml = htmlToDraft(html);\r\n const { contentBlocks, entityMap } = blocksFromHtml;\r\n const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);\r\n const editorState = EditorState.createWithContent(contentState);\r\n return editorState;\r\n };\r\n useEffect(() => {\r\n if (taskDescription) {\r\n setEditorStates(htmlToDraftBlocks(taskDescription));\r\n focusEditor();\r\n }\r\n }, [taskDescription]);\r\n\r\n const editorRef = useRef(null);\r\n\r\n const focusEditor = () => {\r\n if (editorRef && editorRef.current) {\r\n editorRef.current.focusEditor();\r\n }\r\n };\r\n\r\n const [taskContributors, setTaskContributors] = useState([]);\r\n const [contributorLoader, setContributorLoader] = useState(true);\r\n const classes = useStyles();\r\n // const [mentionCount, setMentionCount] = useState(0);\r\n const [getDeleteContributorId, setGetDeleteContributorId] = useState(null);\r\n\r\n const getTaskContributors = () => {\r\n dispatch({ type: FETCH_START });\r\n\r\n customAxios\r\n .get(`Task/GetTaskContributors?tmTeamId=${TeamId}&tmTaskId=${selectedCard.id}`, { headers: authHeader() })\r\n .then(({ data }) => {\r\n console.log(data, 'getTaskContributors');\r\n if (data) {\r\n setTaskContributors(data);\r\n dispatch({ type: FETCH_SUCCESS });\r\n setContributorLoader(false);\r\n }\r\n })\r\n .catch(error => {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error ss' });\r\n });\r\n };\r\n\r\n const deleteTaskContributors = contributorId => {\r\n const bodyDescription = {\r\n tmTeamId: TeamId,\r\n tmTaskId: selectedCard.id,\r\n contributorId: contributorId,\r\n };\r\n dispatch({ type: FETCH_START });\r\n\r\n customAxios\r\n .post('Task/DeleteTaskContributors', bodyDescription, {\r\n headers: authHeader(),\r\n })\r\n .then(({ data }) => {\r\n if (data) {\r\n dispatch({ type: FETCH_SUCCESS });\r\n setMentionCount(prevState => prevState + 1);\r\n }\r\n })\r\n .catch(error => {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error' });\r\n return error;\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (getDeleteContributorId) {\r\n setMentionCount(prevState => prevState + 1);\r\n deleteTaskContributors(getDeleteContributorId);\r\n }\r\n }, [getDeleteContributorId]);\r\n\r\n useEffect(() => {\r\n getTaskContributors();\r\n }, [TeamId, selectedCard?.id, mentionCount]);\r\n useEffect(() => {\r\n if (commentRef && commentRef.current) {\r\n console.log(commentRef.current);\r\n commentRef.current.blur();\r\n }\r\n }, [commentRef.current]);\r\n // useEffect(() => {\r\n // if (taskContributors.length > 0) {\r\n // getTaskContributors();\r\n // }\r\n // }, [taskContributors]);\r\n\r\n return (\r\n \r\n \r\n {selectedCard && (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n {selectedTeam?.TMPrefix}:{selectedCard && selectedCard?.tRefNumber}\r\n \r\n onInputChangeHandler(event, selectedCard?.id)}\r\n defaultValue={selectedCard?.title}\r\n size=\"small\"\r\n InputLabelProps={{ shrink: false }}\r\n style={{ width: '100%' }}\r\n inputProps={{ style: { fontSize: '16px', fontWeight: 'bold', padding: '15px 15px' } }}\r\n />\r\n \r\n {/*
\r\n Click me\r\n */}\r\n
\r\n id.isSelectedProject == false)\r\n .filter(c => c.pTeamId === selectedCard.tmTeamId)}\r\n value={projectList.find(id => id.value == (project ? project.value : selectedCard.ProjectId))}\r\n onChange={chooseProjectHandler}\r\n />\r\n
*/}\r\n\r\n \r\n Priority \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n {showFocus ? (\r\n \r\n Save\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n Drag 'n' drop some files here, or click to select files \r\n
\r\n \r\n\r\n {/*
Files */}\r\n
\r\n {thumbs}
\r\n {getActivities.length > 0 &&\r\n getActivities.map((file, idx) => (\r\n \r\n
\r\n
\r\n {file.metaData.type.split('/')[1] === 'xlsx' ||\r\n file.metaData.type.split('/')[1] === 'xls' ||\r\n file.metaData.type ===\r\n 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||\r\n file.metaData.type === 'application/vnd.ms-excel' ? (\r\n
\r\n \r\n ) : file.metaData.type.split('/')[1] === 'png' ||\r\n file.metaData.type.split('/')[1] === 'jpeg' ||\r\n file.metaData.type.split('/')[1] === 'jpg' ||\r\n file.metaData.type.split('/')[1] === 'gif' ? (\r\n
\r\n \r\n ) : file.metaData.type.split('/')[1] === 'pdf' ? (\r\n
\r\n \r\n ) : file.metaData.type.split('/')[1] === 'csv' ? (\r\n
\r\n \r\n ) : //
\r\n file.metaData.type.split('/')[1] === 'doc' ||\r\n file.metaData.type.split('/')[1] === 'docx' ||\r\n file.metaData.type ===\r\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||\r\n file.metaData.type === 'application/msword' ? (\r\n
\r\n \r\n ) : file.metaData.type.split('/')[1] === 'pptx' ||\r\n file.metaData.type.split('/')[1] === 'ppt' ||\r\n file.metaData.type ===\r\n 'application/vnd.openxmlformats-officedocument.presentationml.presentation' ? (\r\n
\r\n \r\n ) : file.metaData.type.split('/')[1] === 'txt' || file.metaData.type === 'text/plain' ? (\r\n
\r\n \r\n ) : file.metaData.type.split('/')[1] === 'odt' ||\r\n file.metaData.type === 'application/vnd.oasis.opendocument.text' ? (\r\n
\r\n \r\n ) : file.metaData.type.split('/')[1] === 'movie' ||\r\n file.metaData.type.split('/')[1] === 'mp4' ||\r\n file.metaData.type.split('/')[1] === 'ogv' ||\r\n file.metaData.type.split('/')[1] === 'webm' ||\r\n file.metaData.type.split('/')[1] === 'mpeg' ||\r\n file.metaData.type.split('/')[1] === 'wmv' ||\r\n file.metaData.type.split('/')[1] === 'avi' ||\r\n file.metaData.type.split('/')[1] === 'f4v' ||\r\n file.metaData.type.split('/')[1] === 'flv' ||\r\n file.metaData.type === 'video/x-sgi-movie' ||\r\n file.metaData.type === 'video/mp4' ||\r\n file.metaData.type === 'video/ogg' ||\r\n file.metaData.type === 'video/webm' ||\r\n file.metaData.type === 'video/x-ms-wmv' ||\r\n file.metaData.type === 'video/x-msvideo' ||\r\n file.metaData.type === 'video/x-f4v' ||\r\n file.metaData.type === 'video/x-flv' ||\r\n file.metaData.type === 'video/mpeg' ? (\r\n
\r\n \r\n ) : (\r\n undefined\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n {/*
\r\n
*/}\r\n\r\n {/*
*/}\r\n\r\n
\r\n Comment\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Are you sure delete{' '}\r\n {deleteAttachment?.tAttachmentName} {''} this\r\n Attachment\r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n Delete\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n This File {''}\r\n {attachmentName} {''} Already Exists,Do you want\r\n replace it?\r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n Replace\r\n \r\n
\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default TaskDrawer;\r\n","import React from 'react';\r\nimport { TextField } from '@material-ui/core';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst AppTextInput = ({ type, name, id, fullWidth, size, value, onChange, onBlur, helperText, variant, error, ...rest }) => {\r\n return (\r\n $1 ');\r\n\r\n //URLs starting with \"www.\" (without // before it, or it'd re-link the ones done above).\r\n replacePattern2 = /(^|[^\\\\/])(www\\.[\\S]+(\\b|$))/gim;\r\n replacedText = replacedText.replace(replacePattern2, '$1$2 ');\r\n\r\n //Change email addresses to mailto:: links.\r\n replacePattern3 = /(([a-zA-Z0-9\\-_.])+@[a-zA-Z0-9\\\\-]+?(\\.[a-zA-Z]{2,6})+)/gim;\r\n replacedText = replacedText.replace(replacePattern3, '$1 ');\r\n\r\n return replacedText;\r\n};\r\n\r\nexport const geValidUrl = (url, ubSecureUrl = false) => {\r\n if (!url.match(/^[a-zA-Z]+:\\/\\//)) {\r\n if (ubSecureUrl) {\r\n return 'http://' + url;\r\n }\r\n return 'https://' + url;\r\n }\r\n\r\n return url;\r\n};\r\n\r\nexport const useDebounce = (value, delay) => {\r\n // State and setters for debounced value\r\n const [debouncedValue, setDebouncedValue] = useState('');\r\n\r\n useEffect(\r\n () => {\r\n // Set debouncedValue to value (passed in) after the specified delay\r\n const handler = setTimeout(() => {\r\n setDebouncedValue(value);\r\n }, delay);\r\n\r\n // Return a cleanup function that will be called every time ...\r\n // ... useEffect is re-called. useEffect will only be re-called ...\r\n // ... if value changes (see the inputs array below).\r\n // This is how we prevent debouncedValue from changing if value is ...\r\n // ... changed within the delay period. Timeout gets cleared and restarted.\r\n // To put it in context, if the user is typing within our app's ...\r\n // ... search box, we don't want the debouncedValue to update until ...\r\n // ... they've stopped typing for more than 500ms.\r\n return () => {\r\n clearTimeout(handler);\r\n };\r\n },\r\n // Only re-call effect if value changes\r\n // You could also add the \"delay\" var to inputs array if you ...\r\n // ... need to be able to change that dynamically.\r\n [value, delay],\r\n );\r\n\r\n return debouncedValue;\r\n};\r\n","import { makeStyles } from '@material-ui/core/styles';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n root: {\r\n marginTop: 12,\r\n },\r\n}));\r\n\r\nexport default useStyles;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Select from 'react-select';\r\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\r\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\r\n\r\nimport CalendarMonthIcon from '@mui/icons-material/CalendarMonth';\r\nimport { getStore } from '../../../../redux/store';\r\nimport { getDateText, getFormattedDate } from '@jumbo/utils/dateHelper';\r\nimport { Backdrop, Box, Button, Fade, Modal, TextField } from '@mui/material';\r\nimport { CalendarPicker } from '@mui/x-date-pickers';\r\n\r\nconst AddNewTask = ({\r\n type,\r\n name,\r\n id,\r\n fullWidth,\r\n size,\r\n value,\r\n onChange,\r\n onBlur,\r\n helperText,\r\n selectedCard,\r\n variant,\r\n error,\r\n AssignedTo,\r\n tDueDate,\r\n laneId,\r\n StatusId,\r\n tmTeamId,\r\n ProjectId,\r\n inputTeamChangeHandler,\r\n dueDate,\r\n handleDueDateChange,\r\n TeamId,\r\n selectMember,\r\n onCancel,\r\n ...rest\r\n}) => {\r\n const [openTeam, setOpenTeam] = useState(false);\r\n const [assignTaskTeam, setAssignTaskTeam] = React.useState([]);\r\n const [selectedTeam, setSelectedTeam] = React.useState(null);\r\n const [assigned, setAssigned] = React.useState([]);\r\n const [tmMember, setTMMember] = React.useState(null);\r\n const [updateDate, setUpdateDate] = React.useState(null);\r\n const [open, setOpen] = React.useState(false);\r\n const nodeRef = useRef(null);\r\n\r\n // const dispatch = useDispatch();\r\n const dispatch = getStore().dispatch;\r\n\r\n const customDropdownStyles = {\r\n menuList: () => ({\r\n overflow: 'hidden',\r\n }),\r\n };\r\n const store = getStore().getState();\r\n const { tmTeamMembers } = store.common;\r\n const { tmSelectedTeam } = store.common;\r\n // const { tmDatePickerPlag } = store.common;\r\n\r\n // console.log(tmDatePickerPlag, 'tmDatePickerPlag');\r\n\r\n const returnAvatarName = teamId => {\r\n const teamObj = tmTeamMembers.filter(c => c.TMUserId == teamId);\r\n if (teamObj.length > 0) {\r\n return teamObj[0].Email;\r\n }\r\n return 'None';\r\n };\r\n const chooseTeamHandler = args => {\r\n const member = tmTeamMembers.filter(member => member.Email === args.label);\r\n setTMMember(member);\r\n setOpenTeam(false);\r\n setAssigned(args.value);\r\n inputTeamChangeHandler(member);\r\n };\r\n const handleDueDateHandler = dateChange => {\r\n handleDueDateChange(new Date(dateChange));\r\n setOpen(prevstate => {\r\n return false;\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (tmTeamMembers.length > 0) {\r\n var users = tmTeamMembers.map(c => ({\r\n value: c.TMUserId,\r\n label: c.Email,\r\n TeamId: c.TeamId,\r\n IsAdmin: c.IsAdmin,\r\n }));\r\n setAssignTaskTeam(users);\r\n }\r\n if (tmSelectedTeam) {\r\n setSelectedTeam(tmSelectedTeam);\r\n }\r\n }, [tmTeamMembers, tmSelectedTeam]);\r\n\r\n useEffect(() => {\r\n if (AssignedTo) {\r\n setAssigned(AssignedTo);\r\n }\r\n }, [AssignedTo]);\r\n\r\n const modalStyle = {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n width: 400,\r\n bgcolor: 'background.paper',\r\n border: '2px solid #000',\r\n boxShadow: 24,\r\n p: 4,\r\n };\r\n const handleClose = () => {\r\n setOpen(prevstate => {\r\n return false;\r\n });\r\n };\r\n const handleClickOutside = event => {\r\n if (nodeRef.current && !nodeRef.current.contains(event.target)) {\r\n return setOpenTeam(false);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n document.addEventListener('click', handleClickOutside, true);\r\n return () => {\r\n document.removeEventListener('click', handleClickOutside, true);\r\n };\r\n }, []);\r\n return (\r\n \r\n
\r\n
\r\n
setOpenTeam(!openTeam)}>\r\n {assignTaskTeam && returnAvatarName(selectMember).substring(0, 2)}\r\n
\r\n
\r\n {openTeam && (\r\n \r\n c.id == selectMember)}\r\n onChange={chooseTeamHandler}\r\n />\r\n \r\n )}\r\n \r\n
{\r\n setOpen(true);\r\n }}>\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {updateDate ? (\r\n \r\n {getDateText(getFormattedDate(updateDate, 'MMM DD, YYYY'))}\r\n \r\n ) : (\r\n dueDate && (\r\n \r\n {getDateText(getFormattedDate(dueDate, 'MMM DD, YYYY'))}\r\n \r\n )\r\n )}\r\n \r\n \r\n Save\r\n \r\n \r\n Cancel\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nAddNewTask.prototype = {\r\n type: PropTypes.string,\r\n name: PropTypes.string,\r\n id: PropTypes.string,\r\n fullWidth: PropTypes.bool,\r\n value: PropTypes.string,\r\n variant: PropTypes.string,\r\n size: PropTypes.string,\r\n on: PropTypes.func,\r\n error: PropTypes.bool,\r\n helperText: PropTypes.bool,\r\n AssignedTo: PropTypes.string,\r\n tDueDate: PropTypes.bool,\r\n laneId: PropTypes.string,\r\n StatusId: PropTypes.string,\r\n tmTeamId: PropTypes.string,\r\n ProjectId: PropTypes.string,\r\n};\r\n\r\nAddNewTask.defaultProps = {\r\n type: 'text',\r\n fullWidth: true,\r\n size: 'small',\r\n error: false,\r\n helperText: '',\r\n // id: '',\r\n};\r\n\r\nexport default AddNewTask;\r\n","import React, { useState } from 'react';\r\nimport Box from '@material-ui/core/Box';\r\nimport Button from '@material-ui/core/Button';\r\nimport { IconButton } from '@material-ui/core';\r\nimport { Close } from '@material-ui/icons';\r\n\r\nimport AppTextInput from '../../../../../@jumbo/components/Common/formElements/AppTextInput';\r\nimport { idGenerator } from '../../../../../@jumbo/utils/commonHelper';\r\nimport { kanbanBoard } from '../../../../../routes/Pages/Planning/TaskmanagementPage/components/kanbanBoard';\r\nimport CmtCard from '../../../../../@coremat/CmtCard';\r\nimport useStyles from './index.style';\r\n\r\nimport customAxios from '../../../util/Api';\r\nimport authHeader from '../../../../../services/auth/jwt/auth-header';\r\nimport AddNewTask from '@jumbo/components/Common/formElements/AddNewTask';\r\n\r\nconst AddNewCard = ({ onAdd, onCancel, laneId }) => {\r\n const user = kanbanBoard.members[0];\r\n const classes = useStyles();\r\n const [title, setTitle] = useState('');\r\n const [dueDate, setDueDate] = useState();\r\n const [selectMember, setSelectMember] = useState(null);\r\n const onCardSave = () => {\r\n if (title) {\r\n const card = {\r\n title,\r\n laneId: laneId,\r\n description: '',\r\n dueDate,\r\n assignTo: selectMember,\r\n memberIds: [],\r\n activities: [\r\n {\r\n id: idGenerator(),\r\n user,\r\n content: 'added this card to Tasks.',\r\n type: 'activity',\r\n createdAt: new Date(),\r\n },\r\n ],\r\n };\r\n onAdd(card);\r\n }\r\n };\r\n\r\n const handleDueDateChange = date => {\r\n setDueDate(date);\r\n };\r\n\r\n const inputTeamChangeHandler = member => {\r\n let memberId = member[0].TMUserId;\r\n setSelectMember(memberId);\r\n };\r\n return (\r\n \r\n \r\n \r\n setTitle(e.target.value)}\r\n variant=\"outlined\"\r\n handleDueDateChange={handleDueDateChange}\r\n inputTeamChangeHandler={inputTeamChangeHandler}\r\n {...{\r\n dueDate,\r\n selectMember,\r\n onCancel,\r\n }}\r\n />\r\n \r\n \r\n {/* \r\n Add Card\r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AddNewCard;\r\n","import React, { createRef, useState, useEffect, useRef } from 'react';\r\nimport { connect, useDispatch, useSelector } from 'react-redux';\r\nimport { getStore } from '../../../../redux/store';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { ClickAwayListener } from '@material-ui/core';\r\nimport AppTextInput from '../../../../@jumbo/components/Common/formElements/AppTextInput';\r\n\r\n/* Modal delete or archive */\r\nimport Button from '@mui/material/Button';\r\nimport { styled } from '@mui/material/styles';\r\nimport Dialog from '@mui/material/Dialog';\r\nimport DialogTitle from '@mui/material/DialogTitle';\r\nimport DialogContent from '@mui/material/DialogContent';\r\nimport DialogActions from '@mui/material/DialogActions';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport Typography from '@mui/material/Typography';\r\nimport { FETCH_ERROR, FETCH_START, FETCH_SUCCESS } from '@jumbo/constants/ActionTypes';\r\nimport customAxios from 'routes/Pages/util/Api';\r\nimport authHeader from 'services/auth/jwt/auth-header';\r\nimport moment from 'moment';\r\nimport { kanbanBoard } from './components/kanbanBoard';\r\nimport { setMultiArchive } from 'redux/actions';\r\n\r\nconst BootstrapDialog = styled(Dialog)(({ theme }) => ({\r\n '& .MuiDialogContent-root': {\r\n padding: theme.spacing(2),\r\n },\r\n '& .MuiDialogActions-root': {\r\n padding: theme.spacing(1),\r\n },\r\n}));\r\n\r\nfunction BootstrapDialogTitle(props) {\r\n const { children, onClose, ...other } = props;\r\n\r\n return (\r\n \r\n {children}\r\n {onClose ? (\r\n theme.palette.grey[500],\r\n }}>\r\n \r\n );\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n padding: 0,\r\n },\r\n inputBoxWrapper: {\r\n flex: 1,\r\n zIndex: 9999,\r\n },\r\n inputBox: {\r\n backgroundColor: theme.palette.background.paper,\r\n '& .MuiOutlinedInput-input': {\r\n padding: '5px 5px',\r\n },\r\n },\r\n listTitle: {\r\n cursor: 'pointer',\r\n color: theme.palette.text.primary,\r\n flex: 1,\r\n padding: '5px 5px',\r\n },\r\n menuHandle: {\r\n marginLeft: 4,\r\n },\r\n}));\r\n\r\nconst ListHeader = ({\r\n updateTitle,\r\n laneId,\r\n canAddLanes,\r\n onDelete,\r\n label,\r\n title,\r\n titleStyle,\r\n labelStyle,\r\n laneDraggable,\r\n cards,\r\n}) => {\r\n const classes = useStyles();\r\n const [edit, setEdit] = useState(false);\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const [selectedTeam, setSelectedTeam] = React.useState(null);\r\n const [cardLength, setCardLength] = React.useState(0);\r\n const [archivecardLength, setArchiveCardLength] = React.useState(0);\r\n const [selectedCard, setSelectedCard] = useState(null);\r\n const dispatch = getStore().dispatch;\r\n const [boardData, setBoardData] = useState(kanbanBoard.boards);\r\n\r\n const headerRef = createRef();\r\n const store = getStore().getState();\r\n const { tmSelectedTeam } = store.common;\r\n\r\n useEffect(() => {\r\n if (cards.length > 0) {\r\n setCardLength(cards.length);\r\n }\r\n if (tmSelectedTeam) {\r\n setSelectedTeam(tmSelectedTeam);\r\n }\r\n }, [cards, tmSelectedTeam, cardLength]);\r\n\r\n /* Modal */\r\n const [openModal, setOpenModal] = React.useState(false);\r\n\r\n const [archiveOpenModal, setArchiveOpenModal] = React.useState(false);\r\n\r\n const dropDownBtnRef = useRef(null);\r\n const handleModalClickOpen = () => {\r\n setOpenModal(true);\r\n };\r\n const handleModalCancle = () => {\r\n setOpenModal(false);\r\n };\r\n const handleModalClose = () => {\r\n onDelete();\r\n setOpenModal(false);\r\n };\r\n\r\n const openArchivemodal = () => {\r\n setArchiveOpenModal(true);\r\n let archiveObj = [];\r\n cards.map(item => {\r\n archiveObj = [\r\n ...archiveObj,\r\n {\r\n tmTeamId: item?.tmTeamId,\r\n TaskId: item?.id,\r\n },\r\n ];\r\n });\r\n setArchiveCardLength(archiveObj.length);\r\n };\r\n\r\n const handleArchiveModalClose = () => {\r\n let archiveObj = [];\r\n cards.map(item => {\r\n archiveObj = [\r\n ...archiveObj,\r\n {\r\n tmTeamId: item?.tmTeamId,\r\n TaskId: item?.id,\r\n laneId: item?.StatusId,\r\n },\r\n ];\r\n });\r\n const archiveData = {\r\n card: cards,\r\n laneId: archiveObj[0]?.laneId,\r\n };\r\n\r\n dispatch(setMultiArchive(archiveData));\r\n\r\n // dispatch({ type: FETCH_START });\r\n // customAxios\r\n // .post('/Task/ArchiveMultipleTasks', archiveObj, { headers: authHeader() })\r\n // .then(data => {\r\n // dispatch({ type: FETCH_SUCCESS });\r\n // setBoardData(prevState => {\r\n // let newState = { ...prevState };\r\n // let cardData = newState.lanes?.filter(cardData => {\r\n // return cardData?.id != cards[0]?.laneId;\r\n // });\r\n // let data = { ...cardData };\r\n // return data;\r\n // });\r\n // })\r\n // .catch(function(error) {\r\n // dispatch({ type: FETCH_ERROR, payload: error.message });\r\n // });\r\n setArchiveOpenModal(false);\r\n };\r\n useEffect(() => {\r\n document.addEventListener('click', handleClickOutside, true);\r\n return () => {\r\n document.removeEventListener('click', handleClickOutside, true);\r\n };\r\n }, []);\r\n const handleClick = () => {\r\n setAnchorEl(headerRef.current);\r\n };\r\n\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n };\r\n const handleClickOutside = () => {\r\n dropDownBtnRef.current.classList.remove('btn-currentActive');\r\n };\r\n const handleDropDownBtnClick = () => {\r\n dropDownBtnRef.current.classList.toggle('btn-currentActive');\r\n };\r\n\r\n let isUserAdmin = selectedTeam && selectedTeam.IsAdmin;\r\n return (\r\n \r\n {edit && isUserAdmin ? (\r\n
setEdit(false)}>\r\n \r\n
{\r\n updateTitle(e.target.value);\r\n //kanbanBoard.boards.lanes.find()\r\n }}\r\n />\r\n \r\n ) : (\r\n
setEdit(true)}\r\n style={{ fontSize: 16 }}>\r\n {title}\r\n \r\n )}\r\n\r\n {label && {label} }\r\n\r\n {canAddLanes && (\r\n \r\n )}\r\n\r\n \r\n \r\n Are you sure you want to delete this section? \r\n \r\n \r\n \r\n This Section \"{title ? title : ''}\" included {cardLength.toString()} Tasks.\r\n \r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n Delete Section\r\n \r\n \r\n \r\n\r\n setArchiveOpenModal(false)}\r\n aria-labelledby=\"delete-section-modal\"\r\n open={archiveOpenModal}>\r\n setArchiveOpenModal(false)}>\r\n Are you sure you want to archive this section? \r\n \r\n \r\n \r\n This Section \"{title ? title : ''}\" included {archivecardLength.toString()} {' '}\r\n Tasks.\r\n \r\n \r\n \r\n setArchiveOpenModal(false)}>\r\n Cancel\r\n \r\n \r\n Archive Section\r\n \r\n \r\n \r\n \r\n tmClickHandler()} startIcon={ \r\n \r\n );\r\n};\r\n\r\nexport default AddCardButton;\r\n","import React, { useState } from 'react';\r\nimport Box from '@material-ui/core/Box';\r\nimport Button from '@material-ui/core/Button';\r\nimport { IconButton } from '@material-ui/core';\r\nimport { Close } from '@material-ui/icons';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nimport AppTextInput from '../../../../@jumbo/components/Common/formElements/AppTextInput';\r\nimport CmtCard from '../../../../@coremat/CmtCard';\r\nimport { idGenerator } from '../../../../@jumbo/utils/commonHelper';\r\nimport customAxios from '../../util/Api';\r\nimport authHeader from '../../../../services/auth/jwt/auth-header';\r\nimport { kanbanBoard } from '../../../../routes/Pages/Planning/TaskmanagementPage/components/kanbanBoard';\r\nconst useStyles = makeStyles(() => ({\r\n root: {\r\n marginTop: 5,\r\n width: 270,\r\n height: 103.75,\r\n },\r\n}));\r\n\r\nconst NewListForm = ({ onCancel, onAdd }) => {\r\n const classes = useStyles();\r\n const [title, setTitle] = useState('');\r\n\r\n const onListSave = async () => {\r\n if (title) {\r\n let id = idGenerator().toString();\r\n //console.log(kanbanBoard.teamIds);\r\n\r\n let newStatus = {\r\n tmTeamId: kanbanBoard.teamIds ? kanbanBoard.teamIds.value : undefined,\r\n SortOrder: 1,\r\n tmStatusName: title,\r\n tmStatusDesc: title,\r\n };\r\n await customAxios.post('/Task/AddStatus', newStatus, { headers: authHeader() });\r\n onAdd({ id: id, title: title });\r\n } else {\r\n onCancel();\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n setTitle(e.target.value)}\r\n variant=\"outlined\"\r\n />\r\n \r\n \r\n \r\n Save\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default NewListForm;\r\n","import React from 'react';\r\nimport { Box, Button } from '@material-ui/core';\r\nimport { Add } from '@material-ui/icons';\r\n\r\nconst NewListButton = ({ onClick }) => {\r\n return (\r\n \r\n \r\n );\r\n};\r\n\r\nexport default NewListButton;\r\n","/**\r\n * Version 1.0\r\n * Vikas W\r\n * 24.09.2022\r\n * -\r\n * This component is shown when we want to add a new invoice.\r\n */\r\nimport React, { useState, useEffect } from 'react';\r\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\r\nimport { useDispatch } from 'react-redux';\r\nimport customAxios from '../../util/Api';\r\nimport authHeader from '../../../../services/auth/jwt/auth-header';\r\nimport { FETCH_ERROR, FETCH_START, FETCH_SUCCESS } from '../../constants/ActionTypes';\r\n\r\n/* Material Components */\r\nimport { Select, MenuItem, Button, FormControl, InputLabel } from '@mui/material';\r\nimport IntlMessages from '../../util/IntlMessages';\r\nimport { useForm } from 'react-hook-form';\r\nimport { ErrorMessage } from '@hookform/error-message';\r\n\r\n/* import xlsx package */\r\nimport * as XLSX from 'xlsx';\r\n\r\nconst ImportExcel = ({ modal, toggle, selectedTeam, statusByTeam, getStatusHandler }) => {\r\n const dispatch = useDispatch();\r\n const [status, setStatus] = useState(null);\r\n const [allStatus, setAllStatus] = useState([]);\r\n const [crmDefault, setCrmDefault] = useState([\r\n // { TableColumnName: 'tmTeamId', ExelColumnName: '' },\r\n { TableColumnName: 'ClientId', TableColumnLabel: 'Client Name', ExelColumnName: '' },\r\n { TableColumnName: 'tName', TableColumnLabel: 'Task Name', ExelColumnName: '' },\r\n // { TableColumnName: 'StatusId', ExelColumnName: '' },\r\n { TableColumnName: 'TaskDescription', TableColumnLabel: 'Task Description', ExelColumnName: '' },\r\n { TableColumnName: 'TaskDueDate', TableColumnLabel: 'Due Date', ExelColumnName: '' },\r\n { TableColumnName: 'AssignedToId', TableColumnLabel: 'Assigned To', ExelColumnName: '' },\r\n { TableColumnName: 'TaskDescription2', TableColumnLabel: 'Project Name', ExelColumnName: '' },\r\n ]);\r\n const [buttonDisabled, setButtonDisabled] = useState(false);\r\n const [selectedFile, setSelectedFile] = useState(null);\r\n const [excelData, setExcelData] = useState(null);\r\n const [excelFile, setExcelFile] = useState(null);\r\n const [excelFileError, setExcelFileError] = useState(null);\r\n let fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';\r\n let fileCSVType = 'text/csv';\r\n const {\r\n register,\r\n control,\r\n formState: { errors },\r\n handleSubmit,\r\n setError,\r\n } = useForm({});\r\n\r\n useEffect(() => {\r\n // console.log(statusByTeam);\r\n if (statusByTeam) {\r\n const status = statusByTeam.map(status => ({ label: status.title, value: status.id }));\r\n setAllStatus(status);\r\n }\r\n }, [statusByTeam]);\r\n /* Select Dropdown column Map*/\r\n const [excelColumnMap, setExcelColumnMap] = useState([]);\r\n\r\n const handleChange = (event, mapName) => {\r\n let finalMap = crmDefault.map(data => {\r\n if (data.TableColumnName === mapName.TableColumnName) {\r\n data.ExelColumnName = event.target.value;\r\n }\r\n return data;\r\n });\r\n };\r\n const handleStatusChange = event => {\r\n // console.log(event.target.value);\r\n setStatus(event.target.value);\r\n };\r\n\r\n const handlefle = e => {\r\n let selectedFile = e.target.files[0];\r\n if (selectedFile) {\r\n if (selectedFile && (fileType.includes(selectedFile.type) || fileCSVType.includes(selectedFile.type))) {\r\n let reader = new FileReader();\r\n reader.readAsArrayBuffer(selectedFile);\r\n reader.onload = e => {\r\n setExcelFileError(null);\r\n setExcelFile(e.target.result);\r\n // console.log(e.target.result);\r\n };\r\n } else {\r\n setExcelFileError('please select excel file type');\r\n setExcelFile(null);\r\n }\r\n }\r\n };\r\n\r\n const importSubmit = e => {\r\n e.preventDefault();\r\n setButtonDisabled(true);\r\n let sheetWiseData = [];\r\n if (excelFile !== null) {\r\n const workbook = XLSX.read(excelFile, { type: 'buffer' });\r\n // console.log(workbook.SheetNames);\r\n workbook.SheetNames.forEach(sheetName => {\r\n const worksheet = workbook.Sheets[sheetName];\r\n const data = XLSX.utils.sheet_to_json(worksheet);\r\n sheetWiseData = [...sheetWiseData, ...data];\r\n });\r\n\r\n if (sheetWiseData) {\r\n setExcelData(sheetWiseData);\r\n var keys = Object.keys(sheetWiseData[0]);\r\n let data = keys.map(data => ({ label: data, value: data }));\r\n // console.log(data);\r\n setExcelColumnMap(data);\r\n }\r\n } else {\r\n setExcelData(null);\r\n }\r\n };\r\n\r\n const fileSubmitHandler = () => {\r\n const finalObj = [];\r\n excelData.forEach(data => {\r\n finalObj.push({\r\n tmTeamId: selectedTeam.value,\r\n StatusId: status,\r\n ClientId: data[crmDefault.filter(val => val.TableColumnName === 'ClientId')[0].ExelColumnName]\r\n ? data[crmDefault.filter(val => val.TableColumnName === 'ClientId')[0].ExelColumnName]\r\n : null,\r\n tName: data[crmDefault.filter(val => val.TableColumnName === 'tName')[0].ExelColumnName]\r\n ? data[crmDefault.filter(val => val.TableColumnName === 'tName')[0].ExelColumnName]\r\n : null,\r\n TaskDescription: data[crmDefault.filter(val => val.TableColumnName === 'TaskDescription')[0].ExelColumnName]\r\n ? data[crmDefault.filter(val => val.TableColumnName === 'TaskDescription')[0].ExelColumnName]\r\n : null,\r\n AssignedToId: data[crmDefault.filter(val => val.TableColumnName === 'AssignedToId')[0].ExelColumnName]\r\n ? data[crmDefault.filter(val => val.TableColumnName === 'AssignedToId')[0].ExelColumnName]\r\n : null,\r\n TaskDueDate: data[crmDefault.filter(val => val.TableColumnName === 'TaskDueDate')[0].ExelColumnName]\r\n ? data[crmDefault.filter(val => val.TableColumnName === 'TaskDueDate')[0].ExelColumnName]\r\n : null,\r\n });\r\n });\r\n // console.log(finalObj);\r\n dispatch({ type: FETCH_START });\r\n customAxios\r\n .post('/Task/AddMultipleTasks', finalObj, { headers: authHeader() })\r\n .then(data => {\r\n dispatch({ type: FETCH_SUCCESS });\r\n getStatusHandler(selectedTeam.value);\r\n toggle();\r\n })\r\n .catch(function(error) {\r\n if (error.response.status == '400') {\r\n var errorList = error.response.data.errors;\r\n if (errorList) {\r\n Object.keys(errorList).forEach((key, index) => {\r\n setError('apiError', {\r\n message: errorList[key],\r\n });\r\n });\r\n }\r\n }\r\n dispatch({ type: FETCH_ERROR, payload: error.message });\r\n });\r\n };\r\n\r\n // useEffect(() => {\r\n // setCrmTeamId(currentTeam != {} ? currentTeam.value : null);\r\n // setCrmStageId(currTabInfo != {} ? currTabInfo.StageId : null);\r\n // }, [excelData]);\r\n\r\n return (\r\n \r\n \r\n Bulk Upload CSV/Excel\r\n \r\n × \r\n \r\n \r\n\r\n \r\n \r\n
{message}
} />\r\n \r\n \r\n
\r\n
\r\n
{excelFileError &&
{excelFileError}
}
\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n Columns \r\n \r\n
\r\n
\r\n
\r\n \r\n Imported Column Names \r\n \r\n
\r\n
\r\n
\r\n Team Name \r\n
\r\n
\r\n
{selectedTeam.label}
\r\n
\r\n
\r\n
\r\n Status \r\n
\r\n
\r\n
\r\n \r\n handleStatusChange(e)}\r\n // value={value}\r\n >\r\n {allStatus.map((element, idx) => {\r\n // const [[key, val]] = Object.entries(element);\r\n return (\r\n \r\n {element.label}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {row.TableColumnLabel} \r\n
\r\n
\r\n
\r\n \r\n handleChange(e, row)}\r\n // value={value}\r\n >\r\n Empty \r\n {excelColumnMap.map((element, idx) => {\r\n const [[key, val]] = Object.entries(element);\r\n return (\r\n \r\n {val}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n {buttonDisabled && (\r\n \r\n Cancel \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ImportExcel;\r\n","import React from 'react';\r\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\r\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\r\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\r\nimport moment from 'moment';\r\nimport CalendarMonthIcon from '@mui/icons-material/CalendarMonth';\r\nimport { Button } from '@material-ui/core';\r\nimport TextField from '@material-ui/core/TextField';\r\n\r\nexport const CustomeDatePicker = ({ open, OpenDate, CloseDate, value, handleDateHandler }) => {\r\n return (\r\n \r\n handleDateHandler(event)}\r\n // disableOpenPicker\r\n inputFormat=\"dd/MM/yyyy\"\r\n clearable={true}\r\n renderInput={params => (\r\n \r\n );\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Button, Typography, Card, CardContent } from '@mui/material';\r\nimport DialogActions from '@mui/material/DialogActions';\r\nimport DialogContent from '@mui/material/DialogContent';\r\nimport DialogTitle from '@mui/material/DialogTitle';\r\nimport Dialog from '@mui/material/Dialog';\r\nimport CloseRoundedIcon from '@mui/icons-material/CloseRounded';\r\nimport Select from 'react-select';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { useForm, Controller } from 'react-hook-form';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport IntlMessages from 'routes/Pages/util/IntlMessages';\r\nimport { CustomeDatePicker } from 'routes/Pages/components/DatePicker';\r\n\r\nconst ListViewStyles = makeStyles(theme => ({\r\n heading: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n marginBottom: '1rem',\r\n },\r\n}));\r\n\r\nconst TaskFilterDialog = ({\r\n openFilterDialog,\r\n setOpenFilterDialog,\r\n filterMembers,\r\n projectListData,\r\n selectedCard,\r\n selectedTeam,\r\n setFilterData,\r\n advancedClickFilter,\r\n onClose,\r\n setCurrentValue,\r\n}) => {\r\n const {\r\n reset,\r\n register,\r\n control,\r\n formState: { errors },\r\n handleSubmit,\r\n setError,\r\n setValue,\r\n } = useForm({});\r\n // const [openFilterDialog, setOpenFilterDialog] = useState(false);\r\n const classes = ListViewStyles();\r\n const [startDateFilter, setStartDateFilter] = useState(null);\r\n const [endDateFilter, setEndDateFilter] = useState(null);\r\n const [open, setOpen] = React.useState(false);\r\n const [endOpen, setEndOpen] = React.useState(false);\r\n const [members, setMembers] = useState([]);\r\n const [projectList, setProjectList] = useState([]);\r\n\r\n const handlestartDateHandler = (dateChange, cardId) => {\r\n setStartDateFilter(dateChange);\r\n setValue('startDate', dateChange);\r\n setOpen(false);\r\n\r\n // handleDueDateChange(dateChange, cardId);\r\n };\r\n\r\n const handleDueDateHandler = dateChange => {\r\n setEndDateFilter(dateChange);\r\n setValue('endDate', dateChange);\r\n setEndOpen(false);\r\n };\r\n const closeFilterDialog = () => {\r\n setOpenFilterDialog(false);\r\n };\r\n const handleClose = () => {\r\n closeFilterDialog();\r\n onClose();\r\n setCurrentValue(null);\r\n };\r\n\r\n useEffect(() => {\r\n if (projectListData) {\r\n var project = projectListData.map(c => ({\r\n value: c.pId,\r\n label: c.pName,\r\n isSelectedProject: c.pId == (project ? project.value : selectedCard?.ProjectId) ? true : false,\r\n ...c,\r\n }));\r\n setProjectList(project);\r\n }\r\n }, [projectListData]);\r\n\r\n /**\r\n * Function called when we submit the form\r\n *\r\n * @param formData The responses of the form\r\n */\r\n\r\n const onSubmit = formData => {\r\n setFilterData(formData);\r\n console.log(formData, 'formData');\r\n advancedClickFilter(formData);\r\n setOpenFilterDialog(false);\r\n onClose();\r\n\r\n let fieldsWithData = 0;\r\n let fieldsUndefined = 0;\r\n\r\n for (const key in formData) {\r\n if (Object.prototype.hasOwnProperty.call(formData, key)) {\r\n const value = formData[key];\r\n if (typeof value !== 'undefined') {\r\n fieldsWithData++;\r\n } else {\r\n fieldsUndefined++;\r\n }\r\n }\r\n }\r\n\r\n setCurrentValue(fieldsWithData);\r\n };\r\n\r\n const handleClearFilter = () => {\r\n setValue('project', []); // Reset project field to an empty array\r\n setValue('members', []); // Reset the members field using setValue\r\n setStartDateFilter(null); // Reset startDateFilter state to null\r\n setEndDateFilter(null); // Reset endDateFilter state to null\r\n setCurrentValue(null);\r\n setCurrentValue(null);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
Advance Filters
\r\n
\r\n
\r\n \r\n Apply\r\n \r\n\r\n \r\n Clear Filter{' '}\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
Select Project \r\n
\r\n (\r\n !proj.isSelectedProject && proj.pTeamId === selectedTeam?.value,\r\n )}\r\n isMulti\r\n value={value}\r\n onChange={selectedOptions => {\r\n onChange(selectedOptions);\r\n }}\r\n />\r\n )}\r\n />\r\n
\r\n
\r\n
Select Members \r\n
\r\n (\r\n {\r\n onChange(e);\r\n }}\r\n />\r\n )}\r\n />\r\n
\r\n
Due Date
\r\n \r\n
\r\n {/*
*/}\r\n
\r\n \r\n
(\r\n \r\n setOpen(true)}\r\n CloseDate={() => setOpen(false)}\r\n value={startDateFilter}\r\n // onChange={handleDueDateChange}\r\n handleDateHandler={handlestartDateHandler}\r\n />\r\n
\r\n )}\r\n />\r\n \r\n\r\n
\r\n
\r\n {/*
*/}\r\n
\r\n \r\n\r\n
(\r\n \r\n setEndOpen(true)}\r\n CloseDate={() => setEndOpen(false)}\r\n value={endDateFilter}\r\n // onChange={handleDueDateChange}\r\n handleDateHandler={handleDueDateHandler}\r\n />\r\n
\r\n )}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n Close \r\n \r\n \r\n
\r\n \r\n
\r\n);\r\n\r\nconst LaneHeader = props => (\r\n \r\n \r\n
\r\n);\r\n\r\nexport const CustomContentLoader = props => {\r\n return (\r\n \r\n
\r\n );\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport List from '@mui/material/List';\r\nimport ListItem from '@mui/material/ListItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemAvatar from '@mui/material/ListItemAvatar';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { Typography, Card, CardContent, AvatarGroup, Tooltip } from '@mui/material';\r\nimport FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { fontSize } from '@mui/system';\r\nimport { Cursor } from '@amcharts/amcharts4/charts';\r\nimport Modal from '@mui/material/Modal';\r\nimport ShortcutTwoToneIcon from '@mui/icons-material/ShortcutTwoTone';\r\nimport Box from '@mui/material/Box';\r\nimport Popover from '@mui/material/Popover';\r\nimport { Button } from '@material-ui/core';\r\nconst ListViewStyles = makeStyles(theme => ({\r\n root: {\r\n background: 'white',\r\n\r\n '& .MuiList-root': {\r\n padding: 0,\r\n },\r\n '& .MuiListItem-root': {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n cursor: 'pointer',\r\n paddingTop: '4px',\r\n paddingBottom: '4px',\r\n paddingRight: '8px',\r\n paddingLeft: '8px',\r\n '& .MuiListItemAvatar-root': {\r\n minWidth: '40px',\r\n },\r\n '& .MuiAvatar-root': {\r\n width: '30px',\r\n height: '30px',\r\n fontSize: '0.95rem',\r\n },\r\n },\r\n\r\n modal: {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n width: 400,\r\n bgcolor: 'background.paper',\r\n border: 0,\r\n boxShadow: 24,\r\n borderRadius: '5px',\r\n\r\n '&:focus-visible': {\r\n outline: 'none',\r\n },\r\n },\r\n },\r\n}));\r\nconst style = {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n width: 400,\r\n bgcolor: 'background.paper',\r\n border: 0,\r\n boxShadow: 24,\r\n outline: 'none',\r\n borderRadius: '5px',\r\n borderColor: 'hsl(0, 0%, 80%)',\r\n};\r\nArray.prototype.move = function(from, to) {\r\n this.splice(to, 0, this.splice(from, 1)[0]);\r\n};\r\n\r\nconst QuickFilter = ({\r\n SelectedTeamMembers,\r\n avatarClickFilter,\r\n anchorEl,\r\n setAnchorEl,\r\n id,\r\n open,\r\n onClose,\r\n openFilterDialog,\r\n setOpenFilterDialog,\r\n setCurrentValue,\r\n}) => {\r\n const [quickAnchorEl, setQuickAnchorEl] = React.useState(null);\r\n const [avatarIndex, setAvatarIndex] = useState(0);\r\n\r\n useEffect(() => {\r\n let isActive = false;\r\n let currIndex = 0;\r\n SelectedTeamMembers.map((item, index) => {\r\n if (item.ClassName === 'avatar-selected') {\r\n currIndex = index;\r\n isActive = true;\r\n }\r\n });\r\n\r\n if (isActive) {\r\n setAvatarIndex(currIndex);\r\n } else {\r\n setAvatarIndex(0);\r\n }\r\n }, [SelectedTeamMembers]);\r\n\r\n const onCloseQuick = event => {\r\n // console.log('on avatar click')\r\n setQuickAnchorEl(null);\r\n };\r\n\r\n // const handleClose = () => {\r\n // setAnchorEl(!anchorEl);\r\n // };\r\n function stringAvatar(name) {\r\n return {\r\n // sx: {\r\n // bgcolor: stringToColor(name),\r\n // },\r\n children: `${name.charAt(0)}${name.charAt(1)}`,\r\n };\r\n }\r\n const classes = ListViewStyles();\r\n const Quickopen = Boolean(quickAnchorEl);\r\n const QuickId = Quickopen ? 'simple-popover-one' : undefined;\r\n\r\n const token = JSON.parse(localStorage.getItem('token'));\r\n const userName = token?.userName;\r\n\r\n const setFilter = avatar => {\r\n let newItem = SelectedTeamMembers.filter(member => member.Email === userName);\r\n avatarClickFilter(newItem[0], avatar.name);\r\n onClose();\r\n onCloseQuick();\r\n setCurrentValue(1);\r\n };\r\n const getUpdateOrder = ar => {\r\n if (ar.length <= 4) return ar;\r\n // let newArr = ar.splice(0, 0, ar.splice(avatarIndex, 1)[0])\r\n let newArr = [...ar];\r\n if (avatarIndex) {\r\n let curr = [...ar];\r\n curr.splice(0, 0, curr.splice(avatarIndex, 1)[0]);\r\n newArr = [...curr];\r\n }\r\n\r\n return newArr;\r\n };\r\n\r\n const avatarClickAction = (e, args, index) => {\r\n if (SelectedTeamMembers.length <= 4) {\r\n avatarClickFilter(args);\r\n } else {\r\n // handleClick(e);\r\n }\r\n // handleClick(e);\r\n };\r\n\r\n const handleClick = (avatar, event, index) => {\r\n if (avatar.label === 'Quick filter') {\r\n console.log('clearing');\r\n setQuickAnchorEl(event.currentTarget);\r\n } else if (avatar.label === 'Advanced filter') {\r\n setOpenFilterDialog(!openFilterDialog);\r\n }\r\n // setCurrentValue(index + 1);\r\n };\r\n\r\n const handleClick2 = () => {\r\n console.log('leaving');\r\n onCloseQuick();\r\n // setCurrentValue(index + 1);\r\n };\r\n\r\n const resetFilter = () => {\r\n avatarClickFilter([]);\r\n setCurrentValue(null);\r\n };\r\n\r\n const filterName = [\r\n {\r\n name: 'Tasks assigend to me',\r\n value: 'Tasks assigend to me',\r\n },\r\n {\r\n name: 'Tasks due this week',\r\n value: 'Tasks due this week',\r\n },\r\n {\r\n name: 'Incomplete tasks',\r\n value: 'Incomplete tasks',\r\n },\r\n ];\r\n\r\n const AddFilter = [\r\n {\r\n label: 'Quick filter',\r\n value: 'Quick filter',\r\n },\r\n {\r\n label: 'Advanced filter',\r\n value: 'Advanced filter',\r\n },\r\n {\r\n label: 'Reset Filter',\r\n value: 'Reset Filter',\r\n },\r\n ];\r\n\r\n return (\r\n \r\n {/*
*/}\r\n \r\n {/* */}\r\n \r\n {SelectedTeamMembers &&\r\n AddFilter.map((avatar, index) => {\r\n return (\r\n handleClick(avatar, e, index) : undefined}\r\n onClick={avatar.label === 'Advanced filter' ? e => handleClick(avatar, e, index) : resetFilter}\r\n style={{ display: 'flex', flexDirection: 'row', padding: '0.5rem' }}>\r\n \r\n \r\n \r\n \r\n \r\n {avatar.label}\r\n \r\n \r\n
\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n {SelectedTeamMembers &&\r\n filterName.map((avatar, index) => {\r\n return (\r\n setFilter(avatar)}\r\n style={{ display: 'flex', flexDirection: 'row', padding: '0.5rem' }}>\r\n \r\n \r\n \r\n \r\n \r\n {avatar.name}\r\n \r\n \r\n
\r\n \r\n );\r\n })}\r\n \r\n \r\n {/* */}\r\n\r\n {/* */}\r\n \r\n {/* //Subscribe */}\r\n \r\n \r\n
Date Created : {findTask && getFormattedDate(findTask?.tCreated)}
\r\n
Hours Logged : {taskTimeData && taskTimeData}
\r\n
\r\n Please fill the time taken to complete this activity\r\n \r\n \r\n \r\n
Hours \r\n
\r\n {hrsBtnArr.map(item => {\r\n return (\r\n hrsBtnClickHandler(item)} variant=\"contained\">\r\n {item} hr\r\n \r\n );\r\n })}\r\n {/* hrsBtnClickHandler(1)} variant=\"contained\">1 hr \r\n hrsBtnClickHandler(2)} variant=\"contained\">2 hr \r\n hrsBtnClickHandler(3)} variant=\"contained\">3 hr \r\n hrsBtnClickHandler(4)} variant=\"contained\">4 hr \r\n hrsBtnClickHandler(5)} variant=\"contained\">5 hr \r\n hrsBtnClickHandler(6)} variant=\"contained\">6 hr \r\n hrsBtnClickHandler(7)} variant=\"contained\">7 hr */}\r\n
\r\n
\r\n
Minutes \r\n
\r\n {minBtnArr.map(item => {\r\n return (\r\n minBtnClickHandler(item)} variant=\"contained\">\r\n {item} min\r\n \r\n );\r\n })}\r\n {/* 10 min \r\n 20 min \r\n 30 min \r\n 40 min \r\n 50 min \r\n 60 min */}\r\n
\r\n
\r\n\r\n \r\n
Registered hrs and min \r\n
\r\n hr,\r\n }}\r\n helperText={!isHrInputvalid ? 'Value should be greater than 0 and less than 24' : ''}\r\n />\r\n min,\r\n }}\r\n helperText={!isMinInputValid ? 'Value should be greater than 0 and less than 60' : ''}\r\n />\r\n
\r\n
\r\n \r\n Cancel \r\n \r\n Save\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default TimeManagementModal;\r\n","import React from 'react';\r\nimport Dialog from '@mui/material/Dialog';\r\nimport DialogActions from '@mui/material/DialogActions';\r\nimport DialogContent from '@mui/material/DialogContent';\r\nimport DialogContentText from '@mui/material/DialogContentText';\r\nimport DialogTitle from '@mui/material/DialogTitle';\r\nimport TextField from '@mui/material/TextField';\r\nimport InputAdornment from '@mui/material/InputAdornment';\r\nimport { Select, MenuItem, Button, FormControl, InputLabel } from '@mui/material';\r\nimport Paper from '@mui/material/Paper';\r\nimport IntlMessages from '../../util/IntlMessages';\r\nimport styled from 'styled-components';\r\nimport { makeStyles } from '@material-ui/styles';\r\nconst ModalContentWrapper = styled.div`\r\n padding-block: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n\r\n & .btnCtn div {\r\n display: flex;\r\n gap: 5px;\r\n justify-content: space-between;\r\n }\r\n`;\r\nconst CloneModal = props => {\r\n const { setModalStatus, isModalOpen, cloneTask } = { ...props };\r\n\r\n const handleClose = () => {\r\n setModalStatus(false);\r\n };\r\n\r\n const handelSave = () => {\r\n cloneTask();\r\n handleClose();\r\n };\r\n\r\n return (\r\n \r\n {/* //Subscribe */}\r\n\r\n Clone Task \r\n \r\n \r\n This will clone title, description, assignee, and due date, no comments will be cloned.\r\n \r\n \r\n\r\n \r\n Cancel \r\n \r\n Ok\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default CloneModal;\r\n","import React, { useState } from 'react';\r\nimport {\r\n Badge,\r\n Popover,\r\n List,\r\n ListItem,\r\n ListItemText,\r\n ListItemAvatar,\r\n Typography,\r\n Divider,\r\n IconButton,\r\n Checkbox,\r\n} from '@mui/material';\r\nimport FilterAltIcon from '@mui/icons-material/FilterAlt';\r\nimport FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';\r\n\r\nconst FilterMenu = ({\r\n userDetails,\r\n avatarClickFilter,\r\n SelectedTeamMembers,\r\n setCurrentValue,\r\n openAdvancedFilter,\r\n setOpenFilterDialog,\r\n}) => {\r\n const [anchorEl, setAnchorEl] = useState(null);\r\n const [quickFilterAnchorEl, setQuickFilterAnchorEl] = useState(null);\r\n const [memberFilterAnchorEl, setMemberFilterAnchorEl] = useState(null);\r\n const [selectedMembers, setSelectedMembers] = useState([]);\r\n\r\n const handleMenuOpen = event => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleMenuClose = () => {\r\n setAnchorEl(null);\r\n setQuickFilterAnchorEl(null);\r\n setMemberFilterAnchorEl(null);\r\n };\r\n\r\n const handleQuickFilterOpen = event => {\r\n setQuickFilterAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleQuickFilterClose = () => {\r\n setQuickFilterAnchorEl(null);\r\n };\r\n\r\n const handleMemberFilterOpen = event => {\r\n setMemberFilterAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleMemberFilterClose = () => {\r\n setMemberFilterAnchorEl(null);\r\n };\r\n\r\n const handleMemberSelection = member => {\r\n if (selectedMembers.includes(member)) {\r\n setSelectedMembers(selectedMembers.filter(m => m !== member));\r\n } else {\r\n setSelectedMembers([...selectedMembers, member]);\r\n }\r\n };\r\n\r\n const applyMemberFilter = () => {\r\n avatarClickFilter(selectedMembers, 'Filter member wise');\r\n handleMemberFilterClose();\r\n };\r\n\r\n const resetFilter = () => {\r\n avatarClickFilter([]);\r\n setSelectedMembers([]);\r\n setCurrentValue(null);\r\n handleMenuClose();\r\n };\r\n\r\n // Add any additional reset logic here if required (e.g., resetting states)\r\n\r\n const dueDateThisWeek = () => {\r\n let user = SelectedTeamMembers.find(member => member.TMUserId === userDetails.UserId);\r\n avatarClickFilter(user, 'Tasks due this week');\r\n // avatarClickFilter(undefined, 'Incomplete tasks');\r\n\r\n handleQuickFilterClose();\r\n };\r\n\r\n const filterIncompleteTasks = () => {\r\n let user = SelectedTeamMembers.find(member => member.TMUserId === userDetails.UserId);\r\n avatarClickFilter(user, 'Incomplete tasks');\r\n // avatarClickFilter(undefined, 'Incomplete tasks');\r\n\r\n handleQuickFilterClose(); // Close the quick filter menu\r\n };\r\n\r\n const hanldeAdvanceFilter = () => {\r\n setOpenFilterDialog(preV => !preV);\r\n };\r\n\r\n const filterOptions = [\r\n { label: 'Quick filter', action: handleQuickFilterOpen },\r\n { label: 'Advanced filter', action: hanldeAdvanceFilter },\r\n { label: 'Filter member wise', action: handleMemberFilterOpen },\r\n { label: 'Reset Filter', action: resetFilter },\r\n ];\r\n\r\n const quickFilterOptions = [\r\n { name: 'Tasks due this week', action: dueDateThisWeek },\r\n { name: 'Incomplete tasks', action: filterIncompleteTasks },\r\n ];\r\n\r\n return (\r\n \r\n {/* Badge with Filter Button */}\r\n
\r\n \r\n \r\n \r\n\r\n {/* Main Filter Menu */}\r\n
\r\n \r\n {filterOptions.map((option, index) => (\r\n \r\n {\r\n option.action(event);\r\n }}\r\n style={{\r\n display: 'flex',\r\n flexDirection: 'row',\r\n padding: '6px 12px',\r\n cursor: 'pointer',\r\n }}>\r\n \r\n \r\n \r\n \r\n {option.label}\r\n \r\n \r\n \r\n {index < filterOptions.length - 1 && \r\n ))}\r\n
\r\n \r\n\r\n {/* Quick Filter Popover */}\r\n \r\n \r\n {quickFilterOptions.map((option, index) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {option.name}\r\n \r\n \r\n \r\n {index < quickFilterOptions.length - 1 && \r\n ))}\r\n
\r\n \r\n\r\n {/* Member Filter Popover */}\r\n \r\n \r\n {SelectedTeamMembers.map((member, index) => (\r\n \r\n handleMemberSelection(member)} />\r\n \r\n \r\n {member.Email}\r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n Apply Filter\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Advanced Filters\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n Apply\r\n \r\n \r\n Clear\r\n \r\n \r\n Close\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AdvancedFilterDialog;\r\n","/* eslint-disable no-unused-expressions */\r\n/**\r\n * Version 1.0.2\r\n * Vikas W\r\n * 13-08-2022\r\n * -\r\n * \"Task Management\"\r\n */\r\nimport React, { useState, useEffect, useCallback, useRef, Component } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport GridContainer from '../../../../@jumbo/components/GridContainer';\r\nimport IntlMessages from '../../../../@jumbo/utils/IntlMessages';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { CircularProgress, makeStyles, Tooltip, useTheme } from '@material-ui/core';\r\n// import { alpha } from '@material-ui/core/styles';\r\nimport Board from 'react-trello';\r\nimport { Card } from './Card';\r\n\r\nimport { kanbanBoard } from '../../../../routes/Pages/Planning/TaskmanagementPage/components/kanbanBoard';\r\nimport TaskDrawer from './CardDetail/TaskDrawer';\r\n\r\nimport AddNewCard from './AddNewCard';\r\nimport { setProjectList, setSinglArchive } from '../../../../redux/actions/Common';\r\nimport ListHeader from './ListHeader';\r\n\r\nimport AddCardButton from './AddCardButton';\r\nimport NewListForm from './NewListForm';\r\nimport NewListButton from './NewListButton';\r\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\r\n\r\n/* Sidebar drawer */\r\nimport { Box, FormControl, Icon, IconButton, Typography } from '@mui/material';\r\nimport Button from '@mui/material/Button';\r\nimport Modal from '@mui/material/Modal';\r\nimport Fade from '@mui/material/Fade';\r\nimport Backdrop from '@mui/material/Backdrop';\r\nimport moment from 'moment';\r\nimport Select from 'react-select';\r\nimport CmtDropdownMenu from '@coremat/CmtDropdownMenu';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport { usePollTask } from './TaskToolbarComponent.js/PollTask';\r\nimport { CSVLink } from 'react-csv';\r\nimport { getStore } from '../../../../redux/store';\r\nimport FilterAltIcon from '@mui/icons-material/FilterAlt';\r\n\r\nimport {\r\n setTmTeamMembers,\r\n setTmTaskByTeam,\r\n setTmStatusByTeam,\r\n setTmCardData,\r\n setTmCardDateFlag,\r\n setTmSelectedTeam,\r\n setBordeListData,\r\n setChecked,\r\n} from '../../../../redux/actions';\r\nimport {\r\n FETCH_ERROR,\r\n FETCH_START,\r\n FETCH_SUCCESS,\r\n // INIT_URL,\r\n // SIGNOUT_USER_SUCCESS,\r\n // USER_DATA,\r\n // USER_TOKEN_SET,\r\n} from '../../constants/ActionTypes';\r\nimport customAxios from '../../util/Api';\r\nimport authHeader from '../../../../services/auth/jwt/auth-header';\r\nimport ImportExcel from './ImportExcel';\r\n\r\n/* Date Picker */\r\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\r\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\r\n// import { DateTimePicker } from \"@mui/x-date-pickers/DateTimePicker\";\r\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\r\nimport { CalendarPicker } from '@mui/x-date-pickers/CalendarPicker';\r\nimport $, { event } from 'jquery';\r\nimport TeamDataListView from './TaskToolbarComponent.js/TeamDataListView';\r\nimport { styled, alpha } from '@mui/material/styles';\r\nimport InputBase from '@mui/material/InputBase';\r\nimport TaskFilterDialog from './TaskToolbarComponent.js/TaskFilterDialog';\r\nimport PageLoader from '@jumbo/components/PageComponents/PageLoader';\r\nimport { CustomContentLoader } from './Contentloader';\r\nimport { NavLink } from 'react-router-dom';\r\nimport QuickFilter from './TaskToolbarComponent.js/QuickFilter';\r\nimport { last } from 'lodash';\r\nimport Badge from '@mui/material/Badge';\r\nimport Popover from '@mui/material/Popover';\r\n\r\nimport TimeManagementModal from './TimeManagementModal';\r\nimport CloneModal from './CloneModal';\r\nimport ConfirmationModal from './ConfirmationModal';\r\nimport FilterMenu from './newFilter/FilterMenu';\r\nimport AdvancedFilterDialog from './newFilter/AdvancedFilterDialog';\r\nimport { sq } from 'date-fns/locale';\r\nconst modalStyle = {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n width: 400,\r\n bgcolor: 'background.paper',\r\n border: '2px solid #000',\r\n boxShadow: 24,\r\n p: 4,\r\n};\r\n\r\nconst menuStyles = makeStyles(theme => ({\r\n root: {\r\n '& .MuiList-padding': {\r\n paddingTop: 0,\r\n paddingBottom: 0,\r\n },\r\n '& .MuiMenuItem-root': {\r\n padding: '8px ',\r\n '& div': {\r\n marginRight: '8px',\r\n fontSize: '0.95rem',\r\n },\r\n },\r\n top: '40px !important',\r\n },\r\n counterRoot: {\r\n color: theme.palette.common.white,\r\n border: `solid 1px ${theme.palette.common.white}`,\r\n backgroundColor: theme.palette.warning.main,\r\n width: 20,\r\n },\r\n}));\r\n\r\n/* START: Search Icon */\r\nconst Search = styled('div')(({ theme }) => ({\r\n position: 'relative',\r\n borderRadius: theme.shape.borderRadius,\r\n backgroundColor: alpha(theme.palette.common.white, 0.15),\r\n '&:hover': {\r\n backgroundColor: alpha(theme.palette.common.white, 0.25),\r\n },\r\n marginLeft: 0,\r\n width: '100%',\r\n borderWidth: '1px',\r\n borderColor: '#f8f9fa',\r\n [theme.breakpoints.up('sm')]: {\r\n marginLeft: theme.spacing(1),\r\n width: 'auto',\r\n },\r\n}));\r\n\r\nconst SearchIconWrapper = styled('div')(({ theme }) => ({\r\n padding: theme.spacing(0, 2),\r\n height: '100%',\r\n position: 'absolute',\r\n pointerEvents: 'none',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n}));\r\n\r\nconst StyledInputBase = styled(InputBase)(({ theme }) => ({\r\n color: 'inherit',\r\n '& .MuiInputBase-input': {\r\n padding: theme.spacing(1, 1, 1, 0),\r\n // vertical padding + font size from searchIcon\r\n paddingLeft: `calc(1em + ${theme.spacing(4)})`,\r\n transition: theme.transitions.create('width'),\r\n border: '1px solid #d8d8d8',\r\n marginRight: '10px',\r\n width: '100%',\r\n [theme.breakpoints.up('sm')]: {\r\n width: '12ch',\r\n '&:focus': {\r\n width: '20ch',\r\n },\r\n },\r\n },\r\n}));\r\n/* End: Search Icon */\r\n\r\nconst useTabStyles = makeStyles(theme => ({\r\n root: {\r\n flexGrow: 1,\r\n fontFamily: 'Normal',\r\n\r\n // backgroundColor: theme.palette.background.paper,\r\n },\r\n tabBody: {\r\n padding: 0,\r\n\r\n '& > div': {\r\n padding: 0,\r\n marginTop: 10,\r\n },\r\n },\r\n tabFontFam: {\r\n div: {\r\n fontFamily: 'normal',\r\n },\r\n span: { fontFamily: 'normal' },\r\n },\r\n tabsRow: {\r\n display: 'flex',\r\n '& .MuiCardContent-root': {\r\n width: '100%',\r\n },\r\n },\r\n tabsRowPlus: {\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n display: 'flex',\r\n margin: '17px',\r\n cursor: 'pointer',\r\n width: '30px',\r\n height: '30px',\r\n float: 'right',\r\n marginTop: '-35px',\r\n marginRight: '25px',\r\n position: 'relative',\r\n },\r\n badges: {\r\n marginTop: '10px',\r\n },\r\n noTabs: {\r\n marginTop: '5px',\r\n fontSize: '1rem',\r\n padding: '5px 20px',\r\n },\r\n}));\r\n\r\nconst TaskmanagementPage = () => {\r\n /* START: Modal Card Tasks */\r\n const [openModal, setOpenModal] = React.useState(false);\r\n const handleClose = () => {\r\n setOpenModal(false);\r\n dispatch(setTmCardDateFlag([]));\r\n };\r\n\r\n /* User Info */\r\n const { authUser } = useSelector(({ auth }) => auth);\r\n const [userDetails, setUserDetails] = useState();\r\n //console.log(authUser);\r\n // console.log(authUser, 'authUser');\r\n\r\n /* START: Date picker for Tasks */\r\n const [dueDateValue, setDueDateValue] = React.useState(new Date());\r\n const [checkedCard, setCheckedCard] = React.useState(false);\r\n\r\n /* START: Import excel for task */\r\n const [modal, setModal] = useState(false);\r\n\r\n /* START: Select Team member for kanban board data change */\r\n const [Teams, setTeams] = useState([]);\r\n const [avatarSelected, setAvatarSelected] = useState(null);\r\n const [TeamMembers, setTeamMembers] = useState([]);\r\n const [SelectedTeamMembers, setSelectedTeamMembers] = useState([]);\r\n const [tabs, setTabs] = useState([]);\r\n const [teamWiseTabs, setTeamWiseTabs] = useState([]);\r\n const [selectedTeam, setSelectedTeam] = useState({});\r\n const [project, setProject] = useState([]);\r\n const [searchKey, setSearchKey] = useState('');\r\n /* END: Select Team member for kanban board data change */\r\n\r\n const dispatch = useDispatch();\r\n const store = getStore().getState();\r\n\r\n const { tmTaskByTeam } = useSelector(({ common }) => common);\r\n const { tmStatusByTeam } = useSelector(({ common }) => common);\r\n const { tmCardData } = useSelector(state => state.common);\r\n const { archiveBoardData } = useSelector(state => state.common);\r\n const { tmDatePickerPlag } = useSelector(state => state.common);\r\n const { singleArchive } = useSelector(state => state.common);\r\n const { multiArchive } = useSelector(state => state.common);\r\n const { cardCheck } = useSelector(state => state.common);\r\n\r\n const [openDrawer, setOpenDrawer] = React.useState(false);\r\n const user = kanbanBoard.members[0];\r\n const classes = menuStyles();\r\n const theme = useTheme();\r\n const [boardData, setBoardData] = useState(kanbanBoard.boards);\r\n const [boardBkData, setBoardBkData] = useState([]);\r\n const [openDialog, setOpenDialog] = useState(false);\r\n const [selectedCard, setSelectedCard] = useState(null);\r\n const [selectedLaneId, setSelectedLaneId] = useState(null);\r\n const [tasks, setTasks] = useState([]);\r\n const downloadCsv = useRef(null);\r\n const [csvFilterData, setCsvFilterData] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n // const [updateName, setUpdateName] = useState([]);\r\n const boradRef = useRef();\r\n const inputRef = useRef(null);\r\n const tabClasses = useTabStyles();\r\n const [connection, setConnection] = useState(null);\r\n const descRef = useRef(null);\r\n const commentRef = useRef(null);\r\n const [filterMembers, setFilterMembers] = useState([]);\r\n const [sockettoken, setSocketToken] = useState();\r\n\r\n //time modal\r\n const [openTimeModal, setOpenTimeModa] = useState(false);\r\n const [openTimeModaData, setOpenTimeModalData] = useState(null);\r\n\r\n //clone data\r\n const [cloneData, setCloneData] = useState({});\r\n const [openCloneModal, setOpenCloneModal] = useState(false);\r\n\r\n //confirmation modal\r\n const defaultConfirmationModalObj = {\r\n isModalOpen: false,\r\n handleSave: null,\r\n handleClose: null,\r\n modalTitle: '',\r\n modalMainText: '',\r\n hideCloseBtn: false,\r\n cancelBtnTxt: null,\r\n saveBtnText: null,\r\n };\r\n\r\n const [confirmationData, setConfirmationData] = useState({ ...defaultConfirmationModalObj });\r\n\r\n const toggleTimeModal = () => {\r\n setOpenTimeModa(prev => !prev);\r\n };\r\n\r\n function socketauthToken() {\r\n const token = JSON.parse(localStorage.getItem('sockettoken'));\r\n if (sockettoken && sockettoken?.data) {\r\n return sockettoken.data;\r\n } else {\r\n dispatch({ type: FETCH_START });\r\n customAxios.post('/Task/GenerateWebsocketToken', null, { headers: authHeader() }).then(data => {\r\n // localStorage.setItem('sockettoken', JSON.stringify(data));\r\n setSocketToken(data);\r\n dispatch({ type: FETCH_SUCCESS });\r\n });\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n socketauthToken();\r\n }, []);\r\n\r\n useEffect(() => {}, []);\r\n const token = JSON.parse(localStorage.getItem('sockettoken'));\r\n // const URL_WEB_SOCKET = `wss://api.focus247.online/api/Task/TaskWebSocket', ${['token=' + token?.data]}`;\r\n const URL_WEB_SOCKET = 'wss://api.focus247.online/api/Task/TaskWebSocket?Token=' + sockettoken?.data;\r\n const [ws, setWs] = useState(null);\r\n const [trades, setTrades] = useState([]);\r\n\r\n useEffect(() => {\r\n if (Object.keys(singleArchive).length > 0) {\r\n handleCardArchive(singleArchive?.TaskId, singleArchive?.laneId);\r\n }\r\n }, [singleArchive]);\r\n\r\n useEffect(() => {\r\n if (Object.keys(multiArchive).length > 0) {\r\n handleCardMultiArchive(multiArchive?.card, multiArchive?.laneId);\r\n }\r\n }, [multiArchive]);\r\n\r\n /* Import excel modal open/close */\r\n const toggle = () => {\r\n setModal(!modal);\r\n };\r\n\r\n const downloadCsvHandle = () => {\r\n handleClickData();\r\n };\r\n\r\n const actionsList = [\r\n {\r\n onClick: toggle,\r\n label: Email template \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Focus247 \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n ${\r\n isComment\r\n ? `\r\n ${bodyParms.mainHeading}, Status: ${taskStatus[0].title} \r\n \r\n
Comment By : ${\r\n latestUpdate.TaskCommentsUserDisplayName\r\n }
\r\n
\r\n
Comment Date : ${bodyParms.madeOn.slice(\r\n 0,\r\n 10,\r\n )}
\r\n
\r\n
Comment : ${\r\n latestUpdate.tComments\r\n }
\r\n \r\n
${bodyParms.mainHeading}, Status: ${taskStatus[0].title} \r\n \r\n
Updated By : ${\r\n bodyParms.madeBy\r\n }
\r\n
\r\n
Updated On : ${bodyParms.madeOn.slice(\r\n 0,\r\n 10,\r\n )}
\r\n
\r\n
Update Message : ${\r\n bodyParms.mainMessage\r\n }
\r\n
\r\n
Task Name : ${\r\n messageObj.cardData.TaskName\r\n }
\r\n \r\n
\r\n
Task Description : ${\r\n latestUpdate.TaskDescription\r\n }
\r\n
\r\n \r\n
Task Due-Date : ${\r\n latestUpdate.tDueDate ? latestUpdate.tDueDate.slice(0, 10) : ''\r\n }
\r\n \r\n
\r\n
Task Attachments : ${\r\n latestUpdate.tAttachmentName ? latestUpdate.tAttachmentName : ''\r\n }
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n c.label == selectedTeam?.label)}\r\n onChange={onTeamChangeHandler}\r\n />\r\n \r\n {selectedTeam && (\r\n \r\n Leave Team\r\n \r\n )}\r\n \r\n \r\n
\r\n {/*
\r\n \r\n */}\r\n
\r\n {/*
*/}\r\n
\r\n {/*
\r\n */}\r\n
\r\n \r\n \r\n searchTmData(e.target.value)}\r\n value={searchKey}\r\n inputRef={inputRef}\r\n />\r\n {searchKey && (\r\n \r\n
\r\n\r\n {/*
\r\n */}\r\n
\r\n \r\n {Teams.length ? (\r\n loading ? (\r\n {\r\n // console.log('isitLabe', e);\r\n // }}\r\n handleLaneDragEnd={handleLaneDragEnd}\r\n handleDragEnd={handleDragCard}\r\n style={{ backgroundColor: 'transparent', height: '78vh' }}\r\n laneStyle={{\r\n backgroundColor: alpha(theme.palette.primary.main, 0.08),\r\n width: 'max(15vw,270px)',\r\n height: '78vh',\r\n }}\r\n />\r\n ) : (\r\n \r\n
\r\n )\r\n ) : (\r\n \r\n You are not part of any team, Start your own Task Management. Go to \"Manage Team\" page. Or create your team{' '}\r\n \"Here\" {' '}\r\n
\r\n )}\r\n \r\n {openDrawer && (\r\n \r\n \r\n \r\n \r\n handleDueDateHandler(newDate)} />\r\n \r\n \r\n \r\n \r\n\r\n {modal && (\r\n handleCardAdd(cloneData, null)}\r\n />\r\n\r\n \r\n \r\n {details.length === 0 ? \r\n × \r\n \r\n \r\n \r\n \r\n {errors.apiError && {errors.apiError?.message}
}\r\n \r\n
\r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
(\r\n c.value == value)}\r\n onChange={({ value }) => onChange(value)}\r\n />\r\n )}\r\n />\r\n {message}
}\r\n />\r\n \r\n
\r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
\r\n \r\n \r\n {details.length === 0 ? \r\n Cancel \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default CreateClient;\r\n","import React from 'react';\r\nimport { TableRow, TableCell, Skeleton } from '@mui/material';\r\nimport { styled } from '@material-ui/styles';\r\n\r\nconst CustomTableCell = styled(TableCell)`\r\n && {\r\n padding: 8px; /* Set the desired padding here */\r\n }\r\n`;\r\n\r\nconst SkeletonLoader = ({ tableCellCount }) =>\r\n Array.from({ length: 5 }).map((_, index) => (\r\n \r\n {[...Array(tableCellCount)].map((_, cellIndex) => (\r\n \r\n \r\n ))}\r\n \r\n ));\r\n\r\nexport default SkeletonLoader;\r\n","/**\r\n * Version 1.0\r\n * Raul Santos Barreira\r\n * 27.04.2022\r\n * -\r\n * This component is the page where the invoices are shown\r\n */\r\nimport React, { useEffect, useState } from 'react';\r\n// import ContainerHeader from '../../components/ContainerHeader/index';\r\nimport IntlMessages from '../../util/IntlMessages';\r\nimport { useDispatch } from 'react-redux';\r\n// import { AuhMethods } from '../../../../services/auth';\r\n// import { CurrentAuthMethod } from '../../../../@jumbo/constants/AppConstants';\r\nimport { NavLink } from 'react-router-dom';\r\n\r\nimport {\r\n FETCH_ERROR,\r\n FETCH_START,\r\n FETCH_SUCCESS,\r\n // INIT_URL,\r\n // SIGNOUT_USER_SUCCESS,\r\n // USER_DATA,\r\n // USER_TOKEN_SET,\r\n} from '../../constants/ActionTypes';\r\nimport customAxios from '../../util/Api';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport authHeader from '../../../../services/auth/jwt/auth-header';\r\n//syncfusion data grid\r\n// import {\r\n// GridComponent,\r\n// ColumnsDirective,\r\n// ColumnDirective,\r\n// CommandColumn,\r\n// Filter,\r\n// IFilter,\r\n// Grid,\r\n// VirtualScroll,\r\n// SelectionType,\r\n// Selection,\r\n// Group,\r\n// } from '@syncfusion/ej2-react-grids';\r\n\r\n/* Material Tables */\r\nimport DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';\r\n// import RemoveRedEyeIcon from '@material-ui/icons/RemoveRedEye';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport Button from '@material-ui/core/Button';\r\nimport PropTypes from 'prop-types';\r\nimport { lighten, makeStyles } from '@material-ui/core/styles';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TablePagination from '@material-ui/core/TablePagination';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { Box } from '@material-ui/core';\r\nimport InputBase from '@mui/material/InputBase';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { styled, alpha } from '@mui/material/styles';\r\nimport { FormControl } from '@mui/material';\r\nimport Select from 'react-select';\r\n\r\n// import { DataUtil } from '@syncfusion/ej2-data';\r\n// import { classList, Animation, createElement, closest, isNullOrUndefined } from '@syncfusion/ej2-base';\r\n// import { Inject, Page, Toolbar, ToolbarItems, Edit, Sort, SortSettingsModel } from '@syncfusion/ej2-react-grids'\r\n// import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';\r\n// import { DataUsageOutlined } from '@material-ui/icons';\r\n// import DialogFormTemplate from './DialogFormTemplate';\r\nimport { useRef } from 'react';\r\nimport CmtDropdownMenu from '@coremat/CmtDropdownMenu';\r\nimport { CSVLink } from 'react-csv';\r\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\r\nimport CreateClient from './CreateClient';\r\nimport SkeletonLoader from '@jumbo/components/PageComponents/CustomSkeletonLoader';\r\n\r\nconst menuStyles = makeStyles(theme => ({\r\n root: {\r\n '& .MuiList-padding': {\r\n paddingTop: 0,\r\n paddingBottom: 0,\r\n },\r\n '& .MuiMenuItem-root': {\r\n padding: '8px ',\r\n '& div': {\r\n marginRight: '8px',\r\n fontSize: '0.95rem',\r\n },\r\n },\r\n top: '40px !important',\r\n },\r\n}));\r\n\r\nfunction descendingComparator(a, b, orderBy) {\r\n if (b[orderBy] < a[orderBy]) {\r\n return -1;\r\n }\r\n if (b[orderBy] > a[orderBy]) {\r\n return 1;\r\n }\r\n return 0;\r\n}\r\n\r\nfunction getComparator(order, orderBy) {\r\n return order === 'desc' ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);\r\n}\r\n\r\nfunction stableSort(array, comparator) {\r\n const stabilizedThis = array.map((el, index) => [el, index]);\r\n stabilizedThis.sort((a, b) => {\r\n const order = comparator(a[0], b[0]);\r\n if (order !== 0) return order;\r\n return a[1] - b[1];\r\n });\r\n return stabilizedThis.map(el => el[0]);\r\n}\r\n\r\nconst headCells = [\r\n {\r\n id: 'ClientName',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Name',\r\n minWidth: 80,\r\n },\r\n {\r\n id: 'ClientEmail',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Email',\r\n minWidth: 150,\r\n },\r\n {\r\n id: 'AddressLine',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Address',\r\n minWidth: 150,\r\n },\r\n\r\n {\r\n id: 'PhoneNumber',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Phone',\r\n minWidth: 120,\r\n },\r\n {\r\n id: 'VATNumber',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'VAT Number',\r\n minWidth: 100,\r\n },\r\n {\r\n id: 'PostCode',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Post Code',\r\n minWidth: 120,\r\n },\r\n {\r\n id: 'Country',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Country',\r\n minWidth: 100,\r\n },\r\n {\r\n id: 'Action',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Action',\r\n minWidth: 100,\r\n },\r\n];\r\n\r\nfunction EnhancedTableHead(props) {\r\n const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;\r\n\r\n const createSortHandler = property => event => {\r\n onRequestSort(event, property);\r\n };\r\n\r\n return (\r\n \r\n \r\n {headCells.map(headCell => (\r\n \r\n \r\n {headCell.label}\r\n {orderBy === headCell.id ? (\r\n {order === 'desc' ? 'sorted descending' : 'sorted ascending'} \r\n ) : null}\r\n \r\n \r\n ))}\r\n \r\n \r\n );\r\n}\r\n\r\nEnhancedTableHead.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n numSelected: PropTypes.number.isRequired,\r\n onRequestSort: PropTypes.func.isRequired,\r\n onSelectAllClick: PropTypes.func.isRequired,\r\n order: PropTypes.oneOf(['asc', 'desc']).isRequired,\r\n orderBy: PropTypes.string.isRequired,\r\n rowCount: PropTypes.number.isRequired,\r\n};\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n width: '100%',\r\n },\r\n paper: {\r\n width: '100%',\r\n marginBottom: theme.spacing(4),\r\n backgroundColor: lighten(theme.palette.background.paper, 0.1),\r\n },\r\n table: {\r\n minWidth: 750,\r\n },\r\n visuallyHidden: {\r\n border: 0,\r\n clip: 'rect(0 0 0 0)',\r\n height: 1,\r\n margin: -1,\r\n overflow: 'hidden',\r\n padding: 0,\r\n position: 'absolute',\r\n top: 20,\r\n width: 1,\r\n },\r\n actionIcon: {\r\n cursor: 'pointer',\r\n },\r\n}));\r\n\r\nconst Search = styled('div')(({ theme }) => ({\r\n position: 'relative',\r\n borderRadius: theme.shape.borderRadius,\r\n backgroundColor: alpha(theme.palette.common.white, 0.15),\r\n '&:hover': {\r\n backgroundColor: alpha(theme.palette.common.white, 0.25),\r\n },\r\n marginLeft: 0,\r\n width: '100%',\r\n borderWidth: '1px',\r\n borderColor: '#f8f9fa',\r\n [theme.breakpoints.up('sm')]: {\r\n marginLeft: theme.spacing(1),\r\n width: 'auto',\r\n },\r\n}));\r\n\r\nconst SearchIconWrapper = styled('div')(({ theme }) => ({\r\n padding: theme.spacing(0, 2),\r\n height: '100%',\r\n position: 'absolute',\r\n pointerEvents: 'none',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n}));\r\n\r\nconst StyledInputBase = styled(InputBase)(({ theme }) => ({\r\n color: 'inherit',\r\n '& .MuiInputBase-input': {\r\n padding: theme.spacing(1, 1, 1, 0),\r\n // vertical padding + font size from searchIcon\r\n paddingLeft: `calc(1em + ${theme.spacing(4)})`,\r\n transition: theme.transitions.create('width'),\r\n border: '1px solid #d8d8d8',\r\n marginRight: '10px',\r\n width: '100%',\r\n [theme.breakpoints.up('sm')]: {\r\n width: '12ch',\r\n '&:focus': {\r\n width: '20ch',\r\n },\r\n },\r\n },\r\n}));\r\n\r\nconst Clients = props => {\r\n const dispatch = useDispatch();\r\n const [data, setData] = useState([]);\r\n const [customData, setCustomData] = useState([]);\r\n const downloadCsv = useRef(null);\r\n const [csvFile, setCsvFile] = useState([]);\r\n const cusclass = menuStyles();\r\n const inputRef = useRef(null);\r\n\r\n // search\r\n const [searchKey, setSearchKey] = useState('');\r\n\r\n //table config\r\n const classes = useStyles();\r\n const [order, setOrder] = React.useState('asc');\r\n const [orderBy, setOrderBy] = React.useState('calories');\r\n const [selected, setSelected] = React.useState([]);\r\n const [page, setPage] = React.useState(0);\r\n const [dense, setDense] = React.useState(false);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(10);\r\n\r\n /* Modal open/close */\r\n const [details, setDetails] = useState([]);\r\n const [open, setOpen] = useState(false);\r\n\r\n //AccTeams\r\n const [accTeamId, setAccTeamId] = useState(null);\r\n const [accTeamAll, setAccTeamAll] = useState([]);\r\n\r\n const [skeletonLoaderState, setSkeletonLoaderState] = useState(true);\r\n\r\n useEffect(() => {\r\n getTeams();\r\n }, []);\r\n\r\n const getTeams = () => {\r\n dispatch({ type: FETCH_START });\r\n try {\r\n // customAxios.get('Client/GetClients').then(({ data }) => {\r\n customAxios\r\n .get('Acct/GetTeams', { headers: authHeader() })\r\n .then(({ data }) => {\r\n if (data && data.length > 0) {\r\n let allteam = data.map(c => ({ value: c.Id, label: c.AcctTeamName }));\r\n\r\n setAccTeamAll(allteam);\r\n setAccTeamId(allteam[0].value);\r\n getClients(allteam[0].value);\r\n\r\n dispatch({ type: FETCH_SUCCESS });\r\n } else {\r\n setAccTeamId(null);\r\n dispatch({ type: FETCH_SUCCESS });\r\n // dispatch(AuhMethods[CurrentAuthMethod].onLogout());\r\n }\r\n })\r\n .catch(error => {});\r\n } catch (e) {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error' });\r\n // dispatch(AuhMethods[CurrentAuthMethod].onLogout());\r\n }\r\n };\r\n\r\n const onClientsClose = () => {\r\n setOpen(false);\r\n getClients();\r\n };\r\n\r\n //modal open/close\r\n const [modal, setModal] = useState(false);\r\n const toggle = () => {\r\n setModal(!modal);\r\n setDetails([]);\r\n };\r\n\r\n const handleRequestSort = (event, property) => {\r\n console.log(event, property, 'property==property');\r\n const isAsc = orderBy === property && order === 'asc';\r\n setOrder(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n\r\n const handleSelectAllClick = event => {\r\n if (event.target.checked) {\r\n const newSelecteds = data.map(n => n.ClientName);\r\n setSelected(newSelecteds);\r\n return;\r\n }\r\n setSelected([]);\r\n };\r\n\r\n const companyActionHandler = (action, data) => {\r\n if (action === 'detail') {\r\n data.edit = true;\r\n toggle();\r\n setDetails(data);\r\n }\r\n if (action === 'delete') {\r\n deleteClient(data.Id);\r\n }\r\n };\r\n\r\n const handleClick = (event, data) => {\r\n data.edit = true;\r\n\r\n const selectedIndex = selected.indexOf(data.name);\r\n let newSelected = [];\r\n\r\n if (selectedIndex === -1) {\r\n newSelected = newSelected.concat(selected, data.name);\r\n } else if (selectedIndex === 0) {\r\n newSelected = newSelected.concat(selected.slice(1));\r\n } else if (selectedIndex === selected.length - 1) {\r\n newSelected = newSelected.concat(selected.slice(0, -1));\r\n } else if (selectedIndex > 0) {\r\n newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));\r\n }\r\n\r\n setSelected(newSelected);\r\n };\r\n\r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = event => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n\r\n const isSelected = name => selected.indexOf(name) !== -1;\r\n\r\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);\r\n\r\n const toggles = () => {\r\n // setModal(!modal);\r\n handleClickData();\r\n // return Export to CSV ;\r\n };\r\n const actionsList = [\r\n {\r\n onClick: toggles,\r\n label: \r\n {/*
} /> */}\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n c.value == accTeamId)}\r\n onChange={onTeamChangeHandler}\r\n />\r\n \r\n \r\n {accTeamAll.length > 0 ? (\r\n \r\n \r\n \r\n \r\n searchCRMData(e)}\r\n value={searchKey}\r\n inputRef={inputRef}\r\n />\r\n {searchKey && (\r\n \r\n \r\n Add\r\n \r\n \r\n
\r\n ) : (\r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n {skeletonLoaderState ? (\r\n handleClick(event, row)}\r\n // role=\"checkbox\"\r\n // aria-checked={isItemSelected}\r\n tabIndex={-1}\r\n // selected={isItemSelected}\r\n key={index}>\r\n \r\n {row.ClientName}\r\n \r\n {row.ClientEmail} \r\n \r\n {row.AddressLine1}, {row.AddressLine2}\r\n \r\n {row.PhoneNumber} \r\n {row.VATNumber} \r\n {row.PostCode} \r\n {row.Country} \r\n \r\n companyActionHandler('detail', row)}\r\n />\r\n \r\n companyActionHandler('delete', row)}\r\n />\r\n \r\n \r\n );\r\n })}\r\n {emptyRows > 0 && (\r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n You are not part of any team, Start your own Accounts team to add clients. Go to \"Accounting Team\" page.\r\n \"Here\" {' '}\r\n
\r\n )}\r\n {modal && (\r\n \r\n \r\n {details.length === 0 ? \r\n × \r\n \r\n \r\n \r\n \r\n {errors.apiError && {errors.apiError?.message}
}\r\n \r\n
\r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
\r\n
(\r\n {message}
}\r\n />\r\n \r\n
\r\n
(\r\n c.value == value)}\r\n onChange={val => onChange(val)}\r\n />\r\n )}\r\n />\r\n {message}
}\r\n />\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n {details.length === 0 ? \r\n Cancel \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default CreateCompany;\r\n","/**\r\n * Version 2.0\r\n * Vikas W\r\n * 19.05.2022\r\n * -\r\n * This component is the page where the invoices are shown\r\n */\r\nimport React, { useEffect, useRef, useState } from 'react';\r\n// import ContainerHeader from '../../components/ContainerHeader/index';\r\nimport IntlMessages from '../../util/IntlMessages';\r\nimport { useDispatch } from 'react-redux';\r\n// import CardLayout from '../../components/CardLayout/index';\r\n// import CreateEdit from '../../components/Clients/CreateEdit';\r\nimport CreateCompany from '../../Accounting/CompanyProfilePage/CreateCompany';\r\nimport Select from 'react-select';\r\nimport {\r\n FETCH_ERROR,\r\n FETCH_START,\r\n FETCH_SUCCESS,\r\n // INIT_URL,\r\n // SIGNOUT_USER_SUCCESS,\r\n // USER_DATA,\r\n // USER_TOKEN_SET,\r\n} from '../../constants/ActionTypes';\r\nimport customAxios from '../../util/Api';\r\nimport authHeader from '../../../../services/auth/jwt/auth-header';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport { FormControl } from '@mui/material';\r\n\r\n/* Material Tables */\r\nimport DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';\r\n// import RemoveRedEyeIcon from '@material-ui/icons/RemoveRedEye';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport Button from '@material-ui/core/Button';\r\nimport PropTypes from 'prop-types';\r\nimport { lighten, makeStyles } from '@material-ui/core/styles';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TablePagination from '@material-ui/core/TablePagination';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { Box } from '@material-ui/core';\r\nimport InputBase from '@mui/material/InputBase';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { styled, alpha } from '@mui/material/styles';\r\nimport CmtDropdownMenu from '@coremat/CmtDropdownMenu';\r\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\r\nimport { CSVLink } from 'react-csv';\r\nimport CustomSkeletonLoader from '@jumbo/components/PageComponents/CustomSkeletonLoader';\r\n\r\nfunction descendingComparator(a, b, orderBy) {\r\n if (b[orderBy] < a[orderBy]) {\r\n return -1;\r\n }\r\n if (b[orderBy] > a[orderBy]) {\r\n return 1;\r\n }\r\n return 0;\r\n}\r\n\r\nfunction getComparator(order, orderBy) {\r\n return order === 'desc' ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);\r\n}\r\n\r\nfunction stableSort(array, comparator) {\r\n const stabilizedThis = array.map((el, index) => [el, index]);\r\n stabilizedThis.sort((a, b) => {\r\n const order = comparator(a[0], b[0]);\r\n if (order !== 0) return order;\r\n return a[1] - b[1];\r\n });\r\n return stabilizedThis.map(el => el[0]);\r\n}\r\n\r\nconst headCells = [\r\n {\r\n id: 'ImageUrl',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Company Logo',\r\n minWidth: 80,\r\n },\r\n {\r\n id: 'CompanyName',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Company Name',\r\n minWidth: 150,\r\n },\r\n {\r\n id: 'CompanyEmail',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Email',\r\n minWidth: 150,\r\n },\r\n {\r\n id: 'AddressLine1',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Address',\r\n minWidth: 120,\r\n },\r\n {\r\n id: 'PhoneNumber',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Phone',\r\n minWidth: 120,\r\n },\r\n {\r\n id: 'VATNumber',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'VAT Number',\r\n minWidth: 100,\r\n },\r\n {\r\n id: 'Country',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Country',\r\n minWidth: 100,\r\n },\r\n {\r\n id: 'Action',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Action',\r\n minWidth: 100,\r\n },\r\n];\r\n\r\nfunction EnhancedTableHead(props) {\r\n const { classes, order, orderBy, numSelected, rowCount, onRequestSort } = props;\r\n\r\n const createSortHandler = property => event => {\r\n onRequestSort(event, property);\r\n };\r\n\r\n return (\r\n \r\n \r\n {headCells.map(headCell => (\r\n \r\n \r\n {headCell.label}\r\n {orderBy === headCell.id ? (\r\n {order === 'desc' ? 'sorted descending' : 'sorted ascending'} \r\n ) : null}\r\n \r\n \r\n ))}\r\n \r\n \r\n );\r\n}\r\n\r\nEnhancedTableHead.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n numSelected: PropTypes.number.isRequired,\r\n onRequestSort: PropTypes.func.isRequired,\r\n onSelectAllClick: PropTypes.func.isRequired,\r\n order: PropTypes.oneOf(['asc', 'desc']).isRequired,\r\n orderBy: PropTypes.string.isRequired,\r\n rowCount: PropTypes.number.isRequired,\r\n};\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n width: '100%',\r\n },\r\n paper: {\r\n width: '100%',\r\n marginBottom: theme.spacing(4),\r\n backgroundColor: lighten(theme.palette.background.paper, 0.1),\r\n },\r\n table: {\r\n minWidth: 750,\r\n },\r\n visuallyHidden: {\r\n border: 0,\r\n clip: 'rect(0 0 0 0)',\r\n height: 1,\r\n margin: -1,\r\n overflow: 'hidden',\r\n padding: 0,\r\n position: 'absolute',\r\n top: 20,\r\n width: 1,\r\n },\r\n actionIcon: {\r\n cursor: 'pointer',\r\n },\r\n}));\r\n\r\nconst Search = styled('div')(({ theme }) => ({\r\n position: 'relative',\r\n borderRadius: theme.shape.borderRadius,\r\n backgroundColor: alpha(theme.palette.common.white, 0.15),\r\n '&:hover': {\r\n backgroundColor: alpha(theme.palette.common.white, 0.25),\r\n },\r\n marginLeft: 0,\r\n width: '100%',\r\n borderWidth: '1px',\r\n borderColor: '#f8f9fa',\r\n [theme.breakpoints.up('sm')]: {\r\n marginLeft: theme.spacing(1),\r\n width: 'auto',\r\n },\r\n}));\r\n\r\nconst SearchIconWrapper = styled('div')(({ theme }) => ({\r\n padding: theme.spacing(0, 2),\r\n height: '100%',\r\n position: 'absolute',\r\n pointerEvents: 'none',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n}));\r\n\r\nconst StyledInputBase = styled(InputBase)(({ theme }) => ({\r\n color: 'inherit',\r\n '& .MuiInputBase-input': {\r\n padding: theme.spacing(1, 1, 1, 0),\r\n // vertical padding + font size from searchIcon\r\n paddingLeft: `calc(1em + ${theme.spacing(4)})`,\r\n transition: theme.transitions.create('width'),\r\n border: '1px solid #d8d8d8',\r\n marginRight: '10px',\r\n width: '100%',\r\n [theme.breakpoints.up('sm')]: {\r\n width: '12ch',\r\n '&:focus': {\r\n width: '20ch',\r\n },\r\n },\r\n },\r\n}));\r\n\r\nconst menuStyles = makeStyles(theme => ({\r\n root: {\r\n '& .MuiList-padding': {\r\n paddingTop: 0,\r\n paddingBottom: 0,\r\n },\r\n '& .MuiMenuItem-root': {\r\n padding: '8px ',\r\n '& div': {\r\n marginRight: '8px',\r\n fontSize: '0.95rem',\r\n },\r\n },\r\n top: '40px !important',\r\n },\r\n}));\r\n\r\nconst CompanyProfile = props => {\r\n const dispatch = useDispatch();\r\n const [data, setData] = useState([]);\r\n const [customData, setCustomData] = useState([]);\r\n\r\n /* Modal open/close */\r\n const [details, setDetails] = useState([]);\r\n const [open, setOpen] = useState(false);\r\n\r\n // search\r\n const [searchKey, setSearchKey] = useState('');\r\n\r\n //table config\r\n const classes = useStyles();\r\n const cusclass = menuStyles();\r\n const [order, setOrder] = React.useState('asc');\r\n const [orderBy, setOrderBy] = React.useState('calories');\r\n const [selected, setSelected] = React.useState([]);\r\n const [page, setPage] = React.useState(0);\r\n const [dense, setDense] = React.useState(false);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(10);\r\n const downloadCsv = useRef(null);\r\n const inputRef = useRef(null);\r\n const [skeletonLoaderState, setSkeletonLoaderState] = useState(true);\r\n\r\n //AccTeams\r\n const [accTeamId, setAccTeamId] = useState(null);\r\n const [accTeamAll, setAccTeamAll] = useState([]);\r\n\r\n const getTeams = () => {\r\n dispatch({ type: FETCH_START });\r\n try {\r\n // customAxios.get('Client/GetClients').then(({ data }) => {\r\n customAxios\r\n .get('Acct/GetTeams', { headers: authHeader() })\r\n .then(({ data }) => {\r\n if (data && data.length > 0) {\r\n let allteam = data.map(c => ({ value: c.Id, label: c.AcctTeamName }));\r\n\r\n setAccTeamAll(allteam);\r\n setAccTeamId(allteam[0].value);\r\n\r\n dispatch({ type: FETCH_SUCCESS });\r\n } else {\r\n setAccTeamId(null);\r\n dispatch({ type: FETCH_SUCCESS });\r\n // dispatch(AuhMethods[CurrentAuthMethod].onLogout());\r\n }\r\n })\r\n .catch(error => {});\r\n } catch (e) {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error' });\r\n // dispatch(AuhMethods[CurrentAuthMethod].onLogout());\r\n }\r\n };\r\n\r\n const handleRequestSort = (event, property) => {\r\n const isAsc = orderBy === property && order === 'asc';\r\n setOrder(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n\r\n const handleSelectAllClick = event => {\r\n if (event.target.checked) {\r\n const newSelecteds = data.map(n => n.ClientName);\r\n setSelected(newSelecteds);\r\n return;\r\n }\r\n setSelected([]);\r\n };\r\n\r\n const companyActionHandler = (action, data) => {\r\n if (action === 'detail') {\r\n data.edit = true;\r\n toggle();\r\n setDetails(data);\r\n }\r\n if (action === 'delete') {\r\n deleteCompany(data.Id);\r\n }\r\n };\r\n\r\n /** Delete company **/\r\n function deleteCompany(id) {\r\n let url = '/Company/DeleteCompany/' + id + '?AcctTeamId=' + accTeamId;\r\n dispatch({ type: FETCH_START });\r\n customAxios\r\n .delete(url, { headers: authHeader() })\r\n .then(data => {\r\n getCompanies();\r\n dispatch({ type: FETCH_SUCCESS });\r\n })\r\n .catch(function(error) {\r\n dispatch({ type: FETCH_ERROR, payload: error.message });\r\n });\r\n }\r\n\r\n const handleClick = (event, data) => {\r\n data.edit = true;\r\n\r\n const selectedIndex = selected.indexOf(data.name);\r\n let newSelected = [];\r\n\r\n if (selectedIndex === -1) {\r\n newSelected = newSelected.concat(selected, data.name);\r\n } else if (selectedIndex === 0) {\r\n newSelected = newSelected.concat(selected.slice(1));\r\n } else if (selectedIndex === selected.length - 1) {\r\n newSelected = newSelected.concat(selected.slice(0, -1));\r\n } else if (selectedIndex > 0) {\r\n newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));\r\n }\r\n\r\n setSelected(newSelected);\r\n };\r\n\r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = event => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n\r\n const isSelected = name => selected.indexOf(name) !== -1;\r\n\r\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);\r\n\r\n const getCompanies = () => {\r\n if (!accTeamId) return;\r\n dispatch({ type: FETCH_START });\r\n try {\r\n let url = 'Company/GetCompanies/' + accTeamId;\r\n customAxios\r\n .get(url, { headers: authHeader() })\r\n .then(({ data }) => {\r\n if (data) {\r\n setData(data);\r\n setCustomData(data);\r\n setSkeletonLoaderState(false);\r\n dispatch({ type: FETCH_SUCCESS });\r\n } else {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error' });\r\n }\r\n })\r\n .catch(error => {});\r\n } catch (e) {\r\n dispatch({ type: FETCH_ERROR, payload: 'Network Error' });\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n getTeams();\r\n }, []);\r\n\r\n useEffect(() => {\r\n getCompanies();\r\n }, [accTeamId]);\r\n const onClientsClose = () => {\r\n // setOpen(false);\r\n getCompanies();\r\n };\r\n\r\n //modal open/close\r\n const [modal, setModal] = useState(false);\r\n const toggle = () => {\r\n setModal(!modal);\r\n setDetails([]);\r\n };\r\n\r\n const searchCRMData = event => {\r\n let searchkey = event.target.value;\r\n setSearchKey(searchkey);\r\n // return data.filter(data => option[label].toLowerCase().indexOf(query.toLowerCase()) > -1);\r\n let filteredDraftRows = [];\r\n let filteredSentRows = [];\r\n filteredDraftRows = getArrayFilterData(data, searchkey);\r\n // filteredSentRows = getArrayFilterData(completedData, searchkey);\r\n\r\n if (searchkey.length <= 0) {\r\n setCustomData(data);\r\n // setSearchSentData(completedData);\r\n } else {\r\n setCustomData(filteredDraftRows);\r\n // setSearchSentData(filteredSentRows);\r\n }\r\n };\r\n\r\n const getArrayFilterData = (arr, searchkey) => {\r\n const result = arr.filter(row => {\r\n return (\r\n row.CompanyName?.toString()\r\n .toLowerCase()\r\n .includes(searchkey.toString().toLowerCase()) ||\r\n row.AddressLine1?.toString()\r\n .toLowerCase()\r\n .includes(searchkey.toString().toLowerCase())\r\n );\r\n });\r\n return result;\r\n };\r\n\r\n const clearSearchData = () => {\r\n inputRef.current.focus();\r\n setSearchKey('');\r\n setCustomData(data);\r\n // setSearchDraftData(data);\r\n // setSearchSentData(customData);\r\n };\r\n\r\n const toggles = () => {\r\n // setModal(!modal);\r\n handleClickData();\r\n // return Export to CSV ;\r\n };\r\n\r\n const actionsList = [\r\n {\r\n onClick: toggles,\r\n label: \r\n {/*
} /> */}\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n c.value == accTeamId)}\r\n onChange={onTeamChangeHandler}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n searchCRMData(e)}\r\n value={searchKey}\r\n inputRef={inputRef}\r\n />\r\n {searchKey && (\r\n \r\n \r\n Add\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {skeletonLoaderState ? (\r\n handleClick(event, row)}\r\n // role=\"checkbox\"\r\n // aria-checked={isItemSelected}\r\n tabIndex={-1}\r\n // selected={isItemSelected}\r\n key={index}>\r\n \r\n {row.ImageUrl && \r\n \r\n {row.CompanyName}\r\n \r\n {row.CompanyEmail} \r\n \r\n {row.AddressLine1}, {row.AddressLine2}\r\n \r\n {row.PhoneNumber} \r\n {row.VATNumber} \r\n {row.Country} \r\n \r\n companyActionHandler('detail', row)} />\r\n \r\n companyActionHandler('delete', row)}\r\n />\r\n \r\n \r\n );\r\n })}\r\n {emptyRows > 0 && (\r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n {/* {modal && (\r\n \r\n {Array.from({ length: col }).map((item, index) => (\r\n \r\n \r\n ))}\r\n\r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n */}\r\n \r\n ));\r\n\r\nexport default TableSkeletonLoader;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { visuallyHidden } from '@mui/utils';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\n\r\nimport { Box, TableSortLabel } from '@material-ui/core';\r\n\r\nfunction EnhancedTableHead(props) {\r\n const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort, headCells } = props;\r\n const createSortHandler = property => event => {\r\n onRequestSort(event, property);\r\n };\r\n\r\n return (\r\n \r\n \r\n {headCells.map(headCell => (\r\n \r\n \r\n {headCell.label}\r\n {orderBy === headCell.id ? (\r\n \r\n {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\r\n \r\n ) : null}\r\n \r\n \r\n ))}\r\n \r\n \r\n );\r\n}\r\n\r\nEnhancedTableHead.propTypes = {\r\n onRequestSort: PropTypes.func.isRequired,\r\n onSelectAllClick: PropTypes.func,\r\n order: PropTypes.oneOf(['asc', 'desc']).isRequired,\r\n orderBy: PropTypes.string.isRequired,\r\n rowCount: PropTypes.number.isRequired,\r\n};\r\n\r\nexport default EnhancedTableHead;\r\n","import React from 'react';\r\nimport { IconButton, Menu, MenuItem } from '@material-ui/core';\r\nimport MoreHorizIcon from '@material-ui/icons/MoreHoriz';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst useRowStyles = makeStyles({\r\n root: {\r\n '& > *': {\r\n borderBottom: 'unset',\r\n },\r\n },\r\n pointer: {\r\n cursor: 'pointer',\r\n },\r\n outlookImg: {\r\n marginRight: '10px',\r\n cursor: 'pointer',\r\n width: '24px',\r\n height: '24px',\r\n },\r\n});\r\nconst ITEM_HEIGHT = 48;\r\nconst BankAccountRowMenu = ({ rowMenu = [], menuActionHandler, rowId }) => {\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const menuOpen = Boolean(anchorEl);\r\n const classes = useRowStyles();\r\n const handleClick = event => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n const handleMenuClose = () => {\r\n setAnchorEl(null);\r\n };\r\n\r\n const handleSelectMenu = menuObj => {\r\n console.log(menuObj);\r\n menuActionHandler(menuObj.id, rowId);\r\n setAnchorEl(null);\r\n };\r\n return (\r\n <>\r\n \r\n \r\n 
\r\n