|
@@ -20,7 +20,7 @@ import {
|
|
|
AlertDialogHeader,
|
|
AlertDialogHeader,
|
|
|
AlertDialogTitle,
|
|
AlertDialogTitle,
|
|
|
} from "@/components/ui/alert-dialog";
|
|
} from "@/components/ui/alert-dialog";
|
|
|
-import { Loader2, Search, Package, ShoppingCart, Users, ChevronLeft, ChevronRight } from "lucide-react";
|
|
|
|
|
|
|
+import { Loader2, Search, Package, ChevronLeft, ChevronRight } from "lucide-react";
|
|
|
import { API_URL } from "@/lib/config";
|
|
import { API_URL } from "@/lib/config";
|
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
|
|
|
|
|
@@ -40,24 +40,7 @@ interface Product {
|
|
|
enabled_in_context: boolean;
|
|
enabled_in_context: boolean;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-interface Order {
|
|
|
|
|
- id: string;
|
|
|
|
|
- order_number: string;
|
|
|
|
|
- customer_name: string;
|
|
|
|
|
- total: string;
|
|
|
|
|
- currency: string;
|
|
|
|
|
- enabled_in_context: boolean;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-interface Customer {
|
|
|
|
|
- id: string;
|
|
|
|
|
- name: string;
|
|
|
|
|
- email: string;
|
|
|
|
|
- orders_count: number;
|
|
|
|
|
- enabled_in_context: boolean;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-type DataItem = Product | Order | Customer;
|
|
|
|
|
|
|
+type DataItem = Product;
|
|
|
|
|
|
|
|
interface DataResponse {
|
|
interface DataResponse {
|
|
|
success: boolean;
|
|
success: boolean;
|
|
@@ -74,7 +57,7 @@ export function ManageStoreDataContent() {
|
|
|
const [stores, setStores] = useState<StoreData[]>([]);
|
|
const [stores, setStores] = useState<StoreData[]>([]);
|
|
|
const [selectedStore, setSelectedStore] = useState<StoreData | null>(null);
|
|
const [selectedStore, setSelectedStore] = useState<StoreData | null>(null);
|
|
|
const [loading, setLoading] = useState(true);
|
|
const [loading, setLoading] = useState(true);
|
|
|
- const [activeTab, setActiveTab] = useState<"products" | "orders" | "customers">("products");
|
|
|
|
|
|
|
+ const [activeTab, setActiveTab] = useState<"products">("products");
|
|
|
|
|
|
|
|
// Filter and search state
|
|
// Filter and search state
|
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
@@ -468,50 +451,6 @@ export function ManageStoreDataContent() {
|
|
|
</TableRow>
|
|
</TableRow>
|
|
|
);
|
|
);
|
|
|
|
|
|
|
|
- const renderOrderRow = (order: Order) => (
|
|
|
|
|
- <TableRow key={order.id}>
|
|
|
|
|
- <TableCell>
|
|
|
|
|
- <Checkbox
|
|
|
|
|
- checked={selectedItems.has(order.id)}
|
|
|
|
|
- onCheckedChange={(checked) => handleSelectItem(order.id, checked as boolean)}
|
|
|
|
|
- />
|
|
|
|
|
- </TableCell>
|
|
|
|
|
- <TableCell className="text-white font-medium">{order.order_number}</TableCell>
|
|
|
|
|
- <TableCell className="text-slate-400">{order.customer_name}</TableCell>
|
|
|
|
|
- <TableCell className="text-slate-300">
|
|
|
|
|
- {order.total} {order.currency}
|
|
|
|
|
- </TableCell>
|
|
|
|
|
- <TableCell>
|
|
|
|
|
- <Switch
|
|
|
|
|
- checked={order.enabled_in_context}
|
|
|
|
|
- onCheckedChange={() => handleToggleItem(order.id, order.enabled_in_context)}
|
|
|
|
|
- className="data-[state=checked]:bg-cyan-500"
|
|
|
|
|
- />
|
|
|
|
|
- </TableCell>
|
|
|
|
|
- </TableRow>
|
|
|
|
|
- );
|
|
|
|
|
-
|
|
|
|
|
- const renderCustomerRow = (customer: Customer) => (
|
|
|
|
|
- <TableRow key={customer.id}>
|
|
|
|
|
- <TableCell>
|
|
|
|
|
- <Checkbox
|
|
|
|
|
- checked={selectedItems.has(customer.id)}
|
|
|
|
|
- onCheckedChange={(checked) => handleSelectItem(customer.id, checked as boolean)}
|
|
|
|
|
- />
|
|
|
|
|
- </TableCell>
|
|
|
|
|
- <TableCell className="text-white font-medium">{customer.name}</TableCell>
|
|
|
|
|
- <TableCell className="text-slate-400">{customer.email}</TableCell>
|
|
|
|
|
- <TableCell className="text-slate-300">{customer.orders_count}</TableCell>
|
|
|
|
|
- <TableCell>
|
|
|
|
|
- <Switch
|
|
|
|
|
- checked={customer.enabled_in_context}
|
|
|
|
|
- onCheckedChange={() => handleToggleItem(customer.id, customer.enabled_in_context)}
|
|
|
|
|
- className="data-[state=checked]:bg-cyan-500"
|
|
|
|
|
- />
|
|
|
|
|
- </TableCell>
|
|
|
|
|
- </TableRow>
|
|
|
|
|
- );
|
|
|
|
|
-
|
|
|
|
|
if (loading) {
|
|
if (loading) {
|
|
|
return (
|
|
return (
|
|
|
<div className="flex-1 flex items-center justify-center min-h-screen bg-slate-900">
|
|
<div className="flex-1 flex items-center justify-center min-h-screen bg-slate-900">
|
|
@@ -579,7 +518,7 @@ export function ManageStoreDataContent() {
|
|
|
</CardHeader>
|
|
</CardHeader>
|
|
|
<CardContent>
|
|
<CardContent>
|
|
|
<Tabs value={activeTab} onValueChange={(value) => {
|
|
<Tabs value={activeTab} onValueChange={(value) => {
|
|
|
- setActiveTab(value as "products" | "orders" | "customers");
|
|
|
|
|
|
|
+ setActiveTab(value as "products");
|
|
|
setPage(1);
|
|
setPage(1);
|
|
|
setSelectedItems(new Set());
|
|
setSelectedItems(new Set());
|
|
|
setSelectAll(false);
|
|
setSelectAll(false);
|
|
@@ -589,14 +528,6 @@ export function ManageStoreDataContent() {
|
|
|
<Package className="w-4 h-4 mr-2" />
|
|
<Package className="w-4 h-4 mr-2" />
|
|
|
Products ({enabledCount}/{totalCount})
|
|
Products ({enabledCount}/{totalCount})
|
|
|
</TabsTrigger>
|
|
</TabsTrigger>
|
|
|
- <TabsTrigger value="orders" className="data-[state=active]:bg-slate-600 data-[state=active]:text-white">
|
|
|
|
|
- <ShoppingCart className="w-4 h-4 mr-2" />
|
|
|
|
|
- Orders ({enabledCount}/{totalCount})
|
|
|
|
|
- </TabsTrigger>
|
|
|
|
|
- <TabsTrigger value="customers" className="data-[state=active]:bg-slate-600 data-[state=active]:text-white">
|
|
|
|
|
- <Users className="w-4 h-4 mr-2" />
|
|
|
|
|
- Customers ({enabledCount}/{totalCount})
|
|
|
|
|
- </TabsTrigger>
|
|
|
|
|
</TabsList>
|
|
</TabsList>
|
|
|
|
|
|
|
|
{/* Search and Filter Bar */}
|
|
{/* Search and Filter Bar */}
|
|
@@ -707,74 +638,6 @@ export function ManageStoreDataContent() {
|
|
|
</div>
|
|
</div>
|
|
|
)}
|
|
)}
|
|
|
</TabsContent>
|
|
</TabsContent>
|
|
|
-
|
|
|
|
|
- <TabsContent value="orders">
|
|
|
|
|
- {dataLoading ? (
|
|
|
|
|
- <div className="flex justify-center py-8">
|
|
|
|
|
- <Loader2 className="w-6 h-6 text-cyan-500 animate-spin" />
|
|
|
|
|
- </div>
|
|
|
|
|
- ) : data.length === 0 ? (
|
|
|
|
|
- <div className="text-center py-8 text-slate-400">
|
|
|
|
|
- No orders found
|
|
|
|
|
- </div>
|
|
|
|
|
- ) : (
|
|
|
|
|
- <div className="rounded-md border border-slate-700">
|
|
|
|
|
- <Table>
|
|
|
|
|
- <TableHeader className="bg-slate-700/50">
|
|
|
|
|
- <TableRow>
|
|
|
|
|
- <TableHead className="w-12">
|
|
|
|
|
- <Checkbox
|
|
|
|
|
- checked={selectAll}
|
|
|
|
|
- onCheckedChange={handleSelectAll}
|
|
|
|
|
- />
|
|
|
|
|
- </TableHead>
|
|
|
|
|
- <TableHead className="text-slate-300">Order Number</TableHead>
|
|
|
|
|
- <TableHead className="text-slate-300">Customer</TableHead>
|
|
|
|
|
- <TableHead className="text-slate-300">Total</TableHead>
|
|
|
|
|
- <TableHead className="text-slate-300">Enabled</TableHead>
|
|
|
|
|
- </TableRow>
|
|
|
|
|
- </TableHeader>
|
|
|
|
|
- <TableBody className="bg-slate-800">
|
|
|
|
|
- {data.map(item => renderOrderRow(item as Order))}
|
|
|
|
|
- </TableBody>
|
|
|
|
|
- </Table>
|
|
|
|
|
- </div>
|
|
|
|
|
- )}
|
|
|
|
|
- </TabsContent>
|
|
|
|
|
-
|
|
|
|
|
- <TabsContent value="customers">
|
|
|
|
|
- {dataLoading ? (
|
|
|
|
|
- <div className="flex justify-center py-8">
|
|
|
|
|
- <Loader2 className="w-6 h-6 text-cyan-500 animate-spin" />
|
|
|
|
|
- </div>
|
|
|
|
|
- ) : data.length === 0 ? (
|
|
|
|
|
- <div className="text-center py-8 text-slate-400">
|
|
|
|
|
- No customers found
|
|
|
|
|
- </div>
|
|
|
|
|
- ) : (
|
|
|
|
|
- <div className="rounded-md border border-slate-700">
|
|
|
|
|
- <Table>
|
|
|
|
|
- <TableHeader className="bg-slate-700/50">
|
|
|
|
|
- <TableRow>
|
|
|
|
|
- <TableHead className="w-12">
|
|
|
|
|
- <Checkbox
|
|
|
|
|
- checked={selectAll}
|
|
|
|
|
- onCheckedChange={handleSelectAll}
|
|
|
|
|
- />
|
|
|
|
|
- </TableHead>
|
|
|
|
|
- <TableHead className="text-slate-300">Name</TableHead>
|
|
|
|
|
- <TableHead className="text-slate-300">Email</TableHead>
|
|
|
|
|
- <TableHead className="text-slate-300">Orders</TableHead>
|
|
|
|
|
- <TableHead className="text-slate-300">Enabled</TableHead>
|
|
|
|
|
- </TableRow>
|
|
|
|
|
- </TableHeader>
|
|
|
|
|
- <TableBody className="bg-slate-800">
|
|
|
|
|
- {data.map(item => renderCustomerRow(item as Customer))}
|
|
|
|
|
- </TableBody>
|
|
|
|
|
- </Table>
|
|
|
|
|
- </div>
|
|
|
|
|
- )}
|
|
|
|
|
- </TabsContent>
|
|
|
|
|
</Tabs>
|
|
</Tabs>
|
|
|
|
|
|
|
|
{/* Pagination */}
|
|
{/* Pagination */}
|