adserver-dashboard 1.0.0

package/client/src/store/mapMarkerLocationsSlice.ts

@@ -0,0 +1,241 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import type { MapMarkerLocation, GeoImportFile, GeoImportFilesParams } from '@/types/geofencing';
+import { geoImportApi } from '@/lib/geo-import-api';
+
+interface MapMarkerLocationsState {
+  locations: MapMarkerLocation[];
+  selectedLocations: MapMarkerLocation[];
+  selectedLocation: MapMarkerLocation | null;
+  files: GeoImportFile[];
+  currentFile: GeoImportFile | null;
+  isLoading: boolean;
+  isUploading: boolean;
+  error: string | null;
+  pagination: {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+  };
+}
+
+const initialState: MapMarkerLocationsState = {
+  locations: [],
+  selectedLocations: [],
+  selectedLocation: null,
+  files: [],
+  currentFile: null,
+  isLoading: false,
+  isUploading: false,
+  error: null,
+  pagination: {
+    page: 1,
+    limit: 10,
+    total: 0,
+    totalPages: 0,
+  },
+};
+
+export const fetchGeoImportFiles = createAsyncThunk(
+  'mapMarkerLocations/fetchFiles',
+  async (params: GeoImportFilesParams, { rejectWithValue }) => {
+    try {
+      const response = await geoImportApi.getGeoImportFiles(params);
+      return response;
+    } catch (error: any) {
+      return rejectWithValue(error.message || 'Failed to fetch files');
+    }
+  }
+);
+
+export const fetchGeoImportLocations = createAsyncThunk(
+  'mapMarkerLocations/fetchLocations',
+  async (fileId: string, { rejectWithValue }) => {
+    try {
+      const response = await geoImportApi.getGeoImportLocations(fileId);
+      return response;
+    } catch (error: any) {
+      return rejectWithValue(error.message || 'Failed to fetch locations');
+    }
+  }
+);
+
+export const uploadGeoCoordinates = createAsyncThunk(
+  'mapMarkerLocations/uploadCoordinates',
+  async ({ file, countryName }: { file: File; countryName: string }, { rejectWithValue }) => {
+    try {
+      const response = await geoImportApi.uploadGeoCoordinates(file, countryName);
+      return response;
+    } catch (error: any) {
+      return rejectWithValue(error.message || 'Failed to upload file');
+    }
+  }
+);
+
+export const deleteGeoImportFile = createAsyncThunk(
+  'mapMarkerLocations/deleteFile',
+  async (fileId: string, { rejectWithValue }) => {
+    try {
+      await geoImportApi.deleteGeoImportFile(fileId);
+      return fileId;
+    } catch (error: any) {
+      return rejectWithValue(error.message || 'Failed to delete file');
+    }
+  }
+);
+
+const mapMarkerLocationsSlice = createSlice({
+  name: 'mapMarkerLocations',
+  initialState,
+  reducers: {
+    setLocations: (state, action: PayloadAction<MapMarkerLocation[]>) => {
+      state.locations = action.payload;
+    },
+    addLocation: (state, action: PayloadAction<MapMarkerLocation>) => {
+      state.locations.push(action.payload);
+    },
+    removeLocation: (state, action: PayloadAction<string>) => {
+      state.locations = state.locations.filter((loc) => loc.id !== action.payload);
+    },
+    setSelectedLocations: (state, action: PayloadAction<MapMarkerLocation[]>) => {
+      state.selectedLocations = action.payload;
+    },
+    addSelectedLocation: (state, action: PayloadAction<MapMarkerLocation>) => {
+      const exists = state.selectedLocations.find((loc) => loc.id === action.payload.id);
+      if (!exists) {
+        state.selectedLocations.push(action.payload);
+      }
+    },
+    removeSelectedLocation: (state, action: PayloadAction<string>) => {
+      state.selectedLocations = state.selectedLocations.filter((loc) => loc.id !== action.payload);
+    },
+    clearSelectedLocations: (state) => {
+      state.selectedLocations = [];
+    },
+    clearLocations: (state) => {
+      state.locations = [];
+    },
+    setCurrentFile: (state, action: PayloadAction<GeoImportFile | null>) => {
+      state.currentFile = action.payload;
+    },
+    clearError: (state) => {
+      state.error = null;
+    },
+    updateLocationPOIMetadata: (
+      state,
+      action: PayloadAction<{ id: string; metadata: Record<string, string>; poi: string[] }>
+    ) => {
+      const location = state.locations.find((loc) => loc.id === action.payload.id);
+      if (location) {
+        location.metadata = { ...location.metadata, ...action.payload.metadata };
+        location.poi = action.payload.poi;
+      }
+      const selectedLocation = state.selectedLocations.find((loc) => loc.id === action.payload.id);
+      if (selectedLocation) {
+        selectedLocation.metadata = { ...selectedLocation.metadata, ...action.payload.metadata };
+        selectedLocation.poi = action.payload.poi;
+      }
+    },
+    toggleLocationEnabled: (state, action: PayloadAction<{ id: string; enabled: boolean }>) => {
+      const location = state.locations.find((loc) => loc.id === action.payload.id);
+      if (location) {
+        location.enabled = action.payload.enabled;
+      }
+      const selectedLocation = state.selectedLocations.find((loc) => loc.id === action.payload.id);
+      if (selectedLocation) {
+        selectedLocation.enabled = action.payload.enabled;
+      }
+    },
+    removeLocationPOI: (state, action: PayloadAction<{ id: string; poiId: string }>) => {
+      const location = state.locations.find((loc) => loc.id === action.payload.id);
+      if (location && location.poi) {
+        location.poi = location.poi.filter((p) => p !== action.payload.poiId);
+      }
+      const selectedLocation = state.selectedLocations.find((loc) => loc.id === action.payload.id);
+      if (selectedLocation && selectedLocation.poi) {
+        selectedLocation.poi = selectedLocation.poi.filter((p) => p !== action.payload.poiId);
+      }
+      if (state.selectedLocation && state.selectedLocation.id === action.payload.id && state.selectedLocation.poi) {
+        state.selectedLocation.poi = state.selectedLocation.poi.filter((p) => p !== action.payload.poiId);
+      }
+    },
+    setSelectedLocation: (state, action: PayloadAction<MapMarkerLocation | null>) => {
+      state.selectedLocation = action.payload;
+    },
+    clearSelectedLocation: (state) => {
+      state.selectedLocation = null;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchGeoImportFiles.pending, (state) => {
+        state.isLoading = true;
+        state.error = null;
+      })
+      .addCase(fetchGeoImportFiles.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.files = action.payload.files;
+        state.pagination = action.payload.pagination;
+      })
+      .addCase(fetchGeoImportFiles.rejected, (state, action) => {
+        state.isLoading = false;
+        state.error = action.payload as string;
+      })
+      .addCase(fetchGeoImportLocations.pending, (state) => {
+        state.isLoading = true;
+        state.error = null;
+      })
+      .addCase(fetchGeoImportLocations.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.locations = action.payload.locations;
+      })
+      .addCase(fetchGeoImportLocations.rejected, (state, action) => {
+        state.isLoading = false;
+        state.error = action.payload as string;
+      })
+      .addCase(uploadGeoCoordinates.pending, (state) => {
+        state.isUploading = true;
+        state.error = null;
+      })
+      .addCase(uploadGeoCoordinates.fulfilled, (state, action) => {
+        state.isUploading = false;
+        state.files.unshift(action.payload.file);
+      })
+      .addCase(uploadGeoCoordinates.rejected, (state, action) => {
+        state.isUploading = false;
+        state.error = action.payload as string;
+      })
+      .addCase(deleteGeoImportFile.pending, (state) => {
+        state.isLoading = true;
+        state.error = null;
+      })
+      .addCase(deleteGeoImportFile.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.files = state.files.filter((file) => file.id !== action.payload);
+      })
+      .addCase(deleteGeoImportFile.rejected, (state, action) => {
+        state.isLoading = false;
+        state.error = action.payload as string;
+      });
+  },
+});
+
+export const {
+  setLocations,
+  addLocation,
+  removeLocation,
+  setSelectedLocations,
+  addSelectedLocation,
+  removeSelectedLocation,
+  clearSelectedLocations,
+  clearLocations,
+  setCurrentFile,
+  clearError,
+  updateLocationPOIMetadata,
+  toggleLocationEnabled,
+  removeLocationPOI,
+  setSelectedLocation,
+  clearSelectedLocation,
+} = mapMarkerLocationsSlice.actions;
+
+export default mapMarkerLocationsSlice.reducer;

