Frontend tailwind

event_ticketing/package.json

@@ -36,5 +36,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1"
   }
 }

event_ticketing/src/AdminEvents.js

@@ -0,0 +1,142 @@
+// Code for the AdminEvents component (for the admin dashboard)
+import React, { useState } from 'react';
+
+// Example data for events (you can replace this with actual data from an API or database)
+const eventsData = [
+    {
+      id: 1,
+      organizer: 'Organizer A',
+      name: 'Event 1',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      location: 'Location A',
+      ageRestriction: '18+',
+      capacity: 100,
+      type: 'Music Concert',
+      status: 'pending', // status can be 'pending', 'approved', or 'rejected'
+    },
+    {
+      id: 2,
+      organizer: 'Organizer B',
+      name: 'Event 2',
+      description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      location: 'Location B',
+      ageRestriction: '21+',
+      capacity: 50,
+      type: 'Art Exhibition',
+      status: 'pending',
+    },
+    {
+      id: 3,
+      organizer: 'Organizer C',
+      name: 'Event 3',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      location: 'Location C',
+      ageRestriction: '16+',
+      capacity: 80,
+      type: 'Dance Party',
+      status: 'approved',
+    },
+    {
+      id: 4,
+      organizer: 'Organizer D',
+      name: 'Event 4',
+      description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      location: 'Location D',
+      ageRestriction: '18+',
+      capacity: 120,
+      type: 'Conference',
+      status: 'rejected',
+    },
+    {
+      id: 5,
+      organizer: 'Organizer E',
+      name: 'Event 5',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      location: 'Location E',
+      ageRestriction: '19+',
+      capacity: 60,
+      type: 'Exhibition',
+      status: 'pending',
+    },
+    {
+      id: 6,
+      organizer: 'Organizer F',
+      name: 'Event 6',
+      description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      location: 'Location F',
+      ageRestriction: '18+',
+      capacity: 150,
+      type: 'Workshop',
+      status: 'approved',
+    },
+  ];
+
+  const AdminEvents = () => {
+    const [events, setEvents] = useState(eventsData);
+
+    const handleApprove = (eventId) => {
+      // Update the status of the event to 'approved'
+      const updatedEvents = events.map((event) =>
+        event.id === eventId ? { ...event, status: 'approved' } : event
+      );
+      setEvents(updatedEvents);
+    };
+
+    const handleReject = (eventId) => {
+      // Update the status of the event to 'rejected'
+      const updatedEvents = events.map((event) =>
+        event.id === eventId ? { ...event, status: 'rejected' } : event
+      );
+      setEvents(updatedEvents);
+    };
+
+    const handleReadMore = (eventId) => {
+      const updatedEvents = events.map((event) =>
+        event.id === eventId ? { ...event, showFullDescription: true } : event
+      );
+      setEvents(updatedEvents);
+    };
+
+    return (
+      <div className="p-4 flex flex-wrap">
+        <h2 className="text-2xl font-semibold mb-4 w-full">Manage Events</h2>
+        {events.map((event) => (
+          <div key={event.id} className="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 p-4">
+            <div className="bg-white rounded-lg shadow-md p-4">
+              <strong>Event ID:</strong> {event.id}<br />
+              <strong>Organizer:</strong> {event.organizer}<br />
+              <strong>Name:</strong> {event.name}<br />
+              {event.showFullDescription ? (
+                <div>
+                  <strong>Description:</strong> {event.description}<br />
+                </div>
+              ) : (
+                <div>
+                  <strong>Description:</strong> {event.description.substring(0, 60)}...
+                  <button
+                    className="text-blue-500 ml-2"
+                    onClick={() => handleReadMore(event.id)}
+                  >
+                    Read More
+                  </button>
+                </div>
+              )}
+              <strong>Location:</strong> {event.location}<br />
+              <strong>Age Restriction:</strong> {event.ageRestriction}<br />
+              <strong>Capacity:</strong> {event.capacity}<br />
+              <strong>Type:</strong> {event.type}<br />
+              <strong>Status:</strong> {event.status}
+              {event.status === 'pending' && (
+                <div className="flex justify-between mt-4">
+                  <button className="bg-green-500 text-white px-4 py-2 rounded-md shadow-md hover:bg-green-600" onClick={() => handleApprove(event.id)}>Approve</button>
+                  <button className="bg-red-500 text-white px-4 py-2 rounded-md shadow-md hover:bg-red-600" onClick={() => handleReject(event.id)}>Reject</button>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  export default AdminEvents;

event_ticketing/src/AdminLogin.js

@@ -0,0 +1,136 @@
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const AdminLoginWrapper = styled.div`
+text-align: center;
+padding: 50px 20px;
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+
+`;
+
+const AdminLoginForm = styled.form`
+  max-width: 400px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`;
+
+const FormGroup = styled.div`
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+`;
+
+const Label = styled.label`
+  flex: 0 0 30%;
+  text-align: right;
+  margin-right: 10px;
+  font-weight: bold;
+  color: #333;
+`;
+
+const Input = styled.input`
+  flex: 0 0 70%;
+  padding: 12px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  transition: border-color 0.3s ease;
+
+  &:focus {
+    border-color: #007bff;
+    outline: none;
+  }
+`;
+
+const AdminLoginButton = styled.button`
+  width: 100%;
+  padding: 12px;
+  font-size: 16px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+`;
+
+const BackToLoginLink = styled(Link)`
+  display: block;
+  margin-top: 20px;
+  color: #007bff;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+function AdminLogin() {
+    const emailRef = useRef();
+    const passwordRef = useRef();
+
+    const handleAdminLogin = (e) => {
+      e.preventDefault();
+      // Add your admin login logic here
+    };
+
+    return (
+      <div className="text-center py-20 px-4 sm:px-6 lg:px-8">
+        <header>
+          <h1 className="text-4xl font-bold mb-8">Admin Login</h1>
+        </header>
+        <main>
+          <form onSubmit={handleAdminLogin} className="max-w-md mx-auto bg-gray-50 rounded-lg shadow-2xl p-8">
+            <div className="mb-4">
+              <label htmlFor="email" className="block text-left text-tropical-blue font-bold mb-2">Email:</label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                placeholder="Enter your email"
+                className="w-full px-4 py-3 text-base border border-solid border-gray-300 rounded transition duration-300 focus:outline-none focus:border-tropical-blue"
+                ref={emailRef}
+                required
+              />
+            </div>
+            <div className="mb-6">
+              <label htmlFor="password" className="block text-left text-tropical-blue font-bold mb-2">Password:</label>
+              <input
+                type="password"
+                id="password"
+                name="password"
+                placeholder="Enter your password"
+                className="w-full px-4 py-3 text-base border border-solid border-gray-300 rounded transition duration-300 focus:outline-none focus:border-tropical-blue"
+                ref={passwordRef}
+                required
+              />
+            </div>
+            <Link to="/admin-events">
+              <button type="button" className="w-full px-4 py-3 text-base bg-tropical-blue-500 text-white rounded cursor-pointer transition duration-300 hover:bg-blue-600">
+                Login
+              </button>
+            </Link>
+            <div className="mt-4">
+              <Link to="/login" className="text-tropical-blue-500">Back to Login</Link>
+            </div>
+            <div className="mt-2">
+              <Link to="/admin-signup" className="text-tropical-blue-500">Signup-admin</Link>
+            </div>
+          </form>
+        </main>
+      </div>
+    );
+  }
+
+export default AdminLogin;