feat: multi-workspace support + channels grouped by workspace and network

- PostizContext: new PostizWorkspace type, multi-workspace storage
  (postiz_workspaces_v2), auto-migration from legacy single config,
  addWorkspace / updateWorkspace / removeWorkspace, clients map
- Settings: full rewrite with workspace card list (add / edit / delete)
- Compose: channels displayed in two levels — workspace section then
  network type (X/Twitter, Instagram, LinkedIn...) within each workspace;
  submit routes posts and image uploads per workspace
- MediaLibraryModal: workspace tabs when multiple workspaces configured,
  returned items carry their workspaceId

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

artifacts/postiz-mobile/app/(tabs)/compose.tsx

@@ -8,7 +8,7 @@ import * as ImageManipulator from "expo-image-manipulator";
 import * as ImagePicker from "expo-image-picker";
 import { fetch as expoFetch } from "expo/fetch";
 import { useLocalSearchParams } from "expo-router";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
   ActivityIndicator,
   Alert,
@@ -24,8 +24,13 @@ import {
 import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ChannelChip } from "@/components/ChannelChip";
-import { MediaLibraryModal } from "@/components/MediaLibraryModal";
-import { PostizIntegration, PostizUploadResult, usePostiz } from "@/context/PostizContext";
+import { LibraryMediaItem, MediaLibraryModal } from "@/components/MediaLibraryModal";
+import {
+  PostizIntegration,
+  PostizUploadResult,
+  PostizWorkspace,
+  usePostiz,
+} from "@/context/PostizContext";
 import { useColors } from "@/hooks/useColors";
 
 const DRAFT_STORAGE_KEY = "postiz_local_draft";
@@ -40,9 +45,33 @@ const NETWORK_CHAR_LIMITS: Record<string, number> = {
   tiktok: 2200,
 };
 
+// Integration enriched with its workspace info
+type IntegrationWithWorkspace = PostizIntegration & {
+  workspaceId: string;
+  workspaceName: string;
+  workspace: PostizWorkspace;
+};
+
 type MediaItem =
   | { type: "local"; uri: string }
-  | { type: "uploaded"; id: string; path: string };
+  | { type: "uploaded"; id: string; path: string; workspaceId: string };
+
+// Maps a type string to a display label, used for grouping within a workspace
+function networkLabel(intg: PostizIntegration): string {
+  const t = (intg.type ?? intg.internalType ?? "").toLowerCase();
+  if (t.includes("twitter") || t.includes("x-") || t === "x") return "X / Twitter";
+  if (t.includes("instagram")) return "Instagram";
+  if (t.includes("linkedin")) return "LinkedIn";
+  if (t.includes("facebook")) return "Facebook";
+  if (t.includes("tiktok")) return "TikTok";
+  if (t.includes("youtube")) return "YouTube";
+  if (t.includes("pinterest")) return "Pinterest";
+  if (t.includes("mastodon")) return "Mastodon";
+  if (t.includes("bluesky") || t.includes("bsky")) return "Bluesky";
+  if (t.includes("threads")) return "Threads";
+  if (t.includes("reddit")) return "Reddit";
+  return "Other";
+}
 
 function resolveMediaUrl(path: string, baseUrl: string): string {
   if (path.startsWith("http://") || path.startsWith("https://")) return path;
@@ -53,7 +82,7 @@ function resolveMediaUrl(path: string, baseUrl: string): string {
 export default function ComposeScreen() {
   const colors = useColors();
   const insets = useSafeAreaInsets();
-  const { client, isConfigured, apiKey, baseUrl } = usePostiz();
+  const { workspaces, clients, isConfigured } = usePostiz();
   const queryClient = useQueryClient();
   const { prefillContent, prefillIntegrationIds, prefillImagePath, prefillImageId } =
     useLocalSearchParams<{
@@ -83,9 +112,11 @@ export default function ComposeScreen() {
       setSelectedChannels(String(prefillIntegrationIds).split(",").filter(Boolean));
     }
     if (prefillImagePath && prefillImageId) {
-      setMediaItems([{ type: "uploaded", id: String(prefillImageId), path: String(prefillImagePath) }]);
+      // Prefilled image has unknown workspace; associate with first workspace
+      const wsId = workspaces[0]?.id ?? "";
+      setMediaItems([{ type: "uploaded", id: String(prefillImageId), path: String(prefillImagePath), workspaceId: wsId }]);
     }
-  }, [prefillContent, prefillIntegrationIds, prefillImagePath, prefillImageId]);
+  }, [prefillContent, prefillIntegrationIds, prefillImagePath, prefillImageId, workspaces]);
 
   useEffect(() => {
     if (prefillContent) return;
@@ -98,21 +129,61 @@ export default function ComposeScreen() {
     });
   }, [prefillContent]);
 
