@gientech/modual 2.2.3-fix.5 → 2.2.3-fix.6

package/src/modules/database/CreateModal.tsx

@@ -0,0 +1,402 @@
+import React, { useState, useMemo, useRef } from 'react';
+import { Modal, Tooltip } from 'antd';
+import { Xviwer } from '@mxmweb/xviewer';
+import { Button } from '@mxmweb/zui';
+import SQLServer from './assets/SQLServer.png';
+import PostgreSQL from './assets/PostgreSQL.png';
+import Doris from './assets/Doris.png';
+import '@mxmweb/zui/style.css';
+
+const Options = [
+  { label: 'MySQL', value: 'MySQL', icon: PostgreSQL },
+  { label: 'PostgreSQL', value: 'PostgreSQL', icon: PostgreSQL },
+  { label: 'SQLServer', value: 'SQLServer', icon: SQLServer },
+  { label: 'Doris', value: 'Doris', icon: Doris },
+];
+
+interface CreateModalProps {
+  drawerTitle: string;
+  drawerVisible: boolean;
+  isConnectSuccess: boolean;
+  handleDrawerClose: () => void;
+  dbInfo: any;
+  dbType: 'DataTable' | 'DirectDB';
+  eventsEmit: (name: string, data: any, appFn?: any) => Promise<any>;
+}
+const CreateModal = ({
+  drawerTitle,
+  drawerVisible,
+  isConnectSuccess,
+  handleDrawerClose,
+  dbInfo,
+  dbType,
+  eventsEmit,
+}: CreateModalProps) => {
+  const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+  const [isConnectLoading, setIsConnectLoading] = useState(false);
+  const [formValues, setFormValues] = useState<any>({});
+
+  const [passwordEditing, setPasswordEditing] = useState(false);
+
+  // 表单数据状态
+  const formDataDataTable = useMemo(() => {
+    return {
+      id: dbType,
+      layout: 'vertical',
+      formWidth: '500px', // 使用外部传入的表单宽度或默认值
+      fields: [
+        {
+          id: 'name',
+          name: 'name',
+          label: '数据库名称',
+          type: 'input',
+          required: true,
+          placeholder: '仅支持汉字、数字、英文、符号',
+          validate: (value: string) => {
+            if (!value) {
+              return '数据库名称不能为空';
+            }
+            // 仅支持汉字、数字、英文、符号
+            const validPattern = /[\u4E00-\u9FA5A-Za-z0-9\W]/;
+            if (!validPattern.test(value)) {
+              return '仅支持汉字、数字、英文、符号';
+            }
+            return undefined;
+          },
+          counter: 100, // 最大100个字符
+        },
+        {
+          id: 'description',
+          name: 'description',
+          label: '数据库描述',
+          type: 'textarea',
+          counter: 150, // 最大150个字符
+          required: false,
+          placeholder: '请输入数据库描述,此描述仅用于区分不同数据库,不会影响数据库调用',
+          defaultValue: '',
+        },
+      ],
+    };
+  }, [dbType, dbInfo]);
+
+  const formDataDirectDB = useMemo(() => {
+    return {
+      id: dbType,
+      layout: 'vertical',
+      formWidth: '470px', // 使用外部传入的表单宽度或默认值
+      fields: [
+        {
+          id: 'name',
+          name: 'name',
+          label: '数据库名称',
+          type: 'input',
+          required: true,
+          placeholder: '仅支持汉字、数字、英文、符号',
+          validate: (value: string) => {
+            if (!value) {
+              return '数据库名称不能为空';
+            }
+            // 仅支持汉字、数字、英文、符号
+            const validPattern = /[\u4E00-\u9FA5A-Za-z0-9\W]/;
+            if (!validPattern.test(value)) {
+              return '仅支持汉字、数字、英文、符号';
+            }
+            return undefined;
+          },
+          counter: 100, // 最大100个字符
+        },
+        {
+          id: 'description',
+          name: 'description',
+          label: '数据库描述',
+          type: 'textarea',
+          required: false,
+          counter: 150, // 最大150个字符
+          placeholder: '请输入数据库描述,此描述仅用于区分不同数据库,不会影响数据库调用',
+          defaultValue: '',
+        },
+        {
+          id: 'db-info',
+          label: '直连数据源信息',
+          type: 'title',
+          level: 2,
+        },
+        {
+          id: 'dbType',
+          name: 'dbType',
+          label: '数据源类型',
+          type: 'select',
+          disabled: !!dbInfo,
+          required: true,
+          options: Options.map((opt: any) => {
+            const { label, value, icon } = opt;
+            return {
+              label,
+              value,
+              render: () => (
+                <div className="flex items-center gap-2">
+                  <img src={icon} width={24} />
+                  <span>{label}</span>
+                </div>
+              ),
+            };
+          }),
+          // defaultValue: Options[0].value,
+        },
+        {
+          id: 'dbHost',
+          name: 'dbHost',
+          label: '主机地址',
+          type: 'input',
+          required: true,
+          disabled: !!dbInfo,
+          placeholder: '请输入IP地址或者域名',
+        },
+        {
+          id: 'dbPort',
+          name: 'dbPort',
+          label: '端口号',
+          type: 'number',
+          required: true,
+          disabled: !!dbInfo,
+          placeholder: '请输入端口名称',
+        },
+        {
+          id: 'dbDatabase',
+          name: 'dbDatabase',
+          label: '连接数据库名',
+          disabled: !!dbInfo,
+          placeholder: '请输入连接数据库名',
+          required: true,
+          type: 'input',
+        },
+        {
+          type: 'col',
+          children: [
+            {
+              id: 'dbUser',
+              type: 'input' as const,
+              name: 'dbUser',
+              label: '用户名',
+              disabled: !!dbInfo,
+              placeholder: '请输入用户名',
+              required: true,
+            },
+            {
+              id: 'dbPassword',
+              type: 'password' as const,
+              name: 'dbPassword',
+              label: '密码',
+              placeholder: '请输入密码',
+              required: true,
+              disabled: passwordEditing ? false : !!dbInfo,
+            },
+          ],
+        },
+      ],
+    };
+  }, [dbType, dbInfo, passwordEditing]);
+
+  // 表单引用
+  const formRef = useRef<any>(null);
+  // 表单事件处理 - 简化版本，核心层统一处理
+  const mergedEventsEmit = (name: string, data: any, appFn: any) => {
+    console.log('[Form] eventsEmit:', name, data, appFn);
+
+    switch (name) {
+      case 'form:ready':
+        // 保存表单引用
+        if (data.formRef) {
+          formRef.current = data.formRef;
+        }
+        break;
+
+      case 'form_field_change':
+        console.log('字段值变化:', data);
+        setFormValues((prev: any) => ({
+          ...prev,
+          [data.fieldId]: data.value,
+        }));
+        break;
+      case 'form_validation_error':
+        console.log('表单验证错误:', data);
+        break;
+
+      // 其他事件透传
+      default:
+        console.log('未处理的事件:', name, data);
+    }
+    // 向上层继续透传
+    eventsEmit?.(name, data, appFn);
+  };
+
+  // 处理表单提交和数据获取
+  const handleFormSubmit = async () => {
+    try {
+      setIsSubmitLoading(true);
+      const allFormData = await formRef.current.getAllData();
+
+      // 验证状态
+      if (allFormData.isValid) {
+        console.log(allFormData, '===');
+        // 触发提交成功事件
+        if (dbType == 'DirectDB' && drawerTitle == '编辑数据库' && !passwordEditing) {
+          // 没有重新输入密码时，只提交name,desc
+          allFormData.fields = allFormData.fields.filter(
+            (f: any) => f.name == 'name' || f.name == 'description'
+          );
+        }
+        await eventsEmit('form_submitted', allFormData, undefined);
+        setPasswordEditing(false);
+      }
+    } catch (error) {
+      console.error('❌ 提交表单数据失败:', error);
+    } finally {
+      setIsSubmitLoading(false);
+    }
+  };
+
+  const handleConnectionTest = async () => {
+    try {
+      setIsConnectLoading(true);
+      const allFormData = await formRef.current.getAllData();
+      if (allFormData.isValid) {
+        const formData = allFormData.fields.reduce((acc: any, item: any) => {
+          acc[item.name] = item.value;
+          return acc;
+        }, {});
+        // 触发提交成功事件
+        await eventsEmit('form:connect_test', formData, undefined);
+      }
+    } catch (error) {
+      setIsConnectLoading(false);
+    } finally {
+      setIsConnectLoading(false);
+    }
+  };
+
+  const viewConfig = useMemo(() => {
+    const formData = dbType == 'DataTable' ? formDataDataTable : formDataDirectDB;
+    return {
+      label: '动态表单示例',
+      defaultActiveId: formData.id,
+      model: null,
+      views: [
+        {
+          label: '用户注册表单',
+          id: formData.id,
+          type: 'form',
+          size: 'md' as const,
+          formWidth: formData.formWidth, // 设置视图宽度
+          formConfig: {
+            layout: formData.layout,
+            showReset: false, // 不显示内置的重置按钮
+            showSubmit: false, // 不显示内置的提交按钮
+            formWidth: formData.formWidth, // 传递表单宽度
+            // 提供获取表单数据的方法，包括 uploader 组件的数据
+            getFormData: () => {
+              // 返回当前表单的基础数据
+              return {
+                ...formValues,
+                timestamp: new Date().toISOString(),
+                formId: formData.id,
+              };
+            },
+            onFieldChange: (fieldId: string, value: any) => {
+              mergedEventsEmit('form_field_change', { fieldId, value }, undefined);
+            },
+            onValidationError: (errors: any) => {
+              mergedEventsEmit('form_validation_error', errors, undefined);
+            },
+          },
+        },
+      ],
+      dataSource: [
+        {
+          id: formData.id,
+          fields: formData.fields,
+          defaultValues: { ...dbInfo },
+        },
+      ], // 表单数据
+      eventsEmit: mergedEventsEmit,
+    };
+  }, [dbType, formDataDataTable, formDataDirectDB, drawerVisible, dbInfo]);
+
+  const confirmBtnDisable = useMemo(() => {
+    if (dbType == 'DirectDB') {
+      if (dbInfo) {
+        return passwordEditing && !isConnectSuccess;
+      } else {
+        return !isConnectSuccess;
+      }
+    }
+    return false;
+  }, [dbType, isConnectSuccess, passwordEditing, drawerVisible]);
+  return (
+    <Modal
+      title={drawerTitle}
+      width={620}
+      onCancel={() => {
+        handleDrawerClose();
+        setPasswordEditing(false);
+      }}
+      open={drawerVisible}
+      destroyOnHidden
+      footer={
+        <div
+          className="flex justify-end gap-3"
+          style={{
+            justifyContent: 'end',
+          }}
+        >
+          <Button
+            mode="default"
+            label="取消"
+            onClick={() => {
+              handleDrawerClose();
+              setPasswordEditing(false);
+            }}
+          />
+          <Button
+            mode="primary"
+            label="确认"
+            loading={isSubmitLoading}
+            disabled={confirmBtnDisable}
+            onClick={handleFormSubmit}
+          />
+        </div>
+      }
+    >
+      <Xviwer key="example-form" {...viewConfig} />
+      {dbType === 'DirectDB' && (
+        <>
+          {drawerTitle == '编辑数据库' && !passwordEditing ? (
+            <Button
+              mode="primary"
+              className="mt-[10px]"
+              label="修改密码"
+              onClick={() => {
+                setPasswordEditing(true);
+                formRef.current.setValues({
+                  dbPassword: undefined,
+                });
+              }}
+            />
+          ) : (
+            <Tooltip title="需通过测试才可创建成功">
+              <Button
+                mode="primary"
+                className="mt-[10px]"
+                label="连接测试"
+                loading={isConnectLoading}
+                onClick={handleConnectionTest}
+              />
+            </Tooltip>
+          )}
+        </>
+      )}
+    </Modal>
+  );
+};
+
+export default CreateModal;

