Convert backends to Firebase and combine projects

RIT-EVENT-MANAGEMENT--main/components/FacultyProfileView.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+
+interface FacultyProfileViewProps {
+  onLogout: () => void;
+  name?: string;
+  dept?: string;
+  email?: string;
+  phone?: string;
+  photo?: string;
+}
+
+const FacultyProfileView: React.FC<FacultyProfileViewProps> = ({ 
+  onLogout, 
+  name = 'Faculty Member', 
+  dept = 'Department', 
+  email = 'faculty@ritchennai.edu.in',
+  phone = 'Not provided',
+  photo
+}) => {
+  return (
+    <div className="min-h-screen bg-gray-50 pt-32 pb-12 px-4 sm:px-6 lg:px-8 font-inter animate-in fade-in duration-500">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          
+          {/* Left Column: Profile Card */}
+          <div className="lg:col-span-1">
+            <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden sticky top-32">
+              <div className="h-32 bg-gradient-to-r from-[#004a99] to-blue-500"></div>
+              <div className="px-6 pb-8">
+                <div className="relative -mt-16 mb-6 flex justify-center">
+                  <div className="w-32 h-32 rounded-full border-4 border-white shadow-lg overflow-hidden bg-gray-100 relative group">
+                    {photo ? (
+                      <img src={photo} alt={name} className="w-full h-full object-cover" />
+                    ) : (
+                      <div className="w-full h-full bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center">
+                        <i className="fas fa-user-tie text-5xl text-slate-400"></i>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <div className="text-center mb-8">
+                  <h2 className="text-2xl font-bold text-gray-900 mb-1 uppercase tracking-tight">{name}</h2>
+                  <p className="text-sm font-medium text-[#004a99] uppercase tracking-wider mb-4">Event Coordinator</p>
+                  <div className="flex items-center justify-center gap-2 text-gray-500 text-sm">
+                    <i className="fas fa-envelope"></i>
+                    <span className="truncate">{email}</span>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 border-t border-gray-100 pt-6 mb-6">
+                  <div className="text-center">
+                    <div className="inline-flex items-center gap-2 px-3 py-1 bg-emerald-50 text-emerald-600 rounded-full text-[10px] font-black uppercase tracking-widest border border-emerald-100">
+                      <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]"></span>
+                      Verified Authority
+                    </div>
+                  </div>
+                </div>
+
+                <button 
+                  onClick={onLogout} 
+                  className="w-full py-2.5 border border-rose-200 text-rose-600 rounded-xl font-medium hover:bg-rose-50 transition-colors text-sm flex items-center justify-center gap-2"
+                >
+                  <i className="fas fa-sign-out-alt"></i> Sign Out
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Column: Details */}
+          <div className="lg:col-span-2 space-y-6">
+            <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+              <div className="px-6 py-5 border-b border-gray-100 flex justify-between items-center">
+                <h3 className="text-lg font-bold text-gray-900">Faculty Information</h3>
+              </div>
+              
+              <div className="p-8">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-y-8 gap-x-12">
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Full Name</label>
+                    <p className="text-base font-semibold text-gray-900 uppercase">{name}</p>
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Email Address</label>
+                    <p className="text-base font-semibold text-gray-900 break-all">{email}</p>
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Phone Number</label>
+                    <p className="text-base font-semibold text-gray-900">{phone}</p>
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Role</label>
+                    <p className="text-base font-semibold text-gray-900 flex items-center gap-2">
+                      <span className="w-2 h-2 rounded-full bg-[#004a99]"></span>
+                      INSTITUTIONAL FACULTY AUTHORITY
+                    </p>
+                  </div>
+                  <div className="md:col-span-2">
+                    <label className="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Department</label>
+                    <p className="text-base font-semibold text-gray-900 uppercase">{dept}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+              <div className="px-6 py-5 border-b border-gray-100">
+                <h3 className="text-lg font-bold text-gray-900">System Permissions</h3>
+              </div>
+              <div className="p-8">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="flex items-start gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
+                    <i className="fas fa-calendar-plus text-lg text-emerald-500 mt-1"></i>
+                    <div>
+                      <p className="text-sm font-bold text-gray-900">Create Events</p>
+                      <p className="text-xs text-gray-500 mt-1">Authorized to curate and list new institutional events.</p>
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
+                    <i className="fas fa-users-cog text-lg text-blue-500 mt-1"></i>
+                    <div>
+                      <p className="text-sm font-bold text-gray-900">Manage Participants</p>
+                      <p className="text-xs text-gray-500 mt-1">Can review registrations and track attendance.</p>
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
+                    <i className="fas fa-chart-line text-lg text-orange-500 mt-1"></i>
+                    <div>
+                      <p className="text-sm font-bold text-gray-900">View Analytics</p>
+                      <p className="text-xs text-gray-500 mt-1">Access to event performance and engagement data.</p>
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
+                    <i className="fas fa-certificate text-lg text-purple-500 mt-1"></i>
+                    <div>
+                      <p className="text-sm font-bold text-gray-900">Issue Certificates</p>
+                      <p className="text-xs text-gray-500 mt-1">Authorized to issue digital certificates to attendees.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FacultyProfileView;