-  const { data: integrations, isLoading: loadingIntegrations } =
-    useQuery<PostizIntegration[]>({
-      queryKey: ["integrations", !!client],
+  // Fetch integrations from ALL workspaces in parallel
+  const { data: allIntegrations, isLoading: loadingIntegrations } =
+    useQuery<IntegrationWithWorkspace[]>({
+      queryKey: ["integrations-all", workspaces.map((w) => w.id).join(",")],
       queryFn: async () => {
-        if (!client) return [];
-        const res = await client.get("integrations");
-        return Array.isArray(res.data) ? res.data : res.data?.integrations ?? [];
+        const results = await Promise.all(
+          workspaces.map(async (ws) => {
+            const client = clients[ws.id];
+            if (!client) return [];
+            const res = await client.get("integrations");
+            const list: PostizIntegration[] = Array.isArray(res.data)
+              ? res.data
+              : (res.data?.integrations ?? []);
+            return list.map((i): IntegrationWithWorkspace => ({
+              ...i,
+              workspaceId: ws.id,
+              workspaceName: ws.name,
+              workspace: ws,
+            }));
+          })
+        );
+        return results.flat();
       },
-      enabled: !!client,
+      enabled: workspaces.length > 0 && Object.keys(clients).length > 0,
       staleTime: 60000,
     });
 
-  const effectiveCharLimit = (() => {
-    if (selectedChannels.length === 0 || !integrations) return 3000;
-    const selected = integrations.filter((i) => selectedChannels.includes(i.id));
+  // Group: workspace → network label → integrations
+  const grouped = useMemo(() => {
+    if (!allIntegrations) return [];
+    const byWorkspace = new Map<string, IntegrationWithWorkspace[]>();
+    for (const intg of allIntegrations) {
+      if (!byWorkspace.has(intg.workspaceId)) byWorkspace.set(intg.workspaceId, []);
+      byWorkspace.get(intg.workspaceId)!.push(intg);
+    }
+    return workspaces
+      .filter((ws) => byWorkspace.has(ws.id))
+      .map((ws) => {
+        const intgs = byWorkspace.get(ws.id)!;
+        const byNetwork = new Map<string, IntegrationWithWorkspace[]>();
+        for (const intg of intgs) {
+          const key = networkLabel(intg);
+          if (!byNetwork.has(key)) byNetwork.set(key, []);
+          byNetwork.get(key)!.push(intg);
+        }
+        return {
+          workspace: ws,
+          networks: Array.from(byNetwork.entries()).map(([label, channels]) => ({ label, channels })),
+        };
+      });
+  }, [allIntegrations, workspaces]);
+
+  const effectiveCharLimit = useMemo(() => {
+    if (selectedChannels.length === 0 || !allIntegrations) return 3000;
+    const selected = allIntegrations.filter((i) => selectedChannels.includes(i.id));
     const limits = selected.map((i) => {
       const t = (i.type ?? i.internalType ?? "").toLowerCase();
       for (const [key, limit] of Object.entries(NETWORK_CHAR_LIMITS)) {
@@ -121,7 +192,7 @@ export default function ComposeScreen() {
       return 3000;
     });
     return Math.min(...limits);
-  })();
+  }, [selectedChannels, allIntegrations]);
 
   const saveDraft = async () => {
     const draft = { content, integrationIds: selectedChannels };
@@ -193,44 +264,39 @@ export default function ComposeScreen() {
     setMediaItems((prev) => prev.filter((_, i) => i !== index));
   };
 
-  const buildMediaPayload = async (): Promise<Array<{ id: string; path: string }>> => {
-    setUploading(true);
-    try {
-      const result: Array<{ id: string; path: string }> = [];
-      for (const item of mediaItems) {
-        if (item.type === "uploaded") {
-          result.push({ id: item.id, path: item.path });
-          continue;
-        }
-        const formData = new FormData();
-        if (Platform.OS === "web") {
-          const response = await expoFetch(item.uri);
-          const blob = await response.blob();
-          formData.append("file", blob, "upload.jpg");
-        } else {
-          formData.append("file", {
-            uri: item.uri,
-            name: "upload.jpg",
-            type: "image/jpeg",
-          } as unknown as Blob);
-        }
-        // eslint-disable-next-line no-undef
-        const uploadRes = await globalThis.fetch(`${baseUrl}/upload`, {
-          method: "POST",
-          headers: { Authorization: apiKey },
-          body: formData,
-        });
-        if (!uploadRes.ok) {
-          const raw = await uploadRes.text().catch(() => uploadRes.statusText);
-          throw new Error(`Upload HTTP ${uploadRes.status}: ${raw.slice(0, 200)}`);
-        }
-        const uploaded = (await uploadRes.json()) as PostizUploadResult;
-        result.push({ id: uploaded.id, path: uploaded.path });
+  // Upload local images to a specific workspace, returns { id, path }[]
+  const uploadLocalToWorkspace = async (
+    localUris: string[],
+    ws: PostizWorkspace
+  ): Promise<Array<{ id: string; path: string }>> => {
+    const result: Array<{ id: string; path: string }> = [];
+    for (const uri of localUris) {
+      const formData = new FormData();
+      if (Platform.OS === "web") {
+        const response = await expoFetch(uri);
+        const blob = await response.blob();
+        formData.append("file", blob, "upload.jpg");
+      } else {
+        formData.append("file", {
+          uri,
+          name: "upload.jpg",
+          type: "image/jpeg",
+        } as unknown as Blob);
       }
-      return result;
-    } finally {
-      setUploading(false);
+      // eslint-disable-next-line no-undef
+      const uploadRes = await globalThis.fetch(`${ws.baseUrl}/upload`, {
+        method: "POST",
+        headers: { Authorization: ws.apiKey },
+        body: formData,
+      });
+      if (!uploadRes.ok) {
+        const raw = await uploadRes.text().catch(() => uploadRes.statusText);
+        throw new Error(`[${ws.name}] Upload HTTP ${uploadRes.status}: ${raw.slice(0, 200)}`);
+      }
+      const uploaded = (await uploadRes.json()) as PostizUploadResult;
+      result.push({ id: uploaded.id, path: uploaded.path });
     }
+    return result;
   };
 
   const handleSubmit = async () => {
@@ -245,40 +311,71 @@ export default function ComposeScreen() {
     }
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
     setSubmitting(true);
+
     try {
-      const media = mediaItems.length > 0 ? await buildMediaPayload() : [];
-      const payload = {
-        type: postNow ? "now" : "schedule",
-        date: postNow ? new Date().toISOString() : scheduleDate.toISOString(),
-        shortLink: false,
-        tags: [] as string[],
-        posts: selectedChannels.map((integrationId) => ({
-          integration: { id: integrationId },
-          value: [{ content: content.trim(), image: media }],
-        })),
-      };
-      const body = JSON.stringify(payload);
-      console.log("[compose] POST", `${baseUrl}/posts`, body);
-
-      // eslint-disable-next-line no-undef
-      const res = await globalThis.fetch(`${baseUrl}/posts`, {
-        method: "POST",
-        headers: { Authorization: apiKey, "Content-Type": "application/json" },
-        body,
-      });
-
-      if (!res.ok) {
-        let detail = "";
-        try {
-          const raw = await res.text();
-          console.log("[compose] error body:", raw);
-          detail = raw.slice(0, 500);
-        } catch {
-          detail = res.statusText;
+      // Group selected channels by workspace
+      const byWorkspace = new Map<string, { ws: PostizWorkspace; channelIds: string[] }>();
+      for (const channelId of selectedChannels) {
+        const intg = allIntegrations?.find((i) => i.id === channelId);
+        if (!intg) continue;
+        if (!byWorkspace.has(intg.workspaceId)) {
+          byWorkspace.set(intg.workspaceId, { ws: intg.workspace, channelIds: [] });
         }
-        throw new Error(`HTTP ${res.status}: ${detail}`);
+        byWorkspace.get(intg.workspaceId)!.channelIds.push(channelId);
       }
 
+      const localUris = mediaItems.filter((m): m is MediaItem & { type: "local" } => m.type === "local").map((m) => m.uri);
+      const hasLocalImages = localUris.length > 0;
+      if (hasLocalImages) setUploading(true);
+
+      await Promise.all(
+        Array.from(byWorkspace.values()).map(async ({ ws, channelIds }) => {
+          // Already-uploaded media belonging to this workspace
+          const uploadedForWs = mediaItems
+            .filter((m): m is MediaItem & { type: "uploaded" } => m.type === "uploaded" && m.workspaceId === ws.id)
+            .map(({ id, path }) => ({ id, path }));
+
+          // Upload local images to this workspace
+          const localUploaded = hasLocalImages
+            ? await uploadLocalToWorkspace(localUris, ws)
+            : [];
+
+          const media = [...uploadedForWs, ...localUploaded];
+
+          const payload = {
+            type: postNow ? "now" : "schedule",
+            date: postNow ? new Date().toISOString() : scheduleDate.toISOString(),
+            shortLink: false,
+            tags: [] as string[],
+            posts: channelIds.map((integrationId) => ({
+              integration: { id: integrationId },
+              value: [{ content: content.trim(), image: media }],
+            })),
+          };
+
+          const body = JSON.stringify(payload);
+          console.log("[compose] POST", `${ws.baseUrl}/posts`, body);
+
+          // eslint-disable-next-line no-undef
+          const res = await globalThis.fetch(`${ws.baseUrl}/posts`, {
+            method: "POST",
+            headers: { Authorization: ws.apiKey, "Content-Type": "application/json" },
+            body,
+          });
+
+          if (!res.ok) {
+            let detail = "";
+            try {
+              const raw = await res.text();
+              console.log(`[compose][${ws.name}] error body:`, raw);
+              detail = raw.slice(0, 500);
+            } catch { detail = res.statusText; }
+            throw new Error(`[${ws.name}] HTTP ${res.status}: ${detail}`);
+          }
+        })
+      );
+
+      if (hasLocalImages) setUploading(false);
       Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
       await AsyncStorage.removeItem(DRAFT_STORAGE_KEY);
       Alert.alert(
@@ -289,6 +386,7 @@ export default function ComposeScreen() {
       queryClient.invalidateQueries({ queryKey: ["posts"] });
       queryClient.invalidateQueries({ queryKey: ["posts-list"] });
     } catch (e: unknown) {
+      setUploading(false);
       Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
       const msg = e instanceof Error ? e.message : "Could not submit post.";
       Alert.alert("Failed", msg);
@@ -317,7 +415,7 @@ export default function ComposeScreen() {
       <View style={[styles.centered, { backgroundColor: colors.background }]}>
         <Feather name="lock" size={32} color={colors.mutedForeground} />
         <Text style={[styles.sectionTitle, { color: colors.foreground }]}>Not Configured</Text>
-        <Text style={[styles.hint, { color: colors.mutedForeground }]}>Add your API key in Settings</Text>
+        <Text style={[styles.hint, { color: colors.mutedForeground }]}>Add a workspace in Settings</Text>
       </View>
     );
   }
@@ -395,7 +493,7 @@ export default function ComposeScreen() {
               const uri =
                 item.type === "local"
                   ? item.uri
-                  : resolveMediaUrl(item.path, baseUrl);
+                  : resolveMediaUrl(item.path, workspaces.find((w) => w.id === item.workspaceId)?.baseUrl ?? "");
               return (
                 <View key={idx} style={styles.imageThumbWrap}>
                   <Image
@@ -443,29 +541,62 @@ export default function ComposeScreen() {
           </View>
         )}
 
+        {/* Channels grouped by workspace then network type */}
         <Text style={[styles.sectionLabel, { color: colors.mutedForeground }]}>CHANNELS</Text>
 
         {loadingIntegrations ? (
           <ActivityIndicator color={colors.primary} style={{ marginVertical: 8 }} />
-        ) : (integrations ?? []).length === 0 ? (
+        ) : grouped.length === 0 ? (
           <Text style={[styles.hint, { color: colors.mutedForeground }]}>
             No channels found. Add integrations in your Postiz instance.
           </Text>
         ) : (
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.channelList}
-          >
-            {(integrations ?? []).map((intg) => (
-              <ChannelChip
-                key={intg.id}
-                integration={intg}
-                selected={selectedChannels.includes(intg.id)}
-                onToggle={() => toggleChannel(intg.id)}
-              />
+          <View style={styles.channelGroups}>
+            {grouped.map(({ workspace, networks }, wsIdx) => (
+              <View
+                key={workspace.id}
+                style={[
+                  styles.workspaceSection,
+                  {
+                    backgroundColor: colors.card,
+                    borderColor: colors.border,
+                  },
+                  wsIdx > 0 && { marginTop: 8 },
+                ]}
+              >
+                {/* Workspace header */}
+                <View style={[styles.workspaceHeader, { borderBottomColor: colors.border }]}>
+                  <Feather name="briefcase" size={12} color={colors.primary} />
+                  <Text style={[styles.workspaceName, { color: colors.primary }]}>
+                    {workspace.name}
+                  </Text>
+                </View>
+
+                {/* Network groups */}
+                <View style={styles.networkGroups}>
+                  {networks.map(({ label, channels }) => (
+                    <View key={label} style={styles.networkGroup}>
+                      {networks.length > 1 && (
+                        <Text style={[styles.networkLabel, { color: colors.mutedForeground }]}>
+                          {label}
+                        </Text>
+                      )}
+                      <View style={styles.chipRow}>
+                        {channels.map((intg) => (
+                          <ChannelChip
+                            key={intg.id}
+                            integration={intg}
+                            selected={selectedChannels.includes(intg.id)}
+                            onToggle={() => toggleChannel(intg.id)}
+                          />
+                        ))}
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
             ))}
-          </ScrollView>
+          </View>
         )}
 
         <View style={[styles.scheduleRow, { backgroundColor: colors.card, borderColor: colors.border }]}>
@@ -577,13 +708,20 @@ export default function ComposeScreen() {
 
       <MediaLibraryModal
         visible={showMediaLibrary}
-        baseUrl={baseUrl}
-        apiKey={apiKey}
+        workspaces={workspaces}
         maxSelect={MAX_IMAGES - mediaItems.length}
         onClose={() => setShowMediaLibrary(false)}
-        onSelect={(items) => {
+        onSelect={(items: LibraryMediaItem[]) => {
           setMediaItems((prev) =>
-            [...prev, ...items.map((i): MediaItem => ({ type: "uploaded", id: i.id, path: i.path }))].slice(0, MAX_IMAGES)
+            [
+              ...prev,
+              ...items.map((i): MediaItem => ({
+                type: "uploaded",
+                id: i.id,
+                path: i.path,
+                workspaceId: i.workspaceId,
+              })),
+            ].slice(0, MAX_IMAGES)
           );
           setShowMediaLibrary(false);
         }}
@@ -600,29 +738,64 @@ const styles = StyleSheet.create({
   charCountRow: { flexDirection: "row", justifyContent: "flex-end", alignItems: "center", gap: 6, marginTop: 4 },
   charCountLabel: { fontSize: 10, fontFamily: "Inter_400Regular" },
   charCount: { fontSize: 11, fontFamily: "Inter_400Regular" },
-  draftBanner: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 14, paddingVertical: 10, borderRadius: 12, borderWidth: 1 },
+  draftBanner: {
+    flexDirection: "row", alignItems: "center", gap: 8,
+    paddingHorizontal: 14, paddingVertical: 10, borderRadius: 12, borderWidth: 1,
+  },
   draftBannerText: { flex: 1, fontSize: 13, fontFamily: "Inter_400Regular" },
   draftBannerAction: { fontSize: 13, fontFamily: "Inter_600SemiBold" },
-  draftBtn: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 6, paddingVertical: 10, borderRadius: 12, borderWidth: 1 },
+  draftBtn: {
+    flexDirection: "row", alignItems: "center", justifyContent: "center",
+    gap: 6, paddingVertical: 10, borderRadius: 12, borderWidth: 1,
+  },
   draftBtnText: { fontSize: 13, fontFamily: "Inter_500Medium" },
   imageRow: { gap: 10, paddingRight: 4 },
   imageThumbWrap: { position: "relative" },
   imageThumb: { width: 100, height: 100, borderRadius: 10, borderWidth: 1 },
-  removeImg: { position: "absolute", top: 4, right: 4, width: 20, height: 20, borderRadius: 10, alignItems: "center", justifyContent: "center" },
-  uploadedBadge: { position: "absolute", bottom: 4, left: 4, width: 16, height: 16, borderRadius: 8, alignItems: "center", justifyContent: "center" },
+  removeImg: {
+    position: "absolute", top: 4, right: 4,
+    width: 20, height: 20, borderRadius: 10, alignItems: "center", justifyContent: "center",
+  },
+  uploadedBadge: {
+    position: "absolute", bottom: 4, left: 4,
+    width: 16, height: 16, borderRadius: 8, alignItems: "center", justifyContent: "center",
+  },
   mediaBtnsRow: { flexDirection: "row", gap: 8 },
-  mediaBtn: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 14, paddingVertical: 10, borderRadius: 10, borderWidth: 1 },
+  mediaBtn: {
+    flexDirection: "row", alignItems: "center", gap: 8,
+    paddingHorizontal: 14, paddingVertical: 10, borderRadius: 10, borderWidth: 1,
+  },
   mediaBtnText: { fontSize: 13, fontFamily: "Inter_500Medium" },
   sectionLabel: { fontSize: 11, fontFamily: "Inter_600SemiBold", letterSpacing: 0.8, marginBottom: -6 },
   sectionTitle: { fontSize: 18, fontFamily: "Inter_600SemiBold" },
   hint: { fontSize: 13, fontFamily: "Inter_400Regular", textAlign: "center" },
-  channelList: { flexDirection: "row", gap: 8, flexWrap: "wrap" },
-  scheduleRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16, paddingVertical: 12, borderRadius: 12, borderWidth: 1 },
+  channelGroups: { gap: 0 },
+  workspaceSection: { borderRadius: 14, borderWidth: 1, overflow: "hidden" },
+  workspaceHeader: {
+    flexDirection: "row", alignItems: "center", gap: 6,
+    paddingHorizontal: 12, paddingVertical: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  workspaceName: { fontSize: 11, fontFamily: "Inter_600SemiBold", letterSpacing: 0.5 },
+  networkGroups: { padding: 10, gap: 10 },
+  networkGroup: { gap: 4 },
+  networkLabel: { fontSize: 10, fontFamily: "Inter_500Medium", letterSpacing: 0.4, marginLeft: 2 },
+  chipRow: { flexDirection: "row", flexWrap: "wrap", gap: 6 },
+  scheduleRow: {
+    flexDirection: "row", alignItems: "center", justifyContent: "space-between",
+    paddingHorizontal: 16, paddingVertical: 12, borderRadius: 12, borderWidth: 1,
+  },
   scheduleRowLeft: { flexDirection: "row", alignItems: "center", gap: 10 },
   scheduleLabel: { fontSize: 15, fontFamily: "Inter_500Medium" },
   dateTimeRow: { flexDirection: "row", gap: 10 },
-  dateBtn: { flex: 1, flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, paddingVertical: 10, borderRadius: 10, borderWidth: 1 },
+  dateBtn: {
+    flex: 1, flexDirection: "row", alignItems: "center", gap: 8,
+    paddingHorizontal: 12, paddingVertical: 10, borderRadius: 10, borderWidth: 1,
+  },
   dateBtnText: { fontSize: 13, fontFamily: "Inter_500Medium" },
-  submitBtn: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8, paddingVertical: 14, borderRadius: 14, marginTop: 4 },
+  submitBtn: {
+    flexDirection: "row", alignItems: "center", justifyContent: "center",
+    gap: 8, paddingVertical: 14, borderRadius: 14, marginTop: 4,
+  },
   submitText: { fontSize: 15, fontFamily: "Inter_600SemiBold" },
 });