package/src/modules/database/assets/database.svg

@@ -0,0 +1,11 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.5" width="40" height="40" rx="2.85714" fill="white"/>
+<path d="M7.1449 25.1108C8.7449 26.6994 11.9899 27.8784 17.4232 28.0669L17.432 28.1255C17.9138 30.5391 19.3276 32.6659 21.3666 34.0444H19.0551C11.1338 34.0444 6.50102 32.1563 6.50037 29.8784V26.3999C6.51198 26.152 6.57486 25.9089 6.68591 25.687C6.79696 25.4652 6.95352 25.2687 7.1449 25.1108ZM26.3461 18.1665C28.4483 18.1718 30.4632 19.009 31.9496 20.4956C33.4361 21.9823 34.2728 23.9977 34.2777 26.1001C34.2776 30.4884 30.7229 34.0325 26.3451 34.0327C21.9671 34.0327 18.4117 30.4781 18.4115 26.1001C18.4115 21.722 21.967 18.1665 26.3451 18.1665H26.3461ZM26.976 22.5239C26.786 22.3341 26.4924 22.3101 26.2767 22.4526L26.1898 22.5239L22.8568 25.8569C22.6399 26.0739 22.6399 26.4261 22.8568 26.6431C23.0738 26.8599 23.426 26.8599 23.6429 26.6431L26.0297 24.2563V29.5835C26.0298 29.8901 26.2787 30.138 26.5853 30.1382C26.892 30.1381 27.1409 29.8901 27.141 29.5835V24.2612L29.5238 26.6431C29.7408 26.8598 30.093 26.8599 30.3099 26.6431C30.5266 26.4262 30.5266 26.0738 30.3099 25.8569L26.976 22.5239ZM7.12244 16.1675C8.93285 17.8894 12.5231 19.1558 18.8783 19.1558H19.3783C17.9451 20.8109 17.1557 22.9224 17.1556 25.1108V25.1128C10.4122 24.8346 6.50134 23.0455 6.50134 20.9341V17.4565C6.50818 17.2101 6.56707 16.9676 6.67419 16.7456C6.78134 16.5236 6.93379 16.3262 7.12244 16.1675ZM18.4779 6.25635C26.0998 6.25635 31.3109 8.14508 31.3109 10.4565V12.978C31.3108 15.2999 26.0445 17.1782 18.4779 17.1782C10.9114 17.1782 6.50049 15.2998 6.50037 12.978V10.4565C6.50037 8.15655 10.8561 6.25636 18.4779 6.25635Z" fill="black"/>
+<path d="M7.1449 25.1108C8.7449 26.6994 11.9899 27.8784 17.4232 28.0669L17.432 28.1255C17.9138 30.5391 19.3276 32.6659 21.3666 34.0444H19.0551C11.1338 34.0444 6.50102 32.1563 6.50037 29.8784V26.3999C6.51198 26.152 6.57486 25.9089 6.68591 25.687C6.79696 25.4652 6.95352 25.2687 7.1449 25.1108ZM26.3461 18.1665C28.4483 18.1718 30.4632 19.009 31.9496 20.4956C33.4361 21.9823 34.2728 23.9977 34.2777 26.1001C34.2776 30.4884 30.7229 34.0325 26.3451 34.0327C21.9671 34.0327 18.4117 30.4781 18.4115 26.1001C18.4115 21.722 21.967 18.1665 26.3451 18.1665H26.3461ZM26.976 22.5239C26.786 22.3341 26.4924 22.3101 26.2767 22.4526L26.1898 22.5239L22.8568 25.8569C22.6399 26.0739 22.6399 26.4261 22.8568 26.6431C23.0738 26.8599 23.426 26.8599 23.6429 26.6431L26.0297 24.2563V29.5835C26.0298 29.8901 26.2787 30.138 26.5853 30.1382C26.892 30.1381 27.1409 29.8901 27.141 29.5835V24.2612L29.5238 26.6431C29.7408 26.8598 30.093 26.8599 30.3099 26.6431C30.5266 26.4262 30.5266 26.0738 30.3099 25.8569L26.976 22.5239ZM7.12244 16.1675C8.93285 17.8894 12.5231 19.1558 18.8783 19.1558H19.3783C17.9451 20.8109 17.1557 22.9224 17.1556 25.1108V25.1128C10.4122 24.8346 6.50134 23.0455 6.50134 20.9341V17.4565C6.50818 17.2101 6.56707 16.9676 6.67419 16.7456C6.78134 16.5236 6.93379 16.3262 7.12244 16.1675ZM18.4779 6.25635C26.0998 6.25635 31.3109 8.14508 31.3109 10.4565V12.978C31.3108 15.2999 26.0445 17.1782 18.4779 17.1782C10.9114 17.1782 6.50049 15.2998 6.50037 12.978V10.4565C6.50037 8.15655 10.8561 6.25636 18.4779 6.25635Z" fill="url(#paint0_linear_4121_494)"/>
+<defs>
+<linearGradient id="paint0_linear_4121_494" x1="37.7503" y1="36.1288" x2="12.5292" y2="20.8801" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7FC0FB"/>
+<stop offset="1" stop-color="#4088F4"/>
+</linearGradient>
+</defs>
+</svg>

