Skip to content

2
2023-029
Commit a2d51d2a authored by janithGamage's avatar janithGamage
Browse files
Options

fix: update

parent 93cfc676
Show whitespace changes
Inline Side-by-side
Showing with 629 additions and 200 deletions
Project/Frontend/Web_App/public/assets/icons/navbar/ic_learning.svg 0 → 100644
View file @ a2d51d2a
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" version="1.1"><path d="" stroke="none" fill="#080404" fill-rule="evenodd"/><path d="M 240.500 0.655 C 192.751 8.281, 155.481 46.800, 149.473 94.735 C 148.859 99.631, 149.012 100.166, 151.831 102.985 C 155.092 106.246, 156.921 106.645, 160.316 104.837 C 163.705 103.031, 164.739 101.025, 165.431 94.904 C 167.480 76.798, 177.669 56.294, 191.481 42.481 C 218.452 15.511, 260.448 7.930, 294.496 23.885 C 319.274 35.496, 335.922 54.504, 344.523 81 C 346.899 88.321, 347.342 91.580, 347.715 104.500 C 348.110 118.166, 347.921 120.383, 345.588 129.421 C 344.180 134.878, 341.694 142.193, 340.064 145.678 C 338.433 149.162, 324.840 171.023, 309.857 194.256 L 282.616 236.500 282.200 243.717 C 281.919 248.595, 281.285 251.349, 280.242 252.214 C 278.865 253.357, 278.767 252.634, 279.333 245.498 C 279.682 241.099, 280.663 224.675, 281.513 209 C 282.363 193.325, 283.298 178.588, 283.591 176.250 L 284.123 172 289.695 172 C 297.801 172, 302.915 170.124, 307.621 165.425 C 312.772 160.282, 314.328 155.697, 313.818 147.159 C 313.067 134.589, 304.494 126.500, 291.922 126.500 C 286.344 126.500, 284.598 126.961, 280.448 129.526 C 273.498 133.823, 270.071 139.766, 269.310 148.840 L 268.710 156 256 156 L 243.290 156 242.690 148.840 C 241.929 139.766, 238.502 133.823, 231.552 129.526 C 227.402 126.961, 225.656 126.500, 220.078 126.500 C 207.506 126.500, 198.933 134.589, 198.182 147.159 C 197.672 155.697, 199.228 160.282, 204.379 165.425 C 209.085 170.124, 214.199 172, 222.305 172 L 227.877 172 228.409 176.250 C 228.702 178.588, 229.634 193.325, 230.480 209 C 231.326 224.675, 232.289 240.875, 232.620 245 C 233.024 250.043, 232.890 252.172, 232.212 251.500 C 231.657 250.950, 231.017 247.350, 230.790 243.500 L 230.377 236.500 203.322 194.500 C 188.442 171.400, 175.132 150.250, 173.744 147.500 C 172.356 144.750, 169.988 138.548, 168.482 133.717 C 166.746 128.149, 164.977 124.397, 163.649 123.467 C 159.098 120.279, 152.858 122.732, 151.472 128.255 C 150.729 131.217, 155.214 145.457, 159.739 154.500 C 161.666 158.350, 174.888 179.605, 189.121 201.734 L 215 241.967 215 247.668 C 215 254.794, 217.986 261.327, 222.612 264.322 C 225.970 266.497, 225.975 266.513, 225.988 274.572 C 226.004 285.227, 228.096 291.196, 233.734 296.676 C 239.209 301.997, 245.435 304, 256.500 304 C 267.565 304, 273.791 301.997, 279.266 296.676 C 284.884 291.215, 286.988 285.234, 287.039 274.572 C 287.076 266.628, 287.127 266.468, 290.222 264.500 C 294.891 261.530, 298 254.893, 298 247.894 L 298 242.102 323.599 202.301 C 337.679 180.411, 350.793 159.350, 352.741 155.500 C 367.960 125.425, 367.834 88.915, 352.408 58.549 C 338.681 31.529, 313.226 11.075, 283.190 2.931 C 277.284 1.330, 271.787 0.768, 259.500 0.511 C 250.700 0.327, 242.150 0.392, 240.500 0.655 M 105.315 28.007 C 102.579 29.110, 101 31.985, 101 35.865 C 101 38.405, 102.554 40.244, 111.195 47.931 C 120.171 55.916, 121.836 57, 125.122 57 C 127.964 57, 129.350 56.371, 130.927 54.365 C 135.282 48.830, 133.296 45.630, 117.198 32.241 C 110.841 26.954, 109.296 26.403, 105.315 28.007 M 395.913 32.149 C 379.693 45.639, 377.711 48.820, 382.073 54.365 C 383.650 56.371, 385.036 57, 387.878 57 C 391.164 57, 392.829 55.916, 401.805 47.931 C 410.864 39.873, 412 38.492, 412 35.542 C 412 31.374, 409.415 28.182, 405.413 27.411 C 402.742 26.895, 401.463 27.533, 395.913 32.149 M 115.896 94.166 C 103.435 104.537, 101 107.330, 101 111.256 C 101 113.953, 101.660 115.374, 103.635 116.927 C 108.707 120.917, 112.119 119.289, 125.750 106.369 C 133.914 98.630, 134.841 95.750, 130.545 91.455 C 126.624 87.533, 123.077 88.190, 115.896 94.166 M 382.455 91.455 C 378.318 95.591, 379.147 98.635, 386.250 105.396 C 395.563 114.261, 401.905 119, 404.455 119 C 408.419 119, 412 115.325, 412 111.256 C 412 107.330, 409.565 104.537, 397.104 94.166 C 389.923 88.190, 386.376 87.533, 382.455 91.455 M 215.073 144.635 C 212.709 147.640, 212.519 149.218, 214.150 152.316 C 215.804 155.458, 216.929 155.968, 222.250 155.985 L 227 156 227 151.635 C 227 146.062, 224.049 142, 220 142 C 218.107 142, 216.447 142.888, 215.073 144.635 M 287.219 144.267 C 285.579 146.013, 285 147.851, 285 151.314 L 285 156 289.929 156 C 295.307 156, 297.580 154.522, 298.629 150.343 C 300.190 144.121, 291.635 139.566, 287.219 144.267 M 79.990 170.250 C 75.163 173.535, 72.848 177.169, 72.260 182.386 L 71.740 187 53.518 187 C 36.267 187, 35.120 187.120, 31.990 189.250 C 30.172 190.488, 27.743 192.771, 26.592 194.323 L 24.500 197.147 24.500 337.323 L 24.500 477.500 28.215 485.280 C 33.155 495.625, 40.375 502.845, 50.720 507.785 L 58.500 511.500 256 511.500 L 453.500 511.500 461.280 507.785 C 474.557 501.445, 483.994 489.753, 486.935 476 C 487.813 471.896, 488.034 435.820, 487.806 333.823 L 487.500 197.146 485.408 194.323 C 484.257 192.770, 481.828 190.488, 480.010 189.250 C 476.889 187.126, 475.714 187, 458.982 187 L 441.260 187 440.740 182.386 C 440.152 177.169, 437.837 173.535, 433.010 170.250 C 429.741 168.025, 429.328 168, 395.425 168 L 361.145 168 359.073 170.635 C 357.933 172.084, 357 174.273, 357 175.500 C 357 176.727, 357.933 178.916, 359.073 180.365 L 361.145 183 393.045 183 L 424.944 183 425.222 231.089 L 425.500 279.178 427.861 281.089 C 430.876 283.529, 435.124 283.530, 438.139 281.089 L 440.500 279.178 440.784 240.589 L 441.068 202 456.548 202 L 472.028 202 471.764 338.750 L 471.500 475.500 469.348 479.500 C 466.204 485.344, 460.266 490.911, 454 493.887 L 448.500 496.500 256 496.500 L 63.500 496.500 58 493.887 C 51.734 490.911, 45.796 485.344, 42.652 479.500 L 40.500 475.500 40.236 338.750 L 39.972 202 55.986 202 L 72 202 72.022 332.250 C 72.043 456.897, 72.124 462.672, 73.896 466.500 C 76.051 471.156, 80.313 475.424, 84.315 476.936 C 88.269 478.430, 424.731 478.430, 428.685 476.936 C 432.687 475.424, 436.949 471.156, 439.104 466.500 C 440.856 462.716, 440.957 458.283, 440.978 384.297 C 440.994 328.262, 440.680 305.391, 439.870 303.615 C 437.340 298.061, 428.660 298.061, 426.130 303.615 C 425.334 305.360, 425 322.207, 425 360.547 L 425 415 360.894 415 C 305.856 415, 295.931 415.222, 290.724 416.571 C 283.019 418.568, 274.632 422.794, 268.946 427.546 L 264.500 431.261 264 381.380 C 263.725 353.946, 263.163 330.982, 262.752 330.348 C 261.249 328.035, 256.532 327.157, 253.180 328.566 C 251.431 329.302, 249.898 330.038, 249.773 330.202 C 249.648 330.366, 249.311 353.171, 249.023 380.880 L 248.500 431.261 244.054 427.546 C 241.609 425.503, 237.073 422.551, 233.975 420.987 C 223.702 415.801, 218.359 415, 194.060 415 L 171.909 415 169.455 417.455 C 166.346 420.563, 166.332 424.111, 169.411 427.694 L 171.823 430.500 195.687 431 L 219.552 431.500 226.131 434.741 C 236.236 439.720, 244.091 449.293, 247.471 460.750 L 248.135 463 170.002 463 C 118.055 463, 91.220 462.653, 89.934 461.965 C 88.155 461.012, 88 459.737, 88 446.008 L 88 431.087 117.088 430.793 L 146.176 430.500 148.680 427.587 C 151.635 424.150, 151.301 419.585, 147.886 416.750 C 145.986 415.172, 142.933 415, 116.889 415 L 88 415 88 299 L 88 183 119.927 183 L 151.855 183 153.927 180.365 C 155.067 178.916, 156 176.727, 156 175.500 C 156 174.273, 155.067 172.084, 153.927 170.635 L 151.855 168 117.575 168 C 83.672 168, 83.259 168.025, 79.990 170.250 M 244.459 178.750 C 244.778 182.463, 245.699 197.425, 246.505 212 C 247.312 226.575, 248.241 241.762, 248.571 245.750 L 249.171 253 256 253 L 262.829 253 263.429 245.750 C 263.759 241.762, 264.688 226.575, 265.495 212 C 266.301 197.425, 267.222 182.463, 267.541 178.750 L 268.121 172 256 172 L 243.879 172 244.459 178.750 M 103 255 C 101.762 256.238, 101 258.333, 101 260.500 C 101 262.667, 101.762 264.762, 103 266 C 104.934 267.934, 106.333 268, 145.500 268 C 184.667 268, 186.066 267.934, 188 266 C 190.652 263.348, 190.652 257.652, 188 255 C 186.066 253.066, 184.667 253, 145.500 253 C 106.333 253, 104.934 253.066, 103 255 M 325 255 C 323.762 256.238, 323 258.333, 323 260.500 C 323 262.667, 323.762 264.762, 325 266 C 326.934 267.934, 328.333 268, 367.500 268 C 406.667 268, 408.066 267.934, 410 266 C 411.238 264.762, 412 262.667, 412 260.500 C 412 258.333, 411.238 256.238, 410 255 C 408.066 253.066, 406.667 253, 367.500 253 C 328.333 253, 326.934 253.066, 325 255 M 242 275.077 C 242 281.565, 242.243 282.397, 244.923 285.077 C 247.703 287.857, 248.269 288, 256.500 288 C 264.731 288, 265.297 287.857, 268.077 285.077 C 270.757 282.397, 271 281.565, 271 275.077 L 271 268 256.500 268 L 242 268 242 275.077 M 117.114 292.750 C 113.699 295.585, 113.365 300.150, 116.320 303.587 L 118.825 306.500 161.663 306.788 C 185.223 306.947, 205.524 306.823, 206.775 306.513 C 212.872 305.002, 215.119 297.339, 210.686 293.174 C 208.381 291.009, 208.186 291, 163.796 291 C 122.814 291, 119.052 291.141, 117.114 292.750 M 302.174 293.314 C 298.007 297.751, 300.240 305.030, 306.225 306.513 C 307.476 306.823, 327.777 306.947, 351.337 306.788 L 394.175 306.500 396.680 303.587 C 399.635 300.150, 399.301 295.585, 395.886 292.750 C 393.948 291.141, 390.180 291, 349.064 291 L 304.349 291 302.174 293.314 M 119.308 328.010 C 115.886 329.388, 113.714 333.422, 114.491 336.958 C 115.840 343.099, 115.029 343, 164.048 343 L 208.651 343 210.826 340.686 C 214.814 336.441, 213.301 329.998, 207.872 328.105 C 204.009 326.758, 122.633 326.671, 119.308 328.010 M 304.400 328.412 C 299.382 330.622, 298.301 337.055, 302.314 340.826 C 304.619 342.991, 304.814 343, 349.204 343 C 390.186 343, 393.948 342.859, 395.886 341.250 C 399.301 338.415, 399.635 333.850, 396.680 330.413 L 394.175 327.500 350.837 327.273 C 316.003 327.090, 306.892 327.314, 304.400 328.412 M 117.201 366.028 C 112.920 370.016, 113.426 375.268, 118.406 378.531 C 120.431 379.857, 126.626 380.024, 164.960 379.781 L 209.178 379.500 211.089 377.139 C 213.917 373.645, 213.588 368.607, 210.365 366.073 C 207.790 364.047, 206.732 364, 163.554 364 C 120.558 364, 119.319 364.054, 117.201 366.028 M 302.635 366.073 C 299.096 368.856, 299.014 374.104, 302.455 377.545 L 304.909 380 349.031 380 L 393.154 380 396.077 377.077 C 399.248 373.906, 399.635 372.061, 397.837 368.684 C 395.350 364.015, 395.874 364.065, 349.385 364.032 C 306.244 364.001, 305.212 364.046, 302.635 366.073 M 292.286 432.451 C 279.717 436.379, 269.545 447.137, 265.529 460.750 L 264.865 463 342.998 463 C 394.945 463, 421.780 462.653, 423.066 461.965 C 424.846 461.012, 425 459.737, 425 445.965 L 425 431 360.750 431.067 C 310.560 431.119, 295.578 431.422, 292.286 432.451" stroke="none" fill="#040404" fill-rule="evenodd"/></svg>
\ No newline at end of file
Project/Frontend/Web_App/src/components/mega-menu/MegaMenuDesktopVertical.tsx
View file @ a2d51d2a
......@@ -17,7 +17,7 @@ import MegaMenuCarousel from './MenuCarousel';
// ----------------------------------------------------------------------
const MENU_PAPER_WIDTH = 800;
const PARENT_ITEM_HEIGHT = 40;
const PARENT_ITEM_HEIGHT = 60;
type Props = {
data: MegaMenuItemProps[];
......
Project/Frontend/Web_App/src/layouts/dashboard/nav/NavVertical.tsx
View file @ a2d51d2a
......@@ -2,20 +2,18 @@ import { useEffect } from 'react';
// next
import { useRouter } from 'next/router';
// @mui
import { Box, Stack, Drawer, Button } from '@mui/material';
import { Box, Button, Drawer, Stack } from '@mui/material';
// hooks
import useResponsive from '../../../hooks/useResponsive';
// config
import { NAV } from '../../../config';
// components
import Logo from '../../../components/logo';
import Scrollbar from '../../../components/scrollbar';
import { NavSectionVertical } from '../../../components/nav-section';
import Scrollbar from '../../../components/scrollbar';
//
import navConfig from './config';
import NavDocs from './NavDocs';
import NavAccount from './NavAccount';
import { useSettingsContext } from 'src/components/settings';
import NavAccount from './NavAccount';
import navConfig from './config';
// ----------------------------------------------------------------------
......@@ -38,12 +36,12 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
value: 'mini'
}
} as React.ChangeEvent<HTMLInputElement>)
}else {
} else {
onChangeLayout({
target: {
value: 'vertical'
}
} as React.ChangeEvent<HTMLInputElement> )
} as React.ChangeEvent<HTMLInputElement>)
}
}
......@@ -75,7 +73,7 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
}}
>
<Button onClick={onClickHan}>Change Layout</Button>
<Button onClick={onClickHan}>Change Layout</Button>
{/* <Logo /> */}
<NavAccount />
......@@ -85,7 +83,6 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
<Box sx={{ flexGrow: 1 }} />
<NavDocs />
</Scrollbar>
);
......
Project/Frontend/Web_App/src/layouts/dashboard/nav/config.tsx
View file @ a2d51d2a
// routes
import { PATH_DASHBOARD } from '../../../routes/paths';
// components
import Label from '../../../components/label';
import Iconify from '../../../components/iconify';
import SvgColor from '../../../components/svg-color';
// ----------------------------------------------------------------------
......@@ -33,206 +31,31 @@ const ICONS = {
ecommerce: icon('ic_ecommerce'),
analytics: icon('ic_analytics'),
dashboard: icon('ic_dashboard'),
learning: icon('ic_learning')
};
const navConfig = [
// GENERAL
// ----------------------------------------------------------------------
{
subheader: 'general',
items: [
{ title: 'app', path: PATH_DASHBOARD.general.app, icon: ICONS.dashboard },
{ title: 'ecommerce', path: PATH_DASHBOARD.general.ecommerce, icon: ICONS.ecommerce },
{ title: 'analytics', path: PATH_DASHBOARD.general.analytics, icon: ICONS.analytics },
{ title: 'banking', path: PATH_DASHBOARD.general.banking, icon: ICONS.banking },
{ title: 'booking', path: PATH_DASHBOARD.general.booking, icon: ICONS.booking },
{ title: 'file', path: PATH_DASHBOARD.general.file, icon: ICONS.file },
],
},
// MANAGEMENT
// ----------------------------------------------------------------------
{
subheader: 'management',
items: [
// USER
{
title: 'user',
path: PATH_DASHBOARD.user.root,
icon: ICONS.user,
children: [
{ title: 'profile', path: PATH_DASHBOARD.user.profile },
{ title: 'cards', path: PATH_DASHBOARD.user.cards },
{ title: 'list', path: PATH_DASHBOARD.user.list },
{ title: 'create', path: PATH_DASHBOARD.user.new },
{ title: 'edit', path: PATH_DASHBOARD.user.demoEdit },
{ title: 'account', path: PATH_DASHBOARD.user.account },
],
},
// E-COMMERCE
{
title: 'ecommerce',
path: PATH_DASHBOARD.eCommerce.root,
icon: ICONS.cart,
children: [
{ title: 'shop', path: PATH_DASHBOARD.eCommerce.shop },
{ title: 'product', path: PATH_DASHBOARD.eCommerce.demoView },
{ title: 'list', path: PATH_DASHBOARD.eCommerce.list },
{ title: 'create', path: PATH_DASHBOARD.eCommerce.new },
{ title: 'edit', path: PATH_DASHBOARD.eCommerce.demoEdit },
{ title: 'checkout', path: PATH_DASHBOARD.eCommerce.checkout },
],
},
// INVOICE
{
title: 'invoice',
path: PATH_DASHBOARD.invoice.root,
icon: ICONS.invoice,
children: [
{ title: 'list', path: PATH_DASHBOARD.invoice.list },
{ title: 'details', path: PATH_DASHBOARD.invoice.demoView },
{ title: 'create', path: PATH_DASHBOARD.invoice.new },
{ title: 'edit', path: PATH_DASHBOARD.invoice.demoEdit },
],
},
// BLOG
{
title: 'blog',
path: PATH_DASHBOARD.blog.root,
icon: ICONS.blog,
children: [
{ title: 'posts', path: PATH_DASHBOARD.blog.posts },
{ title: 'post', path: PATH_DASHBOARD.blog.demoView },
{ title: 'create', path: PATH_DASHBOARD.blog.new },
],
},
{
title: 'File manager',
path: PATH_DASHBOARD.fileManager,
icon: ICONS.folder,
},
],
},
// APP
// ----------------------------------------------------------------------
{
subheader: 'app',
items: [
{
title: 'mail',
path: PATH_DASHBOARD.mail.root,
icon: ICONS.mail,
info: <Label color="error">+32</Label>,
},
{
title: 'chat',
path: PATH_DASHBOARD.chat.root,
icon: ICONS.chat,
},
{
title: 'calendar',
path: PATH_DASHBOARD.calendar,
icon: ICONS.calendar,
},
{
title: 'kanban',
path: PATH_DASHBOARD.kanban,
icon: ICONS.kanban,
},
],
},
// DEMO MENU STATES
{
subheader: 'Other cases',
items: [
{
// default roles : All roles can see this entry.
// roles: ['user'] Only users can see this item.
// roles: ['admin'] Only admin can see this item.
// roles: ['admin', 'manager'] Only admin/manager can see this item.
// Reference from 'src/guards/RoleBasedGuard'.
title: 'item_by_roles',
path: PATH_DASHBOARD.permissionDenied,
icon: ICONS.lock,
roles: ['admin'],
caption: 'only_admin_can_see_this_item',
},
{
title: 'menu_level',
path: '#/dashboard/menu_level',
icon: ICONS.menuItem,
children: [
{
title: 'menu_level_2a',
path: '#/dashboard/menu_level/menu_level_2a',
},
{
title: 'menu_level_2b',
path: '#/dashboard/menu_level/menu_level_2b',
children: [
{
title: 'menu_level_3a',
path: '#/dashboard/menu_level/menu_level_2b/menu_level_3a',
},
{ title: 'blank', path: PATH_DASHBOARD.blank, icon: ICONS.blank },
// Sign Language Learning Module items
{
title: 'menu_level_3b',
path: '#/dashboard/menu_level/menu_level_2b/menu_level_3b',
title: 'Learning Module',
path: PATH_DASHBOARD.learningModule.root,
icon: ICONS.learning,
children: [
{
title: 'menu_level_4a',
path: '#/dashboard/menu_level/menu_level_2b/menu_level_3b/menu_level_4a',
},
{
title: 'menu_level_4b',
path: '#/dashboard/menu_level/menu_level_2b/menu_level_3b/menu_level_4b',
},
{ title: 'Curriculum', path: PATH_DASHBOARD.learningModule.curriculumHome },
{ title: 'Question and Answers', path: PATH_DASHBOARD.learningModule.questionAndAnswersHome },
{ title: 'Lead Board', path: PATH_DASHBOARD.learningModule.leadBoardHome },
{ title: 'Feedback', path: PATH_DASHBOARD.learningModule.feedbackHome },
],
},
],
},
],
},
{
title: 'item_disabled',
path: '#disabled',
icon: ICONS.disabled,
disabled: true,
},
{
title: 'item_label',
path: '#label',
icon: ICONS.label,
info: (
<Label color="info" startIcon={<Iconify icon="eva:email-fill" />}>
NEW
</Label>
),
},
{
title: 'item_caption',
path: '#caption',
icon: ICONS.menuItem,
caption:
'Quisque malesuada placerat nisl. In hac habitasse platea dictumst. Cras id dui. Pellentesque commodo eros a enim. Morbi mollis tellus ac sapien.',
},
{
title: 'item_external_link',
path: 'https://www.google.com/',
icon: ICONS.external,
},
{
title: 'blank',
path: PATH_DASHBOARD.blank,
icon: ICONS.blank,
},
],
},
];
export default navConfig;
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/index.tsx 0 → 100644
View file @ a2d51d2a
import { Container, Grid } from '@mui/material';
import Head from 'next/head';
import _mock from 'src/_mock/_mock';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
import CarouselAnimation from 'src/sections/@dashboard/learning-module/curriculum/CarouselAnimation';
import CarouselCenterMode from 'src/sections/@dashboard/learning-module/curriculum/CarouselCenterMode';
import { useSettingsContext } from '../../../../components/settings';
import DashboardLayout from '../../../../layouts/dashboard';
CurriculumHomePage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function CurriculumHomePage() {
const { themeStretch } = useSettingsContext();
const _carouselsExample = [...Array(5)].map((_, index) => ({
id: _mock.id(index),
title: _mock.text.title(index),
image: _mock.image.cover(index),
description: _mock.text.description(index),
}));
return (
<>
<Head>
<title> Curriculum Home | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Curriculum"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2} rowSpacing={2}>
<Grid md={12} item>
<CarouselAnimation data={_carouselsExample} />
</Grid>
<Grid md={12} item>
<CarouselCenterMode data={_carouselsExample} />
</Grid>
</Grid>
</Container>
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/process.tsx 0 → 100644
View file @ a2d51d2a
import { Card, CardContent, CardHeader, Container, Grid, Typography } from '@mui/material';
import Head from 'next/head';
import { useState } from 'react';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Editor from 'src/components/editor/Editor';
import Iconify from 'src/components/iconify/Iconify';
import { MegaMenuDesktopVertical, MegaMenuItemProps } from 'src/components/mega-menu';
import Scrollbar from 'src/components/scrollbar/Scrollbar';
import { NAV } from 'src/config';
import { useSettingsContext } from '../../../../components/settings';
import DashboardLayout from '../../../../layouts/dashboard';
CurriculumProcessPage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function CurriculumProcessPage() {
const { themeStretch } = useSettingsContext();
const [quillSimple, setQuillSimple] = useState('');
const ICON_SIZE = {
width: '100%',
height: '100%',
};
const data: MegaMenuItemProps[] = [
{
title: 'Parent 1',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 2',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 3',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 4',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 5',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 6',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 7',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 8',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 9',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 10',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
];
return (
<>
<Head>
<title> Curriculum Process | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Curriculum Process"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum Process', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2} rowSpacing={2}>
<Grid md={3} item>
<Card sx={{ width: NAV.W_BASE, flexShrink: 0, overflow: 'unset', zIndex: 9 }}>
<Typography variant="h6" sx={{ p: 2, display: 'flex', alignItems: 'center' }}>
<Iconify icon="eva:list-fill" width={24} sx={{ mr: 1 }} /> Curriculum Items
</Typography>
<MegaMenuDesktopVertical data={data} />
</Card>
</Grid>
<Grid md={9} item>
<Grid container spacing={2} rowSpacing={2}>
<Grid md={12} item>
<Card>
<CardHeader title="Curriculum Item 01" />
<CardContent sx={{ height: 200 }}>
<Scrollbar>
Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi.
Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam.
Vestibulum eu odio. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras
ultricies mi eu turpis hendrerit fringilla. Phasellus consectetuer vestibulum
elit. Phasellus magna. Nullam tincidunt adipiscing enim. Vestibulum volutpat
pretium libero. Nullam quis ante.
</Scrollbar>
</CardContent>
</Card>
</Grid>
<Grid md={12} item>
<Card>
<CardHeader title="Curriculum item 01 work space" />
<CardContent>
<Editor
simple
id="simple-editor"
value={quillSimple}
onChange={(value) => setQuillSimple(value)}
/>
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>
</Grid>
</Container>
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/feedback/index.tsx 0 → 100644
View file @ a2d51d2a
import { Container, Typography } from '@mui/material';
import Head from 'next/head';
import { useSettingsContext } from '../../../../components/settings';
import DashboardLayout from '../../../../layouts/dashboard';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
FeedbackHomePage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function FeedbackHomePage() {
const { themeStretch } = useSettingsContext();
return (
<>
<Head>
<title> Feedback Home | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Feedback"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Feedback', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
</Container>
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/leadBoard/index.tsx 0 → 100644
View file @ a2d51d2a
import { Container, Typography } from '@mui/material';
import Head from 'next/head';
import { useSettingsContext } from '../../../../components/settings';
import DashboardLayout from '../../../../layouts/dashboard';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
LeadBoardHomePage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function LeadBoardHomePage() {
const { themeStretch } = useSettingsContext();
return (
<>
<Head>
<title> Lead Board Home | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Lead Board"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Lead Board', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
</Container>
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/questionAndAnswers/index.tsx 0 → 100644
View file @ a2d51d2a
import { Container } from '@mui/material';
import Head from 'next/head';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
import { useSettingsContext } from '../../../../components/settings';
import DashboardLayout from '../../../../layouts/dashboard';
QuestionAndAnswersHomePage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function QuestionAndAnswersHomePage() {
const { themeStretch } = useSettingsContext();
return (
<>
<Head>
<title> Questions & Answers Home | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Questions & Answers"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Questions & Answers', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
</Container>
</>
);
}
Project/Frontend/Web_App/src/routes/paths.ts
View file @ a2d51d2a
......@@ -95,6 +95,14 @@ export const PATH_DASHBOARD = {
view: (title: string) => path(ROOTS_DASHBOARD, `/blog/post/${title}`),
demoView: path(ROOTS_DASHBOARD, '/blog/post/apply-these-7-secret-techniques-to-improve-event'),
},
learningModule: {
root: path(ROOTS_DASHBOARD, '/learning-module'),
curriculumHome: path(ROOTS_DASHBOARD, '/learning-module/curriculum'),
curriculumView: path(ROOTS_DASHBOARD, '/learning-module/curriculum/process'),
questionAndAnswersHome: path(ROOTS_DASHBOARD, '/learning-module/questionAndAnswers'),
leadBoardHome: path(ROOTS_DASHBOARD, '/learning-module/leadBoard'),
feedbackHome: path(ROOTS_DASHBOARD, '/learning-module/feedback'),
},
};
export const PATH_DOCS = {
......
Project/Frontend/Web_App/src/sections/@dashboard/learning-module/curriculum/CarouselAnimation.tsx 0 → 100644
View file @ a2d51d2a
import { m } from 'framer-motion';
import { useRef, useState } from 'react';
// @mui
import { Box, Button, Card, CardContent, Paper, Typography } from '@mui/material';
import { alpha, useTheme } from '@mui/material/styles';
// utils
import { bgGradient } from '../../../../utils/cssStyles';
// components
import Link from 'next/link';
import { PATH_DASHBOARD } from 'src/routes/paths';
import { MotionContainer, varFade } from '../../../../components/animate';
import Carousel, { CarouselArrowIndex } from '../../../../components/carousel';
import Image from '../../../../components/image';
// ----------------------------------------------------------------------
type Props = {
data: {
id: string;
title: string;
image: string;
description: string;
}[];
};
export default function CarouselAnimation({ data }: Props) {
const theme = useTheme();
const carouselRef = useRef<Carousel | null>(null);
const [currentIndex, setCurrentIndex] = useState(theme.direction === 'rtl' ? data.length - 1 : 0);
const carouselSettings = {
speed: 800,
dots: false,
arrows: false,
autoplay: true,
slidesToShow: 1,
slidesToScroll: 1,
rtl: Boolean(theme.direction === 'rtl'),
beforeChange: (current: number, next: number) => setCurrentIndex(next),
};
const handlePrev = () => {
carouselRef.current?.slickPrev();
};
const handleNext = () => {
carouselRef.current?.slickNext();
};
return (
<Card>
<Carousel ref={carouselRef} {...carouselSettings}>
{data.map((item, index) => (
<CarouselItem key={item.id} item={item} isActive={index === currentIndex} />
))}
</Carousel>
<CarouselArrowIndex
index={currentIndex}
total={data.length}
onNext={handleNext}
onPrevious={handlePrev}
/>
</Card>
);
}
// ----------------------------------------------------------------------
type CarouselItemProps = {
item: {
title: string;
description: string;
image: string;
};
isActive: boolean;
};
function CarouselItem({ item, isActive }: CarouselItemProps) {
const theme = useTheme();
const { image, title } = item;
return (
<Paper sx={{ position: 'relative', height: 300 }}>
<Image alt={title} src={image} ratio="21/9" />
<Box
sx={{
top: 0,
width: 1,
height: 1,
position: 'absolute',
...bgGradient({
direction: 'to top',
startColor: `${theme.palette.grey[900]} 0%`,
endColor: `${alpha(theme.palette.grey[900], 0)} 100%`,
}),
}}
/>
<CardContent
component={MotionContainer}
animate={isActive}
action
sx={{
bottom: 0,
width: 1,
maxWidth: 720,
textAlign: 'left',
position: 'absolute',
color: 'common.white',
}}
>
<m.div variants={varFade().inRight}>
<Typography variant="h3" gutterBottom>
{item.title}
</Typography>
</m.div>
<m.div variants={varFade().inRight}>
<Typography variant="body2" noWrap gutterBottom>
{item.description}
</Typography>
</m.div>
<m.div variants={varFade().inRight}>
<Link href={PATH_DASHBOARD.learningModule.curriculumView}>
<Button variant="contained" sx={{ mt: 3 }}>
View More
</Button>
</Link>
</m.div>
</CardContent>
</Paper>
);
}
Project/Frontend/Web_App/src/sections/@dashboard/learning-module/curriculum/CarouselCenterMode.tsx 0 → 100644
View file @ a2d51d2a
import { useRef } from 'react';
// @mui
import { alpha, useTheme } from '@mui/material/styles';
import { Box, Paper, Link, CardContent } from '@mui/material';
// utils
import { bgGradient } from '../../../../utils/cssStyles';
// components
import Image from '../../../../components/image';
import Iconify from '../../../../components/iconify';
import TextMaxLine from '../../../../components/text-max-line';
import Carousel, { CarouselArrows } from '../../../../components/carousel';
import { PATH_DASHBOARD } from 'src/routes/paths';
// ----------------------------------------------------------------------
type Props = {
data: {
id: string;
title: string;
image: string;
description: string;
}[];
};
export default function CarouselCenterMode({ data }: Props) {
const carouselRef = useRef<Carousel | null>(null);
const theme = useTheme();
const carouselSettings = {
slidesToShow: 3,
centerMode: true,
centerPadding: '60px',
rtl: Boolean(theme.direction === 'rtl'),
responsive: [
{
breakpoint: 1024,
settings: { slidesToShow: 2 },
},
{
breakpoint: 600,
settings: { slidesToShow: 2 },
},
{
breakpoint: 480,
settings: { slidesToShow: 1, centerPadding: '0' },
},
],
};
const handlePrev = () => {
carouselRef.current?.slickPrev();
};
const handleNext = () => {
carouselRef.current?.slickNext();
};
return (
<Box
sx={{
overflow: 'hidden',
position: 'relative',
}}
>
<CarouselArrows
filled
icon="noto:rightwards-hand"
onNext={handleNext}
onPrevious={handlePrev}
>
<Carousel ref={carouselRef} {...carouselSettings}>
{data.map((item) => (
<Box key={item.id} sx={{ px: 1 }}>
<CarouselItem item={item} />
</Box>
))}
</Carousel>
</CarouselArrows>
</Box>
);
}
// ----------------------------------------------------------------------
type CarouselItemProps = {
title: string;
description: string;
image: string;
};
function CarouselItem({ item }: { item: CarouselItemProps }) {
const theme = useTheme();
const { image, title } = item;
return (
<Paper
sx={{
borderRadius: 2,
overflow: 'hidden',
position: 'relative'
}}
>
<Image alt={title} src={image} ratio="3/4" />
<CardContent
sx={{
bottom: 0,
zIndex: 9,
width: '100%',
textAlign: 'left',
position: 'absolute',
color: 'common.white',
...bgGradient({
direction: 'to top',
startColor: `${theme.palette.grey[900]} 25%`,
endColor: `${alpha(theme.palette.grey[900], 0)} 100%`,
}),
}}
>
<TextMaxLine variant="h4" paragraph>
{title}
</TextMaxLine>
<Link
color="inherit"
variant="overline"
sx={{
opacity: 0.72,
alignItems: 'center',
display: 'inline-flex',
transition: (theme) => theme.transitions.create('opacity'),
'&:hover': { opacity: 1 },
}}
href={PATH_DASHBOARD.learningModule.curriculumView}
>
learn More
<Iconify icon="eva:arrow-forward-fill" width={16} sx={{ ml: 1 }} />
</Link>
</CardContent>
</Paper>
);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment