Export and Import vito settings (#606)

* Export and Import vito settings

* fix tests

resources/js/components/app-logo-icon.tsx

@@ -1,6 +1,6 @@
-import { SVGAttributes } from 'react';
+import { Ref, SVGAttributes } from 'react';
 
-export default function AppLogoIcon(props: SVGAttributes<SVGElement>) {
+export default function AppLogoIcon(props: SVGAttributes<SVGElement> & { ref?: Ref<SVGSVGElement> }) {
   return (
     <svg {...props} viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
       <rect width="1024" height="1024" rx="50" fill="#312E81" />

resources/js/components/ui/card.tsx

@@ -26,4 +26,8 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return <div data-slot="card-footer" className={cn('flex items-center border-t p-4', className)} {...props} />;
 }
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+function CardRow({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-row" className={cn('flex min-h-20 items-center justify-between p-4', className)} {...props} />;
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, CardRow };

resources/js/icons/vito.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { LucideProps } from 'lucide-react';
+import AppLogoIcon from '@/components/app-logo-icon';
+import { cn } from '@/lib/utils';
+
+export const VitoIcon = React.forwardRef<SVGSVGElement, LucideProps>(({ color = 'currentColor', strokeWidth = 30, className, ...rest }, ref) => {
+  return <AppLogoIcon ref={ref} color={color} className={cn(className, 'rounded-xs')} strokeWidth={strokeWidth} {...rest} />;
+});
+
+export default VitoIcon;

resources/js/layouts/settings/layout.tsx

@@ -2,6 +2,7 @@ import { type BreadcrumbItem, type NavItem } from '@/types';
 import { BellIcon, CloudIcon, CodeIcon, DatabaseIcon, KeyIcon, ListIcon, PlugIcon, TagIcon, UserIcon, UsersIcon } from 'lucide-react';
 import { ReactNode } from 'react';
 import Layout from '@/layouts/app/layout';
+import VitoIcon from '@/icons/vito';
 
 const sidebarNavItems: NavItem[] = [
   {
@@ -54,6 +55,11 @@ const sidebarNavItems: NavItem[] = [
     href: route('api-keys'),
     icon: PlugIcon,
   },
+  {
+    title: 'Vito Settings',
+    href: route('vito-settings'),
+    icon: VitoIcon,
+  },
 ];
 
 export default function SettingsLayout({ children, breadcrumbs }: { children: ReactNode; breadcrumbs?: BreadcrumbItem[] }) {

resources/js/pages/vito-settings/components/export.tsx

@@ -0,0 +1,15 @@
+import { Button } from '@/components/ui/button';
+import { DownloadIcon } from 'lucide-react';
+
+export default function ExportVito() {
+  const submit = () => {
+    window.open(route('vito-settings.export'), '_blank');
+  };
+
+  return (
+    <Button onClick={submit}>
+      <DownloadIcon />
+      Export
+    </Button>
+  );
+}

resources/js/pages/vito-settings/components/import.tsx

@@ -0,0 +1,70 @@
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon, UploadIcon } from 'lucide-react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { FormEvent } from 'react';
+import { useForm } from '@inertiajs/react';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import InputError from '@/components/ui/input-error';
+
+export default function ImportVito() {
+  const form = useForm({
+    backup_file: null as File | null,
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(route('vito-settings.import'));
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <UploadIcon />
+          Import
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Import</DialogTitle>
+          <DialogDescription className="sr-only">Import settings to Vito</DialogDescription>
+        </DialogHeader>
+        <Form id="import-vito-form" className="p-4" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="backup_file">Backup file</Label>
+              <Input
+                type="file"
+                id="backup_file"
+                name="backup_file"
+                accept=".zip"
+                onChange={(e) => form.setData('backup_file', e.target.files?.[0] || null)}
+              />
+              <InputError message={form.errors.backup_file} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button form="import-vito-form" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Import
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/vito-settings/index.tsx

@@ -0,0 +1,37 @@
+import SettingsLayout from '@/layouts/settings/layout';
+import { Head } from '@inertiajs/react';
+import Container from '@/components/container';
+import Heading from '@/components/heading';
+import { Card, CardContent, CardRow } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import React from 'react';
+import ExportVito from '@/pages/vito-settings/components/export';
+import ImportVito from '@/pages/vito-settings/components/import';
+
+export default function Users() {
+  return (
+    <SettingsLayout>
+      <Head title="Vito Settings" />
+
+      <Container className="max-w-5xl">
+        <div className="flex items-start justify-between">
+          <Heading title="Vito Settings" description="Here you can manage general Vito settings" />
+        </div>
+
+        <Card>
+          <CardContent>
+            <CardRow>
+              <span>Export all data</span>
+              <ExportVito />
+            </CardRow>
+            <Separator />
+            <CardRow>
+              <span>Import</span>
+              <ImportVito />
+            </CardRow>
+          </CardContent>
+        </Card>
+      </Container>
+    </SettingsLayout>
+  );
+}