package/src/modules/database/assets/database_add.svg

@@ -0,0 +1,53 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 12C14 10.8954 14.8954 10 16 10H29C31.2091 10 33 11.7909 33 14V26C33 30.4183 29.4183 34 25 34H16C14.8954 34 14 33.1046 14 32V12Z" fill="url(#paint0_linear_4121_5043)"/>
+<foreignObject x="-1" y="-1" width="32" height="36"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_0_4121_5043_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
+<path d="M3 7C3 4.79086 4.79086 3 7 3H23C25.2091 3 27 4.79086 27 7V19C27 25.6274 21.6274 31 15 31H7C4.79086 31 3 29.2091 3 27V7Z" fill="white" fill-opacity="0.46"/>
+<path d="M7 3.25H23C25.0711 3.25 26.75 4.92893 26.75 7V19C26.75 25.4893 21.4893 30.75 15 30.75H7C4.92893 30.75 3.25 29.0711 3.25 27V7C3.25 4.92893 4.92893 3.25 7 3.25Z" stroke="white" stroke-opacity="0.34" stroke-width="0.5"/>
+</g>
+<g filter="url(#filter1_d_4121_5043)">
+<path d="M8 10H21" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</g>
+<g filter="url(#filter2_d_4121_5043)">
+<path d="M8 16H21" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</g>
+<g filter="url(#filter3_d_4121_5043)">
+<path d="M8 22H18" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="bgblur_0_4121_5043_clip_path" transform="translate(1 1)"><path d="M3 7C3 4.79086 4.79086 3 7 3H23C25.2091 3 27 4.79086 27 7V19C27 25.6274 21.6274 31 15 31H7C4.79086 31 3 29.2091 3 27V7Z"/>
+</clipPath><filter id="filter1_d_4121_5043" x="3" y="5" width="23" height="10" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.396078 0 0 0 0 0.984314 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4121_5043"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4121_5043" result="shape"/>
+</filter>
+<filter id="filter2_d_4121_5043" x="3" y="11" width="23" height="10" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.396078 0 0 0 0 0.984314 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4121_5043"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4121_5043" result="shape"/>
+</filter>
+<filter id="filter3_d_4121_5043" x="3" y="17" width="20" height="10" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.396078 0 0 0 0 0.984314 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4121_5043"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4121_5043" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_4121_5043" x1="23.5" y1="10" x2="23.5" y2="34" gradientUnits="userSpaceOnUse">
+<stop stop-color="#64A0FD"/>
+<stop offset="1" stop-color="#015AFF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/modules/database/assets/database_connect.svg

@@ -0,0 +1,66 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 12C14 10.8954 14.8954 10 16 10H29C31.2091 10 33 11.7909 33 14V26C33 30.4183 29.4183 34 25 34H16C14.8954 34 14 33.1046 14 32V12Z" fill="url(#paint0_linear_4472_18094)"/>
+<foreignObject x="-1" y="-1" width="32" height="36"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_0_4472_18094_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
+<path d="M3 7C3 4.79086 4.79086 3 7 3H23C25.2091 3 27 4.79086 27 7V19C27 25.6274 21.6274 31 15 31H7C4.79086 31 3 29.2091 3 27V7Z" fill="white" fill-opacity="0.46"/>
+<path d="M7 3.25H23C25.0711 3.25 26.75 4.92893 26.75 7V19C26.75 25.4893 21.4893 30.75 15 30.75H7C4.92893 30.75 3.25 29.0711 3.25 27V7C3.25 4.92893 4.92893 3.25 7 3.25Z" stroke="white" stroke-opacity="0.34" stroke-width="0.5"/>
+</g>
+<g filter="url(#filter1_d_4472_18094)">
+<path d="M21 13.1001C21 13.1001 21 20.6188 21 21.2001C21 22.1942 18.3137 23.0001 15 23.0001C11.6863 23.0001 9.00001 22.1942 9.00001 21.2001C9.00001 20.6428 9 13.1001 9 13.1001" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_d_4472_18094)">
+<path d="M21 18.5C21 19.4941 18.3137 20.3 15 20.3C11.6863 20.3 9 19.4941 9 18.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter3_d_4472_18094)">
+<path d="M21 15.8C21 16.7942 18.3137 17.6 15 17.6C11.6863 17.6 9 16.7942 9 15.8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter4_d_4472_18094)">
+<path d="M15 14.6C18.3137 14.6 21 13.7941 21 12.8C21 11.8059 18.3137 11 15 11C11.6863 11 9 11.8059 9 12.8C9 13.7941 11.6863 14.6 15 14.6Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<clipPath id="bgblur_0_4472_18094_clip_path" transform="translate(1 1)"><path d="M3 7C3 4.79086 4.79086 3 7 3H23C25.2091 3 27 4.79086 27 7V19C27 25.6274 21.6274 31 15 31H7C4.79086 31 3 29.2091 3 27V7Z"/>
+</clipPath><filter id="filter1_d_4472_18094" x="4.25" y="8.3501" width="21.5" height="19.3999" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.396078 0 0 0 0 0.984314 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4472_18094"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4472_18094" result="shape"/>
+</filter>
+<filter id="filter2_d_4472_18094" x="4.25" y="13.75" width="21.5" height="11.3" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.396078 0 0 0 0 0.984314 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4472_18094"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4472_18094" result="shape"/>
+</filter>
+<filter id="filter3_d_4472_18094" x="4.25" y="11.05" width="21.5" height="11.3" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.396078 0 0 0 0 0.984314 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4472_18094"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4472_18094" result="shape"/>
+</filter>
+<filter id="filter4_d_4472_18094" x="4.25" y="6.25" width="21.5" height="13.1001" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.396078 0 0 0 0 0.984314 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4472_18094"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4472_18094" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_4472_18094" x1="23.5" y1="10" x2="23.5" y2="34" gradientUnits="userSpaceOnUse">
+<stop stop-color="#64A0FD"/>
+<stop offset="1" stop-color="#015AFF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/modules/database/assets/database_upload.svg

@@ -0,0 +1,29 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 12C14 10.8954 14.8954 10 16 10H29C31.2091 10 33 11.7909 33 14V26C33 30.4183 29.4183 34 25 34H16C14.8954 34 14 33.1046 14 32V12Z" fill="url(#paint0_linear_4472_18052)"/>
+<foreignObject x="-1" y="-1" width="32" height="36"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_0_4472_18052_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
+<path d="M3 7C3 4.79086 4.79086 3 7 3H23C25.2091 3 27 4.79086 27 7V19C27 25.6274 21.6274 31 15 31H7C4.79086 31 3 29.2091 3 27V7Z" fill="white" fill-opacity="0.46"/>
+<path d="M7 3.25H23C25.0711 3.25 26.75 4.92893 26.75 7V19C26.75 25.4893 21.4893 30.75 15 30.75H7C4.92893 30.75 3.25 29.0711 3.25 27V7C3.25 4.92893 4.92893 3.25 7 3.25Z" stroke="white" stroke-opacity="0.34" stroke-width="0.5"/>
+</g>
+<g filter="url(#filter1_d_4472_18052)">
+<path d="M14 19V11.6667" stroke="white" stroke-width="1.83972" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 14L12 13L14 11L16 13L17 14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 22H18" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="bgblur_0_4472_18052_clip_path" transform="translate(1 1)"><path d="M3 7C3 4.79086 4.79086 3 7 3H23C25.2091 3 27 4.79086 27 7V19C27 25.6274 21.6274 31 15 31H7C4.79086 31 3 29.2091 3 27V7Z"/>
+</clipPath><filter id="filter1_d_4472_18052" x="5" y="6" width="18" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.396078 0 0 0 0 0.984314 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4472_18052"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4472_18052" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_4472_18052" x1="23.5" y1="10" x2="23.5" y2="34" gradientUnits="userSpaceOnUse">
+<stop stop-color="#64A0FD"/>
+<stop offset="1" stop-color="#015AFF"/>
+</linearGradient>
+</defs>
+</svg>