feat: ✨ fe changes

.gitignore

@@ -4,5 +4,5 @@ dist
 
 # Rust
 target
-db.rs
+prisma.rs
 src-tauri/dev.db 

package.json

@@ -16,7 +16,7 @@
     "@solid-primitives/i18n": "^2",
     "@solid-primitives/storage": "^2.1.1",
     "@solidjs/router": "^0.8.3",
-    "@tauri-apps/api": "2.0.0-alpha.9",
+    "@tauri-apps/api": "2.0.0-alpha.11",
     "@tauri-apps/plugin-autostart": "github:tauri-apps/tauri-plugin-autostart#v2",
     "@tauri-apps/plugin-clipboard-manager": "github:tauri-apps/tauri-plugin-clipboard-manager#v2",
     "@tauri-apps/plugin-dialog": "github:tauri-apps/tauri-plugin-dialog#v2",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.2.2",
-    "@tauri-apps/cli": "2.0.0-alpha.16",
+    "@tauri-apps/cli": "2.0.0-alpha.17",
     "@types/node": "^20.6",
     "autoprefixer": "^10.4",
     "postcss": "^8.4",

src/App.tsx

@@ -20,7 +20,7 @@ const App: Component = () => {
   const startup = async () => {
     const data = await checkDb();
 
-    if (data) {
+    if (data === 200) {
       return setScreen(Screen.Dashboard);
     }
     return setScreen(Screen.Setup);

src/bindings.ts

@@ -1,7 +1,7 @@
 import { invoke } from "@tauri-apps/api/primitives";
 
 export function checkDb() {
-  return invoke<boolean>("check_db");
+  return invoke<200 | 400>("check_db");
 }
 
 export function getCompany(id: number | null) {
@@ -11,11 +11,7 @@ export function getCompany(id: number | null) {
 export function createPost(data: CreateCompanyData) {
   return invoke<number>("create_company", data);
 }
-export function getTheme() {
-  return invoke<Theme>("get_theme");
-}
 
-export type Theme = "light" | "dark";
 export type CreateCompanyData = { name: string };
 export type Test = { id: number; name: string };
 export type Company = {

src/screens/Setup/Setup.tsx

@@ -1,9 +1,33 @@
-import type { Component } from "solid-js";
+import { useI18n } from "@/i18n";
+import { createSignal, type Component, Show } from "solid-js";
+import ProgressDots from "./components/Progress";
 
 const SetupWizard: Component = () => {
+  const [t] = useI18n();
+  const [currentStep, setCurrentStep] = createSignal(0);
+
   return (
     <div class="flex justify-center items-center w-screen h-screen bg-red">
-      <div class="p-6 w-2/3 h-2/3 bg-white rounded-xl drop-shadow-xl">Setyp Wizard</div>
+      <div class="p-6 w-2/3 h-2/3 bg-secondary rounded-xl drop-shadow-xl flex items-center justify-center flex-col gap-6 relative">
+        <ProgressDots count={5} active={currentStep()} />
+        <Show when={currentStep() === 0}>
+          <h1 class="text-4xl font-bold text-primary">{t("setup.welcome")}</h1>
+          <button
+            class="py-2 px-4 bg-primary rounded-lg text-secondary font-medium"
+            type="button"
+            onClick={() => setCurrentStep(1)}
+          >
+            {t("setup.get_started")}
+          </button>
+        </Show>
+
+        <Show when={currentStep() === 1}>
+          <h1 class="text-4xl font-bold text-primary">{t("setup.welcome")}</h1>
+          <button class="py-2 px-4 bg-primary rounded-lg text-secondary font-medium" type="button">
+            {t("setup.get_started")}
+          </button>
+        </Show>
+      </div>
     </div>
   );
 };

src/screens/Setup/components/Progress.tsx

@@ -0,0 +1,15 @@
+import { Accessor, Component, For } from "solid-js";
+
+const ProgressDots: Component<{ count: number; active: number }> = (props) => {
+  return (
+    <div class="absolute w-full h-10 top-0 left-0 flex gap-4 items-center justify-center">
+      <For each={Array(props.count).fill(0)}>
+        {(_, index) => (
+          <div class={`w-2 h-2 bg-primary rounded-full ${props.active === index() ? "bg-red-700" : ""}`} />
+        )}
+      </For>
+    </div>
+  );
+};
+
+export default ProgressDots;