{
+ return {moment(value).format("DD/MM/YYYY HH:mm:ss")};
+ },
+ },
+ },
{
name: "status",
label: "Status",
@@ -338,6 +347,20 @@ export const taskListColumns = [
},
},
},
+ {
+ name: "eta",
+ label: "ETA",
+ options: {
+ customBodyRender: (value) => {
+ if (value) {
+ const formattedETA = new Date(value).toLocaleString();
+ return {formattedETA};
+ }
+ return N/A;
+ },
+ },
+ },
+
{
name: "time_spent",
label: "Time Spent",
diff --git a/src/containers/Admin/Dashboard.jsx b/src/containers/Admin/Dashboard.jsx
index 7ecac147..a326b154 100644
--- a/src/containers/Admin/Dashboard.jsx
+++ b/src/containers/Admin/Dashboard.jsx
@@ -1,23 +1,27 @@
-import { useState } from "react";
+import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
-//styles
+// Styles
import { DatasetStyle } from "styles";
-//Components
-import { Box, Card, Grid, Tab, Tabs, Button } from "@mui/material";
+// Components
+import { Box, Card, Grid, Tab, Tabs, Button, Typography, Paper } from "@mui/material";
import OrganizationList from "./OrganizationList";
import MemberList from "./MemberList";
import { AddNewMember, AddOrganizationMember } from "common";
import AdminLevelReport from "./AdminLevelReport";
-
-//Apis
-import { APITransport, AddOrganizationMemberAPI } from "redux/actions";
import NewsLetter from "./NewsLetterTemplate";
import OnboardingRequests from "./OnboardingRequests";
+import VideoTaskDetails from "./VideoTaskDetails";
+import VideoDetails from "./VideoDetails";
+import TaskDetails from "./TaskDetails";
+
+// APIs
+import { APITransport, AddOrganizationMemberAPI, FetchLoggedInUserDetailsAPI } from "redux/actions";
-const TabPanel = (props) => {
+// Tab Panel Component
+function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
@@ -31,18 +35,30 @@ const TabPanel = (props) => {
{value === index && {children}}
);
-};
+}
const DashBoard = () => {
const classes = DatasetStyle();
const navigate = useNavigate();
const dispatch = useDispatch();
- const [value, setValue] = useState(0);
+ // Fetch userData from Redux
+ const userData = useSelector((state) => state.getLoggedInUserDetails.data);
+
+ const [value, setValue] = useState(0);
const [addUserDialog, setAddUserDialog] = useState(false);
const [newMemberEmail, setNewMemberEmail] = useState("");
const [openMemberDialog, setOpenMemberDialog] = useState(false);
+ // Fetch user data on component mount
+ useEffect(() => {
+ const fetchUserData = () => {
+ const loggedInUserObj = new FetchLoggedInUserDetailsAPI();
+ dispatch(APITransport(loggedInUserObj));
+ };
+ fetchUserData();
+ }, [dispatch]);
+
const addNewMemberHandler = async () => {
const data = {
role: "ORG_OWNER",
@@ -55,146 +71,142 @@ const DashBoard = () => {
setNewMemberEmail("");
};
+ const handleTabChange = (event, newValue) => {
+ setValue(newValue);
+ };
+
+ const adminTabs = [
+ { label: "Organizations", component: },
+ { label: "Members", component: },
+ { label: "Reports", component: },
+ { label: "Newsletter", component: },
+ { label: "Onboarding Requests", component: },
+ ];
+
+ const orgOwnerTabs = [
+ { label: "Video Details", component: },
+ { label: "Video Task Details", component: },
+ { label: "Task Details", component: },
+ ];
+
+ const isAdmin = userData?.role === "ADMIN";
+ const isOrgOwner = userData?.role === "ORG_OWNER";
+
return (
- setValue(newValue)}
- aria-label="basic tabs example"
- >
-
-
-
-
-
+
+ {isAdmin &&
+ adminTabs.map((tab, index) => (
+
+ ))}
+
+ {isOrgOwner &&
+ orgOwnerTabs.map((tab, index) => (
+
+ ))}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ {isAdmin && (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {isOrgOwner && (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Dialogs */}
{addUserDialog && (
{
/>
)}
- {openMemberDialog && (
- setOpenMemberDialog(false)}
- />
- )}
+ {openMemberDialog && setOpenMemberDialog(false)} />}
);
};
-export default DashBoard;
+export default DashBoard;
\ No newline at end of file
diff --git a/src/containers/Admin/TaskDetails.jsx b/src/containers/Admin/TaskDetails.jsx
new file mode 100644
index 00000000..cc73ab1c
--- /dev/null
+++ b/src/containers/Admin/TaskDetails.jsx
@@ -0,0 +1,281 @@
+import React, { useState } from 'react';
+import { Grid, TextField, Button, Box, Typography, CircularProgress, Tabs, Tab } from '@mui/material';
+import { JSONTree } from 'react-json-tree';
+import GetTaskDetailsAPI from "redux/actions/api/Admin/GetTaskDetails.js";
+import GetAllTranscriptionsAPI from "redux/actions/api/Admin/GetAllTranscriptions.js";
+import GetAllTranslationsAPI from "redux/actions/api/Admin/GetAllTranslations.js";
+import { snakeToTitleCase } from '../../utils/utils.js';
+
+function TaskDetails() {
+ const [taskId, setTaskId] = useState('');
+ const [tabValue, setTabValue] = useState(0);
+ const [taskDetails, setTaskDetails] = useState(null);
+ const [transcriptions, setTranscriptions] = useState(null);
+ const [translations, setTranslations] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [loadingTranscriptions, setLoadingTranscriptions] = useState(false);
+ const [loadingTranslations, setLoadingTranslations] = useState(false);
+
+ const fetchTaskDetails = async () => {
+ setLoading(true);
+ setTaskDetails(null);
+ setTranscriptions(null);
+ setTranslations(null);
+
+ const apiObj = new GetTaskDetailsAPI(taskId);
+ try {
+ const res = await fetch(apiObj.apiEndPoint(), apiObj.getHeaders());
+ let data;
+ if (res.status === 200) {
+ data = await res.json();
+ } else if (res.status === 404) {
+ data = { error: 'Task not found' };
+ } else {
+ data = { error: 'Something went wrong' };
+ }
+
+ setLoading(false);
+ if (data.error) {
+ setTaskDetails({ error: data.error });
+ return;
+ }
+
+ setTaskDetails(data);
+ const videoId = data.video;
+
+ setTabValue(0);
+
+ if (["TRANSCRIPTION_EDIT", "TRANSCRIPTION_REVIEW"].includes(data.task_type)) {
+ fetchTranscriptions(videoId);
+ } else if (["TRANSLATION_EDIT", "TRANSLATION_REVIEW", "TRANSLATION_VOICEOVER_EDIT", "TRANSLATION_VOICEOVER_REVIEW"].includes(data.task_type)) {
+ fetchTranslations(videoId);
+ }
+
+ } catch (error) {
+ setLoading(false);
+ setTaskDetails({ error: 'Network error' });
+ console.error(error);
+ }
+ };
+
+ const fetchTranscriptions = async (videoId) => {
+ setLoadingTranscriptions(true);
+ const apiObj = new GetAllTranscriptionsAPI(videoId);
+ try {
+ const res = await fetch(apiObj.apiEndPoint(), apiObj.getHeaders());
+ let data;
+ if (res.status === 200) {
+ data = await res.json();
+ } else {
+ data = { error: 'Failed to fetch transcriptions' };
+ }
+
+ if (data.error) {
+ setTranscriptions({ error: data.error });
+ } else {
+ setTranscriptions(data.transcripts);
+ }
+ } catch (error) {
+ setTranscriptions({ error: 'Network error' });
+ console.error(error);
+ }
+ setLoadingTranscriptions(false);
+ };
+
+ const fetchTranslations = async (videoId) => {
+ setLoadingTranslations(true);
+ const apiObj = new GetAllTranslationsAPI(videoId);
+ try {
+ const res = await fetch(apiObj.apiEndPoint(), apiObj.getHeaders());
+ let data;
+ if (res.status === 200) {
+ data = await res.json();
+ } else {
+ data = { error: 'Failed to fetch translations' };
+ }
+
+ if (data.error) {
+ setTranslations({ error: data.error });
+ } else {
+ setTranslations(data);
+ }
+ } catch (error) {
+ setTranslations({ error: 'Network error' });
+ console.error(error);
+ }
+ setLoadingTranslations(false);
+ };
+
+ const theme = {
+ extend: {
+ base00: '#000',
+ base01: '#383830',
+ base02: '#49483e',
+ base03: '#75715e',
+ base04: '#a59f85',
+ base05: '#f8f8f2',
+ base06: '#f5f4f1',
+ base07: '#f9f8f5',
+ base08: '#f92672',
+ base09: '#fd971f',
+ base0A: '#f4bf75',
+ base0B: '#a6e22e',
+ base0C: '#a1efe4',
+ base0D: '#66d9ef',
+ base0E: '#ae81ff',
+ base0F: '#cc6633',
+ },
+ value: ({ style }, nodeType, keyPath) => ({
+ style: {
+ ...style,
+ borderLeft: '2px solid #ccc',
+ marginLeft: '1.375em',
+ paddingLeft: '2em',
+ },
+ }),
+ nestedNode: ({ style }, nodeType, keyPath) => ({
+ style: {
+ ...style,
+ borderLeft: '2px solid #ccc',
+ marginLeft: keyPath.length > 1 ? '1.375em' : 0,
+ textIndent: '-0.375em',
+ },
+ }),
+ arrowContainer: ({ style }, arrowStyle) => ({
+ style: {
+ ...style,
+ paddingRight: '1.375rem',
+ textIndent: '0rem',
+ backgroundColor: 'white',
+ },
+ }),
+ };
+
+ function TabPanel(props) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+ }
+
+ return (
+
+
+
+ setTaskId(event.target.value)}
+ />
+
+
+
+ {loading && (
+
+
+
+ )}
+ {taskDetails && (
+ <>
+
+ setTabValue(v)} aria-label="task-details-tabs">
+
+ {["TRANSCRIPTION_EDIT", "TRANSCRIPTION_REVIEW"].includes(taskDetails.task_type) && (
+
+ )}
+ {["TRANSLATION_EDIT", "TRANSLATION_REVIEW", "TRANSLATION_VOICEOVER_EDIT", "TRANSLATION_VOICEOVER_REVIEW"].includes(taskDetails.task_type) && (
+
+ )}
+
+
+
+
+
+ {taskDetails.error ? (
+ {taskDetails.error}
+ ) : (
+ {typeof key === "string" ? snakeToTitleCase(key) : key}}
+ valueRenderer={(raw) => {typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}}
+ theme={theme}
+ />
+ )}
+
+
+ {["TRANSCRIPTION_EDIT", "TRANSCRIPTION_REVIEW"].includes(taskDetails.task_type) && (
+
+ {loadingTranscriptions ? (
+
+
+
+ ) : transcriptions ? (
+ transcriptions.error ? (
+ {transcriptions.error}
+ ) : (
+ {typeof key === "string" ? snakeToTitleCase(key) : key}}
+ valueRenderer={(raw) => {typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}}
+ theme={theme}
+ />
+ )
+ ) : (
+ No transcriptions available.
+ )}
+
+ )}
+
+ {["TRANSLATION_EDIT", "TRANSLATION_REVIEW", "TRANSLATION_VOICEOVER_EDIT", "TRANSLATION_VOICEOVER_REVIEW"].includes(taskDetails.task_type) && (
+
+ {loadingTranslations ? (
+
+
+
+ ) : translations ? (
+ translations.error ? (
+ {translations.error}
+ ) : (
+ {typeof key === "string" ? snakeToTitleCase(key) : key}}
+ valueRenderer={(raw) => {typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}}
+ theme={theme}
+ />
+ )
+ ) : (
+ No translations available.
+ )}
+
+ )}
+
+
+ )}
+
+ );
+}
+
+export default TaskDetails;
diff --git a/src/containers/Admin/VideoDetails.jsx b/src/containers/Admin/VideoDetails.jsx
new file mode 100644
index 00000000..93c01395
--- /dev/null
+++ b/src/containers/Admin/VideoDetails.jsx
@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import { Grid, TextField, Button, Tab, Tabs, Box, Typography, CircularProgress } from '@mui/material';
+import { JSONTree } from 'react-json-tree';
+import GetVideoDetailsAPI from "redux/actions/api/Admin/GetVideoDetails.js";
+import { snakeToTitleCase } from '../../utils/utils.js';
+
+function VideoDetails() {
+ const [videoUrl, setVideoUrl] = useState('');
+ const [tabValue, setTabValue] = useState(0);
+ const [taskDetails, setTaskDetails] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ const fetchVideoDetails = async () => {
+ setLoading(true);
+ setTaskDetails(null);
+
+ const apiObj = new GetVideoDetailsAPI(videoUrl);
+ fetch(apiObj.apiEndPoint(), apiObj.getHeaders())
+ .then(async (res) => {
+ if (res.status === 200) {
+ const data = await res.json();
+ return data;
+ } else if (res.status === 404) {
+ return { error: 'Task not found' };
+ } else {
+ return { error: 'Something went wrong' };
+ }
+ })
+ .then(data => {
+ setLoading(false);
+ setTaskDetails(data);
+ });
+ };
+
+ const theme = {
+ extend: {
+ base00: '#000',
+ base01: '#383830',
+ base02: '#49483e',
+ base03: '#75715e',
+ base04: '#a59f85',
+ base05: '#f8f8f2',
+ base06: '#f5f4f1',
+ base07: '#f9f8f5',
+ base08: '#f92672',
+ base09: '#fd971f',
+ base0A: '#f4bf75',
+ base0B: '#a6e22e',
+ base0C: '#a1efe4',
+ base0D: '#66d9ef',
+ base0E: '#ae81ff',
+ base0F: '#cc6633',
+ },
+ value: ({ style }, nodeType, keyPath) => ({
+ style: {
+ ...style,
+ borderLeft: '2px solid #ccc',
+ marginLeft: '1.375em',
+ paddingLeft: '2em',
+ },
+ }),
+ nestedNode: ({ style }, nodeType, keyPath) => ({
+ style: {
+ ...style,
+ borderLeft: '2px solid #ccc',
+ marginLeft: keyPath.length > 1 ? '1.375em' : 0,
+ textIndent: '-0.375em',
+ },
+ }),
+ arrowContainer: ({ style }, arrowStyle) => ({
+ style: {
+ ...style,
+ paddingRight: '1.375rem',
+ textIndent: '0rem',
+ backgroundColor: 'white',
+ },
+ }),
+ };
+
+ function TabPanel(props) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+ }
+
+ return (
+
+
+
+ setVideoUrl(event.target.value)}
+ />
+
+
+
+ {loading && (
+
+
+
+ )}
+ {taskDetails && (
+ <>
+
+ setTabValue(v)} aria-label="video-task-details-tabs">
+
+
+
+
+
+
+ {typeof key === "string" ? snakeToTitleCase(key) : key}}
+ valueRenderer={(raw) => {typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}}
+ theme={theme}
+ />
+
+
+
+ )}
+
+ );
+}
+
+export default VideoDetails;
diff --git a/src/containers/Admin/VideoTaskDetails.jsx b/src/containers/Admin/VideoTaskDetails.jsx
new file mode 100644
index 00000000..572c422f
--- /dev/null
+++ b/src/containers/Admin/VideoTaskDetails.jsx
@@ -0,0 +1,231 @@
+import React, { useState } from 'react';
+import { Grid, TextField, Button, Tab, Tabs, Box, Typography, CircularProgress } from '@mui/material';
+import { JSONTree } from 'react-json-tree';
+import GetAllTranscriptionsAPI from "redux/actions/api/Admin/GetAllTranscriptions.js";
+import GetAllTranslationsAPI from "redux/actions/api/Admin/GetAllTranslations.js";
+import GetVideoTaskDetailsAPI from "redux/actions/api/Admin/GetVideoTaskDetails.js";
+import { snakeToTitleCase } from '../../utils/utils.js';
+
+function VideoTaskDetails() {
+ const [videoId, setVideoId] = useState('');
+ const [tabValue, setTabValue] = useState(0);
+ const [taskDetails, setTaskDetails] = useState(null);
+ const [transcriptions, setTranscriptions] = useState(null);
+ const [translations, setTranslations] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [loadingTranscriptions, setLoadingTranscriptions] = useState(false);
+ const [loadingTranslations, setLoadingTranslations] = useState(false);
+
+ const fetchVideoTaskDetails = async () => {
+ setLoading(true);
+ setTaskDetails(null);
+ setTranscriptions(null);
+ setTranslations(null);
+
+ const apiObj = new GetVideoTaskDetailsAPI(videoId);
+ fetch(apiObj.apiEndPoint(), apiObj.getHeaders())
+ .then(async (res) => {
+ if (res.status === 200) {
+ const data = await res.json();
+ return data;
+ } else if (res.status === 404) {
+ return { error: 'Task not found' };
+ } else {
+ return { error: 'Something went wrong' };
+ }
+ })
+ .then(data => {
+ setLoading(false);
+ setTaskDetails(data);
+ fetchTranscriptions();
+ fetchTranslations();
+ });
+ };
+
+ const fetchTranscriptions = async () => {
+ setLoadingTranscriptions(true);
+ const apiObj = new GetAllTranscriptionsAPI(videoId);
+ fetch(apiObj.apiEndPoint(), apiObj.getHeaders())
+ .then(async (res) => {
+ if (res.status === 200) {
+ const data = await res.json();
+ return data;
+ } else {
+ return { error: 'Failed to fetch transcriptions' };
+ }
+ })
+ .then(data => {
+ setTranscriptions(data.transcripts);
+ setLoadingTranscriptions(false);
+ });
+ };
+
+ const fetchTranslations = async () => {
+ setLoadingTranslations(true);
+ const apiObj = new GetAllTranslationsAPI(videoId);
+ fetch(apiObj.apiEndPoint(), apiObj.getHeaders())
+ .then(async (res) => {
+ if (res.status === 200) {
+ const data = await res.json();
+ return data;
+ } else {
+ return { error: 'Failed to fetch translations' };
+ }
+ })
+ .then(data => {
+ setTranslations(data);
+ setLoadingTranslations(false);
+ });
+ };
+
+ const theme = {
+ extend: {
+ base00: '#000',
+ base01: '#383830',
+ base02: '#49483e',
+ base03: '#75715e',
+ base04: '#a59f85',
+ base05: '#f8f8f2',
+ base06: '#f5f4f1',
+ base07: '#f9f8f5',
+ base08: '#f92672',
+ base09: '#fd971f',
+ base0A: '#f4bf75',
+ base0B: '#a6e22e',
+ base0C: '#a1efe4',
+ base0D: '#66d9ef',
+ base0E: '#ae81ff',
+ base0F: '#cc6633',
+ },
+ value: ({ style }, nodeType, keyPath) => ({
+ style: {
+ ...style,
+ borderLeft: '2px solid #ccc',
+ marginLeft: '1.375em',
+ paddingLeft: '2em',
+ },
+ }),
+ nestedNode: ({ style }, nodeType, keyPath) => ({
+ style: {
+ ...style,
+ borderLeft: '2px solid #ccc',
+ marginLeft: keyPath.length > 1 ? '1.375em' : 0,
+ textIndent: '-0.375em',
+ },
+ }),
+ arrowContainer: ({ style }, arrowStyle) => ({
+ style: {
+ ...style,
+ paddingRight: '1.375rem',
+ textIndent: '0rem',
+ backgroundColor: 'white',
+ },
+ }),
+ };
+
+ function TabPanel(props) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+ }
+
+ return (
+
+
+
+ setVideoId(event.target.value)}
+ />
+
+
+
+ {loading && (
+
+
+
+ )}
+ {taskDetails && (
+ <>
+
+ setTabValue(v)} aria-label="video-task-details-tabs">
+
+
+
+
+
+
+
+
+ {typeof key === "string" ? snakeToTitleCase(key) : key}}
+ valueRenderer={(raw) => {typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}}
+ theme={theme}
+ />
+
+
+ {loadingTranscriptions ? (
+
+
+
+ ) : transcriptions ? (
+ {typeof key === "string" ? snakeToTitleCase(key) : key}}
+ valueRenderer={(raw) => {typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}}
+ theme={theme}
+ />
+ ) : (
+ No transcriptions available.
+ )}
+
+
+ {loadingTranslations ? (
+
+
+
+ ) : translations ? (
+ {typeof key === "string" ? snakeToTitleCase(key) : key}}
+ valueRenderer={(raw) => {typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}}
+ theme={theme}
+ />
+ ) : (
+ No translations available.
+ )}
+
+
+
+ )}
+
+ );
+}
+
+export default VideoTaskDetails;
diff --git a/src/containers/Organization/MyOrganization.jsx b/src/containers/Organization/MyOrganization.jsx
index e515a833..6099e564 100644
--- a/src/containers/Organization/MyOrganization.jsx
+++ b/src/containers/Organization/MyOrganization.jsx
@@ -142,11 +142,11 @@ const MyOrganization = () => {
const {
organization: { organization_owners },
} = userData;
-
+
if (organization_owners && organization_owners?.length > 0) {
- const ownerIds = organization_owners.map(owner => owner.id);
+ const ownerIds = organization_owners.map((owner) => owner.id);
setOrgOwnerId(ownerIds);
-
+
if (ownerIds.includes(userData.id)) {
setIsUserOrgOwner(true);
} else {
@@ -173,7 +173,16 @@ const MyOrganization = () => {
}
return (
-
+
{organizationDetails?.title}
);
@@ -192,31 +201,81 @@ const MyOrganization = () => {
};
return (
-
+
{renderOrgDetails()}
setValue(newValue)}
+ variant="fullWidth"
aria-label="basic tabs example"
+ TabIndicatorProps={{
+ style: { display: "none" },
+ }}
>
-
-
- { roles.filter((role) => role.value === userData?.role)[0]
+
+
+ {roles.filter((role) => role.value === userData?.role)[0]
?.canAddMembers && (
-
+
)}
- {(isUserOrgOwner|| userData?.role==="ADMIN") &&(
-
+ {(isUserOrgOwner || userData?.role === "ADMIN") && (
+
)}
- {(isUserOrgOwner || userData?.role==="ADMIN")&&(
+ {(isUserOrgOwner || userData?.role === "ADMIN") && (
)}
@@ -234,7 +293,9 @@ const MyOrganization = () => {
alignItems="center"
>
- {(isUserOrgOwner|| userData?.role==="ADMIN") && (
+ {(isUserOrgOwner ||
+ userData?.role === "ADMIN" ||
+ userData?.role === "PROJECT_MANAGER") && (