Merge branch 'main' of https://github.com/mtech-31-quemistry/quemistr…

…y_client_web

app/(main)/classes/page.tsx

@@ -0,0 +1,103 @@
+/* eslint-disable @next/next/no-img-element */
+'use client';
+import { Button } from 'primereact/button';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { LayoutContext } from '../../../layout/context/layoutcontext';
+import { ChartData, ChartOptions } from 'chart.js';
+
+const Classes = () => {
+
+    const { layoutConfig } = useContext(LayoutContext);
+
+    const applyLightTheme = () => {
+        const lineOptions: ChartOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#495057'
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: '#495057'
+                    },
+                    grid: {
+                        color: '#ebedef'
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: '#495057'
+                    },
+                    grid: {
+                        color: '#ebedef'
+                    }
+                }
+            }
+        };
+
+        setLineOptions(lineOptions);
+    };
+
+    const applyDarkTheme = () => {
+        const lineOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#ebedef'
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: '#ebedef'
+                    },
+                    grid: {
+                        color: 'rgba(160, 167, 181, .3)'
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: '#ebedef'
+                    },
+                    grid: {
+                        color: 'rgba(160, 167, 181, .3)'
+                    }
+                }
+            }
+        };
+
+        setLineOptions(lineOptions);
+    };
+
+    // useEffect(() => {
+    //     ProductService.getProductsSmall().then((data) => setProducts(data));
+    // }, []);
+
+    useEffect(() => {
+        if (layoutConfig.colorScheme === 'light') {
+            applyLightTheme();
+        } else {
+            applyDarkTheme();
+        }
+    }, [layoutConfig.colorScheme]);
+
+    return (
+        <div className="grid">
+            <div className="col-12 xl:col-6">
+                <div className="card">
+                    <Button label="New" icon="pi pi-plus" onClick={() => {
+                        // API Call
+                    }}
+                    />
+                    <h5>Classes</h5>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Classes;

layout/AppMenu.tsx

@@ -20,8 +20,10 @@ const AppMenu = () => {
         },
         {
             label: 'Manage',
-            items: [{ label: 'Questions', icon: 'pi pi-fw pi-tag', to: '/questions/searchlist' },
-                    { label: 'Topics', icon: 'pi pi-fw pi-tag', to: '/questions/topics' }]
+            items: [{ label: 'Questions', icon: 'pi pi-fw pi-question-circle', to: '/questions/searchlist' },
+                { label: 'Topics', icon: 'pi pi-fw pi-tags', to: '/questions/topics' },
+                { label: 'Classes', icon: 'pi pi-fw pi-sitemap', to: '/classes' },
+            ]
         },
 /*        {
             label: 'UI Components',
@@ -189,7 +191,7 @@ const AppMenu = () => {
                 </ul>
             </MenuProvider>
         </Suspense>
-       
+
     );
 };