// pages/admin/orders.tsx 

import Image from "next/image";
import { useEffect, useState } from "react";
import IndividualOrder from "@components/Admin/IndividualOrder";
import { StatusDD, CategoryDD, PriceDD, DateDD } from "@components/Admin/Dropdown";
import moment from "moment";
import AdminLayout from "../../components/Admin/Layout/AdminLayout";
import OrderTimeline from "@components/Admin/OrderTimeline";
import { useSelector } from "react-redux";
import { RootState } from "store";

OrdersPage.getLayout = function getLayout(page: any) {
 return {page};
};

// avoid typing type never
type FilterStatus = {
 id: "paid" | "fulfilled";
 value?: boolean;
 name?: String;
};
type FilterDate = {
 to?: any;
 from?: any;
};
// --

export default function OrdersPage() {
 const [searchInput, setSearchInput] = useState("");
 const Orders = useSelector((state:RootState)=> state.order.value)
 useEffect(() => {
 setFilteredOrders(Orders)
 }, [Orders])

 const [filteredOrders, setFilteredOrders] = useState(Orders);

 const [toggleStatus, setToggleStatus] = useState(false);
 const [toggleCategory, setToggleCategory] = useState(false);
 const [togglePrice, setTogglePrice] = useState(false);
 const [toggleDate, setToggleDate] = useState(false);

 const [filterStatus, setFilterStatus] = useState();
 const [filterCategory, setFilterCategory] = useState();
 const [filterPrice, setFilterPrice] = useState();
 const [filterDate, setFilterDate] = useState();

 const filter = () => {
 let temp = Orders;
 let search = searchInput.toLowerCase();
 temp = temp.filter((order) => {
 return order.customer.name.toLocaleLowerCase().includes(search);
 });
 if (filterStatus) {
 temp = temp.filter((order) => {
 return order.status[filterStatus.id] === filterStatus.value;
 });
 }
 if (filterPrice) {
 temp = temp.filter((order) => {
 return order.price.price > filterPrice[0] && order.price.price < filterPrice[1];
 });
 }
 if (filterDate) {
 temp = temp.filter((order) => {
 let orderIndex = order.timeline.findIndex(item => item.type === "Order Placed")
 if(!orderIndex) return
 return moment(order.timeline[orderIndex].timeline) > filterDate.from && moment(order.timeline[orderIndex].timeline) < filterDate.to;
 });
 }
 // if(filterCategory){
 // console.log("Aaaa")
 // temp = temp.filter(order => {
 // return order.status[filterCategory?.id] === filterCategory?.value
 // })
 // }

 setFilteredOrders(temp);
 };

 const [currSort, setCurrSort] = useState();
 const [descending, setDescending] = useState(1);
 const sortData = (sortVar: any) => {
 let flag: any;
 if (sortVar == currSort) flag = descending;
 else {
 setDescending(1);
 flag = 1;
 }
 let temp = filteredOrders;
 const compareFn = (a: any, b: any) => {
 if (sortVar === "id" || sortVar === "location") {
 if (a[sortVar] < b[sortVar]) {
 a[sortVar] = String(a[sortVar]);
 b[sortVar] = String(b[sortVar]);

 return flag \* -1;
 }

 if (a[sortVar] > b[sortVar]) {
 a[sortVar] = String(a[sortVar]);
 b[sortVar] = String(b[sortVar]);

 return flag \* 1;
 }
 } else if (sortVar === "name") {
 if (a.customer[sortVar] < b.customer[sortVar]) {
 a.customer[sortVar] = String(a.customer[sortVar]);
 b.customer[sortVar] = String(b.customer[sortVar]);

 return flag \* -1;
 }

 if (a.customer[sortVar] > b.customer[sortVar]) {
 a.customer[sortVar] = String(a.customer[sortVar]);
 b.customer[sortVar] = String(b.customer[sortVar]);

 return flag \* 1;
 }
 } else if (sortVar === "price") {
 if (a.price[sortVar] < b.price[sortVar]) {
 a.price[sortVar] = String(a.price[sortVar]);
 b.price[sortVar] = String(b.price[sortVar]);

 return flag \* -1;
 }

 if (a.price[sortVar] > b.price[sortVar]) {
 a.price[sortVar] = String(a.price[sortVar]);
 b.price[sortVar] = String(b.price[sortVar]);

 return flag \* 1;
 }
 } else if (sortVar === "date") {
 if (a.timeline[3].timeline.getTime() < b.timeline[3].timeline.getTime()) {
 a.timeline[3].timeline = a.timeline[3].timeline;
 b.timeline[3].timeline = b.timeline[3].timeline;

 return flag \* -1;
 }

 if (a.timeline[3].timeline.getTime() > b.timeline[3].timeline.getTime()) {
 a.timeline[3].timeline = a.timeline[3].timeline;
 b.timeline[3].timeline = b.timeline[3].timeline;

 return flag \* 1;
 }
 }

 return 0;
 };

 temp = temp.sort(compareFn);
 setFilteredOrders(temp);
 };

 useEffect(() => {
 filter();
 setToggleStatus(false);
 setToggleDate(false);
 }, [searchInput, filterStatus, filterPrice, filterDate]);

 const [expandedId, setExpandedId] = useState("");
 const tableHeader = [
 {
 id: "id",
 name: "Order",
 width: "w-[121px]",
 },
 {
 id: "date",
 name: "Order Date",
 width: "w-[125px]",
 },
 {
 id: "name",
 name: "Customer",
 width: "w-[249px]",
 },
 {
 id: "",
 name: "Status",
 width: "w-[249px]",
 },
 {
 id: "location",
 name: "Location",
 width: "w-[125px]",
 },
 {
 id: "price",
 name: "Amount (USD)",
 width: "w-[124px]",
 },
 {
 id: "price",
 name: "Amount ($)",
 width: "w-[134px]",
 },
 ];

 return (
 
 
 
 Orders

 
 
 
 setSearchInput(e.target.value)}
 />
 
 
 setToggleStatus((prev) => !prev)}
 className="w-[141px] h-full border-product-gray flex flex-row gap-x-[7px] items-center justify-center">
 Status

 {toggleStatus && }
 
 
 setToggleCategory((prev) => !prev)}
 className="w-[141px] h-full border-product-gray flex flex-row gap-x-[7px] items-center justify-center">
 Category

 {toggleCategory && }
 
 
 setTogglePrice((prev) => !prev)}
 className="w-[141px] h-full border-product-gray flex flex-row gap-x-[7px] items-center justify-center">
 Order Price
 
 setToggleDate((prev) => !prev)}
 className="w-[141px] h-full border-product-gray flex flex-row gap-x-[7px] items-center justify-center">
 Date Within
 
 Export as CSV
 
 
 
 {tableHeader.map((header, index) => (
 {
 setCurrSort(header.id);
 sortData(header.id);
 setDescending((prev) => prev \* -1);
 }}
 key={index}
 className={`flex flex-row items-center gap-x-[6px] h-[43px] ${header.width}`}>
 {header.name}
 {
 
 }
 
 ))}
 
 1 of 230

 
 {filteredOrders.map((order, index) => (
 
 ))}
 

 );
}
/ pages/admin/orders.tsx "next/image"에서 Image를 가져옵니다;"react"에서 { useEffect, useState }를 임포트합니다;"@components/Admin/IndividualOrder"에서 IndividualOrder를 임포트합니다;"@components/Admin/Dropdown"에서 { StatusDD, CategoryDD, PriceDD, DateDD }를 임포트합니다;"moment"에서 moment를 임포트합니다;"../../components/Admin/Layout/AdminLayout"에서 AdminLayout을 임포트합니다;"@components/Admin/OrderTimeline"에서 OrderTimeline을 임포트합니다;"react-redux"에서 { useSelector }를 임포트합니다;"store"에서 { RootState }를 임포트합니다;OrdersPage.getLayout = function getLayout(page: any) { return {page};};// 절대 유형 입력 방지유형 필터 상태 = { id: "결제됨" | "완료됨"; value?: 부울 name?: 문자열};type FilterDate = { to?: any; from?: any;};// --내보내기 기본 함수 OrdersPage() { const [searchInput, setSearchInput] = useState(""); const Orders = useSelector((state:RootState)=> state.order.value) useEffect(() => { setFilteredOrders(Orders) }, [Orders]) const [filteredOrders, setFilteredOrders] = useState(Orders); const [toggleStatus, setToggleStatus] = useState(false); const [toggleCategory, setToggleCategory] = useState(false); const [togglePrice, setTogglePrice] = useState(false); const [toggleDate, setToggleDate] = useState(false); const [filterStatus, setFilterStatus] = useState(); const [filterCategory, setFilterCategory] = useState(); const [filterPrice, setFilterPrice] = useState(); const [filterDate, setFilterDate] = useState(); const filter = () => { let temp = Orders; let search = searchInput.toLowerCase(); temp = temp.filter((order) => { return order.customer.name.toLocaleLowerCase().includes(search); }); if (filterStatus) { temp = temp.filter((order) => { return order.status[filterStatus.id] === filterStatus.value; }); } if (filterPrice) { temp = temp.filter((order) => { return order.price.price > filterPrice[0] && order.price.price < filterPrice[1]; }); } if (filterDate) { temp = temp.filter((order) => { let orderIndex = order.timeline.findIndex(item => item.type === "주문 완료") if(!orderIndex) return return moment(order.timeline[orderIndex].timeline) > filterDate.from && moment(order.timeline[orderIndex].timeline) < filterDate.to; }); } // if(filterCategory){ // console.log("Aaaa") // temp = temp.filter(order => { // return order.status[filterCategory?.id] === filterCategory?.value // }) // } setFilteredOrders(temp); }; const [currSort, setCurrSort] = useState(); const [descending, setDescending] = useState(1); const sortData = (sortVar: any) => { let flag: any; if (sortVar == currSort) flag = descending; else { setDescending(1); flag = 1; } let temp = filteredOrders; const compareFn = (a: any, b: any) => { if (sortVar === "id" || sortVar === "location") { if (a[sortVar] < b[sortVar]) { a[sortVar] = String(a[sortVar]); b[sortVar] = String(b[sortVar]); 반환 플래그 \* -1; } if (a[sortVar] > b[sortVar]) { a[sortVar] = String(a[sortVar]); b[sortVar] = String(b[sortVar]); 반환 플래그 \* 1; } } else if (sortVar === "name") { if (a.customer[sortVar] < b.customer[sortVar]) { a.customer[sortVar] = String(a.customer[sortVar]); b.customer[sortVar] = String(b.customer[sortVar]); 반환 플래그 \* -1; } if (a.customer[sortVar] > b.customer[sortVar]) { a.customer[sortVar] = String(a.customer[sortVar]); b.customer[sortVar] = String(b.customer[sortVar]); 반환 플래그 \* 1; } } else if (sortVar === "price") { if (a.price[sortVar] < b.price[sortVar]) { a.price[sortVar] = String(a.price[sortVar]); b.price[sortVar] = String(b.price[sortVar]); 반환 플래그 \* -1; } if (a.price[sortVar] > b.price[sortVar]) { a.price[sortVar] = String(a.price[sortVar]); b.price[sortVar] = String(b.price[sortVar]); 반환 플래그 \* 1; } } else if (sortVar === "date") { if (a.timeline[3].timeline.getTime() < b.timeline[3].timeline.getTime()) { a.timeline[3].timeline = a.timeline[3].timeline; b.timeline[3].timeline = b.timeline[3].timeline; 반환 플래그 \* -1; } if (a.timeline[3].timeline.getTime() > b.timeline[3].timeline.getTime()) { a.timeline[3].timeline = a.timeline[3].timeline; b.timeline[3].timeline = b.timeline[3].timeline; 반환 플래그 \* 1; } } 반환 0; }; temp = temp.sort(compareFn); setFilteredOrders(temp); }; useEffect(() => { filter(); setToggleStatus(false); setToggleDate(false); }, [searchInput, filterStatus, filterPrice, filterDate])); const [expandedId, setExpandedId] = useState(""); const tableHeader = [ { id: "id", name: "주문", width: "w-[121px]", }, { id: "날짜", name: "주문 날짜", width: "w-[125px]", }, { id: "name", name: "Customer", width: "w-[249px]", }, { id: "", name: "상태", width: "w-[249px]", }, { id: "위치", name: "위치", width: "w-[125px]", }, { id: "가격", name: "금액(USD)", width: "w-[124px]", }, { id: "가격", name: "금액 ($)", width: "w-[134px]", }, ]; 반환 (    Orders    setSearchInput(e.target.value)} />   setToggleSta