Merge version_4_1782384188447 into main

Merge version_4_1782384188447 into main

src/pages/HomePage/sections/ResultSearch.tsx

@@ -4,33 +4,61 @@ import Button from "@/components/ui/Button";
 import Input from "@/components/ui/Input";
 import Card from "@/components/ui/Card";
 import ScrollReveal from "@/components/ui/ScrollReveal";
+import Spinner from "@/components/ui/Spinner";
 import { Search, GraduationCap, BookOpen, Award } from "lucide-react";
 
 export default function ResultSearch() {
   const [searchQuery, setSearchQuery] = useState("");
   const [hasSearched, setHasSearched] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleSearch = (e: React.FormEvent) => {
     e.preventDefault();
     if (searchQuery.trim().toLowerCase() === "2025-ag-11653") {
-      setHasSearched(true);
+      setIsLoading(true);
+      setHasSearched(false);
+      setTimeout(() => {
+        setIsLoading(false);
+        setHasSearched(true);
+      }, 5000);
     } else if (searchQuery.trim() !== "") {
       alert("Please enter a valid AG No. (e.g., 2025-ag-11653)");
+      setHasSearched(false);
     }
   };
 
+  const semester1 = [
+    { code: "SOC-311", credit: "2(2-0)", marks: "32", grade: "A" },
+    { code: "PY-305", credit: "3(2-1)", marks: "39", grade: "B" },
+    { code: "MATH-408", credit: "3(3-0)", marks: "35", grade: "C" },
+    { code: "ECON-305", credit: "2(2-0)", marks: "31", grade: "B" },
+    { code: "FA-310", credit: "2(2-0)", marks: "18", grade: "D" },
+    { code: "CS-305", credit: "3(2-1)", marks: "39", grade: "B" },
+    { code: "SSH-302", credit: "2(2-0)", marks: "30", grade: "B" },
+  ];
+
+  const semester2 = [
+    { code: "Stat 408", credit: "3(3-0)", marks: "28", grade: "D" },
+    { code: "CS 306", credit: "3(3-0)", marks: "41", grade: "B" },
+    { code: "MATH 404", credit: "3(3-0)", marks: "39", grade: "B" },
+    { code: "IS 401", credit: "2(2-0)", marks: "32", grade: "A" },
+    { code: "ENG 307", credit: "3(3-0)", marks: "42", grade: "B" },
+    { code: "Stat 408", credit: "3(3-0)", marks: "28", grade: "C" },
+    { code: "PHY 305", credit: "3(3-0)", marks: "38", grade: "C" },
+  ];
+
   return (
-    <section className="relative w-full py-24 bg-background" id="lookup" data-webild-section="result-search">
+    <section className="relative w-full bg-background" id="lookup" data-webild-section="result-search">
       <div className="w-content-width mx-auto">
         <ScrollReveal variant="fade">
-          <div className="text-center max-w-2xl mx-auto mb-16">
+          <div className="text-center max-w-content-width mx-auto">
             <h2 className="text-4xl font-bold text-foreground mb-4">Student Results Portal</h2>
             <p className="text-lg text-accent">Enter your AG number to view your complete academic performance.</p>
           </div>
         </ScrollReveal>
 
         <ScrollReveal variant="fade" delay={0.1}>
-          <Card className="max-w-xl mx-auto p-8 mb-16">
+          <Card className="max-w-content-width mx-auto p-8 card border border-primary-cta shadow-lg">
             <form onSubmit={handleSearch} className="flex flex-col sm:flex-row gap-4">
               <div className="flex-1 relative">
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-accent" />
@@ -39,7 +67,7 @@ export default function ResultSearch() {
                   placeholder="Enter AG No. (e.g., 2025-ag-11653)" 
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full pl-10"
+                  className="w-full border-primary-cta/30 focus:border-primary-cta"
                   required
                 />
               </div>
@@ -48,14 +76,21 @@ export default function ResultSearch() {
           </Card>
         </ScrollReveal>
 
-        {hasSearched && (
+        {isLoading && (
+          <div className="flex flex-col items-center justify-center py-12 space-y-4">
+            <Spinner size="lg" className="text-primary-cta" />
+            <p className="text-accent font-medium animate-pulse">Retrieving academic records...</p>
+          </div>
+        )}
+
+        {hasSearched && !isLoading && (
           <ScrollReveal variant="fade" delay={0.2}>
-            <div className="max-w-4xl mx-auto space-y-8">
+            <div className="max-w-content-width mx-auto space-y-8">
               {/* Section 1: Student Info */}
-              <Card className="p-6 sm:p-8 border-l-4 border-primary-cta">
+              <Card className="p-6 sm:p-8 border-l-4 border-primary-cta card shadow-md">
                 <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                   <div className="flex items-center gap-4">
-                    <div className="w-16 h-16 rounded-full bg-background-accent flex items-center justify-center text-primary-cta">
+                    <div className="w-16 h-16 rounded-full bg-primary-cta/10 flex items-center justify-center text-primary-cta">
                       <GraduationCap className="w-8 h-8" />
                     </div>
                     <div>
@@ -71,75 +106,75 @@ export default function ResultSearch() {
               </Card>
 
               <div className="grid md:grid-cols-2 gap-8">
-                {/* Section 2: Spring Semester */}
-                <Card className="p-6 sm:p-8">
+                {/* Section 2: 1st Semester */}
+                <Card className="p-6 sm:p-8 card shadow-md border border-background-accent">
                   <div className="flex items-center gap-3 mb-6 pb-4 border-b border-background-accent/30">
                     <BookOpen className="w-6 h-6 text-primary-cta" />
-                    <h4 className="text-xl font-bold text-foreground">Spring Semester (1st)</h4>
+                    <h4 className="text-xl font-bold text-foreground">1st Semester</h4>
                   </div>
                   
-                  <div className="space-y-3 mb-6">
-                    {[
-                      { code: "SOC-311", cr: "2(2-0)", marks: "32", grade: "A" },
-                      { code: "PY-305", cr: "3(2-1)", marks: "39", grade: "B" },
-                      { code: "MATH-408", cr: "3(3-0)", marks: "35", grade: "C" },
-                      { code: "ECON-305", cr: "2(2-0)", marks: "31", grade: "B" },
-                      { code: "FA-310", cr: "2(2-0)", marks: "18", grade: "D" },
-                      { code: "CS-305", cr: "3(2-1)", marks: "39", grade: "B" },
-                      { code: "SSH-302", cr: "2(2-0)", marks: "30", grade: "B" },
-                    ].map((course, i) => (
-                      <div key={i} className="flex items-center justify-between text-sm">
-                        <div className="flex gap-4 w-1/2">
-                          <span className="font-mono font-medium text-foreground w-20">{course.code}</span>
-                          <span className="text-accent">{course.cr}</span>
-                        </div>
-                        <div className="flex gap-4 w-1/2 justify-end">
-                          <span className="text-accent w-8 text-right">{course.marks}</span>
-                          <span className={`font-bold w-6 text-right ${course.grade === 'A' ? 'text-green-600' : course.grade === 'B' ? 'text-blue-600' : course.grade === 'C' ? 'text-yellow-600' : 'text-red-600'}`}>{course.grade}</span>
-                        </div>
-                      </div>
-                    ))}
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-sm text-left">
+                      <thead className="text-xs text-accent uppercase bg-background-accent/10">
+                        <tr>
+                          <th className="px-4 py-3 rounded-tl">Course</th>
+                          <th className="px-4 py-3">Cr.Hr</th>
+                          <th className="px-4 py-3">Marks</th>
+                          <th className="px-4 py-3 rounded-tr">Grade</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {semester1.map((item, idx) => (
+                          <tr key={idx} className="border-b border-background-accent/10 last:border-0">
+                            <td className="px-4 py-3 font-medium text-foreground">{item.code}</td>
+                            <td className="px-4 py-3 text-accent">{item.credit}</td>
+                            <td className="px-4 py-3 text-accent">{item.marks}</td>
+                            <td className="px-4 py-3 font-bold text-primary-cta">{item.grade}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
                   </div>
-
-                  <div className="pt-4 border-t border-background-accent/30 flex justify-between items-center">
+                  
+                  <div className="mt-6 pt-4 border-t border-background-accent/30 flex justify-between items-center">
                     <span className="font-semibold text-foreground">Semester GPA</span>
-                    <span className="text-2xl font-bold text-foreground">3.00</span>
+                    <span className="text-2xl font-bold text-primary-cta">3.00</span>
                   </div>
                 </Card>
 
-                {/* Section 3: Winter Semester */}
-                <Card className="p-6 sm:p-8">
+                {/* Section 3: 2nd Semester */}
+                <Card className="p-6 sm:p-8 card shadow-md border border-background-accent">
                   <div className="flex items-center gap-3 mb-6 pb-4 border-b border-background-accent/30">
                     <Award className="w-6 h-6 text-primary-cta" />
-                    <h4 className="text-xl font-bold text-foreground">Winter Semester (2nd)</h4>
+                    <h4 className="text-xl font-bold text-foreground">2nd Semester</h4>
                   </div>
                   
-                  <div className="space-y-3 mb-6">
-                    {[
-                      { code: "Stat 408", cr: "3(3-0)", marks: "28", grade: "D" },
-                      { code: "CS 306", cr: "3(3-0)", marks: "41", grade: "B" },
-                      { code: "MATH 404", cr: "3(3-0)", marks: "39", grade: "B" },
-                      { code: "IS 401", cr: "2(2-0)", marks: "32", grade: "A" },
-                      { code: "ENG 307", cr: "3(3-0)", marks: "42", grade: "B" },
-                      { code: "Stat 408", cr: "3(3-0)", marks: "28", grade: "C" },
-                      { code: "PHY 305", cr: "3(3-0)", marks: "38", grade: "C" },
-                    ].map((course, i) => (
-                      <div key={i} className="flex items-center justify-between text-sm">
-                        <div className="flex gap-4 w-1/2">
-                          <span className="font-mono font-medium text-foreground w-20">{course.code}</span>
-                          <span className="text-accent">{course.cr}</span>
-                        </div>
-                        <div className="flex gap-4 w-1/2 justify-end">
-                          <span className="text-accent w-8 text-right">{course.marks}</span>
-                          <span className={`font-bold w-6 text-right ${course.grade === 'A' ? 'text-green-600' : course.grade === 'B' ? 'text-blue-600' : course.grade === 'C' ? 'text-yellow-600' : 'text-red-600'}`}>{course.grade}</span>
-                        </div>
-                      </div>
-                    ))}
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-sm text-left">
+                      <thead className="text-xs text-accent uppercase bg-background-accent/10">
+                        <tr>
+                          <th className="px-4 py-3 rounded-tl">Course</th>
+                          <th className="px-4 py-3">Cr.Hr</th>
+                          <th className="px-4 py-3">Marks</th>
+                          <th className="px-4 py-3 rounded-tr">Grade</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {semester2.map((item, idx) => (
+                          <tr key={idx} className="border-b border-background-accent/10 last:border-0">
+                            <td className="px-4 py-3 font-medium text-foreground">{item.code}</td>
+                            <td className="px-4 py-3 text-accent">{item.credit}</td>
+                            <td className="px-4 py-3 text-accent">{item.marks}</td>
+                            <td className="px-4 py-3 font-bold text-primary-cta">{item.grade}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
                   </div>
-
-                  <div className="pt-4 border-t border-background-accent/30 flex justify-between items-center">
+                  
+                  <div className="mt-6 pt-4 border-t border-background-accent/30 flex justify-between items-center">
                     <span className="font-semibold text-foreground">Semester GPA</span>
-                    <span className="text-2xl font-bold text-foreground">2.95</span>
+                    <span className="text-2xl font-bold text-primary-cta">2.95</span>
                   </div>
                 </Card>
               </div>