Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 | 1x | // src/pages/admin/components/AdminStoreManager.tsx
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { getStores, deleteStore } from '../../../services/apiClient';
import { StoreWithLocations } from '../../../types';
import { ErrorDisplay } from '../../../components/ErrorDisplay';
import { logger } from '../../../services/logger.client';
import { StoreForm } from './StoreForm';
import { useQuery, useQueryClient } from '@tanstack/react-query';
export const AdminStoreManager: React.FC = () => {
const queryClient = useQueryClient();
const [showCreateModal, setShowCreateModal] = useState(false);
const [editingStore, setEditingStore] = useState<StoreWithLocations | null>(null);
const {
data: stores,
isLoading: loading,
error,
} = useQuery<StoreWithLocations[]>({
queryKey: ['admin-stores'],
queryFn: async () => {
const response = await getStores(true); // Include locations
if (!response.ok) {
throw new Error('Failed to fetch stores');
}
const json = await response.json();
return json.data;
},
});
const handleDelete = async (storeId: number, storeName: string) => {
if (
!confirm(
`Are you sure you want to delete "${storeName}"? This will delete all associated locations and may affect flyers/receipts linked to this store.`,
)
) {
return;
}
const toastId = toast.loading('Deleting store...');
try {
const response = await deleteStore(storeId);
if (!response.ok) {
const errorBody = await response.text();
throw new Error(errorBody || `Delete failed with status ${response.status}`);
}
toast.success('Store deleted successfully!', { id: toastId });
// Invalidate queries to refresh the list
queryClient.invalidateQueries({ queryKey: ['admin-stores'] });
} catch (e) {
const errorMessage = e instanceof Error ? e.message : String(e);
toast.error(`Delete failed: ${errorMessage}`, { id: toastId });
}
};
const handleFormSuccess = () => {
setShowCreateModal(false);
setEditingStore(null);
queryClient.invalidateQueries({ queryKey: ['admin-stores'] });
};
if (loading) {
logger.debug('[AdminStoreManager] Rendering loading state');
return <div className="text-center p-4">Loading stores...</div>;
}
if (error) {
logger.error({ err: error }, '[AdminStoreManager] Rendering error state');
return <ErrorDisplay message={`Failed to load stores: ${error.message}`} />;
}
return (
<div className="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
<div className="flex justify-between items-center mb-4">
<h2 className="text-2xl font-semibold text-gray-800 dark:text-white">Store Management</h2>
<button
onClick={() => setShowCreateModal(true)}
className="px-4 py-2 bg-brand-primary text-white rounded-lg hover:bg-brand-dark transition-colors"
>
Create Store
</button>
</div>
{showCreateModal && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
<h3 className="text-xl font-semibold text-gray-800 dark:text-white mb-4">
Create New Store
</h3>
<StoreForm onSuccess={handleFormSuccess} onCancel={() => setShowCreateModal(false)} />
</div>
</div>
)}
{editingStore && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
<h3 className="text-xl font-semibold text-gray-800 dark:text-white mb-4">Edit Store</h3>
<StoreForm
store={editingStore}
onSuccess={handleFormSuccess}
onCancel={() => setEditingStore(null)}
/>
</div>
</div>
)}
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead className="bg-gray-50 dark:bg-gray-700">
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider"
>
Logo
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider"
>
Store Name
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider"
>
Locations
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider"
>
Actions
</th>
</tr>
</thead>
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
{stores && stores.length > 0 ? (
stores.map((store) => (
<tr key={store.store_id}>
<td className="px-6 py-4 whitespace-nowrap">
{store.logo_url ? (
<img
src={store.logo_url}
alt={`${store.name} logo`}
className="h-10 w-10 object-contain rounded-md bg-gray-100 dark:bg-gray-700 p-1"
/>
) : (
<div className="h-10 w-10 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md text-gray-400 text-xs">
No Logo
</div>
)}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
{store.name}
</td>
<td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
{store.locations && store.locations.length > 0 ? (
<div>
<div className="font-medium">{store.locations.length} location(s)</div>
<div className="text-xs mt-1">
{store.locations[0].address.address_line_1},{' '}
{store.locations[0].address.city}
</div>
{store.locations.length > 1 && (
<div className="text-xs text-gray-400">
+ {store.locations.length - 1} more
</div>
)}
</div>
) : (
<span className="text-gray-400">No locations</span>
)}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm">
<button
onClick={() => setEditingStore(store)}
className="text-brand-primary hover:text-brand-dark mr-3"
>
Edit
</button>
<button
onClick={() => handleDelete(store.store_id, store.name)}
className="text-red-600 hover:text-red-800"
>
Delete
</button>
</td>
</tr>
))
) : (
<tr>
<td colSpan={4} className="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
No stores found. Create one to get started!
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
};
|