Quill + admin alert frontend

backend/server.ts

@@ -1,14 +1,9 @@
 import dotenv from 'dotenv';
 import app from './app';
-import { clerkMiddleware } from '@clerk/express';
 
 dotenv.config();
 const PORT = 8000;
 
-//clerk middleware
-//TODO: check the location (docs says in index.ts but it feels incorrect)
-app.use(clerkMiddleware());
-
 app.post('/placeholder');
 app.listen(PORT, () => {
   console.log(`Server running on port ${PORT}`);

frontend/package.json

@@ -19,6 +19,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-icons": "^5.5.0",
+    "react-quill-new": "^3.6.0",
     "react-router-dom": "^7.9.3"
   },
   "devDependencies": {
@@ -30,7 +31,7 @@
     "@vitejs/plugin-react": "^5.0.3",
     "autoprefixer": "^10.4.21",
     "cross-env": "^10.1.0",
-    "daisyui": "^5.4.3",
+    "daisyui": "^5.5.4",
     "eslint": "^9.36.0",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",

frontend/src/components/QuillEditor.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+import Quill from 'quill';
+import 'quill/dist/quill.snow.css';
+
+const QuillEditor = () => {
+  const editorWrapperRef = useRef<HTMLDivElement>(null);
+  const didInit = useRef(false);
+
+  useEffect(() => {
+    if (didInit.current) return;
+    didInit.current = true;
+
+    if (!editorWrapperRef.current) return;
+
+    // Create Quill
+    new Quill(editorWrapperRef.current, {
+      modules: {
+        toolbar: true,
+      },
+      theme: 'snow',
+    });
+  }, []);
+
+  return (
+    <div className='bg-white border border-[#717171] rounded-[10px] h-[270px] flex flex-col'>
+      <div ref={editorWrapperRef} className='flex-1 py-4 px-8 overflow-y-auto rounded-[10px]' />
+    </div>
+  );
+};
+
+export default QuillEditor;

frontend/src/index.css

@@ -50,3 +50,34 @@ body {
 .animate-fadeIn {
   animation: fadeIn 0.2s ease-out;
 }
+
+.ql-toolbar.ql-snow {
+  border-bottom: 1px !important;
+  border-top: none !important;
+  border-right: none !important;
+  border-left: none !important;
+  border-color: gray !important;
+}
+
+.ql-container.ql-snow {
+  border: none !important;
+  height: 100% !important;
+  display: flex !important;
+}
+
+.ql-container {
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.ql-editor {
+  flex: 1 1 auto !important;
+  overflow-y: auto !important;
+  padding: 0 !important;
+  min-height: 0 !important;
+}
+
+.ql-tooltip {
+  z-index: 9999 !important;
+}

frontend/src/main.tsx

@@ -13,7 +13,11 @@ if (!PUBLISHABLE_KEY) {
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
+    <ClerkProvider
+      publishableKey={PUBLISHABLE_KEY}
+      signInUrl='/login/sign-in'
+      signUpUrl='/org_signup'
+    >
       <BrowserRouter>
         <App />
       </BrowserRouter>

frontend/src/pages/Admin/AlertsPage/Alerts.tsx

@@ -1,11 +1,79 @@
+import {
+  useState,
+  type JSXElementConstructor,
+  type ReactElement,
+  type ReactNode,
+  type ReactPortal,
+} from 'react';
 import AdminSidebar from '../../../components/AdminSidebar';
 
 const AdminAlerts = () => {
+  const alerts: any[] = [
+    {
+      title: 'Title',
+      content: 'content aspodfiejpaosdifjepoijdfpoeis',
+      date: new Date('2024-06-01T10:00:00Z'),
+      tags: ['Tag1', 'Tag2'],
+    },
+    {
+      title: 'Title',
+      content: 'content aspodfiejpaosdifjepoijdfpoeis',
+      date: new Date('2024-06-01T10:00:00Z'),
+      tags: ['Tag3'],
+    },
+    {
+      title: 'Title',
+      content: 'content aspodfiejpaosdifjepoijdfpoeis',
+      date: new Date('2024-06-01T10:00:00Z'),
+      tags: [],
+    },
+  ]; // TODO: Fetch alerts from backend
+
   return (
     <div className='flex min-h-screen bg-gray-50'>
       <AdminSidebar />
-      <div className='flex-1 p-8'>
-        <h1 className='text-3xl font-bold text-gray-800 mb-6'>Alerts</h1>
+      <div className='flex-1 p-8 space-y-4 '>
+        <div className='flex w-full items-center justify-between'>
+          <h1 className='text-3xl font-bold text-gray-800'>Alerts</h1>
+          <a
+            className='flex items-center justify-center w-[164px] h-[52px] rounded-[10px] bg-[#D54242] text-white hover:bg-[#b53a3a] transition disabled:bg-gray-400 disabled:cursor-not-allowed'
+            href='/admin/alerts/create-alert'
+          >
+            Create New
+          </a>
+        </div>
+
+        <div className='flex flex-col min-h-screen w-full bg-white rounded-[15px] shadow-lg shadow-x1/15 shadow-[#84848226]'>
+          {alerts.map((alert, index) => {
+            return (
+              <a
+                key={index}
+                className='w-full items-center px-5 hover:bg-[#EBF3FF] text-black hover:text-[#194B90] first:rounded-t-[15px]'
+              >
+                <div className='p-5 border-b border-[#848482]'>
+                  <div className='flex justify-between items-center'>
+                    <div className='flex items-center space-x-5'>
+                      <p className='font-semibold text-4'>{alert.title}</p>
+                      <div className='flex space-x-2  '>
+                        {alert.tags.map((tag: string) => {
+                          return (
+                            <div className='bg-[#D9D9D9] h-5 rounded-[5px] px-4 py-[0.5px] text-[12px] justify-center text-center'>
+                              {tag.toLowerCase()}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                    <p className='text-gray-400 mt-2 text-sm text-[16px]'>
+                      {alert.date.toDateString()}
+                    </p>
+                  </div>
+                  <p className='mt-2'>{alert.content}</p>
+                </div>
+              </a>
+            );
+          })}
+        </div>
       </div>
     </div>
   );