Merge branch 'IT20030230' of http://gitlab.sliit.lk/23-064/23-064

Frontend/admin/src/components/Loader.jsx

+import React from "react";
+import Backdrop from "@mui/material/Backdrop";
+import CircularProgress from "@mui/material/CircularProgress";
+import Typography from "@mui/material/Typography";
+
+export default function Loader({ openState, message }) {
+  return (
+    <div>
+      <Backdrop
+        sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={openState}
+      >
+        <div style={{ textAlign: "center" }}>
+          <CircularProgress color="inherit" sx={{ fontWeight: "bold" }} />
+          <Typography variant="h5" sx={{ fontWeight: "bold" }}>
+            {message}
+          </Typography>
+        </div>
+      </Backdrop>
+    </div>
+  );
+}

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

 import React from "react";
 import "../css/side-navigation.css";
 import { NavLink } from "react-router-dom";
-import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
 import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
 import MovieOutlinedIcon from "@mui/icons-material/MovieOutlined";
 
@@ -20,10 +19,10 @@ function SideNavigation() {
           Movie Analysis
         </div>
       </NavLink>
-      <NavLink to="/home/actor-identify" className="side-nav-link">
+      <NavLink to="/home/actor-marketing-analysis" className="side-nav-link">
         <div className="side-nav-link-wrapper">
           <MovieOutlinedIcon sx={{ marginRight: "15px" }} />
-          Actor Identify
+          Actor & Marketing Analysis
         </div>
       </NavLink>
       <NavLink to="/home/pose-identify" className="side-nav-link">

Frontend/admin/src/css/actor-marketing-analysis.css

+.actor-marketing-container {
+  height: 88vh;
+  width: 79.5%;
+  margin-left: auto;
+  margin-right: 0;
+  overflow: auto;
+  /* background-color: yellowgreen; */
+}
+.actor-marketing-title {
+  padding-top: 3%;
+  font-size: 23px;
+  font-weight: 500;
+  font-family: system-ui;
+}
+.actor-marketing-input-container {
+  padding-top: 3%;
+}
+.actor-marketing-button-container {
+  display: flex;
+  justify-content: center;
+}
\ No newline at end of file

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

@@ -4,7 +4,6 @@
   margin-left: auto;
   margin-right: 0;
 }
-
 .movie-page-container-title {
   font-size: 23px;
   font-weight: 500;

Frontend/admin/src/css/side-navigation.css

@@ -21,32 +21,31 @@
   align-items: center;
   margin-top: 50px;
   color: white;
-  font-weight:500;
+  font-weight: 500;
   font-size: 16px;
 }
 .active .side-nav-link-wrapper {
   background-color: white;
-color: #5143B8;
-position: relative;
+  color: #5143b8;
+  position: relative;
 }
 .active .side-nav-link-wrapper:before {
-  content:'';
+  content: "";
   position: absolute;
-  top:-30px;
-  right:0;
+  top: -30px;
+  right: 0;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   box-shadow: 15px 15px 0 rgb(255, 255, 255);
 }
 .active .side-nav-link-wrapper:after {
-  content:'';
+  content: "";
   position: absolute;
-  bottom:-30px;
-  right:0;
+  bottom: -30px;
+  right: 0;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   box-shadow: 15px -15px 0 rgb(255, 255, 255);
 }
-

Frontend/admin/src/css/top-navigation.css

@@ -2,6 +2,7 @@
   width: 100%;
   height: 12vh;
   display: flex;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 }
 .top-nav-logo-container {
   width: 18%;
@@ -18,7 +19,7 @@
   gap: 50px;
   padding-left: 50px;
 }
- 
+
 .top-nav-link-text {
   font-size: 16px;
   font-weight: 500;
@@ -47,31 +48,30 @@
   width: 30%;
   background-color: #5143b8;
   border-bottom-left-radius: 50px;
-   display:flex;
-   align-items:center;
-   justify-content:space-evenly
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
 }
