admin frontend

Frontend/admin/src/app/App.js

+import React, { useState,useEffect } from 'react';
 import "./App.css";
 import { Outlet } from "react-router-dom";
+import axios from 'axios';
  
 import TopNavigation from "../components/top-navigation";
 
 function App() {
+
+  localStorage.setItem("user email", "director@gmail.com");
+
+  // const backendBaseUrl = 'http://localhost:5000';
+
+  // const [email, setEmail] = useState(''); // Fix the useState usage here
+  // const [userName, setUserName] = useState('');
+
+  // localStorage.setItem("user email", email);
+  
+
+  // useEffect(() => {
+  //   // Fetch user requests based on email
+  //   axios.get(`${backendBaseUrl}/api/user/${email}`)
+  //     .then((response) => {
+  //       const name = response.data;
+  //       console.log(name);
+  //       setUserName(name);
+  //     })
+  //     .catch((error) => {
+  //       console.error('Error fetching user name:', error);
+  //     });
+  // }, [email]);
+
+  // console.log(userName);
+  // console.log(email);
+  // localStorage.setItem("user name", userName);
   return (
     <div className="application-container">
       <TopNavigation />

Frontend/admin/src/app/sub_app.js

-import React from 'react'
+import React, { useState,useEffect } from 'react';
 import "./App.css";
 import { Outlet } from "react-router-dom";
 import SideNavigation from "../components/side-navigation";
+import axios from 'axios';
+
 function SubApp() {
+  const backendBaseUrl = 'http://localhost:5000';
+
+  const [email, setEmail] = useState(''); // Fix the useState usage here
+  const [userName, setUserName] = useState('');
+  
+
+  useEffect(() => {
+    // Fetch user requests based on email
+    axios.get(`${backendBaseUrl}/api/user/director@gmail.com`)
+      .then((response) => {
+        const name = response.data;
+        console.log(name);
+        setUserName(name);
+      })
+      .catch((error) => {
+        console.error('Error fetching user name:', error);
+      });
+  }, [email]);
+
+  console.log(userName);
+  console.log(email);
+  localStorage.setItem("user name", userName);
+
   return (
     <div className="application-sidenav-body">
       <SideNavigation />

Frontend/admin/src/components/side-navigation.jsx

@@ -10,7 +10,7 @@ function SideNavigation() {
       <NavLink to="/home/dashboard" className="side-nav-link">
         <div className="side-nav-link-wrapper">
           <DashboardOutlinedIcon sx={{ marginRight: "15px" }} />
-          Dashboard
+          Movie Casting
         </div>
       </NavLink>
       <NavLink to="/home/movie-analysis" className="side-nav-link">
@@ -37,6 +37,13 @@ function SideNavigation() {
           Actor Categories
         </div>
       </NavLink>
+      <NavLink to="/home/move-review" className="side-nav-link">
+        <div className="side-nav-link-wrapper">
+          <MovieOutlinedIcon sx={{ marginRight: "15px" }} />
+          Movie Review
+        </div>
+      </NavLink>
+      
     </div>
   );
 }

Frontend/admin/src/components/top-navigation.jsx

@@ -6,7 +6,28 @@ import { NavLink } from "react-router-dom";
 import SearchIcon from '@mui/icons-material/Search';
 // import PermIdentityRoundedIcon from "@mui/icons-material/PermIdentityRounded";
 
+import SpeakerNotesIcon from '@mui/icons-material/SpeakerNotes';
+
+import { useNavigate } from 'react-router-dom';
+
 function TopNavigation() {
+
+  localStorage.setItem("user email", "director@gmail.com");
+  
+  const navigate = useNavigate();
+  
+  const navigateToChat = () => {
+    navigate('/home/dchat'); // Replace '/chat' with the actual URL of your chat page
+  };
+  
+  const navigateToRequest = () => {
+    navigate('/home/drequest'); // Replace '/request' with the actual URL of your request page
+  };
+  
+  const navigateToProfile = () => {
+    navigate('/home/dprofile'); // Replace '/profile' with the actual URL of your profile page
+  };
+
   return (
     <div className="top-nav-container">
       <div className="top-nav-logo-container">
@@ -30,7 +51,8 @@ function TopNavigation() {
           <SearchIcon sx={{ color: "white" }} />
           <input type="text" placeholder="Search" className="top-nav-search" />
         </div>
-        <img src={User} alt="Logo" width="40px" height="40px" className="profile-picture" />
+        <SpeakerNotesIcon sx={{color:"white"}} style={{cursor:"pointer"}} onClick={navigateToRequest}/>
+        <img src={User} alt="Logo" width="40px" height="40px" className="profile-picture" onClick={navigateToProfile}/>
       </div>
     </div>
   );

Frontend/admin/src/css/director.css

+.director-container{
+    height: 88vh;
+  width: 79.5%;
+  margin-left: auto;
+  margin-right: 0;
+  overflow: auto;
+}
\ No newline at end of file

Frontend/admin/src/css/movie-reviews.css

+.review-container{
+    height: 88vh;
+  width: 79.5%;
+  margin-left: auto;
+  margin-right: 0;
+  overflow: auto;
+}
+
+.review-chart{
+    width:90%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 100px;
+}
+.reviews-wrappwe{
+    width: 98%;
+  margin-top: 25px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+  margin-bottom: 100px;
+}
+.review-detail-box{
+width: 400px;
+margin: auto;
+}
\ No newline at end of file

Frontend/admin/src/pages/DirectorChat.jsx

+// DirectorChat.js
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Box, TextField, Button, Container, Paper } from '@mui/material';
+import { useLocation } from 'react-router-dom';
+import "../css/director.css"
+
+const API_BASE_URL = 'http://localhost:5000/api/messages';
+
+export default function DirectorChat() {
+  
+  const [messages, setMessages] = useState([]);
+  const [message, setmessage] = useState('');
+
+  const actor_email = localStorage.getItem('actor email');
+  console.log(actor_email);
+  const director_email = localStorage.getItem('user email');
+  console.log(director_email);
+  const name = localStorage.getItem('user name');
+
+  useEffect(() => {
+    // Fetch all messages data from your backend API
+    axios.get(API_BASE_URL)
+      .then((response) => {
+        setMessages(response.data);
+        console.log(response.data);
+      })
+      .catch((error) => {
+        console.error('Error fetching message:', error);
+      });
+  }, []);
+
+  const handleSendMessage = async () => {
+    if (!message.trim()) return;
+
+    const userMessage = {
+      actor_email: actor_email,
+      director_email: director_email,
+      message: message,
+      name: name,
+    };
+
+    axios.post(API_BASE_URL, userMessage)
+      .then((response) => {
+        console.log(response.data);
+        // Auto-refresh the page after sending the message
+        window.location.reload();
+      })
+      .catch((error) => {
+        console.error('Error sending message:', error);
+        // Optionally, you can show an error message to the user
+      });
+  };
+
+  return (
+    <div className='director-container'>
+      <br />
+      <br />
+      <br />
+      <Container maxWidth="sm">
+        <Box mt={3} p={3} component={Paper} elevation={3}>
+          <h1 style={{ textAlign: 'center' }}>Chat App</h1>
+          <Box mt={2}>
+            {messages
+              .filter((message) => message.actor_email === actor_email)
+              .filter((message) => message.director_email === director_email)
+              .map((message, index) => (
+                <Box key={index} p={2} mb={2} component={Paper} style={{ display: 'flex', alignItems: 'center' }}>
+                  <div style={{ flex: 1, marginRight: '10px', fontSize: '10px' }}>{message.name}</div>
+                  <div style={{ flex: 3, maxWidth:'300px' }}>{message.message}</div>
+                </Box>
+              ))}
+          </Box>
+          <Box mt={2} display="flex" alignItems="center">
+            <TextField
+              fullWidth
+              variant="outlined"
+              label="Type your message"
+              onChange={(e) => setmessage(e.target.value)}
+            />
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={handleSendMessage}
+              style={{ marginLeft: '10px' }}
+            >
+              Send
+            </Button>
+          </Box>
+        </Box>
+      </Container>
+    </div>
+  );
+}
+

Frontend/admin/src/pages/DirectorHome.jsx

+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import "../css/director.css"
+// import { useLocation } from 'react-router-dom';
+import axios from 'axios';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+// import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { TextField } from '@mui/material';
+// import background_image from '../../temp_images/page_background.png'
+
+
+export default function DirectorHome() {
+  const email = localStorage.getItem("user email");
+  const name = localStorage.getItem("user name");
+
+  const backendBaseUrl = 'http://localhost:5000';
+
+  const [emotions, setEmotions] = useState([]);
+  const [loadedImage, setLoadedImage] = useState(null);
+  const [userDescription, setUserDescription] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const navigate = useNavigate();
+
+  const navigateToChat = () => {
+    navigate('/home/dchat'); // Replace '/chat' with the actual URL of your chat page
+  };
+
+  const navigateToRequest = () => {
+    navigate('/home/drequest'); // Replace '/request' with the actual URL of your request page
+  };
+
+  const navigateToProfile = () => {
+    navigate('/home/dprofile'); // Replace '/profile' with the actual URL of your profile page
+  };
+
+  useEffect(() => {
+    // Fetch all emotions data from your backend API
+    axios.get(`${backendBaseUrl}/api/emotions`)
+      .then((response) => {
+        setEmotions(response.data);
+        console.log(response.data);
+      })
+      .catch((error) => {
+        console.error('Error fetching emotions:', error);
+      });
+  }, []);
+
+  useEffect(() => {
+    // Fetch user description based on email
+    axios.get(`${backendBaseUrl}/api/description/${email}`)
+      .then((response) => {
+        const description = response.data.description;
+        setUserDescription(description);
+      })
+      .catch((error) => {
+        console.error('Error fetching user description:', error);
+      });
+  }, [email]); // Include 'email' in the dependency array to trigger the request whenever the email changes
+
+  const handleRequest = (actorEmail,actorName) => {
+    const requestData = {
+      actor_email: actorEmail,
+      actor_name: actorName,
+      director_email: email,
+      director_name: name,
+      director_description: userDescription,
+    };
+
+    axios.post(`${backendBaseUrl}/api/request`, requestData)
+      .then((response) => {
+        console.log(response.data);
+        alert("Request sent successfully");
+      })
+      .catch((error) => {
+        console.error('Error sending request:', error);
+      });
+  };
+
+  // Function to handle changes in the search input
+  const handleSearchInputChange = (event) => {
+    setSearchQuery(event.target.value);
+  };
+
+  // Filter emotions based on search query
+  const filteredEmotions = emotions.filter((emotion) => {
+    const emotionName = emotion.emotion.toLowerCase();
+    return emotionName.includes(searchQuery.toLowerCase());
+  });
+
+  // Sort emotions by rate in descending order
+  filteredEmotions.sort((a, b) => b.score - a.score);
+
+  return (
+    <div className='director-container'>
+      <br />
+        <Container sx={{ py: 8 }} width={'100%'} style={{ position: 'relative', zIndex: 1 }}>
+        <TextField
+        label="Search Emotions"
+        variant="outlined"
+        fullWidth
+        margin="normal"
+        value={searchQuery}
+        onChange={handleSearchInputChange}
+      />
+
+      <Grid container spacing={1}>
+        {filteredEmotions.map((emotion) => (
+              <Grid key={emotion._id} xs={12} sm={6} md={3.5} style={{ marginLeft: '40px', marginTop: '20px' }}>
+                <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column', zIndex: 1 }}>
+                  <CardMedia
+                    component="img"
+                    src={require(`../../../../Emotions Identification System/ActorImage/${emotion.image_path}`)}
+                    sx={{width:"100%", height:250}}
+                  />
+                  <CardContent sx={{ flexGrow: 1 }}>
+                    <Typography gutterBottom variant="h5" component="h2" >
+                      {emotion.emotion}
+                    </Typography>
+                    <Typography variant="h5" component="h2">
+                    Rate: {emotion.score.toFixed(2)}%
+                    </Typography>
+                    <Typography>
+                      {emotion.user_name}
+                    </Typography>
+                    <Typography>
+                      {emotion.user_description}
+                    </Typography>
+                  </CardContent>
+                  <Button
+                      variant="contained"
+                      color="primary"
+                      fullWidth
+                      sx={{ backgroundColor: '#483485', marginBottom: '10px' }}
+                      onClick={() => handleRequest(emotion.user_email, emotion.user_name)}
+                    >
+                      Request
+                    </Button>
+                </Card>
+              </Grid>
+            ))}
+          </Grid>
+        </Container>
+    </div>
+  );
+}
+
+
+
+
+

Frontend/admin/src/pages/DirectorProfile.jsx

+import React, { useState } from 'react';
+import { Box, TextField, Button, Select, MenuItem, FormControl, InputLabel } from '@mui/material';
+import axios from 'axios';
+import "../css/director.css"
+
+
+export default function DirectorProfile() {
+
+  const userEmail = localStorage.getItem("user email");
+  console.log(userEmail); // Make sure this prints the correct email
+
+  const [description, setDescription] = useState('');
+
+  const handleDescription = () => {
+    const userDescription = {
+      demail: userEmail, // Use userEmail instead of email
+      description: description,
+    };
+
+    axios.post('http://localhost:5000/api/description', userDescription)
+      .then((response) => {
+        console.log(response.data);
+        alert("Description added successfully");
+      })
+      .catch((error) => {
+        console.error('Error adding description:', error);
+      });
+  };
+  
+
+  return (
+    <div className='director-container'>
+      <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
+
+      <Box
+        sx={{
+          backgroundColor: 'white',
+          padding: '20px',
+          borderRadius: '5px',
+          maxWidth: '400px',
+          position: 'absolute',
+          top: '35%',
+          left: '35%',
+          transform: 'translate(-50%, -50%)',
+          boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
+        }}
+      >
+        <div style={{ textAlign: 'center', marginBottom: '20px' }}>
+          <h2>tell us about you</h2>
+        </div>
+
+    {/* <TextField
+      label="Email"
+      fullWidth
+      margin="normal"
+      InputProps={{ style: { borderColor: '#483485' } }}
+      value={user_email}
+      onChange={(e) => setemail(e.target.value)}
+      disabled 
+    /> */}
+
+<TextField
+                    label="Description"
+                    fullWidth
+                    margin="normal"
+                    multiline // Enable multi-line input
+                    rows={4} // Number of rows in the input field
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                  />
+
+        <Button
+      variant="contained"
+      color="primary"
+      fullWidth
+      sx={{ backgroundColor: '#483485', marginTop: '10px' }}
+      onClick={handleDescription}
+    >
+      Submit
+    </Button>
+
+      </Box>
+    </div>
+    </div>
+  );
+}
\ No newline at end of file

Frontend/admin/src/pages/DirectorRequest.jsx

+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import "../css/director.css"
+
+export default function DirectorRequest() {
+  const email = localStorage.getItem("user email");
+  console.log(email);
+  const backendBaseUrl = 'http://localhost:5000';
+
+  const [requests, setRequests] = useState([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Fetch user requests based on email
+    axios.get(`${backendBaseUrl}/api/drequest/${email}`)
+      .then((response) => {
+        const requestsData = response.data;
+        setRequests(requestsData);
+      })
+      .catch((error) => {
+        console.error('Error fetching user requests:', error);
+      });
+  }, [email]);
+
+  console.log(requests);
+
+  const handleChatClick = (actorEmail) => {
+    // Navigate to the Chat page with the director_email as a URL parameter
+    navigate(`/home/dchat`);
+    localStorage.setItem("actor email", actorEmail);
+  };
+
+  return (
+    <div className='director-container'>
+      <Container sx={{ py: 8 }} width={'100%'} style={{ position: 'relative', zIndex: 1 }}>
+        <Grid container spacing={1}>
+          {requests.map((request) => (
+            <Grid key={request._id} xs={12} sm={6} md={3.5} style={{ marginLeft: '40px', marginTop: '20px' }}>
+              <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+                <CardContent sx={{ flexGrow: 1 }}>
+                  <Typography>
+                    Name: {request.actor_name}
+                  </Typography>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    fullWidth
+                    sx={{ backgroundColor: '#483485', marginTop: '10px' }}
+                    onClick={() => handleChatClick(request.actor_email)}
+                  >
+                    Chat
+                  </Button>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
+    </div>
+  );
+}

Frontend/admin/src/pages/MovieReview.jsx

+import React,{useEffect,useState} from "react";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Card, CardContent, Typography, Grid, Paper } from "@mui/material";
+import { PieChart, Pie, Tooltip, Legend, ResponsiveContainer } from "recharts";
+import "../css/movie-reviews.css"
+import { Chart } from "react-google-charts";
+import axios from 'axios'
+const movieData = [
+  {
+    movieName: "Movie 1",
+    reviewPositivePercentage: 70,
+    reviewNegativePercentage: 30,
+    totalReviews: 100,
+    schedulingDays: 7,
+  },
+  // Add more movie data here
+];
+
+export default function MovieReview() {
+
+  const [result, setResult] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const axiosInstance = axios.create({
+      timeout: 10000, // Set the timeout to 20 seconds (adjust as needed)
+    });
+
+    axios
+      .get("http://4.247.169.16:2007/film_reviews")
+      .then((res) => {
+        setResult(res.data);
+        setLoading(false); // Set loading to false when the data is received
+        console.log(res.data);
+        console.log(result);
+      })
+      .catch((error) => {
+        console.log(error);
+        setLoading(false); // Set loading to false in case of an error
+      });
+  }, []);
+  
+    
+  const data = [
+    ["Movie ID", "Total Reviews"],
+    ...result.map(movie => [movie.movie_id, movie.total_reviews])
+  ];
+
+
+    const options = {
+        colors: "#426B4F",
+        legend: { position: "none" },
+      };
+
+      function Schedule(percentage) {
+        const parsedPercentage = parseFloat(percentage);
+        if (parsedPercentage > 90) {
+          return 30;
+        } else if (parsedPercentage >= 80 && parsedPercentage <= 90) {
+          return 25;
+        } else if (parsedPercentage >= 70 && parsedPercentage < 80) {
+          return 20;
+        } else if (parsedPercentage >= 60 && parsedPercentage < 70) {
+          return 15;
+        } else if (parsedPercentage >= 50 && parsedPercentage < 60) {
+          return 10;
+        } else if (parsedPercentage >= 40 && parsedPercentage < 50) {
+          return 7;
+        } else {
+          return 0;
+        }
+      }
+
+    
+
+
+  return (
+    <div className="review-container">
+      <center>
+        <div className="review-chart">
+          <h3 style={{fontSize:"30px"}}>Movie Reviews</h3>
+          <br />
+          <br />
+          <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Movie ID</TableCell>
+            <TableCell>Movie Name</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableCell>m/0814255</TableCell>
+            <TableCell>Movie 1</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>m/0878835</TableCell>
+            <TableCell>Movie 2</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>m/10</TableCell>
+            <TableCell>Movie 3</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>m/1000013-12_angry_men</TableCell>
+            <TableCell>Movie 4</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>m/1000079-20000_leagues_under_the_sea</TableCell>
+            <TableCell>Movie 5</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>m/10000_bc</TableCell>
+            <TableCell>Movie 6</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>m/1000121-39_steps</TableCell>
+            <TableCell>Movie 7</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>m/1000123-310_to_yuma</TableCell>
+            <TableCell>Movie 8</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>m/10002008-charly</TableCell>
+            <TableCell>Movie 9</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>m/1000204-abraham_lincoln</TableCell>
+            <TableCell>Movie 10</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>m/10002114-dark_water</TableCell>
+            <TableCell>Movie 11</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>m/1000224-accused</TableCell>
+            <TableCell>Movie 12</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>m/10002516-lost_city</TableCell>
+            <TableCell>Movie 13</TableCell>
+          </TableRow>
+          
+          {/* Add more rows here as needed */}
+        </TableBody>
+      </Table>
+    </TableContainer>
+    <br/>
+    <br/>
+    <br/>
+    <br/>
+    <br/>
+          <Chart
+            chartType="Bar"
+            width="90%"
+            height="350px"
+            data={data}
+            options={options}
+          />
+        </div>
+      </center>
+      <div className="reviews-wrappwe">
+        {result.map((movie, index) => (
+          <div className="review-detail-box" key={index}>
+            <Paper elevation={3} style={{ marginTop: '50px' }}>
+              <Card>
+                <CardContent>
+                  <Typography variant="h6">{movie.movie_id}</Typography>
+                  <ResponsiveContainer width="100%" height={200}>
+                    <PieChart>
+                      <Pie
+                        dataKey="value"
+                        isAnimationActive={false}
+                        data={[
+                          {
+                            name: "Positive",
+                            value: parseFloat(movie.positive_percentage),
+                            fill: "#8884d8",
+                          },
+                          {
+                            name: "Negative",
+                            value: parseFloat(movie.negative_percentage),
+                            fill: "#FF0000",
+                          },
+                        ]}
+                        cx="50%"
+                        cy="50%"
+                        outerRadius={80}
+                        fill="#8884d8"
+                        label
+                      />
+                      <Tooltip />
+                      <Legend />
+                    </PieChart>
+                  </ResponsiveContainer>
+                  <br />
+                  <Typography variant="body2">
+                    Total Reviews: {movie.total_reviews}
+                  </Typography>
+                  <br />
+                  <Typography variant="body2">
+                    Telecast Time Period (Months): {Schedule(movie.positive_percentage)}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Paper>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file

Frontend/admin/src/pages/actor-marketing-analysis.jsx

@@ -37,23 +37,6 @@ export default function ActorMarketingAnalysis() {
   const [AAO, setAAO] = useState(false);
   const [FMAO, setFMAO] = useState(false);
 
-  const [errfilmNameid, seterrfilmNameid] = useState("outlined-basic");
-  const [errfilmNameline, seterrfilmNameline] = useState(false);
-  const [errfilmNamehelpline, seterrfilmNamehelpline] = useState("");
-  const [errfilmNamedisabled, seterrfilmNamedisabled] = useState(false);
-
-  const [errDirectorNameid, seterrDirectorNameid] = useState("outlined-basic");
-  const [errDirectorNameline, seterrDirectorNameline] = useState(false);
-  const [errDirectorNamehelpline, seterrDirectorNamehelpline] = useState("");
-  const [errDirectorNamedisabled, seterrDirectorNamedisabled] = useState(false);
-
-  const [errDirectorEmailid, seterrDirectorEmailid] =
-    useState("outlined-basic");
-  const [errDirectorEmailline, seterrDirectorEmailline] = useState(false);
-  const [errDirectorEmailhelpline, seterrDirectorEmailhelpline] = useState("");
-  const [errDirectorEmaildisabled, seterrDirectorEmaildisabled] =
-    useState(false);
-
   const theme = createTheme({
     palette: {
       primary: {
@@ -80,23 +63,14 @@ export default function ActorMarketingAnalysis() {
     formData.append("movie", filmVideo);
 
     if (filmName === "") {
-      seterrfilmNameid("outlined-error-helper-text");
-      seterrfilmNameline(true);
-      seterrfilmNamehelpline("Please Enter Your Film Trailer Name");
+      alert("Please enter the film trailer name");
     } else if (filmDirectorName === "") {
-      seterrDirectorNameid("outlined-error-helper-text");
-      seterrDirectorNameline(true);
-      seterrDirectorNamehelpline("Please Enter The Film Director Name");
+      alert("Please enter the film director name");
     } else if (filmDirectorEmail === "") {
-      seterrDirectorEmailid("outlined-error-helper-text");
-      seterrDirectorEmailline(true);
-      seterrDirectorEmailhelpline("Please Enter The Film Director Email");
+      alert("Please enter the film director email");
     } else if (filmVideo !== "") {
       if (filmAnalysisType === "AAO") {
         setLoaderState(true);
-        seterrfilmNamedisabled(true);
-        seterrDirectorNamedisabled(true);
-        seterrDirectorEmaildisabled(true);
         setLoaderMessage("Please Wait Actor Analysis Under The Processing...");
         setFMAO(false);
         axios
@@ -108,9 +82,6 @@ export default function ActorMarketingAnalysis() {
           });
       } else if (filmAnalysisType === "FMAO") {
         setLoaderState(true);
-        seterrfilmNamedisabled(true);
-        seterrDirectorNamedisabled(true);
-        seterrDirectorEmaildisabled(true);
         setLoaderMessage(
           "Please Wait Film Marketing Analysis Under The Processing..."
         );
@@ -127,9 +98,6 @@ export default function ActorMarketingAnalysis() {
           });
       } else if (filmAnalysisType === "AFMA") {
         setLoaderState(true);
-        seterrfilmNamedisabled(true);
-        seterrDirectorNamedisabled(true);
-        seterrDirectorEmaildisabled(true);
         setLoaderMessage("Please Wait Actor Analysis Under The Processing...");
         axios
           .post("http://127.0.0.1:5000/movie-actor-identification", formData)
@@ -178,10 +146,6 @@ export default function ActorMarketingAnalysis() {
           >
             <div>
               <TextField
-                disabled={errfilmNamedisabled}
-                error={errfilmNameline}
-                id={errfilmNameid}
-                helperText={errfilmNamehelpline}
                 label="Film Trailer Name"
                 color="primary"
                 required
@@ -191,10 +155,6 @@ export default function ActorMarketingAnalysis() {
                 }}
               />
               <TextField
-                disabled={errDirectorNamedisabled}
-                error={errDirectorNameline}
-                id={errDirectorNameid}
-                helperText={errDirectorNamehelpline}
                 label="Film Director Name"
                 color="primary"
                 required
@@ -204,10 +164,6 @@ export default function ActorMarketingAnalysis() {
                 }}
               />
               <TextField
-                disabled={errDirectorEmaildisabled}
-                error={errDirectorEmailline}
-                id={errDirectorEmailid}
-                helperText={errDirectorEmailhelpline}
                 label="Film Director Email"
                 color="primary"
                 required

Frontend/admin/src/routes/routes.js

@@ -9,6 +9,13 @@ import Contact from "../pages/contact";
 import Dashboard from "../pages/dashboard";
 import MovieAnalysis from "../pages/movie-analysis";
 import ActorMarketingAnalysis from "../pages/actor-marketing-analysis";
+import DirectorHome from "../pages/DirectorHome";
+import DirectorChat from "../pages/DirectorChat";
+import DirectorProfile from "../pages/DirectorProfile";
+import DirectorRequest from "../pages/DirectorRequest";
+import Register from "../user/Register"
+import Login from "../user/Login"
+import MovieReview from "../pages/MovieReview";
 
 function PageRoutes() {
   return (
@@ -18,17 +25,24 @@ function PageRoutes() {
         {/* <Route path="/login" element={<Login />} /> */}
         {/* Unprotected Routes */}
         {/* Protected Routes */}
+        {/* <Route path="/" element={<Register />} /> */}
+        <Route path="/login" element={<Login />} />
         <Route path="/" element={<App />}>
           <Route path="/home" element={<SubApp />}>
-            <Route path="/home/dashboard" element={<Dashboard />} />
+            <Route path="/home/dashboard" element={<DirectorHome />} />
             <Route path="/home/movie-analysis" element={<MovieAnalysis />} />
             <Route
               path="/home/actor-marketing-analysis"
               element={<ActorMarketingAnalysis />}
             />
+            <Route path="/home/dprofile" element={<DirectorProfile />} />
+            <Route path="/home/dchat" element={<DirectorChat />} />
+            <Route path="/home/drequest" element={<DirectorRequest />} />
+            <Route path="/home/move-review" element={<MovieReview />} />
           </Route>
           <Route path="/about" element={<Contact />} />
           <Route path="/contact" element={<About />} />
+          
         </Route>
         {/* Protected Routes */}
       </Routes>

Frontend/admin/src/user/Login.jsx

+import React, { useState,useEffect } from 'react';
+import background from './Register.png';
+import { Box, TextField, Button } from '@mui/material';
+import axios from 'axios';
+
+export default function Login() {
+  const backendBaseUrl = 'http://localhost:5000';
+
+  const [email, setEmail] = useState(''); // Fix the useState usage here
+  const [password, setPassword] = useState('');
+  const [userName, setUserName] = useState('');
+
+  localStorage.setItem("user email", email);
+  
+
+  useEffect(() => {
+    // Fetch user requests based on email
+    axios.get(`${backendBaseUrl}/api/user/${email}`)
+      .then((response) => {
+        const name = response.data;
+        console.log(name);
+        setUserName(name);
+      })
+      .catch((error) => {
+        console.error('Error fetching user name:', error);
+      });
+  }, [email]);
+
+  console.log(userName);
+  console.log(email);
+  localStorage.setItem("user name", userName);
+
+  const handleLogin = () => {
+    axios.post(`${backendBaseUrl}/api/login`, { email, password })
+      .then((response) => {
+        // Assuming backend returns a success flag and user category
+        const { success, category } = response.data;
+  
+        if (success) {
+          // Redirect to the appropriate home page based on user category
+          if (category === 'actor') {
+            // Pass the user email as a URL parameter to the Actor Home page
+            window.location.href = `/home`;
+          } else if (category === 'director') {
+            // Pass the user email as a URL parameter to the Director Home page
+            window.location.href = `/home`;
+          }
+        } else {
+          // Handle login error here (e.g., show error message)
+        }
+      })
+      .catch((error) => {
+        // Handle login error here (e.g., show error message)
+        console.error('Login error:', error);
+      });
+  };
+
+  return (
+    <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
+      <img src={background} alt="" style={{ objectFit: 'cover', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }} />
+
+      <Box
+        sx={{
+          backgroundColor: 'white',
+          padding: '20px',
+          borderRadius: '5px',
+          maxWidth: '400px',
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
+        }}
+      >
+        <div style={{ textAlign: 'center', marginBottom: '20px' }}>
+          <h2>Login</h2>
+          <p>Login to your account.</p>
+        </div>
+
+        <TextField
+      label="Email"
+      fullWidth
+      margin="normal"
+      InputProps={{ style: { borderColor: '#483485' } }}
+      value={email}
+      onChange={(e) => setEmail(e.target.value)}
+    />
+
+    <TextField
+      label="Password"
+      type="password"
+      fullWidth
+      margin="normal"
+      InputProps={{ style: { borderColor: '#483485' } }}
+      value={password}
+      onChange={(e) => setPassword(e.target.value)}
+    />
+
+    <Button
+      variant="contained"
+      color="primary"
+      fullWidth
+      sx={{ backgroundColor: '#483485', marginTop: '10px' }}
+      onClick={handleLogin}
+    >
+      Login
+    </Button>
+
+      </Box>
+    </div>
+  );
+}

Frontend/admin/src/user/Register.jsx

+import React, { useState } from 'react';
+import background from './Register.png';
+import { Box, TextField, Button, Select, MenuItem, FormControl, InputLabel } from '@mui/material';
+import { Link, NavLink } from 'react-router-dom';
+import axios from 'axios';
+
+
+export default function Register() {
+
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [category, setCategory] = useState('director');
+  const [password, setPassword] = useState('');
+
+  const handleRegister = () => {
+    const userData = {
+      name: name,
+      email: email,
+      category: category,
+      password: password
+    };
+
+    axios.post('http://localhost:5000/api/register', userData)
+      .then((response) => {
+        console.log(response.data); // Optionally, you can handle success response
+        // Redirect to login page after successful registration
+        // Replace '/login' with the actual URL of your login page
+        window.location.href = '/login';
+      })
+      .catch((error) => {
+        console.error('Error registering user:', error);
+        // Optionally, you can show an error message to the user
+      });
+  };
+
+
+  return (
+    <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
+      <img src={background} alt="" style={{ objectFit: 'cover', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }} />
+
+      <Box
+        sx={{
+          backgroundColor: 'white',
+          padding: '20px',
+          borderRadius: '5px',
+          maxWidth: '400px',
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
+        }}
+      >
+        <div style={{ textAlign: 'center', marginBottom: '20px' }}>
+          <h2>Register</h2>
+          <p>Sign up as a new user.</p>
+        </div>
+
+        <TextField
+      label="Name"
+      fullWidth
+      margin="normal"
+      InputProps={{ style: { borderColor: '#483485' } }}
+      value={name}
+      onChange={(e) => setName(e.target.value)}
+    />
+    <TextField
+      label="Email"
+      fullWidth
+      margin="normal"
+      InputProps={{ style: { borderColor: '#483485' } }}
+      value={email}
+      onChange={(e) => setEmail(e.target.value)}
+    />
+
+    <FormControl fullWidth margin="normal">
+      <InputLabel style={{ color: '#483485' }}>Category</InputLabel>
+      <Select
+        label="Category"
+        style={{ color: '#483485' }}
+        value={category}
+        onChange={(e) => setCategory(e.target.value)}
+      >
+        <MenuItem value="director">Director</MenuItem>
+        <MenuItem value="actor">Actor</MenuItem>
+      </Select>
+    </FormControl>
+
+    <TextField
+      label="Password"
+      type="password"
+      fullWidth
+      margin="normal"
+      InputProps={{ style: { borderColor: '#483485' } }}
+      value={password}
+      onChange={(e) => setPassword(e.target.value)}
+    />
+        <Button
+      variant="contained"
+      color="primary"
+      fullWidth
+      sx={{ backgroundColor: '#483485', marginTop: '10px' }}
+      onClick={handleRegister}
+    >
+      Register
+    </Button>
+    <div style={{ textAlign: 'center', marginBottom: '20px' }}>
+      <p>If you already registered. Please <NavLink to="/login">login</NavLink></p>
+    </div>
+
+      </Box>
+    </div>
+  );
+}