updated events tab

apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/index.jsx

@@ -1,3 +1,92 @@
+/*import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import {
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+} from '@chakra-ui/react';
+import DashboardLayout from '@/layouts/DashboardLayout';
+import { useFetch } from '@/hooks/useFetch';
+import { useAlert } from '@/hooks/useAlert';
+import DataDisplay from '@/components/DataDisplay';
+import NewAttributeForm from './new';
+
+const columns = [
+  { field: 'name', headerName: 'Name', width: 200 },
+  {
+    field: 'numberOfParticipantsWithAttributeAssigned',
+    headerName: 'No of Participants Assigned',
+    width: 200,
+  },
+];
+
+export default function Attributes() {
+  const router = useRouter();
+  const { orgId, eventId } = router.query;
+  const showAlert = useAlert();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { loading, get } = useFetch();
+
+  const [attributes, setAttributes] = useState([]);
+
+  useEffect(() => {
+    const fetchAttributes = async () => {
+      const { data, status } = await get(
+        `/core/organizations/${orgId}/events/${eventId}/attributes`,
+      );
+      if (status === 200) {
+        setAttributes(data.attributes || []);
+      } else {
+        showAlert({
+          title: 'Error',
+          description: data.error,
+          status: 'error',
+        });
+      }
+    };
+    fetchAttributes();
+  }, []);
+
+  return (
+    <DashboardLayout
+      pageTitle="Attributes"
+      previousPage={`/organizations/${orgId}/events/${eventId}`}
+      headerButton={
+        <>
+          <Button onClick={onOpen} isLoading={loading}>
+            Add Attribute
+          </Button>
+        </>
+      }
+      debugInfo={JSON.stringify(attributes)}
+    >
+      <DataDisplay
+        loading={loading}
+        columns={columns}
+        rows={attributes}
+        onRowClick={(row) => {
+          router.push(`/${orgId}/events/${eventId}/attributes/${row.id}`);
+        }}
+      />
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Add Attribute</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <NewAttributeForm onClose={onClose} />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </DashboardLayout>
+  );
+}*/
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import {

apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/new/index.jsx

@@ -1,3 +1,62 @@
+/*import { useState } from 'react';
+import { useRouter } from 'next/router';
+import { Button, FormControl, FormLabel, Input } from '@chakra-ui/react';
+import { useAlert } from '@/hooks/useAlert';
+import { useFetch } from '@/hooks/useFetch';
+
+export default function NewAttributeForm({ onClose }) {
+  const { loading, post } = useFetch();
+  const showAlert = useAlert();
+  const router = useRouter();
+  const { orgId, eventId } = router.query;
+
+  const [name, setName] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const { data, status } = await post(
+      `/core/organizations/${orgId}/events/${eventId}/attributes`,
+      {},
+      { name },
+    );
+    if (status === 200) {
+      showAlert({
+        title: 'Success',
+        description: 'Attribute has been added successfully.',
+        status: 'success',
+      });
+      onClose();
+      router.push(`/${orgId}/events/${eventId}/attributes`);
+    } else {
+      showAlert({
+        title: 'Error',
+        description: data.error,
+        status: 'error',
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <FormControl isRequired my={4}>
+        <FormLabel>Name</FormLabel>
+        <Input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} />
+      </FormControl>
+
+      <Button
+        type="submit"
+        width="100%"
+        my="4"
+        isLoading={loading}
+        loadingText="Please Wait"
+        colorScheme="teal"
+      >
+        Add
+      </Button>
+    </form>
+  );
+}
+*/
 import { useState } from 'react';
 import { useRouter } from 'next/router';
 import { Button, FormControl, FormLabel, Input } from '@chakra-ui/react';

apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/index.jsx

@@ -1,3 +1,98 @@
+/*import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import {
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+} from '@chakra-ui/react';
+import DashboardLayout from '@/layouts/DashboardLayout';
+import { useFetch } from '@/hooks/useFetch';
+import { useAlert } from '@/hooks/useAlert';
+import DataDisplay from '@/components/DataDisplay';
+import NewExtraForm from './new'; // Import the form component
+
+const columns = [
+  { field: 'name', headerName: 'Name', width: 200 },
+  {
+    field: 'numberOfParticipantsWithExtrasAssigned',
+    headerName: 'No of Participants Assigned',
+    width: 200,
+  },
+  {
+    field: 'numberOfParticipantsWithExtrasCheckedIn',
+    headerName: 'No of Participants Checked In',
+    width: 200,
+  },
+];
+
+export default function Extras() {
+  const router = useRouter();
+  const { orgId, eventId } = router.query;
+  const showAlert = useAlert();
+  const { isOpen, onOpen, onClose } = useDisclosure(); // Chakra UI hook for modal control
+  const { loading, get } = useFetch();
+
+  const [extras, setExtras] = useState([]);
+
+  useEffect(() => {
+    const fetchExtras = async () => {
+      const { data, status } = await get(`/core/organizations/${orgId}/events/${eventId}/extras`);
+      if (status === 200) {
+        setExtras(data.extras || []);
+      } else {
+        showAlert({
+          title: 'Error',
+          description: data.error,
+          status: 'error',
+        });
+      }
+    };
+    fetchExtras();
+  }, []);
+
+  return (
+    <DashboardLayout
+      pageTitle="Extras"
+      previousPage={`/organizations/${orgId}/events/${eventId}`}
+      headerButton={
+        <>
+          <Button onClick={onOpen} isLoading={loading}>
+            Add Extra
+          </Button>
+        </>
+      }
+      debugInfo={extras}
+    >
+      <DataDisplay
+        loading={loading}
+        columns={columns}
+        rows={extras}
+        onRowClick={(row) => {
+          router.push(`/${orgId}/events/${eventId}/extras/${row.id}`);
+        }}
+      />
+
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Add Extra</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+
+            <NewExtraForm onClose={onClose} />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </DashboardLayout>
+  );
+}
+*/
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import {

apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/new/index.jsx

@@ -1,3 +1,63 @@
+/*import { useState } from 'react';
+import { useRouter } from 'next/router';
+import { Button, FormControl, FormLabel, Input } from '@chakra-ui/react';
+import { useAlert } from '@/hooks/useAlert';
+import { useFetch } from '@/hooks/useFetch';
+
+export default function NewExtraForm({ onClose }) {
+  // Accept onClose to close the modal
+  const { loading, post } = useFetch();
+  const showAlert = useAlert();
+  const router = useRouter();
+  const { orgId, eventId } = router.query;
+
+  const [name, setName] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const { data, status } = await post(
+      `/core/organizations/${orgId}/events/${eventId}/extras`,
+      {},
+      { name },
+    );
+    if (status === 200) {
+      showAlert({
+        title: 'Success',
+        description: 'Extra has been added successfully.',
+        status: 'success',
+      });
+      onClose(); // Close the modal after success
+      router.push(`/${orgId}/events/${eventId}/extras`); // Redirect to extras list
+    } else {
+      showAlert({
+        title: 'Error',
+        description: data.error,
+        status: 'error',
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <FormControl isRequired my={4}>
+        <FormLabel>Name</FormLabel>
+        <Input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} />
+      </FormControl>
+      <Button
+        type="submit"
+        width="100%"
+        my="4"
+        isLoading={loading}
+        loadingText="Please Wait"
+        colorScheme="teal"
+      >
+        Add
+      </Button>
+    </form>
+  );
+}
+
+*/
 import { useState } from 'react';
 import { useRouter } from 'next/router';
 import { Button, FormControl, FormLabel, Input } from '@chakra-ui/react';