-.top-nav-search-container-wrapper{
-    width: 280px;
-    height: 40px;
-    background-color: #46399E;
-    border-radius: 20px;
-    display: flex;
-    align-items: center;
-    justify-content:space-evenly;
-
+.top-nav-search-container-wrapper {
+  width: 280px;
+  height: 40px;
+  background-color: #46399e;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
 }
-.top-nav-search{
-    width: 200px;
-    height:30px;
-    border: none;
-    background-color: transparent;
-    outline: none;
-    color:white;
+.top-nav-search {
+  width: 200px;
+  height: 30px;
+  border: none;
+  background-color: transparent;
+  outline: none;
+  color: white;
 }
-::placeholder{
-  color:white 
+::placeholder {
+  color: white;
 }
-.profile-picture{
+.profile-picture {
   border-radius: 50%;
-}
+}
\ No newline at end of file

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

+import React, { useState } from "react";
+import "../css/actor-marketing-analysis.css";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import Select from "@mui/material/Select";
+import { Button } from "@mui/material";
+import Loader from "../components/Loader";
+import SendIcon from "@mui/icons-material/Send";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+
+export default function ActorMarketingAnalysis() {
+  const [loaderState, setLoaderState] = useState(false);
+  const [loaderMessage, setLoaderMessage] = useState(false);
+  const theme = createTheme({
+    palette: {
+      primary: {
+        main: "#5143b8",
+      },
+    },
+  });
+
+  const submitHandler = () => {
+    setLoaderState(true);
+    setLoaderMessage("Hi");
+  };
+  return (
+    <div className="actor-marketing-container">
+      <Loader openState={loaderState} message={loaderMessage} />
+      <div className="actor-marketing-title">
+        Actor & Film Marketing Analysis
+      </div>
+      <div className="actor-marketing-input-container">
+        <ThemeProvider theme={theme}>
+          <Box
+            component="form"
+            sx={{
+              "& .MuiTextField-root": { m: 1, width: "31%" },
+            }}
+            noValidate
+            autoComplete="off"
+          >
+            <div>
+              <TextField label="Film Trail Name" color="primary" required />
+              <TextField label="Film Director Name" color="primary" required />
+              <TextField label="Film Director Email" color="primary" required />
+            </div>
+          </Box>
+          <Box
+            component="form"
+            sx={{
+              "& .MuiTextField-root": { m: 1, width: "47.2%" },
+            }}
+            noValidate
+            autoComplete="off"
+          >
+            <div>
+              <FormControl sx={{ m: 1, width: "47.2%" }}>
+                <InputLabel color="primary">Film Analysis Type</InputLabel>
+                <Select
+                  color="primary"
+                  // value={age}
+                  label="Film Analysis Type"
+                  // onChange={handleChange}
+                  required
+                >
+                  <MenuItem value={"AAO"}>Actor Analysis Only</MenuItem>
+                  <MenuItem value={"FMAO"}>
+                    Film Marketing Analysis Only
+                  </MenuItem>
+                  <MenuItem value={"AFMA"}>
+                    Actor & Film Marketing Analysis
+                  </MenuItem>
+                </Select>
+              </FormControl>
+              <TextField
+                label="Film Director Name"
+                color="primary"
+                type="file"
+                InputLabelProps={{
+                  shrink: true,
+                }}
+              />
+            </div>
+          </Box>
+          <center>
+            <Box sx={{ "& > button": { m: 1, width: "50%" } }}>
+              <Button
+                onClick={submitHandler}
+                variant="contained"
+                color="primary"
+                endIcon={<SendIcon />}
+              >
+                Send
+              </Button>
+            </Box>
+          </center>
+        </ThemeProvider>
+      </div>
+      <div>
+        <h1>sdsdasdsadasdasda</h1>
+      </div>
+    </div>
+  );
+}

Frontend/admin/src/routes/routes.js

@@ -8,6 +8,7 @@ import Contact from "../pages/contact";
 
 import Dashboard from "../pages/dashboard";
 import MovieAnalysis from "../pages/movie-analysis";
+import ActorMarketingAnalysis from "../pages/actor-marketing-analysis";
 
 function PageRoutes() {
   return (
@@ -21,6 +22,10 @@ function PageRoutes() {
           <Route path="/home" element={<SubApp />}>
             <Route path="/home/dashboard" element={<Dashboard />} />
             <Route path="/home/movie-analysis" element={<MovieAnalysis />} />
+            <Route
+              path="/home/actor-marketing-analysis"
+              element={<ActorMarketingAnalysis />}
+            />
           </Route>
           <Route path="/about" element={<Contact />} />
           <Route path="/contact" element={<About />} />