feat: Add edit pages with cache

src/pages/Carrier/CarrierCreatePage/index.tsx

@@ -23,15 +23,15 @@ export const CarrierCreatePage = observer(() => {
   const [fullName, setFullName] = useState("");
   const [shortName, setShortName] = useState("");
   const [cityId, setCityId] = useState<number | null>(null);
-  const [primaryColor, setPrimaryColor] = useState("#000000");
-  const [secondaryColor, setSecondaryColor] = useState("#ffffff");
-  const [accentColor, setAccentColor] = useState("#ff0000");
+  const [main_color, setMainColor] = useState("#000000");
+  const [left_color, setLeftColor] = useState("#ffffff");
+  const [right_color, setRightColor] = useState("#ff0000");
   const [slogan, setSlogan] = useState("");
   const [selectedMediaId, setSelectedMediaId] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    cityStore.getCities();
+    cityStore.getCities("ru");
     mediaStore.getMedia();
   }, []);
 
@@ -41,11 +41,11 @@ export const CarrierCreatePage = observer(() => {
       await carrierStore.createCarrier(
         fullName,
         shortName,
-        cityStore.cities.find((c) => c.id === cityId)?.name!,
+        cityStore.cities.ru.find((c) => c.id === cityId)?.name!,
         cityId!,
-        primaryColor,
-        secondaryColor,
-        accentColor,
+        main_color,
+        left_color,
+        right_color,
         slogan,
         selectedMediaId!
       );
@@ -60,7 +60,6 @@ export const CarrierCreatePage = observer(() => {
 
   return (
     <Paper className="w-full h-full p-3 flex flex-col gap-10">
-      <LanguageSwitcher />
       <div className="flex items-center gap-4">
         <button
           className="flex items-center gap-2"
@@ -80,7 +79,7 @@ export const CarrierCreatePage = observer(() => {
             required
             onChange={(e) => setCityId(e.target.value as number)}
           >
-            {cityStore.cities.map((city) => (
+            {cityStore.cities.ru.map((city) => (
               <MenuItem key={city.id} value={city.id}>
                 {city.name}
               </MenuItem>
@@ -104,51 +103,55 @@ export const CarrierCreatePage = observer(() => {
           onChange={(e) => setShortName(e.target.value)}
         />
 
-        <div className="w-full flex flex-col gap-4">
-          <div className="flex items-center gap-4">
-            <span className="w-32">Основной цвет:</span>
-            <Box
-              sx={{
-                width: 40,
-                height: 40,
-                backgroundColor: primaryColor,
-                border: "1px solid #ccc",
+        <div className="flex gap-4 w-full ">
+          <TextField
+            fullWidth
+            label="Основной цвет"
+            value={main_color}
+            className="flex-1 w-full"
+            onChange={(e) => setMainColor(e.target.value)}
+            type="color"
+            sx={{
+              "& input": {
+                height: "50px",
+                paddingBlock: "14px",
+                paddingInline: "14px",
                 cursor: "pointer",
-              }}
-            />
-            <HexColorPicker color={primaryColor} onChange={setPrimaryColor} />
-          </div>
-
-          <div className="flex items-center gap-4">
-            <span className="w-32">Вторичный цвет:</span>
-            <Box
-              sx={{
-                width: 40,
-                height: 40,
-                backgroundColor: secondaryColor,
-                border: "1px solid #ccc",
+              },
+            }}
+          />
+          <TextField
+            fullWidth
+            label="Цвет левого виджета"
+            value={left_color}
+            className="flex-1 w-full"
+            onChange={(e) => setLeftColor(e.target.value)}
+            type="color"
+            sx={{
+              "& input": {
+                height: "50px",
+                paddingBlock: "14px",
+                paddingInline: "14px",
                 cursor: "pointer",
-              }}
-            />
-            <HexColorPicker
-              color={secondaryColor}
-              onChange={setSecondaryColor}
-            />
-          </div>
-
-          <div className="flex items-center gap-4">
-            <span className="w-32">Акцентный цвет:</span>
-            <Box
-              sx={{
-                width: 40,
-                height: 40,
-                backgroundColor: accentColor,
-                border: "1px solid #ccc",
+              },
+            }}
+          />
+          <TextField
+            fullWidth
+            label="Цвет правого виджета"
+            value={right_color}
+            className="flex-1 w-full"
+            onChange={(e) => setRightColor(e.target.value)}
+            type="color"
+            sx={{
+              "& input": {
+                height: "50px",
+                paddingBlock: "14px",
+                paddingInline: "14px",
                 cursor: "pointer",
-              }}
-            />
-            <HexColorPicker color={accentColor} onChange={setAccentColor} />
-          </div>
+              },
+            }}
+          />
         </div>
 
         <TextField
@@ -167,11 +170,13 @@ export const CarrierCreatePage = observer(() => {
               required
               onChange={(e) => setSelectedMediaId(e.target.value as string)}
             >
-              {mediaStore.media.map((media) => (
-                <MenuItem key={media.id} value={media.id}>
-                  {media.media_name || media.filename}
-                </MenuItem>
-              ))}
+              {mediaStore.media
+                .filter((media) => media.media_type === 3)
+                .map((media) => (
+                  <MenuItem key={media.id} value={media.id}>
+                    {media.media_name || media.filename}
+                  </MenuItem>
+                ))}
             </Select>
           </FormControl>
           {selectedMediaId && (