Enhance provider onboarding experience

package.json

@@ -25,6 +25,7 @@
     "nextBuild": "next build"
   },
   "dependencies": {
+    "@ionic/react": "^8.7.5",
     "@tauri-apps/api": "2.8.0",
     "@tauri-apps/plugin-autostart": "2.5.0",
     "@tauri-apps/plugin-dialog": "2.4.0",
@@ -36,6 +37,7 @@
     "@tauri-apps/plugin-updater": "2.9.0",
     "chart.js": "^4.4.6",
     "chartjs-plugin-datalabels": "^2.2.0",
+    "ionicons": "^8.0.13",
     "moment": "^2.30.1",
     "next": "^15.5.4",
     "react": "^19.2.0",

src/app/onboarding/_components/SelectableItem.module.css

@@ -0,0 +1,36 @@
+.longItemSelected {
+  display: flex;
+  max-width: 350px;
+  height: 150px;
+
+  border: solid 2px var(--dm-blue);
+  border-radius: 10px;
+
+  margin: 15px;
+  padding: 10px 20px;
+}
+
+.longItemSelected:hover {
+  cursor: pointer;
+}
+
+.longItemNotSelected {
+  display: flex;
+  max-width: 350px;
+  height: 150px;
+
+  border: solid 2px var(--dm-gray);
+  border-radius: 10px;
+
+  margin: 15px;
+  padding: 10px 20px;
+}
+
+.longItemNotSelected:hover {
+  cursor: pointer;
+}
+
+.text {
+  display: flex;
+  align-items: flex-start;
+}

src/app/onboarding/_components/SelectableItem.tsx

@@ -0,0 +1,27 @@
+import styles from "./SelectableItem.module.css";
+
+type SelectableItemProp = {
+  selected: boolean;
+  title: string;
+  description: string;
+};
+
+export default function SelectableItem({
+  selected,
+  title,
+  description,
+}: SelectableItemProp) {
+  return (
+    <li
+      className={
+        selected ? styles.longItemSelected : styles.longItemNotSelected
+      }
+    >
+      <span className={styles.text}>
+        <p>
+          <strong>{title}.</strong> {description}
+        </p>
+      </span>
+    </li>
+  );
+}

src/app/onboarding/page.tsx

@@ -8,10 +8,11 @@
 import styles from "./page.module.css";
 import { useRouter } from "next/navigation";
 import Dialog from "@/components/Dialog";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { DataPackReceipt } from "@/types/settings";
 import Layout from "@/components/Layout";
+import { getConfig } from "@/utils/settings";
 
 export default function Onboarding() {
   const router = useRouter();
@@ -21,6 +22,18 @@ export default function Onboarding() {
     content: "",
     hideSelectButton: false,
   });
+
+  useEffect(() => {
+    async function initPage() {
+      const providerConfig = await getConfig("provider");
+
+      if (!providerConfig.onboarding_completed) {
+        router.push("/onboarding/provider");
+      }
+    }
+    initPage();
+  }, []);
+
   return (
     <Layout title=" " disabledBackButton={true}>
       <div className={styles.onboardingCenter}>

src/app/onboarding/provider/basics/page.module.css

@@ -0,0 +1,44 @@
+.basics label {
+  display: flex;
+  flex-direction: column;
+  margin: 35px 0;
+  width: 300px;
+}
+
+.basics label input {
+  margin: 5px 0;
+}
+
+.iconAndInfo {
+  width: 98dvw;
+  display: flex;
+  justify-content: space-around;
+}
+
+.icon {
+  width: 200px;
+  margin: 20px;
+
+  filter: invert(100%);
+}
+
+.orgHeaderPreview {
+  margin: 10px 0;
+  border-radius: 10px;
+}
+
+.buttons {
+  position: fixed;
+  bottom: 5%;
+  right: 5%;
+}
+
+.buttonsContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.buttons p {
+  font-size: 0.7rem;
+}