hey-pharmacist-ecommerce 1.0.4 → 1.0.6

package/src/screens/OrdersScreen.tsx

@@ -1,86 +1,198 @@
 'use client';
 
-import React, { useState } from 'react';
-import { motion } from 'framer-motion';
-import { Package, ChevronLeft, ChevronRight } from 'lucide-react';
+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 { OrderCard } from '@/components/OrderCard';
 import { OrderCardSkeleton } from '@/components/ui/Skeleton';
 import { EmptyState } from '@/components/EmptyState';
 import { Button } from '@/components/ui/Button';
 import { useOrders } from '@/hooks/useOrders';
+import { FilterChips } from '@/components/FilterChips';
 import { useRouter } from 'next/navigation';
+import { ManualOrderDTOOrderStatusEnum, PaymentPaymentStatusEnum } from '@/lib/Apis';
+
+const STATUS_FILTERS = ['All', ...Object.values(ManualOrderDTOOrderStatusEnum)];
+const PAYMENT_FILTERS = ['All', ...Object.values(PaymentPaymentStatusEnum)];
+type StatusFilterType = (typeof STATUS_FILTERS)[number];
+type PaymentFilterType = (typeof PAYMENT_FILTERS)[number];
 
 export function OrdersScreen() {
   const router = useRouter();
   const [page, setPage] = useState(1);
-  const { orders, isLoading, pagination } = useOrders(page, 10);
+  const [selectedFilter, setSelectedFilter] = useState<StatusFilterType>('All');
+  const [selectedPaymentFilter, setSelectedPaymentFilter] = useState<PaymentFilterType>('All');
+  const { orders, isLoading, pagination } = useOrders(
+    page,
+    10,
+    selectedFilter,
+    selectedPaymentFilter
+  );
+  const [isOverflowOpen, setIsOverflowOpen] = useState(false);
+  const [filterSearchTerm, setFilterSearchTerm] = useState('');
+  const overflowMenuRef = useRef<HTMLDivElement | null>(null);
+
+  const filteredOrders = useMemo(() => {
+    return orders.filter((order) => {
+      const matchesStatus =
+        selectedFilter === 'All' ||
+        order?.orderStatus?.toLowerCase() === selectedFilter.toLowerCase();
+      const matchesPayment =
+        selectedPaymentFilter === 'All' ||
+        order?.payment?.paymentStatus?.toLowerCase() === selectedPaymentFilter.toLowerCase();
+
+      return matchesStatus && matchesPayment;
+    });
+  }, [orders, selectedFilter, selectedPaymentFilter]);
+
+  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-gray-50 py-12">
-      <div className="container mx-auto px-4 max-w-5xl">
-        {/* Header */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="mb-8"
-        >
-          <h1 className="text-4xl font-bold text-gray-900 mb-2">Order History</h1>
-          <p className="text-gray-600">
-            View and manage all your past orders
-          </p>
-        </motion.div>
-
-        {/* Orders List */}
-        {isLoading ? (
-          <div className="space-y-4">
-            {Array.from({ length: 3 }).map((_, i) => (
-              <OrderCardSkeleton key={i} />
-            ))}
-          </div>
-        ) : orders.length > 0 ? (
-          <>
-            <div className="space-y-4 mb-8">
-              {orders.map((order) => (
-                <OrderCard key={order.id} order={order} />
-              ))}
+    <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>
 
-            {/* Pagination */}
-            {pagination.totalPages > 1 && (
-              <div className="flex justify-center items-center gap-4">
+            <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('/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(page - 1)}
+                  onClick={() => setPage((current) => Math.max(1, current - 1))}
                   disabled={page === 1}
                 >
-                  <ChevronLeft className="w-5 h-5" />
+                  <ChevronLeft className="h-5 w-5" />
                   Previous
                 </Button>
-                <span className="text-gray-700">
+                <span className="text-sm font-semibold text-slate-600">
                   Page {page} of {pagination.totalPages}
                 </span>
                 <Button
                   variant="outline"
-                  onClick={() => setPage(page + 1)}
+                  onClick={() =>
+                    setPage((current) => Math.min(pagination.totalPages, current + 1))
+                  }
                   disabled={page === pagination.totalPages}
                 >
                   Next
-                  <ChevronRight className="w-5 h-5" />
+                  <ChevronRight className="h-5 w-5" />
                 </Button>
               </div>
             )}
-          </>
-        ) : (
-          <EmptyState
-            icon={Package}
-            title="No orders yet"
-            description="Start shopping and your orders will appear here"
-            actionLabel="Start Shopping"
-            onAction={() => router.push('/shop')}
-          />
-        )}
+          </motion.div>
+        </div>
       </div>
     </div>
   );
 }
-