{"version":3,"sources":["webpack:///./src/services/Tutorials/GetTutorialList.js","webpack:///./src/services/Contents/GetContentsList.js","webpack:///./src/services/Revenue/GetRevenueWidget.js","webpack:///./src/services/Contents/GetContentsClaimStatusList.js","webpack:///./src/services/Contents/GetContentsClaimStatusOverview.js","webpack:///./src/views/VVVNew/VVVDashboardNew.vue","webpack:///./src/views/VVVNew/VVVDashboardNew.vue?1697","webpack:///./src/helpers/youtubeScraper.js","webpack:///./src/assets/user-default.png","webpack:///./src/assets/VVV/vvv-loader.png","webpack:///./src/views/VVVNew/VVVDashboardNew.vue?85a0"],"names":["GetVideoTutorialList","async","pageNumber","data","HttpClient","get","params","Promise","resolve","err","reject","GetContentsList","searchString","userId","claimStatus","sortColumn","rowsPerPage","assetLabel","sortOrder","undefined","GetRevenueWidgets","url","currentDashboard","isVVV","endpointUrl","GetContentsClaimStatusList","GetContentsClaimStatusOverview","loading","ref","issueList","id","name","icon","color","badgeColor","message","response","userDetailStore","useUserDetailStore","userDetail","isUser","isAdmin","isSuperAdmin","storeToRefs","isAdminOrSuperAdmin","computed","value","tableHeaders","commonHeaders","userSpecificHeader","slice","length","router","useRouter","toClaimsList","push","toTutorials","isLoading","contentsList","contentsListPagination","totalRevenue","revenueLastMonth","latestTutorial","isWidgetLoading","claimStatusOverview","onMounted","useTitle","loadBreakdown","fetchContentsList","getTotalRevenue","getRevenueLastMonth","getClaimStatusOverview","getVideoTutorialList","contentRes","pagination","error","console","getCount","item","find","counter","formatNumberWithCommas","count","number","toString","replace","activeClaimsCount","activeClaim","isDeleted","pendingClaims","claim","status","approvalRatePercentage","getYoutubeVideoIframe","videoLink","videoId","extractVideoId","expose","googleSheetAlert","useStorage","revenueAlert","useEventListener","window","__exports__","apiKey","isYouTubeUrl","youtubePattern","test","urlObj","URL","hostname","toLowerCase","pathname","substring","searchParams","videoIdPattern","match","fetchVideoDetails","videoUrl","axios","videoDetails","items","title","snippet","channelTitle","channelId","thumbnailUrl","thumbnails","high","thumbnailWidth","width","duration","convertYTVideoDuration","contentDetails","viewCount","formatCount","statistics","fetchChannelDetails","channelDetails","thumbnail","default","subscriberCount","toFixed","hours","minutes","seconds","hoursMatch","minutesMatch","secondsMatch","parseInt","pad","num","padStart","formattedDuration","fetchChannelIdFromUrl","youtubeChannelUrl","channel","fetchChannelDetailsDirectly","channelData","channelName","channelUsername","customUrl","fetchChannelDetailsBatch","channelIds","join","map","module","exports"],"mappings":"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","file":"js/chunk-2f86898a.8b41b632.js","sourcesContent":["import { HttpClient } from \"../HttpClient\";\r\n\r\nexport const GetVideoTutorialList = async (pageNumber = 1) => {\r\n  try {\r\n    const { data } = await HttpClient.get(`api/Tutorials/List`, {\r\n      params: { pageNumber },\r\n    });\r\n    return await Promise.resolve(data);\r\n  } catch (err) {\r\n    return Promise.reject(err);\r\n  }\r\n};\r\n","import { HttpClient } from \"../HttpClient\";\r\n/**\r\n * * Get Contents\r\n */\r\nexport const GetContentsList = async ({\r\n  searchString,\r\n  userId,\r\n  claimStatus,\r\n  sortColumn = \"id\",\r\n  pageNumber = 1,\r\n  rowsPerPage,\r\n  assetLabel,\r\n}) => {\r\n  try {\r\n    const { data } = await HttpClient.get(\"api/contents/list\", {\r\n      params: {\r\n        ...(userId && { userId }),\r\n        pageNumber,\r\n        rowsPerPage,\r\n        assetLabel,\r\n        sortOrder: \"desc\",\r\n        ...(claimStatus !== undefined ? { claimStatus } : {}),\r\n        ...(searchString && { searchString }),\r\n        ...(sortColumn && { sortColumn }),\r\n      },\r\n    });\r\n    return data;\r\n  } catch (err) {\r\n    return Promise.reject(err);\r\n  }\r\n};\r\n","import { HttpClient } from \"../HttpClient\";\r\nimport { isVVV } from \"@/helpers/siteIdentifier\";\r\n/**\r\n * * Get Revenue Widgets\r\n */\r\nexport const GetRevenueWidgets = async (url, userId) => {\r\n  try {\r\n    const currentDashboard = isVVV() ? 3 : 2;\r\n    const endpointUrl = userId\r\n    ? `api/revenues/${url}?userId=${userId}&currentDashboard=${currentDashboard}&isImpersonation=true`\r\n    : `api/revenues/${url}?currentDashboard=${currentDashboard}`;\r\n    const { data } = await HttpClient.get(endpointUrl);\r\n    return await Promise.resolve(data);\r\n  } catch (err) {\r\n    return Promise.reject(err);\r\n  }\r\n};\r\n","import { HttpClient } from \"../HttpClient\";\r\n/**\r\n * * Get Contents Claim Status List\r\n */\r\nexport const GetContentsClaimStatusList = async () => {\r\n  try {\r\n    const { data } = await HttpClient.get(\"api/contents/ClaimStatusList\");\r\n    return data;\r\n  } catch (err) {\r\n    return Promise.reject(err);\r\n  }\r\n};\r\n","import { HttpClient } from \"../HttpClient\";\r\n/**\r\n * * Get Contents Claim Status Overview\r\n */\r\nexport const GetContentsClaimStatusOverview = async () => {\r\n  try {\r\n    const { data } = await HttpClient.get(\"api/contents/ClaimStatusOverview\");\r\n    return data;\r\n  } catch (err) {\r\n    return Promise.reject(err);\r\n  }\r\n};\r\n","<template>\r\n    <VVVLayoutNew>\r\n        <template #page-title>\r\n            Home\r\n        </template>\r\n        <MDBAlert v-if=\"isUser && userDetail.isNewUser && revenueAlert\" color=\"warning\" static class=\"mb-2\">\r\n            <div class=\"alert-container\">\r\n                <vue-feather type=\"alert-circle\" :stroke-width=\"2.5\" />\r\n                <p class=\"mb-0 alert-message\">\r\n                    Welcome, <strong style=\"text-transform: capitalize;\">{{ userDetail.firstName }}</strong>! Your first\r\n                    earnings\r\n                    report will be live in about 30-days. <a href=\"//CreatorShield.com/support\" target=\"_blank\"\r\n                        rel=\"noopener noreferrer\">See the earnings\r\n                        schedule</a>.\r\n                </p>\r\n                <vue-feather type=\"x\" :stroke-width=\"2.5\" size=\"18\" class=\"ms-auto\" @click=\"revenueAlert = false\"\r\n                    style=\"cursor: pointer;\" />\r\n            </div>\r\n        </MDBAlert>\r\n        <MDBAlert v-if=\"googleSheetAlert\" static class=\"mb-4\" style=\"background: #223698; color: white;\">\r\n            <div class=\"alert-container\">\r\n                <vue-feather type=\"alert-circle\" :stroke-width=\"2.5\" />\r\n                <p class=\"mb-0 alert-message\">\r\n                    Welcome to our refreshed dashboard.\r\n                    <a href=\"https://docs.google.com/forms/d/e/1FAIpQLSfpkfJTFTKfC_gXKUhFUdjUuTXBuE4BZKR5TZg5jw07BRQ96g/viewform\"\r\n                        target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-white text-decoration-underline\">\r\n                        Send us feedback on how to improve.\r\n                    </a>\r\n                </p>\r\n                <vue-feather type=\"x\" :stroke-width=\"2.5\" size=\"18\" class=\"ms-auto\" @click=\"googleSheetAlert = false\"\r\n                    style=\"cursor: pointer;\" />\r\n            </div>\r\n        </MDBAlert>\r\n        <div class=\"mb-3 mb-md-4 gap-3 metrics-container\">\r\n            <MDBCard class=\"shadow rounded-5\">\r\n                <MDBCardHeader tag=\"h5\" class=\"fw-bold\">\r\n                    Issues\r\n                </MDBCardHeader>\r\n                <MDBCardBody class=\"p-0 pb-1\" style=\"min-height: 300px;\"\r\n                    :style=\"isWidgetLoading ? { display: 'grid', placeContent: 'center' } : {}\">\r\n                    <div class=\"image-container image-container-big\" v-if=\"isWidgetLoading\">\r\n                        <div class=\"loader\"></div>\r\n                        <img src=\"@/assets/VVV/vvv-loader.png\" alt=\"Loading image\">\r\n                    </div>\r\n                    <MDBListGroup v-else>\r\n                        <template v-for=\"counter in issueList\" :key=\"counter.id\">\r\n                            <router-link :to=\"'/claims-list?claimStatus=' + counter.id\" custom\r\n                                v-slot=\"{ href, navigate }\">\r\n                                <MDBListGroupItem tag=\"a\" :href=\"href\" @click.stop=\"navigate\"\r\n                                    style=\"display:flex; justify-content: space-between; align-items: center; border: 0\"\r\n                                    title=\"View List\">\r\n                                    <span>{{ counter.name }}</span>\r\n                                    <MDBBadge color=\"primary\">{{ getCount(counter.id) }}</MDBBadge>\r\n                                </MDBListGroupItem>\r\n                            </router-link>\r\n                        </template>\r\n                    </MDBListGroup>\r\n                </MDBCardBody>\r\n            </MDBCard>\r\n            <MDBCard class=\"shadow rounded-5\">\r\n                <MDBCardHeader tag=\"h5\" class=\"fw-bold\">\r\n                    Your overview\r\n                </MDBCardHeader>\r\n                <MDBCardBody class=\"p-0 pb-1\"\r\n                    :style=\"isWidgetLoading ? { display: 'grid', placeContent: 'center' } : {}\">\r\n                    <div class=\"image-container image-container-big my-3\" v-if=\"isWidgetLoading\">\r\n                        <div class=\"loader\"></div>\r\n                        <img src=\"@/assets/VVV/vvv-loader.png\" alt=\"Loading image\">\r\n                    </div>\r\n                    <MDBListGroup v-else>\r\n                        <MDBListGroupItem\r\n                            style=\"display:flex; justify-content: space-between; align-items: center; border: 0\">\r\n                            <span>Total Revenue Generated</span>\r\n                            <MDBBadge color=\"primary\">$ {{ totalRevenue }}</MDBBadge>\r\n                        </MDBListGroupItem>\r\n                        <MDBListGroupItem\r\n                            style=\"display:flex; justify-content: space-between; align-items: center; border: 0\">\r\n                            <span>Revenues Generated Last Month</span>\r\n                            <MDBBadge color=\"primary\">$ {{ revenueLastMonth }}</MDBBadge>\r\n                        </MDBListGroupItem>\r\n                        <MDBListGroupItem\r\n                            style=\"display:flex; justify-content: space-between; align-items: center; border: 0\">\r\n                            <span>Total Active Claims</span>\r\n                            <MDBBadge color=\"primary\">{{ activeClaimsCount }}</MDBBadge>\r\n                        </MDBListGroupItem>\r\n                        <MDBListGroupItem\r\n                            style=\"display:flex; justify-content: space-between; align-items: center; border: 0\">\r\n                            <span>Pending Claims</span>\r\n                            <MDBBadge color=\"primary\">{{ pendingClaims }}</MDBBadge>\r\n                        </MDBListGroupItem>\r\n                        <MDBListGroupItem\r\n                            style=\"display:flex; justify-content: space-between; align-items: center; border: 0\">\r\n                            <span>New Claims Approval Rate (30 days)</span>\r\n                            <MDBBadge color=\"primary\">{{ approvalRatePercentage }} %</MDBBadge>\r\n                        </MDBListGroupItem>\r\n                    </MDBListGroup>\r\n                </MDBCardBody>\r\n            </MDBCard>\r\n            <MDBCard class=\"shadow rounded-5\">\r\n                <MDBCardHeader tag=\"h5\" class=\"fw-bold\">\r\n                    Latest Tutorial\r\n                </MDBCardHeader>\r\n                <MDBCardBody class=\"p-0 py-3\" v-if=\"!isWidgetLoading && !latestTutorial\"\r\n                    style=\"display: grid;place-content: center;\">\r\n                    Uploading Soon!\r\n                </MDBCardBody>\r\n                <MDBCardBody v-else :style=\"isWidgetLoading ? { display: 'grid', placeContent: 'center' } : {}\">\r\n                    <div class=\"image-container image-container-big\" v-if=\"isWidgetLoading\">\r\n                        <div class=\"loader\"></div>\r\n                        <img src=\"@/assets/VVV/vvv-loader.png\" alt=\"Loading image\">\r\n                    </div>\r\n                    <template v-else>\r\n                        <template v-if=\"latestTutorial.link\">\r\n                            <iframe width=\"100%\" height=\"250\" :src=\"getYoutubeVideoIframe(latestTutorial.link)\"\r\n                                frameborder=\"0\"\r\n                                allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n                                allowfullscreen></iframe>\r\n                            <div class=\"pt-2\">\r\n                                <p class=\"text-left fw-bold mb-2\" style=\"font-size: 15px;\">\r\n                                    {{ latestTutorial.title }}\r\n                                </p>\r\n                                <p class=\"text-left\" style=\"font-size: 14px;\">\r\n                                    {{ latestTutorial.viewDescription }}\r\n                                </p>\r\n                                <MDBBtn class=\"btn-primary fw-bold\" size=\"sm\" @click=\"toTutorials\">\r\n                                    View All Tutorials\r\n                                    <MDBIcon icon=\"arrow-right\" class=\"fas fa-fw\" />\r\n                                </MDBBtn>\r\n                            </div>\r\n                        </template>\r\n                    </template>\r\n                </MDBCardBody>\r\n            </MDBCard>\r\n        </div>\r\n        <MDBCard class=\"shadow rounded-5\">\r\n            <MDBCardHeader tag=\"h6\"\r\n                class=\"text-left fw-bold justify-content-between align-items-center bg-white d-block d-md-flex border-0\">\r\n                Recently Added Claims\r\n                <MDBBtn class=\"btn-primary fw-bold mt-md-0 mt-3\" size=\"sm\" @click=\"toClaimsList\">\r\n                    View Full List\r\n                    <MDBIcon icon=\"arrow-right\" class=\"fas fa-fw\" />\r\n                </MDBBtn>\r\n            </MDBCardHeader>\r\n            <MDBCardBody class=\"overflow-auto justify-content-start p-0\">\r\n                <MDBTable hover class=\"align-middle\">\r\n                    <thead class=\"table-light\" style=\"z-index: 0;\">\r\n                        <tr>\r\n                            <th scope=\"col\" class=\"text-uppercase align-middle text-left\" v-if=\"isAdminOrSuperAdmin\">\r\n                                Distributor Name\r\n                            </th>\r\n                            <th v-for=\"(header, i) in tableHeaders\" :key=\"i\" scope=\"col\"\r\n                                class=\" align-middle text-left text-uppercase\">\r\n                                {{ header }}\r\n                            </th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody class=\"overflow-auto\">\r\n                        <template v-if=\"isLoading\">\r\n                            <tr>\r\n                                <td :colspan=\"isAdminOrSuperAdmin ? '7' : '6'\" class=\"text-center\">\r\n                                    <div class=\"image-container image-container-big d-flex justify-content-center align-items-center\">\r\n                                        <div class=\"loader\"></div>\r\n                                        <img src=\"@/assets/VVV/vvv-loader.png\" alt=\"Loading image\">\r\n                                    </div>\r\n                                </td>\r\n                            </tr>\r\n                        </template>\r\n                        <template v-else>\r\n                            <template v-if=\"contentsList.length === 0\">\r\n                                <tr>\r\n                                    <td :colspan=\"isAdminOrSuperAdmin ? '7' : '6'\" class=\"text-center\">No claims found.\r\n                                    </td>\r\n                                </tr>\r\n                            </template>\r\n                            <template v-else v-for=\"(contents, k) in contentsList\" :key=\"k\">\r\n                                <tr>\r\n                                    <td v-if=\"isAdminOrSuperAdmin\" class=\"text-truncate\" style=\"max-width: 180px;\">\r\n                                        {{ contents.userId ? contents.userFirstName + ' ' + contents.userLastName : '-'\r\n                                        }}\r\n                                    </td>\r\n                                    <td class=\"text-truncate\" style=\"max-width: 200px;\">\r\n                                        <img v-if=\"contents.thumbnail\" :src=\"contents.thumbnail\" alt=\"thumbnail\"\r\n                                            style=\"width: 30px; height: 30px\" class=\"rounded-circle me-2\" />\r\n                                        <img v-else src=\"@/assets/user-default.png\" alt=\"thumbnail\"\r\n                                            style=\"width: 30px; height: 30px\" class=\"rounded-circle me-2\" />\r\n                                        <span>\r\n                                            {{ contents.youtubeChannel }}\r\n                                        </span>\r\n                                    </td>\r\n                                    <td class=\"text-truncate\" style=\"max-width: 180px;\"><a :href=\"contents.youtubeUrl\"\r\n                                            target=\"_blank\" class=\"text-left\">{{ contents.youtubeUrl }}</a>\r\n                                    </td>\r\n                                    <td>{{ contents.timeStamp }}</td>\r\n                                    <td class=\"text-truncate\" style=\"max-width: 180px;\"><a :href=\"contents.dropboxLink\"\r\n                                            target=\"_blank\" class=\"text-left\">{{ contents.dropboxLink }}</a>\r\n                                    </td>\r\n                                    <td>{{ parseDateLong(contents.dateAdded) }}</td>\r\n                                </tr>\r\n                            </template>\r\n                        </template>\r\n                    </tbody>\r\n                </MDBTable>\r\n            </MDBCardBody>\r\n        </MDBCard>\r\n    </VVVLayoutNew>\r\n</template>\r\n\r\n<script setup>\r\nimport { MDBCard, MDBCardBody, MDBCardHeader, MDBTable, MDBBtn, MDBIcon, MDBAlert, MDBBadge, MDBListGroup, MDBListGroupItem } from \"mdb-vue-ui-kit\";\r\nimport { onMounted, ref, defineExpose, computed } from \"vue\";\r\nimport { GetContentsClaimStatusList } from \"@/services/Contents/GetContentsClaimStatusList\";\r\nimport VVVLayoutNew from \"@/views/VVVNew/VVVLayoutNew.vue\";\r\nimport { useUserDetailStore } from \"@/store/userDetailStore\";\r\nimport { storeToRefs } from \"pinia\";\r\nimport { parseDateLong } from \"@/helpers/parseDate\";\r\nimport { useRouter } from \"vue-router\";\r\nimport { useTitle, useStorage, useEventListener } from \"@vueuse/core\";\r\nimport { GetContentsList } from \"@/services/Contents/GetContentsList\";\r\nimport { GetContentsClaimStatusOverview } from \"@/services/Contents/GetContentsClaimStatusOverview\";\r\nimport { GetRevenueWidgets } from \"@/services/Revenue/GetRevenueWidget\";\r\nimport { GetVideoTutorialList } from \"@/services/Tutorials/GetTutorialList\";\r\nimport { extractVideoId } from \"@/helpers/youtubeScraper\";\r\nimport VueFeather from 'vue-feather';\r\n\r\nconst loading = ref(false);\r\nconst issueList = ref([\r\n    // { id: 1, name: \"Active Claims\", icon: \"check-circle\", color: '#28a745', badgeColor: 'warning', message: 'Hooray, new claims approved!' },\r\n    { id: 2, name: \"Issues\", icon: \"times-circle\", color: '#dc3545', badgeColor: 'danger', message: 'Take action as soon as possible' },\r\n    { id: 3, name: \"Duplicate Claims\", icon: \"copy\", color: '#fd7e14', badgeColor: '', message: '' },\r\n    { id: 4, name: \"Resolved Issues\", icon: \"tools\", color: '#007bff', badgeColor: '', message: '' },\r\n    { id: 5, name: \"Submitted Claims\", icon: \"file-upload\", color: '#6c757d', badgeColor: '', message: '' },\r\n    { id: 6, name: \"For Further Review\", icon: \"exclamation-triangle\", color: '#d5d500', badgeColor: '', message: '' },\r\n    // { id: 7, name: \"Awaiting for 100 views\", icon: \"eye\", color: '#ffc107', badgeColor: '', message: '' }, // Remove temporarily\r\n    // { id: 8, name: \"Awaiting for 1 view\", icon: \"hourglass-half\", color: '#ffc107', badgeColor: '', message: '' }\r\n]);\r\nconst response = ref([]);\r\n\r\nconst userDetailStore = useUserDetailStore();\r\nconst { userDetail, isUser, isAdmin, isSuperAdmin } = storeToRefs(userDetailStore);\r\nconst isAdminOrSuperAdmin = computed(() => isAdmin.value || isSuperAdmin.value);\r\n\r\nconst tableHeaders = computed(() => {\r\n    const commonHeaders = [\r\n        \"Channel Name\",\r\n        \"Youtube URL\",\r\n        \"Timestamp\",\r\n        \"Date Added\",\r\n    ];\r\n\r\n    const userSpecificHeader = isUser.value ? \"Clip Used\" : \"Clip URL\";\r\n\r\n    return [...commonHeaders.slice(0, -1), userSpecificHeader, commonHeaders[commonHeaders.length - 1]];\r\n});\r\n\r\nconst router = useRouter();\r\nconst toClaimsList = () => {\r\n    router.push(\"/claims-list\");\r\n};\r\nconst toTutorials = () => {\r\n    router.push(`/tutorials`);\r\n};\r\n\r\nconst isLoading = ref(false);\r\nconst contentsList = ref([]);\r\nconst contentsListPagination = ref({});\r\nconst totalRevenue = ref(null);\r\nconst revenueLastMonth = ref(null);\r\nconst latestTutorial = ref();\r\nconst isWidgetLoading = ref(true);\r\nconst claimStatusOverview = ref();\r\n\r\nonMounted(async () => {\r\n    useTitle(\"Dashboard | Very Viral Videos\");\r\n    await loadBreakdown();\r\n    await fetchContentsList()\r\n    isWidgetLoading.value = true;\r\n    totalRevenue.value = await getTotalRevenue();\r\n    revenueLastMonth.value = await getRevenueLastMonth();\r\n    claimStatusOverview.value = await getClaimStatusOverview();\r\n    latestTutorial.value = await getVideoTutorialList()\r\n    isWidgetLoading.value = false;\r\n});\r\n\r\n\r\nconst fetchContentsList = async () => {\r\n    isLoading.value = true;\r\n    try {\r\n        const contentRes = await GetContentsList({ pageNumber: 1, rowsPerPage: 5 });\r\n        contentsList.value = contentRes.data;\r\n        contentsListPagination.value = contentRes.pagination;\r\n    } catch (error) {\r\n        console.error(error);\r\n    } finally {\r\n        isLoading.value = false;\r\n    }\r\n};\r\n\r\nconst loadBreakdown = async () => {\r\n    loading.value = true;\r\n    response.value = await GetContentsClaimStatusList();\r\n    loading.value = false;\r\n};\r\n\r\nconst getCount = (id) => {\r\n    const item = response.value.find(counter => counter.id === id);\r\n    return item ? formatNumberWithCommas(item.count) : 0;\r\n};\r\n\r\nfunction formatNumberWithCommas(number) {\r\n    return number.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n}\r\n\r\nconst activeClaimsCount = computed(() => {\r\n    const activeClaim = response.value.find(counter => counter.id === 1);\r\n    return activeClaim ? formatNumberWithCommas(activeClaim.count) : 0;\r\n})\r\n\r\nconst getTotalRevenue = async () => {\r\n    const response = await GetRevenueWidgets(\"RevenueTotal\");\r\n    return formatNumberWithCommas(response);\r\n}\r\n\r\nconst getRevenueLastMonth = async () => {\r\n    const response = await GetRevenueWidgets(\"RevenueMonth\");\r\n    return formatNumberWithCommas(response);\r\n}\r\n\r\nconst getVideoTutorialList = async () => {\r\n    try {\r\n        const response = await GetVideoTutorialList(1);\r\n        return response.data.find(item => !item.isDeleted);\r\n    } catch (error) {\r\n        console.error(\"Error fetching tutorials:\", error);\r\n    }\r\n};\r\nconst getClaimStatusOverview = async () => {\r\n    try {\r\n        const response = await GetContentsClaimStatusOverview();\r\n        return response;\r\n    } catch (error) {\r\n        console.error(\"Error fetching tutorials:\", error);\r\n    }\r\n};\r\n\r\nconst pendingClaims = computed(() => {\r\n    const claim = claimStatusOverview.value.find(status => status.name === 'Pending');\r\n    return formatNumberWithCommas(claim.value)\r\n})\r\nconst approvalRatePercentage = computed(() => {\r\n    const claim = claimStatusOverview.value.find(status => status.name === 'ApprovalRatePercentage');\r\n    return claim.value\r\n})\r\n\r\nconst getYoutubeVideoIframe = (videoLink) => {\r\n    if (!videoLink) {\r\n        return '';\r\n    }\r\n\r\n    const videoId = extractVideoId(videoLink);\r\n    if (!videoId) {\r\n        console.error(\"Could not extract video ID from link:\");\r\n        return '';\r\n    }\r\n\r\n    return `https://www.youtube.com/embed/${videoId}?rel=0&color=white&disablekb=1&modestbranding=1&cc_load_policy=1`;\r\n};\r\n\r\ndefineExpose({ loadBreakdown });\r\n\r\nconst googleSheetAlert = useStorage('googleSheetAlert', true);\r\nconst revenueAlert = useStorage('revenueAlert', true);\r\n\r\nuseEventListener(window, 'reset-alerts', () => {\r\n    googleSheetAlert.value = null;\r\n    revenueAlert.value = null;\r\n});\r\n\r\n</script>\r\n\r\n<style scoped>\r\n.metrics-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 1rem;\r\n    justify-content: center;\r\n}\r\n\r\n.metrics-container .card {\r\n    flex: 1 1 calc(33.33% - 1rem);\r\n}\r\n\r\n@media (min-width: 768px) and (max-width: 1023px) {\r\n    .metrics-container .card {\r\n        flex: 1 1 calc(50% - 1rem);\r\n    }\r\n\r\n    .metrics-container .card:nth-child(3) {\r\n        flex: 1 1 100%;\r\n        justify-content: center;\r\n        display: flex;\r\n    }\r\n}\r\n\r\n/* Mobile: 1 card per row */\r\n@media (max-width: 767px) {\r\n    .metrics-container .card {\r\n        flex: 1 1 100%;\r\n    }\r\n}\r\n\r\n.btn-primary {\r\n    background-color: var(--primary);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n}\r\n\r\n.badge.bg-primary {\r\n    background-color: var(--primary) !important;\r\n}\r\n\r\n.spinner-grow {\r\n    color: var(--accent);\r\n}\r\n\r\n.card {\r\n    border-radius: 16px;\r\n}\r\n\r\n.card-header {\r\n    color: black !important;\r\n    font-family: 'GilroyBold', sans-serif;\r\n    background-color: white;\r\n}\r\n\r\n.card-title {\r\n    color: var(--primary);\r\n}\r\n\r\n.alert-message {\r\n    width: 100%;\r\n}\r\n\r\n@media (max-width: 767px) {\r\n    .counter {\r\n        min-height: 80px;\r\n        width: 100%;\r\n    }\r\n\r\n    .alert-message {\r\n        width: 75%;\r\n    }\r\n}\r\n\r\n.overlay {\r\n    display: none;\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 16px;\r\n    background: rgb(0 0 0 / 25%);\r\n    z-index: 1;\r\n}\r\n\r\n.overlay .btn {\r\n    background-color: var(--primary);\r\n    color: white;\r\n}\r\n\r\n.counter:hover .card-body .overlay {\r\n    display: grid;\r\n    place-content: center;\r\n}\r\n\r\ntd {\r\n    text-wrap: nowrap;\r\n    width: fit-content;\r\n    text-align: left;\r\n    font-size: 14px;\r\n}\r\n\r\nth {\r\n    text-wrap: nowrap;\r\n    width: fit-content;\r\n    text-align: left;\r\n    font-size: 14.5px;\r\n}\r\n\r\n.image-container {\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.image-container .loader {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    margin: auto;\r\n    width: 35px;\r\n    height: 35px;\r\n    border: 3px solid rgba(0, 0, 0, 0.1);\r\n    border-top-color: rgb(153, 153, 153);\r\n    border-radius: 50%;\r\n    animation: BorderSpin 1s linear infinite;\r\n}\r\n\r\n.image-container img {\r\n    display: block;\r\n    width: 35px;\r\n    height: 35px;\r\n    border-radius: 50%;\r\n}\r\n\r\n.image-container-big .loader,\r\n.image-container img {\r\n    width: 135px;\r\n    height: 135px;\r\n}\r\n\r\n.alert-container {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    font-size: 14px;\r\n}\r\n\r\n@keyframes BorderSpin {\r\n    0% {\r\n        transform: rotate(0deg);\r\n    }\r\n\r\n    100% {\r\n        transform: rotate(360deg);\r\n    }\r\n}\r\n</style>\r\n","import script from \"./VVVDashboardNew.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./VVVDashboardNew.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./VVVDashboardNew.vue?vue&type=style&index=0&id=738d0e0f&scoped=true&lang=css\"\n\nimport exportComponent from \"D:\\\\a\\\\1\\\\s\\\\CSD.SPA\\\\ClientApp\\\\node_modules\\\\vue-loader-v16\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-738d0e0f\"]])\n\nexport default __exports__","import axios from \"axios\";\r\n\r\nconst apiKey = \"AIzaSyAHfRRvUqf-L2nT4nFFRVc1OyneC4D3-nE\"; // To be moved to environment variable\r\n\r\nexport const isYouTubeUrl = (url) => {\r\n  const youtubePattern = /^(https?:\\/\\/)?(www\\.)?(youtube\\.com|youtu\\.be)\\/.+$/;\r\n  return youtubePattern.test(url);\r\n};\r\n\r\nexport const extractVideoId = (url) => {\r\n  try {\r\n    const urlObj = new URL(url);\r\n    const hostname = urlObj.hostname.toLowerCase();\r\n\r\n    if (hostname === \"youtu.be\") {\r\n      return urlObj.pathname.substring(1);\r\n    }\r\n\r\n    if (hostname === \"youtube.com\" || hostname === \"www.youtube.com\") {\r\n      const videoId = urlObj.searchParams.get(\"v\");\r\n      if (videoId) return videoId;\r\n    }\r\n  } catch (error) {\r\n    const videoIdPattern =\r\n      // eslint-disable-next-line no-useless-escape\r\n      /(?:https?:\\/\\/)?(?:www\\.)?(?:youtube\\.com\\/(?:[^\\/\\n\\s]+\\/\\S+\\/|(?:v|e(?:mbed)?)\\/|\\S*?[?&]v=)|youtu\\.be\\/)([a-zA-Z0-9_-]{11})/;\r\n    const match = url.match(videoIdPattern);\r\n    return match ? match[1] : null;\r\n  }\r\n\r\n  // Return null if no method succeeds\r\n  return null;\r\n};\r\n\r\nexport const fetchVideoDetails = async (videoUrl) => {\r\n  if (!isYouTubeUrl(videoUrl)) {\r\n    console.error(\"Invalid YouTube URL\");\r\n    return;\r\n  }\r\n  const videoId = extractVideoId(videoUrl);\r\n  if (!videoId) {\r\n    console.error(\"Invalid YouTube URL\");\r\n    return false;\r\n  }\r\n  const url = `https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails,statistics&id=${videoId}&key=${apiKey}`;\r\n\r\n  try {\r\n    const response = await axios.get(url);\r\n    const videoDetails = response.data.items[0];\r\n\r\n    const title = videoDetails.snippet.title;\r\n    const channelTitle = videoDetails.snippet.channelTitle;\r\n    const channelId = videoDetails.snippet.channelId;\r\n    const thumbnailUrl = videoDetails.snippet.thumbnails.high.url;\r\n    const thumbnailWidth = videoDetails.snippet.thumbnails.high.width;\r\n    const duration = convertYTVideoDuration(\r\n      videoDetails.contentDetails.duration\r\n    );\r\n    const viewCount = formatCount(videoDetails.statistics.viewCount);\r\n\r\n    return await Promise.resolve({\r\n      videoId,\r\n      title,\r\n      channelTitle,\r\n      channelId,\r\n      thumbnailUrl,\r\n      thumbnailWidth,\r\n      duration,\r\n      viewCount,\r\n    });\r\n  } catch (err) {\r\n    return Promise.reject(err);\r\n  }\r\n};\r\n\r\nexport const fetchChannelDetails = async (channelId) => {\r\n  const url = `https://www.googleapis.com/youtube/v3/channels?part=snippet,statistics&id=${channelId}&key=${apiKey}`;\r\n\r\n  try {\r\n    const response = await axios.get(url);\r\n    const channelDetails = response.data.items[0];\r\n    const id = channelDetails.id;\r\n    const title = channelDetails.snippet.title;\r\n    const thumbnail = channelDetails.snippet.thumbnails.default.url;\r\n    const subscriberCount = formatCount(\r\n      channelDetails.statistics.subscriberCount\r\n    );\r\n\r\n    return await Promise.resolve({\r\n      id,\r\n      title,\r\n      thumbnail,\r\n      subscriberCount,\r\n    });\r\n  } catch (err) {\r\n    return Promise.reject(err);\r\n  }\r\n};\r\n\r\nconst formatCount = (subscriberCount) => {\r\n  if (subscriberCount >= 1000000) {\r\n    return (subscriberCount / 1000000).toFixed(1) + \"M\";\r\n  } else if (subscriberCount >= 1000) {\r\n    return (subscriberCount / 1000).toFixed(1) + \"K\";\r\n  } else {\r\n    return subscriberCount.toString();\r\n  }\r\n};\r\n\r\nconst convertYTVideoDuration = (duration) => {\r\n  let hours = 0,\r\n    minutes = 0,\r\n    seconds = 0;\r\n\r\n  const hoursMatch = duration.match(/(\\d+)H/);\r\n  const minutesMatch = duration.match(/(\\d+)M/);\r\n  const secondsMatch = duration.match(/(\\d+)S/);\r\n\r\n  if (hoursMatch) hours = parseInt(hoursMatch[1]);\r\n  if (minutesMatch) minutes = parseInt(minutesMatch[1]);\r\n  if (secondsMatch) seconds = parseInt(secondsMatch[1]);\r\n\r\n  const pad = (num) => num.toString().padStart(2, \"0\");\r\n\r\n  let formattedDuration;\r\n  if (hours > 0) {\r\n    formattedDuration = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;\r\n  } else if (minutes > 0) {\r\n    formattedDuration = `${pad(minutes)}:${pad(seconds)}`;\r\n  } else {\r\n    formattedDuration = `${seconds}`;\r\n  }\r\n\r\n  return formattedDuration;\r\n};\r\n\r\nexport const fetchChannelIdFromUrl = async (youtubeChannelUrl) => {\r\n  const url = `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${youtubeChannelUrl}&type=channel&key=${apiKey}`;\r\n\r\n  try {\r\n    const response = await axios.get(url);\r\n    const channel = response.data.items[0];\r\n\r\n    if (channel) {\r\n      return channel.id.channelId;\r\n    } else {\r\n      console.error(\"Channel not found for the provided username.\");\r\n      return null;\r\n    }\r\n  } catch (error) {\r\n    console.error(\"Error fetching channel ID:\", error);\r\n    return [];\r\n  }\r\n};\r\n\r\nexport const fetchChannelDetailsDirectly = async (youtubeChannelUrl) => {\r\n  const channelId = await fetchChannelIdFromUrl(youtubeChannelUrl);\r\n\r\n  if (!channelId) {\r\n    console.error(\"Channel ID could not be found.\");\r\n    return null;\r\n  }\r\n\r\n  const url = `https://www.googleapis.com/youtube/v3/channels?part=snippet,statistics&id=${channelId}&key=${apiKey}`;\r\n\r\n  try {\r\n    const response = await axios.get(url);\r\n    const channelData = response.data.items[0];\r\n\r\n    const channelDetails = {\r\n      channelId: channelData.id,\r\n      channelName: channelData.snippet.title,\r\n      thumbnail: channelData.snippet.thumbnails.default.url,\r\n      subscriberCount: formatCount(channelData.statistics.subscriberCount),\r\n      channelUsername: channelData.snippet.customUrl,\r\n    };\r\n\r\n    return channelDetails;\r\n  } catch (error) {\r\n    console.error(\"Error fetching channel details:\", error);\r\n    throw error;\r\n  }\r\n};\r\n\r\nexport const fetchChannelDetailsBatch = async (channelIds) => {\r\n  const url = `https://www.googleapis.com/youtube/v3/channels?part=snippet,statistics&id=${channelIds.join(\r\n    \",\"\r\n  )}&key=${apiKey}`;\r\n\r\n  try {\r\n    const response = await axios.get(url);\r\n    if (!response.data.items || response.data.items.length === 0) {\r\n      return [];\r\n    }\r\n    return response.data.items.map((channel) => ({\r\n      channelId: channel.id,\r\n      channelName: channel.snippet.title,\r\n      thumbnail: channel.snippet.thumbnails.default.url,\r\n      subscriberCount: formatCount(channel.statistics.subscriberCount),\r\n      channelUsername: channel.snippet.customUrl,\r\n    }));\r\n  } catch (error) {\r\n    console.error(\"Error in batch fetching channel details:\", error);\r\n    return [];\r\n  }\r\n};\r\n","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjcyN0JEM0Y1MTRGMTFFNTg4ODhDQjM0RDhDRDk0RDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjcyN0JENDA1MTRGMTFFNTg4ODhDQjM0RDhDRDk0RDkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNzI3QkQzRDUxNEYxMUU1ODg4OENCMzREOENEOTREOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCNzI3QkQzRTUxNEYxMUU1ODg4OENCMzREOENEOTREOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps6CkAwAAAUfSURBVHja3Jp5bFVFFManRKFsFRBFSCXsSYms0QRBeYkmLBot+xIQAkGkQEkUJCFpQGkIAYGoZVP+IKQQooFAWUsISwEF/EdWIWIIYUkqCIUWKYRi/Y79Gq639747M/feopzklyZ982bOd2fmzJlzX8qsnFz1f7YvcnP++VtHPSX2TIR9NQF9SVfQGrwIGvLzP8F1cBmcAodBEbj9XxBSDwwDY0EfcBQcBCvAr+B3cJdtG4EWoBPoDKaCfPAj/24CD2pbSH2QBT4GZ8E6MASUJ/nOLXIOFICF7GcQGA8WgWVgVUA/nmazRwaC01xC74MBYKPN4PzORvbxHniTfQ+Mc0ZS+cT6g2mgMOL9+jMYTFGyNPeAT8D9KGekBTdnc9AjBhFOK+QYMtYPHDsSIe3AEbAdjACltRBNSzlWAcduG3ZppYN9XFJ5hnsvgw9BlmQx175pqJ3P7+zn/rlqI6QB2AbWGooYy4iU7vp/BfgOzGRY1rWveUaJL2+Ae6ZL60vwG5+Krs3mmZDu89DGcN03s5iZC+Ar0z3yDngbfGgwWEvwmUa79hRsapPBW/RNS0gqp1NC7B2DgUbygNOxcRZC7tCnPPoYKCSLG9M0xPYynL02lqH5FH1MKqQeN+PnFoO0NWxvI0TRt1nuWXELGcbc6YRl/mViDS2FiG9nwNBkQj5guLWxFMP2f4U4MNfSV08hEqt78zS1sWLD9jdCCCmgr028hCR4Nyi37Pwnw6z3dAgh5fQ14SVETs1DITrfZNB2e5hLFK2IaUsNIRncRGHS8J0a7SqYwoS1M/S5hpCOvJ6GsSngWkCbuZZR0W2SsnTwEvJSyA2omJ1KGnHS4zNZSp9GNBvVwaK5V/abBsoiGEBm9VXwLvOixtzY68GVCO8sZSxoRFoOqkPnZfO9Br5liCxwPaiVTMOPg71RlYLcQkr59G4afL8R79UfgVauBFKiyjGWg9qzuPC8a6ntArkMFKbW2FFq+pcQOdBeMBCSQUf8cqaEM8771MSk2JAJ5oDFhkLE1z+8NvsFFs90rAFDbZuIluUi3ixNrCMvfjWEnAevaHYywSLbDbIFhnU28fWclxAp9/TV7GR4DJUTqRV3NWifoM81hBQxEUvV6KRnTGWg3prtxMfXnSmVU8htJmKDAjppyoihYpoVHctkRCzxu4/kc/0ns1YqPmtpsEfzk12sNnMTdY/wJmhiOstafOvizrbdQqRgvATMCzmYrelcfyXpXKpcxW2vcLeK0WOAT0d1YxRSGfC5vAnoxlQnsBwkSrNVVWn/OY/PJeTtiEFEacDpXp2rzVAerxr8DiBJPQ4w+XPbQ0aNLJWkqGxgj1RVTbib81zwsDU8Inb6pQd+NoMpS45PBWQ1T3dJ1Zfzxlah6fx1zmo2+xgFLiVpn0Nfputkv267x4xV3k9IuTLP59q6m4g9C17mJS3Ncd48ZB83eScpMZgxETtJJanE69xHqm98e3kQBlXmxeGLJAqTCDWePlwNyjyDTJzqw33xPZ903JbGsTI5duCD0c02i9lhCS9B/WIU0Y9j3OKYWoU/k7T5Pm+C2QyDWwIyAFPrzj5XclNPUZpvdE2FOENzF4ZKCYWFjDo2qUt9freQfR1m37vD3NlNTEqWy3hoSgV/IvhGVf2EQ2L9L+rxTzjKHHds5084EkzFpRCxTj2hn3A4CwgbSFM6J+taXpO1o+PVJZu7FHaRQuUcGm0YimMT4jRxaCupdUuprKxUT4P9LcAA5gMa3Nc5o/wAAAAASUVORK5CYII=\"","module.exports = __webpack_public_path__ + \"img/vvv-loader.6f59db4a.png\";","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./VVVDashboardNew.vue?vue&type=style&index=0&id=738d0e0f&scoped=true&lang=css\""],"sourceRoot":""}