hey-pharmacist-ecommerce 1.1.12 → 1.1.13

package/src/screens/OrdersScreen.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { CalendarDays, ChevronLeft, ChevronRight, CreditCard, Filter, Package, Sparkles } from 'lucide-react';
+import React, { useMemo, useState } from 'react';
+import { motion } from 'framer-motion';
+import { ChevronLeft, ChevronRight, CreditCard, Filter, Package } from 'lucide-react';
 import { OrderCard } from '@/components/OrderCard';
 import { OrderCardSkeleton } from '@/components/ui/Skeleton';
 import { EmptyState } from '@/components/EmptyState';
@@ -30,9 +30,6 @@ export function OrdersScreen() {
     selectedFilter,
     selectedPaymentFilter
   );
-  const [isOverflowOpen, setIsOverflowOpen] = useState(false);
-  const [filterSearchTerm, setFilterSearchTerm] = useState('');
-  const overflowMenuRef = useRef<HTMLDivElement | null>(null);
 
   const filteredOrders = useMemo(() => {
     return orders.filter((order) => {
@@ -50,150 +47,96 @@ export function OrdersScreen() {
   const hasOrders = filteredOrders.length > 0;
   const MAX_VISIBLE_FILTERS = 4;
 
-  // Removed local overflow/search logic in favor of reusable FilterChips
-
-  useEffect(() => {
-    if (!isOverflowOpen) {
-      setFilterSearchTerm('');
-    }
-  }, [isOverflowOpen]);
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (overflowMenuRef.current && !overflowMenuRef.current.contains(event.target as Node)) {
-        setIsOverflowOpen(false);
-      }
-    }
-
-    if (isOverflowOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOverflowOpen]);
-
   return (
-    <div className="min-h-screen  bg-slate-50">
-      <section className="relative  overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white mb-8">
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" />
-        <div className="relative container mx-auto px-4 py-16">
-          <motion.div
-            initial={{ opacity: 0, y: 24 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="space-y-6"
-          >
-            <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur">
-              <CalendarDays className="h-4 w-4" />
-              Order history
-            </span>
-            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-              <div className="space-y-4">
-                <h1 className="text-4xl font-bold md:text-5xl">All of your pharmacy orders</h1>
-                <p className="max-w-2xl text-white/80 md:text-lg">
-                  Access receipts, shipping statuses, and reorder suggestions in one organized
-                  timeline curated by our pharmacists.
-                </p>
-              </div>
-              <div className="rounded-3xl bg-white/15 p-6 backdrop-blur">
-                <p className="text-sm font-semibold uppercase tracking-[0.35em] text-white/70">
-                  Quick tip
-                </p>
-                <p className="mt-3 text-sm text-white/80">
-                  Use filters to review previous prescriptions, reorder favorites, or download
-                  invoices for insurance claims.
-                </p>
-              </div>
-            </div>
-          </motion.div>
-        </div>
-      </section>
-
-      <div className="relative -mt-16 pb-16 container mx-auto px-4">
-        <div className="container mx-auto px-4">
-          <motion.div
-            initial={{ opacity: 0, y: 24 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50"
-          >
-            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-              <div className="flex items-center gap-3 text-sm text-slate-500">
-                <Sparkles className="h-4 w-4 text-primary-500" />
-                <span>Explore your complete order archive with pharmacist notes.</span>
-              </div>
-              <div className="flex flex-col gap-4 md:items-end">
-                <FilterChips
-                  label="Status filters"
-                  icon={Filter}
-                  filters={STATUS_FILTERS}
-                  selected={selectedFilter}
-                  onSelect={(value) => {
-                    setSelectedFilter(value as any);
-                    setPage(1);
-                  }}
-                  maxVisible={MAX_VISIBLE_FILTERS}
-                  variant="primary"
-                />
-
-                <FilterChips
-                  label="Payment status"
-                  icon={CreditCard}
-                  filters={PAYMENT_FILTERS}
-                  selected={selectedPaymentFilter}
-                  onSelect={(value) => {
-                    setSelectedPaymentFilter(value as any);
-                    setPage(1);
-                  }}
-                  maxVisible={MAX_VISIBLE_FILTERS}
-                  variant="primary"
-                />
-              </div>
-            </div>
-
-            <div className="mt-6 space-y-4">
-              {isLoading ? (
-                Array.from({ length: 3 }).map((_, index) => <OrderCardSkeleton key={index} />)
-              ) : hasOrders ? (
-                filteredOrders.map((order) => <OrderCard key={order.id} order={order} />)
-              ) : (
-                <EmptyState
-                  icon={Package}
-                  title="No orders found for these filters"
-                  description="Adjust the status or payment filters, or browse the shop for new essentials."
-                  actionLabel="Shop products"
-                  onAction={() => router.push(buildPath('/shop'))}
-                />
-              )}
-            </div>
-
-            {!isLoading && pagination.totalPages > 1 && hasOrders && (
-              <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
-                <Button
-                  variant="outline"
-                  onClick={() => setPage((current) => Math.max(1, current - 1))}
-                  disabled={page === 1}
-                >
-                  <ChevronLeft className="h-5 w-5" />
-                  Previous
-                </Button>
-                <span className="text-sm font-semibold text-slate-600">
-                  Page {page} of {pagination.totalPages}
-                </span>
-                <Button
-                  variant="outline"
-                  onClick={() =>
-                    setPage((current) => Math.min(pagination.totalPages, current + 1))
-                  }
-                  disabled={page === pagination.totalPages}
-                >
-                  Next
-                  <ChevronRight className="h-5 w-5" />
-                </Button>
-              </div>
+    <div className="min-h-screen bg-white">
+      <div className="container mx-auto px-4 py-8 max-w-6xl">
+        <motion.div
+          initial={{ opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="space-y-6"
+        >
+          <div className="mb-6">
+            <h1 className="text-2xl font-bold text-slate-900">Orders</h1>
+            <p className="text-sm text-gray-500 mt-1">
+              {filteredOrders.length} {filteredOrders.length === 1 ? 'order' : 'orders'}
+            </p>
+          </div>
+
+          {/* Filters */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <FilterChips
+              label="Order Status"
+              icon={Filter}
+              filters={STATUS_FILTERS}
+              selected={selectedFilter}
+              onSelect={(value) => {
+                setSelectedFilter(value as any);
+                setPage(1);
+              }}
+              maxVisible={MAX_VISIBLE_FILTERS}
+              variant="primary"
+            />
+
+            <FilterChips
+              label="Payment Status"
+              icon={CreditCard}
+              filters={PAYMENT_FILTERS}
+              selected={selectedPaymentFilter}
+              onSelect={(value) => {
+                setSelectedPaymentFilter(value as any);
+                setPage(1);
+              }}
+              maxVisible={MAX_VISIBLE_FILTERS}
+              variant="primary"
+            />
+          </div>
+
+          {/* Orders List */}
+          <div className="space-y-4">
+            {isLoading ? (
+              Array.from({ length: 3 }).map((_, index) => <OrderCardSkeleton key={index} />)
+            ) : hasOrders ? (
+              filteredOrders.map((order) => <OrderCard key={order.id} order={order} />)
+            ) : (
+              <EmptyState
+                icon={Package}
+                title="No orders found for these filters"
+                description="Adjust the status or payment filters, or browse the shop for new essentials."
+                actionLabel="Shop products"
+                onAction={() => router.push(buildPath('/shop'))}
+              />
             )}
-          </motion.div>
-        </div>
+          </div>
+
+          {/* Pagination */}
+          {!isLoading && pagination.totalPages > 1 && hasOrders && (
+            <div className="mt-8 flex flex-wrap items-center justify-center gap-4 pt-6 border-t border-gray-200">
+              <Button
+                variant="outline"
+                onClick={() => setPage((current) => Math.max(1, current - 1))}
+                disabled={page === 1}
+                className="rounded-full border-2 border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <ChevronLeft className="h-4 w-4 mr-2" />
+                Previous
+              </Button>
+              <span className="text-sm font-medium text-slate-600">
+                Page {page} of {pagination.totalPages}
+              </span>
+              <Button
+                variant="outline"
+                onClick={() =>
+                  setPage((current) => Math.min(pagination.totalPages, current + 1))
+                }
+                disabled={page === pagination.totalPages}
+                className="rounded-full border-2 border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Next
+                <ChevronRight className="h-4 w-4 ml-2" />
+              </Button>
+            </div>
+          )}
+        </motion.div>
       </div>
     </div>
   );