Skip to content

Commit 23a6944

Browse files
MrbiboyMrbiboy
committed
frontend ongoing changes
1 parent 630e2dc commit 23a6944

File tree

13 files changed

+382
-1439
lines changed

13 files changed

+382
-1439
lines changed

‎frontend/package-lock.json‎

Lines changed: 22 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@ffmpeg/ffmpeg": "^0.12.15",
67
"@heroicons/react": "^2.2.0",
78
"@react-oauth/google": "^0.12.1",
89
"@tailwindcss/postcss": "^4.0.9",

‎frontend/src/App.js‎

Lines changed: 11 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ import Login from "./pages/Login";
1111
import Register from "./pages/Register";
1212
import Alerts from "./pages/Alerts";
1313
import PoliciesGenerator from "./pages/PoliciesGenerator";
14-
import VulnerabilityScanner from "./pages/VulnerabilityScanner";
15-
import ComplianceChecker from "./pages/ComplianceChecker";
16-
import RiskDashboard from "./pages/RiskDashboard";
14+
import VulnerabilityScanner from "./pages/VulnerabilityScanner/VulnerabilityScanner";
15+
import ComplianceChecker from "./pages/ComplianceChecker/ComplianceChecker";
16+
import RiskDashboard from "./pages/RiskDashboard/RiskDashboard";
1717
import Pricing from "./pages/Pricing";
1818
import Configs from "./pages/Configs";
1919
import AllInOne from "./pages/AllInOne";
@@ -47,30 +47,8 @@ const AppContent = ({ isAuthenticated, user, handleLogout, isSidebarCollapsed, t
4747
const showSidebar = isAuthenticated && location.pathname !== "/admin-dashboard";
4848

4949
return (
50-
<div className="relative flex h-screen overflow-hidden">
51-
<Particles
52-
id="tsparticles"
53-
init={async (engine) => await loadSlim(engine)}
54-
options={{
55-
background: { color: { value: "#b6c5ec" } },
56-
fpsLimit: 120,
57-
interactivity: {
58-
events: { onClick: { enable: true, mode: "push" }, onHover: { enable: true, mode: "repulse" }, resize: true },
59-
modes: { push: { quantity: 4 }, repulse: { distance: 150, duration: 0.4 } },
60-
},
61-
particles: {
62-
color: { value: "#1c75df" },
63-
links: { color: "#5497e6", distance: 150, enable: true, opacity: 0.5, width: 1 },
64-
move: { direction: "none", enable: true, outModes: { default: "bounce" }, random: true, speed: 2, straight: false },
65-
number: { density: { enable: true, area: 800 }, value: 100 },
66-
opacity: { value: 0.6, random: true },
67-
shape: { type: "circle" },
68-
size: { value: { min: 1, max: 5 }, random: true },
69-
},
70-
detectRetina: true,
71-
}}
72-
className="absolute inset-0 z-0"
73-
/>
50+
<div className="relative flex h-screen overflow-hidden bg-white">
51+
7452
<div className="flex flex-1 h-full z-10">
7553
{showSidebar && (
7654
<Sidebar
@@ -88,9 +66,14 @@ const AppContent = ({ isAuthenticated, user, handleLogout, isSidebarCollapsed, t
8866
user={user}
8967
handleLogout={handleLogout}
9068
isAdmin={location.pathname === "/admin-dashboard"}
69+
isCollapsed={isSidebarCollapsed}
9170
/>
9271
)}
93-
<main className="flex-1 overflow-y-auto p-6">
72+
<main className={`flex-1 overflow-y-auto p-6 transition-all duration-300 ${
73+
isAuthenticated && showSidebar
74+
? (isSidebarCollapsed ? 'ml-16 mt-16' : 'ml-64 mt-16')
75+
: ''
76+
}`}>
9477
<Routes>
9578
<Route
9679
path="/"

‎frontend/src/components/Header.jsx‎

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,59 @@
11
import React from "react";
22
import { UserIcon, ArrowRightStartOnRectangleIcon } from "@heroicons/react/24/outline";
3+
import './Header.css';
34

4-
const Header = ({ isAuthenticated, user, handleLogout, isAdmin }) => {
5+
const Header = ({ isAuthenticated, user, handleLogout, isAdmin, isCollapsed }) => {
56
return isAuthenticated ? (
6-
<header
7-
className={`flex items-center justify-between px-6 py-4 shadow-lg ${
8-
isAdmin ? "bg-purple-600" : "bg-blue-500"
9-
} transition-colors duration-300`}
10-
>
11-
<div className="flex items-center gap-3">
12-
<h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-300">
13-
SafeOps
14-
</h2>
7+
<header className={`header ${isAdmin ? 'header--admin' : ''} ${isCollapsed ? 'header--sidebar-collapsed' : 'header--sidebar-expanded'}`}>
8+
<div className="header__logo">
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
width="120"
12+
height="32"
13+
viewBox="675 575 150 350"
14+
version="1.1"
15+
className="header__logo-svg"
16+
>
17+
<path
18+
d="M 249.636 609.065 C 196.982 613.731, 150.625 648.333, 131.145 697.506 C 116.890 733.491, 117.605 771.715, 133.201 807.500 C 153.577 854.250, 199.453 886.798, 250.877 890.989 C 322.040 896.789, 385.660 849.350, 401.063 779 C 404.319 764.128, 404.763 742.628, 402.132 727.229 C 396.718 695.538, 382.898 669.509, 359.736 647.376 C 336.208 624.893, 307.324 611.976, 274 609.033 C 267.675 608.474, 261.600 608.076, 260.500 608.148 C 259.400 608.220, 254.511 608.632, 249.636 609.065 M 245 617.597 C 235.216 619.329, 222.369 622.688, 216.212 625.125 C 166.871 644.654, 134.710 686.807, 129.987 738.137 C 125.283 789.268, 150.852 838.812, 195.500 865.081 C 230.993 885.963, 276.531 888.694, 315 872.245 C 367.782 849.677, 400.378 794.981, 395.005 738 C 393.348 720.435, 389.759 707.739, 381.779 691.226 C 365.015 656.531, 332.128 630.088, 293.632 620.349 C 285 618.165, 280.835 617.739, 265.500 617.470 C 255.600 617.297, 246.375 617.354, 245 617.597 M 236 677.826 C 227.025 680.825, 221.931 683.909, 215.761 690.079 C 205.844 699.996, 201.553 712.938, 203.813 726.116 C 205.367 735.179, 208.915 742.010, 215.832 749.263 C 223.028 756.807, 230.785 761.912, 250.528 772.101 C 268.189 781.214, 272.954 784.181, 277.903 789.147 C 295.492 806.798, 277.998 831.919, 251.474 827.098 C 232.319 823.617, 215.863 807.200, 210.008 785.731 C 208.513 780.253, 207.987 779.462, 205.654 779.184 L 203 778.867 203 807.434 L 203 836 205.332 836 C 206.921 836, 208.436 834.818, 210.082 832.294 C 211.412 830.256, 213.976 827.732, 215.779 826.685 C 219.517 824.516, 219.726 824.565, 236.500 831.579 C 244.514 834.930, 246.650 835.390, 256 835.771 C 268.494 836.280, 277.292 834.538, 286.397 829.753 C 294.923 825.271, 303.864 816.102, 308.075 807.521 C 311.373 800.801, 311.500 800.115, 311.500 789.021 C 311.500 777.937, 311.370 777.234, 308.081 770.500 C 301.883 757.811, 292.609 750.605, 262.500 735.081 C 252.600 729.976, 242.396 724.256, 239.824 722.369 C 228.799 714.280, 225.948 703.754, 232.250 694.405 C 237.020 687.329, 242.906 684.600, 253.400 684.600 C 260.463 684.600, 262.452 685.023, 268.336 687.777 C 281.243 693.816, 291.579 706.323, 295.591 720.754 C 297.226 726.632, 297.504 727, 300.312 727 L 303.296 727 302.654 718.750 C 302.301 714.212, 302.009 702.737, 302.006 693.250 L 302 676 299.539 676 C 297.513 676, 296.886 676.708, 295.999 680.003 C 295.364 682.362, 293.890 684.681, 292.410 685.651 C 289.666 687.449, 290.461 687.681, 271 679.412 C 265.420 677.041, 262.872 676.603, 253 676.319 C 243.847 676.056, 240.377 676.363, 236 677.826"
19+
stroke="none"
20+
fill="#3b82f6"
21+
fillRule="evenodd"
22+
/>
23+
<path
24+
d="M 488.100 704.048 C 479.564 706.283, 473.478 709.577, 468.597 714.603 C 463.009 720.357, 461.500 724.410, 461.500 733.665 C 461.500 741.137, 461.757 742.195, 464.525 746.133 C 471.327 755.809, 479.937 759.690, 501.942 763 C 514.467 764.884, 520 766.719, 520 768.988 C 520 771.064, 515.095 772.374, 507.266 772.386 C 500.072 772.398, 498.620 772.091, 495.766 769.950 C 492.673 767.630, 491.661 767.483, 476.686 767.180 C 459.231 766.827, 458 767.173, 458 772.426 C 458 781.755, 467.777 792.003, 481.201 796.745 C 491.129 800.252, 512.733 801.137, 524.649 798.525 C 534.706 796.320, 543.645 792.081, 548.814 787.065 C 555.120 780.945, 556.449 777.721, 556.476 768.479 C 556.532 749.750, 547.091 742.780, 515.205 738.011 C 507.893 736.917, 501.031 735.552, 499.955 734.976 C 496.787 733.280, 497.660 731.169, 502.015 729.996 C 506.812 728.704, 512.497 729.574, 516.189 732.163 C 518.606 733.858, 520.564 734.021, 535.581 733.774 C 554.824 733.458, 555.290 733.250, 553.101 725.943 C 550.359 716.791, 537.162 706.664, 523.907 703.540 C 514.715 701.373, 497.374 701.619, 488.100 704.048 M 951.324 703.991 C 934.072 708.513, 924.103 717.526, 920.434 731.919 C 917.980 741.545, 918.801 767.342, 921.805 775 C 928.270 791.483, 944.709 800.020, 969.910 799.983 C 995.220 799.945, 1010.612 792.577, 1017.919 777.002 C 1020.431 771.647, 1020.500 770.951, 1020.500 751 C 1020.500 732.048, 1020.335 730.144, 1018.321 725.783 C 1013.330 714.980, 1001.518 706.488, 987.287 703.473 C 977.586 701.417, 960.187 701.668, 951.324 703.991 M 1185.500 703.039 C 1171.196 705.971, 1160.665 713.376, 1156.449 723.468 C 1154.547 728.021, 1154.600 738.105, 1156.551 742.782 C 1158.311 747.002, 1163.003 752.203, 1167.649 755.085 C 1173.194 758.525, 1182.153 761.061, 1195.827 763.062 C 1210.412 765.196, 1213 766.093, 1213 769.016 C 1213 771.548, 1209.494 772.488, 1200.436 772.383 C 1194.690 772.317, 1192.528 771.807, 1188.848 769.651 C 1184.497 767.101, 1183.754 767.001, 1169.412 767.015 C 1161.210 767.024, 1153.876 767.426, 1153.113 767.909 C 1150.740 769.412, 1152.229 778.442, 1155.652 783.313 C 1159.560 788.873, 1167.922 794.569, 1175.953 797.143 C 1185.366 800.159, 1206.611 800.868, 1218.060 798.548 C 1241.879 793.722, 1254.350 779.135, 1250.036 761.148 C 1249.226 757.772, 1247.470 754.544, 1244.788 751.496 C 1238.158 743.965, 1231.203 741.331, 1209.205 738.022 C 1194.927 735.875, 1191.703 734.782, 1192.190 732.254 C 1192.912 728.506, 1203.957 728.356, 1209.515 732.019 C 1212.183 733.778, 1214.277 733.988, 1229.215 733.993 C 1244.926 734, 1245.994 733.880, 1247.003 731.994 C 1248.945 728.366, 1246.195 722.121, 1239.835 715.716 C 1230.178 705.990, 1218.457 701.932, 1200.540 702.110 C 1194.468 702.170, 1187.700 702.588, 1185.500 703.039 M 599.877 704.648 C 599.125 705.554, 591.653 726.555, 583.272 751.316 C 571.728 785.425, 568.303 796.660, 569.140 797.668 C 569.971 798.670, 574.012 799, 585.467 799 C 602.771 799, 602.515 799.107, 605.707 790.500 L 607.560 785.500 623.637 785.226 L 639.714 784.952 641.870 790.864 C 643.056 794.116, 644.643 797.289, 645.397 797.914 C 646.327 798.686, 651.864 798.963, 662.621 798.776 C 675.978 798.543, 678.521 798.257, 678.771 796.955 C 679.186 794.792, 649.028 706.171, 647.283 704.426 C 646.134 703.277, 641.529 703, 623.551 703 C 604.054 703, 601.073 703.208, 599.877 704.648 M 695.041 704.924 C 693.615 707.587, 693.610 794.403, 695.035 797.066 C 695.998 798.864, 697.290 799, 713.428 799 C 728.334 799, 730.872 798.777, 731.393 797.418 C 731.727 796.548, 732 789.573, 732 781.918 L 732 768 755.465 768 C 777.640 768, 778.987 767.894, 779.965 766.066 C 781.310 763.553, 781.310 744.447, 779.965 741.934 C 778.987 740.106, 777.640 740, 755.465 740 L 732 740 732 735.516 L 732 731.031 760.250 730.766 L 788.500 730.500 788.500 717 L 788.500 703.500 742.291 703.240 C 697.407 702.988, 696.051 703.036, 695.041 704.924 M 809.035 704.934 C 808.366 706.184, 808 722.491, 808 751 C 808 779.509, 808.366 795.816, 809.035 797.066 C 810.035 798.934, 811.607 799, 855.335 799 C 889.208 799, 900.902 798.698, 901.800 797.800 C 903.450 796.150, 903.450 774.850, 901.800 773.200 C 900.924 772.324, 893.089 772, 872.800 772 L 845 772 845 768 L 845 764 868.300 764 C 885.089 764, 891.935 763.665, 892.800 762.800 C 894.440 761.160, 894.440 741.840, 892.800 740.200 C 891.935 739.335, 885.089 739, 868.300 739 L 845 739 845 734.5 L 845 730 872.465 730 C 898.595 730, 899.980 729.906, 900.965 728.066 C 901.534 727.002, 902 721.797, 902 716.500 C 902 711.203, 901.534 705.998, 900.965 704.934 C 899.965 703.066, 898.397 703, 855 703 C 811.603 703, 810.035 703.066, 809.035 704.934 M 1045.458 704.250 C 1045.194 704.938, 1045.096 726.425, 1045.239 752 L 1045.500 798.500 1063.500 798.500 L 1081.500 798.500 1081.777 783.750 L 1082.053 769 1096.478 769 C 1118.341 769, 1126.963 766.393, 1134.893 757.385 C 1140.261 751.286, 1142.406 744.178, 1141.777 734.579 C 1140.786 719.483, 1131.096 708.865, 1114.320 704.495 C 1106.615 702.488, 1046.216 702.273, 1045.458 704.250 M 1303.667 713.667 C 1303.300 714.033, 1303 719.433, 1303 725.667 L 1303 737 1291.200 737 C 1283.356 737, 1278.998 737.402, 1278.200 738.200 C 1276.550 739.850, 1276.550 761.150, 1278.200 762.800 C 1278.997 763.597, 1283.349 764, 1291.169 764 L 1302.938 764 1303.219 776.250 L 1303.500 788.500 1316.361 788.781 C 1324.989 788.969, 1329.678 788.682, 1330.611 787.908 C 1331.648 787.048, 1332 783.869, 1332 775.378 L 1332 764 1343.300 764 C 1350.756 764, 1355.008 763.592, 1355.800 762.800 C 1357.450 761.150, 1357.450 739.850, 1355.800 738.200 C 1355.008 737.408, 1350.756 737, 1343.300 737 L 1332 737 1332 726.200 C 1332 719.133, 1331.585 714.985, 1330.800 714.200 C 1329.512 712.912, 1304.905 712.428, 1303.667 713.667 M 1082 736 L 1082 744 1091.389 744 C 1103.097 744, 1105.534 742.589, 1105.359 735.909 C 1105.185 729.282, 1102.921 728, 1091.389 728 L 1082 728 1082 736 M 965.129 730.001 C 963.276 730.439, 960.801 731.755, 959.629 732.926 C 957.634 734.922, 957.500 736.064, 957.500 751.114 L 957.500 767.173 960.136 769.441 C 965.476 774.034, 976.292 773.512, 981.065 768.431 C 983.419 765.925, 983.500 765.346, 983.500 751 C 983.500 736.669, 983.417 736.073, 981.074 733.579 C 978.771 731.127, 973.251 728.898, 970 729.108 C 969.175 729.161, 966.983 729.563, 965.129 730.001 M 619.476 743.759 C 617.289 750.162, 615.355 755.986, 615.177 756.701 C 614.929 757.695, 616.982 758, 623.910 758 L 632.966 758 628.508 745.358 C 626.056 738.405, 623.915 732.581, 623.750 732.417 C 623.586 732.252, 621.662 737.356, 619.476 743.759"
25+
stroke="none"
26+
fill="#3b82f6"
27+
fillRule="evenodd"
28+
/>
29+
</svg>
30+
{/* <h2 className="header__title">SafeOps</h2> */}
1531
{isAdmin && (
16-
<span className="text-sm font-medium text-gray-200 bg-purple-700/50 px-2 py-1 rounded-md">
32+
<span className="header__admin-badge">
1733
Admin
1834
</span>
1935
)}
2036
</div>
21-
<div className="flex items-center gap-4">
22-
<div className="flex items-center gap-2">
23-
<UserIcon className="h-6 w-6 text-gray-200" />
24-
<span className="text-gray-200 text-base font-semibold">
37+
38+
<div className="header__user">
39+
<div className="header__user-info">
40+
<UserIcon className="header__user-icon" />
41+
<span className="header__user-name">
2542
{user?.name ? user.name : "User"}
2643
</span>
2744
</div>
45+
2846
<button
2947
onClick={handleLogout}
30-
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors duration-200"
48+
className="header__logout"
3149
aria-label="Logout"
3250
>
33-
<ArrowRightStartOnRectangleIcon className="h-5 w-5" />
34-
<span className="text-sm font-medium">Logout</span>
51+
<ArrowRightStartOnRectangleIcon className="header__logout-icon" />
52+
<span className="header__logout-text">Logout</span>
3553
</button>
3654
</div>
3755
</header>
3856
) : null;
3957
};
4058

41-
export default Header;
59+
export default Header;

0 commit comments

Comments
 (0)