package/client/src/styles/design-tokens.css

@@ -0,0 +1,324 @@
+/* MW Design System - Design Tokens (aligned with mw-planner-FE via @moving-walls/design-system) */
+
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+
+:root {
+  /* Colors */
+  --color-background: #ffffff;
+  --color-foreground: #0f172a;
+  --color-card: #ffffff;
+  --color-card-foreground: #0f172a;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #0f172a;
+  --color-primary: #2176cc;
+  --color-primary-foreground: #f8fafc;
+  --color-secondary: #f1f5f9;
+  --color-secondary-foreground: #0f172a;
+  --color-muted: #f1f5f9;
+  --color-muted-foreground: #64748b;
+  --color-accent: #f1f5f9;
+  --color-accent-foreground: #0f172a;
+  --color-destructive: #c52828;
+  --color-destructive-foreground: #f8fafc;
+  --color-border: #e2e8f0;
+  --color-input: #e2e8f0;
+  --color-ring: #94a3b8;
+  --color-container-border: #e2e8f0;
+
+  /* Container Colors */
+  --Color-Container-Container-fill-neutral: #F3F3F3;
+
+  /* MW Primary Palette (aligned with mw-planner-FE) */
+  --color-mw-primary-50: #e8f0f7;
+  --color-mw-primary-100: #b9cfe6;
+  --color-mw-primary-200: #97b8da;
+  --color-mw-primary-300: #6898c9;
+  --color-mw-primary-400: #4a84bf;
+  --color-mw-primary-500: #2176cc;
+  --color-mw-primary-600: #1a5c9f;
+  --color-mw-primary-700: #15487c;
+  --color-mw-primary-800: #103860;
+  --color-mw-primary-900: #0c2a4a;
+
+  /* MW Secondary Palette (aligned with mw-planner-FE) */
+  --color-mw-secondary-50: #eff8fd;
+  --color-mw-secondary-100: #cee9f8;
+  --color-mw-secondary-200: #b6def4;
+  --color-mw-secondary-300: #94cfef;
+  --color-mw-secondary-400: #80c6ec;
+  --color-mw-secondary-500: #60b8e7;
+  --color-mw-secondary-600: #57a7d2;
+  --color-mw-secondary-700: #4483a4;
+  --color-mw-secondary-800: #35657f;
+  --color-mw-secondary-900: #284d61;
+
+  /* MW Neutral Palette (aligned with mw-planner-FE) */
+  --color-mw-neutral-50: #f3f3f3;
+  --color-mw-neutral-100: #d3d3d3;
+  --color-mw-neutral-200: #bebebe;
+  --color-mw-neutral-300: #a0a0a0;
+  --color-mw-neutral-400: #8d8d8d;
+  --color-mw-neutral-500: #717171;
+  --color-mw-neutral-600: #676767;
+  --color-mw-neutral-700: #505050;
+  --color-mw-neutral-800: #3e3e3e;
+  --color-mw-neutral-900: #352f2f;
+
+  /* MW Success Palette (aligned with mw-planner-FE) */
+  --color-mw-success-50: #eaf2eb;
+  --color-mw-success-100: #bed7bf;
+  --color-mw-success-200: #9ec3a1;
+  --color-mw-success-300: #72a876;
+  --color-mw-success-400: #57975b;
+  --color-mw-success-500: #2d7d32;
+  --color-mw-success-600: #29722e;
+  --color-mw-success-700: #205924;
+  --color-mw-success-800: #19451c;
+  --color-mw-success-900: #133515;
+
+  /* MW Error/Danger Palette (aligned with mw-planner-FE) */
+  --color-mw-error-50: #f9eaea;
+  --color-mw-error-100: #edbcbc;
+  --color-mw-error-200: #e49c9c;
+  --color-mw-error-300: #d86f6f;
+  --color-mw-error-400: #d15353;
+  --color-mw-error-500: #c52828;
+  --color-mw-error-600: #b32424;
+  --color-mw-error-700: #8c1c1c;
+  --color-mw-error-800: #6c1616;
+  --color-mw-error-900: #531111;
+
+  /* MW Warning Palette (aligned with mw-planner-FE) */
+  --color-mw-warning-50: #fef7ec;
+  --color-mw-warning-100: #fde4bb;
+  --color-mw-warning-200: #fcd79b;
+  --color-mw-warning-300: #fbc56d;
+  --color-mw-warning-400: #fab951;
+  --color-mw-warning-500: #f9a825;
+  --color-mw-warning-600: #e39922;
+  --color-mw-warning-700: #b1771a;
+  --color-mw-warning-800: #895c14;
+  --color-mw-warning-900: #694710;
+
+  /* MW Info Palette (aligned with mw-planner-FE) */
+  --color-mw-info-50: #e6f3fa;
+  --color-mw-info-100: #b0daf1;
+  --color-mw-info-200: #8ac8ea;
+  --color-mw-info-300: #55afe0;
+  --color-mw-info-400: #34a0da;
+  --color-mw-info-500: #0188d1;
+  --color-mw-info-600: #017cbe;
+  --color-mw-info-700: #016194;
+  --color-mw-info-800: #014b73;
+  --color-mw-info-900: #003958;
+
+  /* Extended palettes from mw-planner-FE */
+  --color-mw-purple-50: #ece1eb;
+  --color-mw-purple-500: #7e537a;
+  --color-mw-purple-600: #5f3e5c;
+  --color-mw-purple-warning-50: #f3ebfe;
+  --color-mw-purple-warning-500: #8a38f5;
+  --color-mw-orange-warning-50: #fef1eb;
+  --color-mw-orange-warning-500: #f57738;
+  --color-mw-orange-warning-800: #883d1b;
+  --color-mw-light-green-50: #f3f7e8;
+  --color-mw-light-green-500: #8bc24b;
+  --color-mw-light-green-600: #7cb243;
+  --color-mw-blush-grey-50: #c8d7dc;
+  --color-mw-blush-grey-500: #486a74;
+  --color-mw-teal-600: #0c6e64;
+  --color-mw-dark-grey-50: #f2f2f2;
+  --color-mw-dark-grey-100: #d7d7d7;
+
+  /* Backward compatibility */
+  --color-success: #2d7d32;
+  --color-success-foreground: #ffffff;
+  --color-warning: #f9a825;
+  --color-warning-foreground: #ffffff;
+  --color-info: #0188d1;
+  --color-info-foreground: #ffffff;
+
+  /* Spacing */
+  --spacing-px: 1px;
+  --spacing-0: 0px;
+  --spacing-0-5: 0.125rem;
+  --spacing-1: 0.25rem;
+  --spacing-1-5: 0.375rem;
+  --spacing-2: 0.5rem;
+  --spacing-2-5: 0.625rem;
+  --spacing-3: 0.75rem;
+  --spacing-3-5: 0.875rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-7: 1.75rem;
+  --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
+  --spacing-10: 2.5rem;
+  --spacing-11: 2.75rem;
+  --spacing-12: 3rem;
+  --spacing-14: 3.5rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-28: 7rem;
+  --spacing-32: 8rem;
+  --spacing-36: 9rem;
+  --spacing-40: 10rem;
+  --spacing-44: 11rem;
+  --spacing-48: 12rem;
+  --spacing-52: 13rem;
+  --spacing-56: 14rem;
+  --spacing-60: 15rem;
+  --spacing-64: 16rem;
+  --spacing-72: 18rem;
+  --spacing-80: 20rem;
+  --spacing-96: 24rem;
+
+  /* Border radius (aligned with mw-planner-FE) */
+  --radius-2xs: 0.25rem;
+  --radius-xs: 0.5rem;
+  --radius-s: 0.75rem;
+  --radius-m: 1rem;
+  --radius-l: 1.25rem;
+  --radius-xl: 1.5rem;
+  --radius-2xl: 2rem;
+  --radius-3xl: 2.5rem;
+  --radius-4xl: 3rem;
+  --radius-5xl: 3.5rem;
+  --radius-full: 999px;
+
+  /* Font families */
+  --font-family-primary: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+
+  /* Font sizes */
+  --font-size-2xs: 10px;
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-base: 13px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  --font-size-3xl: 22px;
+  --font-size-4xl: 26px;
+  --font-size-5xl: 30px;
+  --font-size-6xl: 36px;
+  --font-size-7xl: 42px;
+  --font-size-8xl: 48px;
+  --font-size-9xl: 60px;
+
+  /* Font weights */
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+
+  /* Line heights */
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+  --line-height-16: 1rem;
+  --line-height-18: 1.125rem;
+  --line-height-20: 1.25rem;
+  --line-height-32: 2rem;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --shadow-none: 0 0 #0000;
+
+  /* Z-index */
+  --z-index-hide: -1;
+  --z-index-auto: auto;
+  --z-index-base: 0;
+  --z-index-docked: 10;
+  --z-index-dropdown: 1000;
+  --z-index-sticky: 1100;
+  --z-index-banner: 1200;
+  --z-index-overlay: 1300;
+  --z-index-modal: 1400;
+  --z-index-popover: 1500;
+  --z-index-skipLink: 1600;
+  --z-index-toast: 1700;
+  --z-index-tooltip: 1800;
+
+  /* Breakpoints (for media queries) */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+}
+
+/* Dark mode overrides (aligned with mw-planner-FE) */
+.dark {
+  --color-background: #020617;
+  --color-foreground: #f8fafc;
+  --color-card: #020617;
+  --color-card-foreground: #f8fafc;
+  --color-popover: #020617;
+  --color-popover-foreground: #f8fafc;
+  --color-primary: #2176cc;
+  --color-primary-foreground: #0f172a;
+  --color-secondary: #1e293b;
+  --color-secondary-foreground: #f8fafc;
+  --color-muted: #1e293b;
+  --color-muted-foreground: #94a3b8;
+  --color-accent: #1e293b;
+  --color-accent-foreground: #f8fafc;
+  --color-destructive: #d63535;
+  --color-destructive-foreground: #f8fafc;
+  --color-border: #1e293b;
+  --color-input: #1e293b;
+  --color-ring: #94a3b8;
+
+  /* MW Primary Palette (Dark Theme - aligned with mw-planner-FE) */
+  --color-mw-primary-50: #e8f0f7;
+  --color-mw-primary-100: #b9cfe6;
+  --color-mw-primary-200: #97b8da;
+  --color-mw-primary-300: #6898c9;
+  --color-mw-primary-400: #4a84bf;
+  --color-mw-primary-500: #1d65af;
+  --color-mw-primary-600: #1a5c9f;
+  --color-mw-primary-700: #15487c;
+  --color-mw-primary-800: #103860;
+  --color-mw-primary-900: #0c2a47;
+
+  /* MW Secondary Palette (Dark Theme - aligned with mw-planner-FE) */
+  --color-mw-secondary-50: #edf7fc;
+  --color-mw-secondary-100: #c8e7f7;
+  --color-mw-secondary-200: #addbf3;
+  --color-mw-secondary-300: #87caed;
+  --color-mw-secondary-400: #70c0e9;
+  --color-mw-secondary-500: #4cb0e4;
+  --color-mw-secondary-600: #45a0cf;
+  --color-mw-secondary-700: #367da2;
+  --color-mw-secondary-800: #2a617d;
+  --color-mw-secondary-900: #204a60;
+
+  /* MW Neutral Palette (Dark Theme) */
+  --color-mw-neutral-50: #f2f2f2;
+  --color-mw-neutral-100: #d7d7d7;
+  --color-mw-neutral-200: #c4c4c4;
+  --color-mw-neutral-300: #a9a9a9;
+  --color-mw-neutral-400: #999999;
+  --color-mw-neutral-500: #7f7f7f;
+  --color-mw-neutral-600: #747474;
+  --color-mw-neutral-700: #6a6a6a;
+  --color-mw-neutral-800: #464646;
+  --color-mw-neutral-900: #353535;
+}