frontend dev

Frontend/admin/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@amcharts/amcharts4": "^4.10.38",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.6",
@@ -11,9 +12,11 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.5.0",
+    "chart.js": "^4.4.0",
     "install": "^0.13.0",
     "npm": "^9.8.1",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.15.0",
     "react-router-dom": "^6.15.0",

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

@@ -18,4 +18,75 @@
 .actor-marketing-button-container {
   display: flex;
   justify-content: center;
-}
+}
\ No newline at end of file
+.actor-marketing-results-contend-container {
+  display: flex;
+  justify-content: space-around;
+  padding-top: 2%;
+  width: 100%;
+  height: auto;
+}
+.actor-marketing-results-actor-container {
+  width: 50%;
+  display: flex;
+  gap: 5%;
+  flex-wrap: wrap;
+}
+.card {
+  width: 11rem;
+  height: 15rem;
+  border-radius: 10px;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  color: rgb(240, 240, 240);
+  box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
+}
+.card-img {
+  position: absolute;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0.8;
+  transition: opacity 0.2s ease-out;
+}
+.card-content-topic {
+  position: absolute;
+  inset: auto auto 30px 20px;
+  margin: 0;
+  transition: inset 0.3s 0.3s ease-out;
+  font-family: "Roboto Condensed", sans-serif;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #ffffff;
+	-webkit-text-stroke: 0.5px #282828;
+	text-shadow: 0px 4px 4px #282828;
+}
+.card-content-para {
+  position: absolute;
+  opacity: 0;
+  max-width: 80%;
+  transition: opacity 0.3s ease-out;
+  inset: auto auto 25px 20px;
+}
+.card:hover .card-content-topic {
+  inset: auto auto 50px 20px;
+  transition: inset 0.3s ease-out;
+}
+.card:hover .card-content-para {
+  opacity: 1;
+  transition: opacity 0.5s 0.1s ease-in;
+}
+.card:hover .card-img {
+  transition: opacity 0.3s ease-in;
+  opacity: 1;
+}
+.actor-marketing-results-pie-chart-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50%;
+  height:40vh;
+}

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

@@ -8,8 +8,30 @@ 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 MovieFilterIcon from "@mui/icons-material/MovieFilter";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
+import { Pie } from "react-chartjs-2";
+import Channa from "../images/nadeeka.jpg";
+
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+export const data = {
+  labels: ["Romantic", "Action"],
+  datasets: [
+    {
+      label: "# of Votes",
+      data: [12, 19],
+      backgroundColor: [
+        "rgba(255, 99, 132, 0.2)",
+        "rgba(54, 162, 235, 0.2)",
+        ,
+      ],
+      borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)"],
+      borderWidth: 1,
+    },
+  ],
+};
 
 export default function ActorMarketingAnalysis() {
   const [loaderState, setLoaderState] = useState(false);
@@ -44,7 +66,7 @@ export default function ActorMarketingAnalysis() {
             autoComplete="off"
           >
             <div>
-              <TextField label="Film Trail Name" color="primary" required />
+              <TextField label="Film Trailer Name" color="primary" required />
               <TextField label="Film Director Name" color="primary" required />
               <TextField label="Film Director Email" color="primary" required />
             </div>
@@ -52,7 +74,10 @@ export default function ActorMarketingAnalysis() {
           <Box
             component="form"
             sx={{
-              "& .MuiTextField-root": { m: 1, width: "47.2%" },
+              "& .MuiTextField-root": {
+                m: 1,
+                width: "47.2%",
+              },
             }}
             noValidate
             autoComplete="off"
@@ -92,15 +117,49 @@ export default function ActorMarketingAnalysis() {
                 onClick={submitHandler}
                 variant="contained"
                 color="primary"
-                endIcon={<SendIcon />}
+                endIcon={<MovieFilterIcon />}
               >
-                Send
+                Analysis
               </Button>
             </Box>
           </center>
         </ThemeProvider>
       </div>
-      <div className="actor-marketing-title">Results</div>
+      <div className="actor-marketing-results-container">
+        <div className="actor-marketing-title">Film Trailer Name Results</div>
+        <div className="actor-marketing-results-contend-container">
+          <div className="actor-marketing-results-actor-container">
+            {/* --------------------------------- */}
+            <div className="card">
+              <img src={Channa} alt="" className="card-img" />
+              <div className="card-content">
+                <div className="card-content-topic">Channa Perera</div>
+                <div className="card-content-para">Sir lankan Actress</div>
+              </div>
+            </div>
+            {/* ---------------------------------------- */}
+            <div className="card">
+              <img src={Channa} alt="" className="card-img" />
+              <div className="card-content">
+                <div className="card-content-topic">Channa Perera</div>
+                <div className="card-content-para">Sir lankan Actress</div>
+              </div>
+            </div>
+            {/* ---------------------------------------- */}
+            <div className="card">
+              <img src={Channa} alt="" className="card-img" />
+              <div className="card-content">
+                <div className="card-content-topic">Channa Perera</div>
+                <div className="card-content-para">Sir lankan Actress</div>
+              </div>
+            </div>
+            {/* ---------------------------------------- */}
+          </div>
+          <div className="actor-marketing-results-pie-chart-container">
+            <Pie data={data} />
+          </div>
+        </div>
+      </div>
     </div>
   );
 }