diff --git a/elebox-cli/src/category_cmd.rs b/elebox-cli/src/category_cmd.rs
index b006d02..e75ee49 100644
--- a/elebox-cli/src/category_cmd.rs
+++ b/elebox-cli/src/category_cmd.rs
@@ -76,7 +76,7 @@ pub fn category_cmd(db: &dyn elebox_core::Database, cmd: &CategoryCommand) {
             // };
         }
         Some(CategorySubCommand::Export(args)) => {
-            let _ = manager.export_csv(&args.path);
+            let _ = manager.export(&args.path);
         }
         None => {
             println!("List part category");
diff --git a/elebox-cli/src/main.rs b/elebox-cli/src/main.rs
index 073e391..3127e68 100644
--- a/elebox-cli/src/main.rs
+++ b/elebox-cli/src/main.rs
@@ -53,9 +53,9 @@ fn main() {
         EntityType::Init => db.init(),
         EntityType::Part(cmd) => part_cmd(&db, cmd),
         EntityType::Category(cmd) => category_cmd(&db, cmd),
-        EntityType::Export(args) => elebox_core::export_csv(&db, &args.path),
+        EntityType::Export(args) => elebox_core::export(&db, &args.path),
         EntityType::Import(args) => {
-            let _ = elebox_core::import_csv(&args.path);
+            let _ = elebox_core::import(&args.path);
         }
     };
 }
diff --git a/elebox-cli/src/part_cmd.rs b/elebox-cli/src/part_cmd.rs
index 5dc137d..b8d2d0b 100644
--- a/elebox-cli/src/part_cmd.rs
+++ b/elebox-cli/src/part_cmd.rs
@@ -116,10 +116,10 @@ pub fn part_cmd(db: &dyn elebox_core::Database, cmd: &PartCommand) {
                 }
             }
             PartSubCommand::Export(args) => {
-                let _ = manager.export_csv(&args.path);
+                let _ = manager.export(&args.path);
             }
             PartSubCommand::Import(args) => {
-                let _ = manager.import_csv(&args.path);
+                let _ = manager.import(&args.path);
             }
         },
         None => {
diff --git a/elebox-core/Cargo.toml b/elebox-core/Cargo.toml
index b6f8dbd..b0c96a8 100644
--- a/elebox-core/Cargo.toml
+++ b/elebox-core/Cargo.toml
@@ -11,8 +11,9 @@ edition = "2021"
 jammdb = "0.11.0"
 serde = { version = "1.0", features = ["derive"] }
 rmp-serde = "1.1.2"
-uuid = { version = "1.5.0", features = ["v4", "fast-rng", "macro-diagnostics"] }
+uuid = { version = "1.5.0", features = ["v7", "fast-rng", "macro-diagnostics"] }
 csv = "1.3.0"
+serde_yaml = "0.9.34"
 
 [profile.release]
 lto = true
diff --git a/elebox-core/src/backup.rs b/elebox-core/src/backup.rs
new file mode 100644
index 0000000..b1379db
--- /dev/null
+++ b/elebox-core/src/backup.rs
@@ -0,0 +1,50 @@
+use crate::{
+    CategoryManager, Database, JammDatabase, ManufacturerManager, PackageManager, PartManager,
+};
+use std::path::PathBuf;
+
+pub fn export(db: &dyn Database, path: &str) {
+    let filename_part = format!("{}{}", path, "elebox_export_parts.yaml");
+    let _ = PartManager::new(db).export(&filename_part);
+
+    let filename_cat = format!("{}{}", path, "elebox_export_categories.yaml");
+    let _ = CategoryManager::new(db).export(&filename_cat);
+
+    let filename_pkg = format!("{}{}", path, "elebox_export_packages.yaml");
+    let _ = PackageManager::new(db).export(&filename_pkg);
+
+    let filename_mfr = format!("{}{}", path, "elebox_export_mfrs.yaml");
+    let _ = ManufacturerManager::new(db).export(&filename_mfr);
+}
+
+pub fn import(path: &str) -> Result<(), String> {
+    let db_path = format!("{}{}", path, "import_elebox.db");
+    let db = JammDatabase::new(&db_path);
+    db.init();
+
+    let filename_mfr = format!("{}{}", path, "elebox_export_mfrs.yaml");
+    let res = ManufacturerManager::new(&db).import(&filename_mfr);
+    if res.is_err() {
+        return Err("Part".to_string());
+    }
+
+    let filename_pkg = format!("{}{}", path, "elebox_export_packages.yaml");
+    let res = PackageManager::new(&db).import(&filename_pkg);
+    if res.is_err() {
+        return Err("Part".to_string());
+    }
+
+    let filename_cat = format!("{}{}", path, "elebox_export_categories.yaml");
+    let res = CategoryManager::new(&db).import(&filename_cat);
+    if res.is_err() {
+        return Err("Part".to_string());
+    }
+
+    let filename_part = format!("{}{}", path, "elebox_export_parts.yaml");
+    let res = PartManager::new(&db).import(&filename_part);
+    if res.is_err() {
+        return Err("Part".to_string());
+    }
+
+    Ok(())
+}
diff --git a/elebox-core/src/category.rs b/elebox-core/src/category.rs
index 8b02b8b..751c810 100644
--- a/elebox-core/src/category.rs
+++ b/elebox-core/src/category.rs
@@ -1,4 +1,4 @@
-use crate::{csv::*, db::*, errors::EleboxError};
+use crate::{csv::*, db::*, errors::EleboxError, yaml::*};
 use serde::{Deserialize, Serialize};
 use std::{collections::HashMap, fmt::Debug};
 
@@ -87,6 +87,13 @@ impl<'a> CategoryManager<'a> {
             ));
         }
 
+        if ori_name != &new_category.name && self.db.get_category_id(&new_category.name).is_some() {
+            return Err(EleboxError::AlreadyExists(
+                "Category".to_string(),
+                new_category.name.clone(),
+            ));
+        }
+
         // Normalize
         let mut cat = Category {
             name: new_category.name.clone(),
@@ -158,26 +165,36 @@ impl<'a> CategoryManager<'a> {
         Ok(())
     }
 
-    pub fn export_csv(&self, filename: &str) -> Result<(), ()> {
+    pub fn export(&self, filename: &str) -> Result<(), ()> {
         let cats = self.list();
-        let res = write_csv(filename, cats, None);
+        let res = write_yaml(filename, cats);
         return res;
     }
 
-    pub fn import_csv(&self, filename: &str) -> Result<(), ()> {
-        let res_parts = read_csv(filename, None);
+    pub fn import(&self, filename: &str) -> Result<(), ()> {
+        let res_parts = read_yaml(filename);
         if res_parts.is_err() {
             return Err(());
         }
 
         let cats: Vec<Category> = res_parts.unwrap();
-        for cat in cats {
-            let _ = self.add(&cat);
+        for cat in &cats {
+            self.add_recursion(cat, &cats);
         }
 
         Ok(())
     }
 
+    fn add_recursion(&self, category: &Category, cats: &[Category]) -> Result<(), EleboxError> {
+        if let Some(parent_name) = &category.parent {
+            if let Some(parent_cat) = cats.iter().find(|c| c.name == *parent_name) {
+                self.add_recursion(parent_cat, cats);
+            }
+        }
+
+        self.add(category)
+    }
+
     fn to_node(&self, name: String, map: &HashMap<String, Vec<String>>) -> TreeNode {
         let mut children = vec![];
 
diff --git a/elebox-core/src/lib.rs b/elebox-core/src/lib.rs
index 54c2bf3..864c048 100644
--- a/elebox-core/src/lib.rs
+++ b/elebox-core/src/lib.rs
@@ -1,3 +1,4 @@
+mod backup;
 mod category;
 mod csv;
 mod db;
@@ -6,6 +7,7 @@ mod errors;
 mod manufacturer;
 mod package;
 mod part;
+mod yaml;
 
 pub use category::*;
 pub use db::CustomField;
@@ -17,50 +19,6 @@ pub use manufacturer::*;
 pub use package::*;
 pub use part::*;
 
+pub use backup::export;
+pub use backup::import;
 pub use default_db::create_default_db;
-
-pub fn export_csv(db: &dyn Database, path: &str) {
-    let filename_part = format!("{}{}", path, "elebox_export_parts.tsv");
-    let _ = PartManager::new(db).export_csv(&filename_part);
-
-    let filename_cat = format!("{}{}", path, "elebox_export_categories.tsv");
-    let _ = CategoryManager::new(db).export_csv(&filename_cat);
-
-    let filename_pkg = format!("{}{}", path, "elebox_export_packages.tsv");
-    let _ = PackageManager::new(db).export_csv(&filename_pkg);
-
-    let filename_mfr = format!("{}{}", path, "elebox_export_mfrs.tsv");
-    let _ = ManufacturerManager::new(db).export_csv(&filename_mfr);
-}
-
-pub fn import_csv(path: &str) -> Result<(), String> {
-    let db_path = format!("{}{}", path, "import_elebox.db");
-    let db = JammDatabase::new(&db_path);
-    db.init();
-
-    let filename_mfr = format!("{}{}", path, "elebox_export_mfrs.tsv");
-    let res = ManufacturerManager::new(&db).import_csv(&filename_mfr);
-    if res.is_err() {
-        return Err("Part".to_string());
-    }
-
-    let filename_pkg = format!("{}{}", path, "elebox_export_packages.tsv");
-    let res = PackageManager::new(&db).import_csv(&filename_pkg);
-    if res.is_err() {
-        return Err("Part".to_string());
-    }
-
-    let filename_cat = format!("{}{}", path, "elebox_export_categories.tsv");
-    let res = CategoryManager::new(&db).import_csv(&filename_cat);
-    if res.is_err() {
-        return Err("Part".to_string());
-    }
-
-    let filename_part = format!("{}{}", path, "elebox_export_parts.tsv");
-    let res = PartManager::new(&db).import_csv(&filename_part);
-    if res.is_err() {
-        return Err("Part".to_string());
-    }
-
-    Ok(())
-}
diff --git a/elebox-core/src/manufacturer.rs b/elebox-core/src/manufacturer.rs
index 289e75a..8b69eb2 100644
--- a/elebox-core/src/manufacturer.rs
+++ b/elebox-core/src/manufacturer.rs
@@ -1,4 +1,4 @@
-use crate::{csv::*, db::*, errors::EleboxError};
+use crate::{csv::*, db::*, errors::EleboxError, yaml::*};
 use serde::{Deserialize, Serialize};
 use std::fmt::Debug;
 
@@ -73,6 +73,13 @@ impl<'a> ManufacturerManager<'a> {
             ));
         }
 
+        if ori_name != &new_mfr.name && self.db.get_mfr_id(&new_mfr.name).is_some() {
+            return Err(EleboxError::AlreadyExists(
+                "Mfr".to_string(),
+                new_mfr.name.clone(),
+            ));
+        }
+
         let db_mfr = self.to_db_mfr(new_mfr)?;
         self.db.update_mfr(ori_name, &db_mfr);
         Ok(())
@@ -108,14 +115,14 @@ impl<'a> ManufacturerManager<'a> {
             .collect()
     }
 
-    pub fn export_csv(&self, filename: &str) -> Result<(), ()> {
+    pub fn export(&self, filename: &str) -> Result<(), ()> {
         let mfrs = self.list();
-        let res = write_csv(filename, mfrs, None);
+        let res = write_yaml(filename, mfrs);
         return res;
     }
 
-    pub fn import_csv(&self, filename: &str) -> Result<(), ()> {
-        let res_parts = read_csv(filename, None);
+    pub fn import(&self, filename: &str) -> Result<(), ()> {
+        let res_parts = read_yaml(filename);
         if res_parts.is_err() {
             return Err(());
         }
diff --git a/elebox-core/src/package.rs b/elebox-core/src/package.rs
index 7a60696..387787f 100644
--- a/elebox-core/src/package.rs
+++ b/elebox-core/src/package.rs
@@ -1,4 +1,4 @@
-use crate::{csv::*, db::*, errors::EleboxError};
+use crate::{csv::*, db::*, errors::EleboxError, yaml::*};
 use serde::{Deserialize, Serialize};
 use std::fmt::Debug;
 
@@ -82,6 +82,13 @@ impl<'a> PackageManager<'a> {
             ));
         }
 
+        if ori_name != &new_package.name && self.db.get_package_id(&new_package.name).is_some() {
+            return Err(EleboxError::AlreadyExists(
+                "Package".to_string(),
+                new_package.name.clone(),
+            ));
+        }
+
         let db_pkg = self.to_db_package(new_package)?;
         self.db.update_package(ori_name, &db_pkg);
         Ok(())
@@ -124,14 +131,14 @@ impl<'a> PackageManager<'a> {
             .collect()
     }
 
-    pub fn export_csv(&self, filename: &str) -> Result<(), ()> {
+    pub fn export(&self, filename: &str) -> Result<(), ()> {
         let pkgs = self.list();
-        let res = write_csv(filename, pkgs, None);
+        let res = write_yaml(filename, pkgs);
         return res;
     }
 
-    pub fn import_csv(&self, filename: &str) -> Result<(), ()> {
-        let res_parts = read_csv(filename, None);
+    pub fn import(&self, filename: &str) -> Result<(), ()> {
+        let res_parts = read_yaml(filename);
         if res_parts.is_err() {
             return Err(());
         }
diff --git a/elebox-core/src/part.rs b/elebox-core/src/part.rs
index 6d2ca78..ffa092a 100644
--- a/elebox-core/src/part.rs
+++ b/elebox-core/src/part.rs
@@ -1,4 +1,4 @@
-use crate::{csv::*, db::*, errors::EleboxError};
+use crate::{csv::*, db::*, errors::EleboxError, yaml::*};
 use serde::{Deserialize, Serialize};
 use std::fmt::{format, Debug};
 
@@ -127,6 +127,13 @@ impl<'a> PartManager<'a> {
             ));
         }
 
+        if ori_name != &new_part.name && self.db.get_part_id(&new_part.name).is_some() {
+            return Err(EleboxError::AlreadyExists(
+                "Part".to_string(),
+                new_part.name.clone(),
+            ));
+        }
+
         let db_part = self.to_db_part(new_part)?;
         self.db.update_part(ori_name, &db_part);
         Ok(())
@@ -224,21 +231,24 @@ impl<'a> PartManager<'a> {
             .collect()
     }
 
-    pub fn export_csv(&self, filename: &str) -> Result<(), ()> {
+    pub fn export(&self, filename: &str) -> Result<(), ()> {
         let parts = self.list();
-        let res = write_csv(filename, parts, None);
+        let res = write_yaml(filename, parts);
         return res;
     }
 
-    pub fn import_csv(&self, filename: &str) -> Result<(), ()> {
-        let res_parts = read_csv(filename, None);
+    pub fn import(&self, filename: &str) -> Result<(), ()> {
+        let res_parts = read_yaml(filename);
+
         if res_parts.is_err() {
             return Err(());
         }
 
         let parts: Vec<Part> = res_parts.unwrap();
         for part in parts {
-            let _ = self.add(&part);
+            if let Err(e) = self.add(&part) {
+                panic!("{}", e.to_string())
+            }
         }
 
         Ok(())
diff --git a/elebox-core/src/yaml.rs b/elebox-core/src/yaml.rs
new file mode 100644
index 0000000..834005f
--- /dev/null
+++ b/elebox-core/src/yaml.rs
@@ -0,0 +1,24 @@
+use std::fs::{self, File};
+
+use csv::{ReaderBuilder, WriterBuilder};
+use serde::{Deserialize, Serialize};
+
+use serde_yaml;
+
+pub fn write_yaml<T>(filename: &str, items: Vec<T>) -> Result<(), ()>
+where
+    T: Serialize,
+{
+    let contents = serde_yaml::to_string(&items).unwrap();
+    fs::write(filename, contents);
+    Ok(())
+}
+
+pub fn read_yaml<T>(filename: &str) -> Result<Vec<T>, ()>
+where
+    T: for<'a> Deserialize<'a>,
+{
+    let content = fs::read_to_string(filename).unwrap();
+    let items: Vec<T> = serde_yaml::from_str(&content).unwrap();
+    Ok(items)
+}
diff --git a/elebox-tauri/package.json b/elebox-tauri/package.json
index a131835..5367c59 100644
--- a/elebox-tauri/package.json
+++ b/elebox-tauri/package.json
@@ -1,7 +1,7 @@
 {
   "name": "elebox",
   "private": true,
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "type": "module",
   "scripts": {
     "tauri dev": "tauri dev",
diff --git a/elebox-tauri/src-tauri/Cargo.toml b/elebox-tauri/src-tauri/Cargo.toml
index 48de272..ddd89eb 100644
--- a/elebox-tauri/src-tauri/Cargo.toml
+++ b/elebox-tauri/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "elebox"
-version = "1.0.0-beta.2"
+version = "1.0.0-beta.3"
 license = "MIT OR Apache-2.0"
 description = "Lightweight personal electronic parts inventory management tool"
 repository = "https://github.com/ziteh/elebox"
diff --git a/elebox-tauri/src-tauri/src/main.rs b/elebox-tauri/src-tauri/src/main.rs
index 00b831d..94eaec9 100644
--- a/elebox-tauri/src-tauri/src/main.rs
+++ b/elebox-tauri/src-tauri/src/main.rs
@@ -5,7 +5,7 @@ use dirs;
 use elebox_core::{
     Category, CustomField, Manufacturer, Package, PackageType, Part, Supplier, TreeNode,
 };
-use std::{sync::Mutex, task::ready};
+use std::{path::Path, sync::Mutex, task::ready};
 use tauri::Manager;
 
 macro_rules! GET {
@@ -214,6 +214,14 @@ fn get_db_path(path: tauri::State<DbPath>) -> String {
     GET!(path).to_string()
 }
 
+#[tauri::command(rename_all = "snake_case")]
+fn get_default_db_path() -> String {
+    if let Ok(path) = get_default_path() {
+        return path;
+    }
+    return "".to_string();
+}
+
 #[tauri::command(rename_all = "snake_case")]
 fn set_db_path(path: tauri::State<DbPath>, new_path: &str) {
     update_db_path(path, new_path);
@@ -224,21 +232,25 @@ fn set_db_path(path: tauri::State<DbPath>, new_path: &str) {
 fn export_csv(path: tauri::State<DbPath>, csv_path: &str) {
     let p = GET!(path);
     let db = elebox_core::JammDatabase::new(&p);
-    elebox_core::export_csv(&db, csv_path);
+    elebox_core::export(&db, csv_path);
 }
 
 #[tauri::command(rename_all = "snake_case")]
 fn import_csv(csv_path: &str) -> Result<(), String> {
-    elebox_core::import_csv(csv_path)
+    elebox_core::import(csv_path)
 }
 
 fn main() {
-    let db_path = match get_default_path() {
+    let mut db_path = match get_default_path() {
         Ok(path) => path,
         Err(err) => panic!("{}", err),
     };
 
-    init_db(&db_path);
+    if Path::new(&db_path).exists() {
+        init_db(&db_path);
+    } else {
+        db_path = "".to_string();
+    }
 
     tauri::Builder::default()
         .setup(|app| {
@@ -278,6 +290,7 @@ fn main() {
             update_mfr,
             del_mfr,
             get_db_path,
+            get_default_db_path,
             set_db_path,
             export_csv,
             import_csv,
diff --git a/elebox-tauri/src/components/CategoryField.vue b/elebox-tauri/src/components/CategoryField.vue
index 36fe31e..696ae18 100644
--- a/elebox-tauri/src/components/CategoryField.vue
+++ b/elebox-tauri/src/components/CategoryField.vue
@@ -6,14 +6,30 @@ const props = defineProps<{ origin_name?: string }>();
 const category = ref<Db.Category>({ name: "", parent: "", alias: "" });
 let categories = reactive<Db.Category[]>([]);
 
+const snackbar = ref(false);
+const snackbar_msg = ref("");
+const rules = ref({
+  required: (v: any) => !!v || "Required",
+  duplicate: (v: any) =>
+    !categories.some((cat) => cat.name === v) || "Already exists",
+});
+
 async function add() {
   if (category.value === undefined) {
     console.warn("undefined");
     return;
   }
 
-  await Db.add(category.value);
-  await list();
+  await Db.add(category.value)
+    .then(() => {
+      snackbar.value = true;
+      snackbar_msg.value = "Success";
+      list();
+    })
+    .catch((e) => {
+      snackbar.value = true;
+      snackbar_msg.value = e;
+    });
 }
 
 async function update() {
@@ -35,6 +51,14 @@ async function list() {
   data.splice(0, 0, { name: "" }); // Root
   Object.assign(categories, data);
 
+  // The parent category cannot be itself
+  if (props.origin_name) {
+    const index = categories.findIndex((s) => s.name === props.origin_name);
+    if (index !== -1) {
+      categories.splice(index, 1);
+    }
+  }
+
   console.debug(`get categories: ${categories.length}`);
 }
 
@@ -61,7 +85,7 @@ onMounted(() => {
           variant="outlined"
           v-model="category.name"
           placeholder="MCU"
-          :rules="[(v: any) => !!v || 'Required']"
+          :rules="[rules.required, rules.duplicate]"
           required
         ></v-text-field>
       </v-col>
@@ -92,4 +116,12 @@ onMounted(() => {
       </v-col>
     </v-row>
   </v-form>
+  <v-snackbar v-model="snackbar">
+    {{ snackbar_msg }}
+    <template v-slot:actions>
+      <v-btn color="pink" variant="text" @click="snackbar = false">
+        Close
+      </v-btn>
+    </template>
+  </v-snackbar>
 </template>
diff --git a/elebox-tauri/src/components/CategoryList.vue b/elebox-tauri/src/components/CategoryList.vue
index d972255..7ab1d32 100644
--- a/elebox-tauri/src/components/CategoryList.vue
+++ b/elebox-tauri/src/components/CategoryList.vue
@@ -2,6 +2,7 @@
 import { onMounted, reactive, ref } from "vue";
 import { DbCategory as Db } from "../db_cmd_category";
 import ItemEditButton from "./ItemEditButton.vue";
+import ItemDeleteButton from "./ItemDeleteButton.vue";
 
 const search = ref("");
 const headers = ref([
@@ -18,7 +19,7 @@ async function list() {
   Object.assign(categories, data);
 }
 
-async function remove(name: string) {
+async function deleteItem(name: string) {
   await Db.remove(name);
 }
 
@@ -41,12 +42,7 @@ onMounted(list);
     <v-data-table :headers="headers" :items="categories" :search="search">
       <template v-slot:item.edit="{ item }">
         <ItemEditButton :path_name="'update_category'" :item_name="item.name" />
-        <v-btn
-          density="comfortable"
-          icon="mdi-trash-can-outline"
-          :title="`Delete: ${item.name}`"
-          @click="remove(item.name)"
-        ></v-btn>
+        <ItemDeleteButton :name="item.name" @delete="deleteItem(item.name)" />
       </template>
     </v-data-table>
   </v-card>
diff --git a/elebox-tauri/src/components/ItemDeleteButton.vue b/elebox-tauri/src/components/ItemDeleteButton.vue
new file mode 100644
index 0000000..d7f9132
--- /dev/null
+++ b/elebox-tauri/src/components/ItemDeleteButton.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const props = defineProps<{ name: string }>();
+
+const emit = defineEmits(["delete"]);
+
+function deleteItem() {
+  if (props.name) {
+    emit("delete");
+  }
+}
+</script>
+
+<template>
+  <v-dialog max-width="500">
+    <template v-slot:activator="{ props: activatorProps }">
+      <v-btn
+        v-bind="activatorProps"
+        density="comfortable"
+        icon="mdi-trash-can-outline"
+        title="Delete"
+      ></v-btn>
+    </template>
+
+    <template v-slot:default="{ isActive }">
+      <v-card title="Confirm Delete" prepend-icon="mdi-trash-can-outline">
+        <v-card-text>
+          <p>
+            Are you sure you want to delete
+            <strong>{{ props.name }}</strong> ?
+          </p>
+          <p>This action cannot be undone.</p>
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            text="Delete"
+            variant="text"
+            color="red"
+            @click="
+              {
+                deleteItem();
+                isActive.value = false;
+              }
+            "
+          ></v-btn>
+          <v-btn
+            text="Cancel"
+            variant="tonal"
+            @click="isActive.value = false"
+          ></v-btn>
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
diff --git a/elebox-tauri/src/components/ManufacturerField.vue b/elebox-tauri/src/components/ManufacturerField.vue
index b809513..a88753e 100644
--- a/elebox-tauri/src/components/ManufacturerField.vue
+++ b/elebox-tauri/src/components/ManufacturerField.vue
@@ -1,9 +1,18 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { DbManufacturer as Db } from "../db_cmd_manufacturer";
 
 const props = defineProps<{ origin_name?: string }>();
 const mfr = ref<Db.Manufacturer>({ name: "", url: "", alias: "" });
+let mfrs = reactive<Db.Manufacturer[]>([]);
+
+const snackbar = ref(false);
+const snackbar_msg = ref("");
+const rules = ref({
+  required: (v: any) => !!v || "Required",
+  duplicate: (v: any) =>
+    !mfrs.some((mfr) => mfr.name === v) || "Already exists",
+});
 
 async function add() {
   if (mfr.value === undefined) {
@@ -11,7 +20,15 @@ async function add() {
     return;
   }
 
-  await Db.add(mfr.value);
+  await Db.add(mfr.value)
+    .then(() => {
+      snackbar.value = true;
+      snackbar_msg.value = "Success";
+    })
+    .catch((e) => {
+      snackbar.value = true;
+      snackbar_msg.value = e;
+    });
 }
 
 async function update() {
@@ -22,6 +39,11 @@ async function update() {
   await Db.update(props.origin_name, mfr.value);
 }
 
+async function list() {
+  const data = await Db.list();
+  Object.assign(mfrs, data);
+}
+
 async function get(name: string) {
   const data = await Db.get(name);
   mfr.value = data as Db.Manufacturer;
@@ -31,6 +53,8 @@ onMounted(() => {
   if (props.origin_name !== undefined) {
     get(props.origin_name);
   }
+
+  list();
 });
 </script>
 
@@ -43,7 +67,7 @@ onMounted(() => {
           variant="outlined"
           v-model="mfr.name"
           placeholder="Texas Instruments"
-          :rules="[(v: any) => !!v || 'Required']"
+          :rules="[rules.required, rules.duplicate]"
           required
         ></v-text-field>
       </v-col>
@@ -74,4 +98,12 @@ onMounted(() => {
       </v-col>
     </v-row>
   </v-form>
+  <v-snackbar v-model="snackbar">
+    {{ snackbar_msg }}
+    <template v-slot:actions>
+      <v-btn color="pink" variant="text" @click="snackbar = false">
+        Close
+      </v-btn>
+    </template>
+  </v-snackbar>
 </template>
diff --git a/elebox-tauri/src/components/ManufacturerList.vue b/elebox-tauri/src/components/ManufacturerList.vue
index 948ecb5..3fc6d35 100644
--- a/elebox-tauri/src/components/ManufacturerList.vue
+++ b/elebox-tauri/src/components/ManufacturerList.vue
@@ -2,6 +2,7 @@
 import { onMounted, reactive, ref } from "vue";
 import { DbManufacturer as Db } from "../db_cmd_manufacturer";
 import ItemEditButton from "./ItemEditButton.vue";
+import ItemDeleteButton from "./ItemDeleteButton.vue";
 
 const search = ref("");
 const headers = ref([
@@ -17,7 +18,7 @@ async function list() {
   Object.assign(mfrs, data);
 }
 
-async function remove(name: string) {
+async function deleteItem(name: string) {
   await Db.remove(name);
 }
 
@@ -49,12 +50,7 @@ onMounted(list);
           :path_name="'update_manufacturer'"
           :item_name="item.name"
         />
-        <v-btn
-          density="comfortable"
-          icon="mdi-trash-can-outline"
-          :title="`Delete: ${item.name}`"
-          @click="remove(item.name)"
-        ></v-btn>
+        <ItemDeleteButton :name="item.name" @delete="deleteItem(item.name)" />
       </template>
     </v-data-table>
   </v-card>
diff --git a/elebox-tauri/src/components/NewDatabase.vue b/elebox-tauri/src/components/NewDatabase.vue
new file mode 100644
index 0000000..edfbc06
--- /dev/null
+++ b/elebox-tauri/src/components/NewDatabase.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { invoke } from "@tauri-apps/api/tauri";
+
+const path = ref("");
+const default_path = ref("");
+const use_default = ref(true);
+
+const emit = defineEmits(["update"]);
+
+// async function getPath() {
+//   path.value = await invoke("get_db_path", {});
+//   console.debug(`DB path: ${path.value}`);
+// }
+
+async function getDefaultPath() {
+  default_path.value = await invoke("get_default_db_path", {});
+  //   path.value = default_path.value;
+}
+
+async function setPath() {
+  await invoke("set_db_path", {
+    new_path: use_default ? default_path.value : path.value,
+  });
+  console.debug(`DB path: ${path.value}`);
+  emit("update");
+}
+
+onMounted(getDefaultPath);
+</script>
+
+<template>
+  <v-card
+    class="mx-auto"
+    prepend-icon="mdi-database-alert"
+    title="Database not found"
+  >
+    <v-card-item>
+      <v-container>
+        <v-row>
+          <v-checkbox
+            label="Use default path"
+            v-model="use_default"
+          ></v-checkbox>
+        </v-row>
+        <v-row>
+          <v-text-field
+            v-if="use_default"
+            label="Database path"
+            variant="outlined"
+            v-model="default_path"
+            placeholder="elebox.db"
+            prepend-icon="mdi-paperclip"
+            disabled
+          ></v-text-field>
+          <v-file-input
+            v-else
+            label="Database path"
+            variant="outlined"
+            placeholder="elebox.db"
+            prepend-icon="mdi-paperclip"
+          ></v-file-input>
+        </v-row>
+        <v-row>
+          <v-spacer></v-spacer>
+          <v-btn @click="setPath" text="Apply"></v-btn>
+        </v-row>
+      </v-container>
+    </v-card-item>
+  </v-card>
+</template>
diff --git a/elebox-tauri/src/components/PackageField.vue b/elebox-tauri/src/components/PackageField.vue
index bb63d2e..459007f 100644
--- a/elebox-tauri/src/components/PackageField.vue
+++ b/elebox-tauri/src/components/PackageField.vue
@@ -1,11 +1,20 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { DbPackage as Db } from "../db_cmd_package";
 import { PkgType } from "../interface"; // TODO to db_cmd_package
 
 const props = defineProps<{ origin_name?: string }>();
 const pkg = ref<Db.Package>({ name: "", pkg_type: PkgType.Smt, alias: "" });
 const pkg_type_input = ref<string>("SMT");
+let pkgs = reactive<Db.Package[]>([]);
+
+const snackbar = ref(false);
+const snackbar_msg = ref("");
+const rules = ref({
+  required: (v: any) => !!v || "Required",
+  duplicate: (v: any) =>
+    !pkgs.some((pkg) => pkg.name === v) || "Already exists",
+});
 
 function setPkgType(input: string): PkgType {
   // --noImplicitAny
@@ -27,7 +36,15 @@ async function add() {
   }
 
   pkg.value.pkg_type = setPkgType(pkg_type_input.value);
-  await Db.add(pkg.value);
+  await Db.add(pkg.value)
+    .then(() => {
+      snackbar.value = true;
+      snackbar_msg.value = "Success";
+    })
+    .catch((e) => {
+      snackbar.value = true;
+      snackbar_msg.value = e;
+    });
 }
 
 async function update() {
@@ -39,6 +56,11 @@ async function update() {
   await Db.update(props.origin_name, pkg.value);
 }
 
+async function list() {
+  const data = await Db.list();
+  Object.assign(pkgs, data);
+}
+
 async function get(name: string) {
   const data = await Db.get(name);
   pkg.value = data as Db.Package;
@@ -56,6 +78,8 @@ onMounted(() => {
   if (props.origin_name !== undefined) {
     get(props.origin_name);
   }
+
+  list();
 });
 </script>
 
@@ -78,7 +102,7 @@ onMounted(() => {
           variant="outlined"
           v-model.trim="pkg.name"
           placeholder="SOT-23"
-          :rules="[(v: any) => !!v || 'Required']"
+          :rules="[rules.required, rules.duplicate]"
           required
         ></v-text-field>
       </v-col>
@@ -101,4 +125,12 @@ onMounted(() => {
       </v-col>
     </v-row>
   </v-form>
+  <v-snackbar v-model="snackbar">
+    {{ snackbar_msg }}
+    <template v-slot:actions>
+      <v-btn color="pink" variant="text" @click="snackbar = false">
+        Close
+      </v-btn>
+    </template>
+  </v-snackbar>
 </template>
diff --git a/elebox-tauri/src/components/PackageList.vue b/elebox-tauri/src/components/PackageList.vue
index a9b092b..0670539 100644
--- a/elebox-tauri/src/components/PackageList.vue
+++ b/elebox-tauri/src/components/PackageList.vue
@@ -2,6 +2,7 @@
 import { onMounted, reactive, ref } from "vue";
 import { DbPackage as Db } from "../db_cmd_package";
 import ItemEditButton from "./ItemEditButton.vue";
+import ItemDeleteButton from "./ItemDeleteButton.vue";
 
 const search = ref("");
 const headers = ref([
@@ -18,7 +19,7 @@ async function list() {
   Object.assign(pkgs, data);
 }
 
-async function remove(name: string) {
+async function deleteItem(name: string) {
   await Db.remove(name);
 }
 
@@ -44,12 +45,7 @@ onMounted(list);
       </template>
       <template v-slot:item.edit="{ item }">
         <ItemEditButton :path_name="'update_package'" :item_name="item.name" />
-        <v-btn
-          density="comfortable"
-          icon="mdi-trash-can-outline"
-          :title="`Delete: ${item.name}`"
-          @click="remove(item.name)"
-        ></v-btn>
+        <ItemDeleteButton :name="item.name" @delete="deleteItem(item.name)" />
       </template>
     </v-data-table>
   </v-card>
diff --git a/elebox-tauri/src/components/PartCustomField.vue b/elebox-tauri/src/components/PartCustomField.vue
index 7018368..9589c58 100644
--- a/elebox-tauri/src/components/PartCustomField.vue
+++ b/elebox-tauri/src/components/PartCustomField.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { CustomField } from "../interface";
+import { makeRules } from "../input_rules";
 
 const props = defineProps<{
-  field_type: string;
-  name: string;
-  value: string;
-  create: Boolean;
+  current?: CustomField;
+  existing?: CustomField[];
 }>();
 
 const custom_field = ref<CustomField>({
-  name: props.name,
-  field_type: props.field_type || "Normal",
-  value: props.value,
+  field_type: props.current?.field_type ?? "Normal",
+  name: props.current?.name ?? "",
+  value: props.current?.value ?? "",
 });
 
+const rules = makeRules(props.existing);
+
 const emit = defineEmits(["update", "add", "del"]);
 
 watch([custom_field], ([new_custom_field]) => {
@@ -22,12 +23,16 @@ watch([custom_field], ([new_custom_field]) => {
 });
 
 function emitDel() {
-  emit("del", { name: props.name });
+  emit("del", { name: props.current?.name });
 }
 
 function emitAdd() {
   // Required value
-  if (!custom_field.value.field_type || !custom_field.value.name) {
+  if (
+    !custom_field.value.field_type ||
+    !custom_field.value.name ||
+    rules.value.duplicate(custom_field.value.name) !== true
+  ) {
     return;
   }
 
@@ -39,8 +44,8 @@ function emitAdd() {
 
   // Clear
   custom_field.value = {
-    name: "",
     field_type: "Normal",
+    name: "",
     value: "",
   };
 
@@ -52,24 +57,25 @@ function emitAdd() {
   <v-form @submit.prevent>
     <v-row class="align-center">
       <v-col cols="2">
-        <v-select
-          v-if="props.create"
+        <v-text-field
+          v-if="props.existing == undefined"
           label="Type"
-          :items="['Normal', 'Link']"
           variant="outlined"
-          v-model="custom_field.field_type"
-          :rules="[(v: any) => !!v || 'Required']"
+          v-model.trim="custom_field.field_type"
           required
-          :readonly="!props.create"
-        ></v-select>
-        <v-text-field
+          readonly
+        >
+        </v-text-field>
+        <v-select
           v-else
           label="Type"
+          :items="['Normal', 'Link']"
           variant="outlined"
-          v-model.trim="custom_field.field_type"
+          v-model="custom_field.field_type"
+          :rules="[rules.required]"
           required
-          readonly
-        ></v-text-field>
+          :readonly="props.existing == undefined"
+        ></v-select>
       </v-col>
       <v-col>
         <v-text-field
@@ -77,9 +83,9 @@ function emitAdd() {
           variant="outlined"
           v-model.trim="custom_field.name"
           placeholder=""
-          :rules="[(v: any) => !!v || 'Required']"
+          :rules="[rules.required, rules.duplicate]"
           required
-          :readonly="!props.create"
+          :readonly="props.existing == undefined"
         ></v-text-field>
       </v-col>
       <v-col>
@@ -88,27 +94,27 @@ function emitAdd() {
           variant="outlined"
           v-model.trim="custom_field.value"
           placeholder=""
-          :readonly="!props.create"
-          :dirty="!props.create"
+          :readonly="props.existing == undefined"
+          :dirty="props.existing == undefined"
         ></v-text-field>
       </v-col>
       <v-col cols="auto" class="mb-6">
         <v-btn
-          v-if="props.create"
+          v-if="props.existing == undefined"
           density="comfortable"
-          icon="mdi-plus"
-          title="Add"
-          color="green"
+          icon="mdi-trash-can-outline"
+          title="Delete"
           type="submit"
-          @click="emitAdd()"
+          @click="emitDel()"
         ></v-btn>
         <v-btn
           v-else
           density="comfortable"
-          icon="mdi-trash-can-outline"
-          title="Delete"
+          icon="mdi-plus"
+          title="Add"
+          color="green"
           type="submit"
-          @click="emitDel()"
+          @click="emitAdd()"
         ></v-btn>
       </v-col>
     </v-row>
diff --git a/elebox-tauri/src/components/PartList.vue b/elebox-tauri/src/components/PartList.vue
new file mode 100644
index 0000000..0c7f8ce
--- /dev/null
+++ b/elebox-tauri/src/components/PartList.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { onMounted, ref, reactive } from "vue";
+import { Part } from "../interface";
+import { useRouter, useRoute } from "vue-router";
+import { DbPart } from "../db_cmd_part";
+import PartQty from "../components/PartQty.vue";
+
+let parts = reactive<Part[]>([]);
+
+const router = useRouter();
+const route = useRoute();
+
+const search = ref("");
+const headers = ref([
+  { key: "name", title: "Name", sortable: true },
+  { key: "quantity", title: "Quantity" },
+  { key: "category", title: "Category" },
+  { key: "package", title: "Package" },
+  { key: "mfr", title: "Manufacturer" },
+]);
+
+async function getParts() {
+  let promise = await DbPart.list();
+  Object.assign(parts, promise);
+}
+
+function reload() {
+  // window.location.reload();
+
+  const currentPath = route.path;
+  router.replace("/redirect").then(() => {
+    router.replace(currentPath);
+  });
+}
+
+onMounted(getParts);
+</script>
+
+<template>
+  <v-card flat variant="text">
+    <template v-slot:text>
+      <v-row class="align-center">
+        <v-col>
+          <v-text-field
+            v-model="search"
+            label="Search"
+            prepend-inner-icon="mdi-magnify"
+            variant="outlined"
+            hide-details
+            single-line
+          ></v-text-field>
+        </v-col>
+        <v-col cols="auto">
+          <v-btn
+            @click="reload"
+            text="Update"
+            icon="mdi-refresh"
+            density="comfortable"
+            size="large"
+            title="Refresh"
+          ></v-btn>
+        </v-col>
+      </v-row>
+    </template>
+
+    <v-data-table
+      :headers="headers"
+      :items="parts"
+      :search="search"
+      v-if="parts.length > 0"
+    >
+      <template v-slot:item.name="{ item }">
+        <v-btn
+          :to="{ name: 'part_detail', params: { name: item.name } }"
+          variant="text"
+        >
+          {{ item.name
+          }}<v-icon v-if="item.starred" color="#fcba03">mdi-star</v-icon>
+        </v-btn>
+      </template>
+      <template v-slot:item.quantity="{ item }">
+        <PartQty :part="item.name" />
+      </template>
+    </v-data-table>
+  </v-card>
+</template>
diff --git a/elebox-tauri/src/components/PartSupplier.vue b/elebox-tauri/src/components/PartSupplier.vue
index cad6f4c..1f2a0da 100644
--- a/elebox-tauri/src/components/PartSupplier.vue
+++ b/elebox-tauri/src/components/PartSupplier.vue
@@ -1,20 +1,38 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { Supplier } from "../interface";
+import { makeRules } from "../input_rules";
 
 const props = defineProps<{
-  name: string;
-  link: string;
-  price?: number;
-  note: string;
-  create: Boolean;
+  current?: Supplier;
+  existing?: Supplier[]; // if undefined: readonly
 }>();
 
-const supplier = ref<Supplier>({
-  name: props.name,
-  link: props.link,
-  note: props.note,
-  price: props.price,
+const supplier = ref<Supplier>(
+  props.current ?? {
+    name: "",
+    link: "",
+    price: undefined,
+    note: "",
+  }
+);
+
+const rules = makeRules(props.existing);
+
+const formatted_price = computed({
+  get() {
+    if (supplier.value.price === undefined) {
+      return "";
+    }
+
+    if (props.existing == undefined) {
+      return supplier.value.price.toFixed(3);
+    }
+    return supplier.value.price.toString();
+  },
+  set(value: string) {
+    supplier.value.price = parseFloat(value);
+  },
 });
 
 const emit = defineEmits(["update", "add", "del"]);
@@ -24,12 +42,15 @@ watch([supplier], ([new_supplier]) => {
 });
 
 function emitDel() {
-  emit("del", { name: props.name });
+  emit("del", { name: props.current?.name });
 }
 
 function emitAdd() {
   // Required value
-  if (!supplier.value.name) {
+  if (
+    !supplier.value.name ||
+    rules.value.duplicate(supplier.value.name) !== true
+  ) {
     return;
   }
 
@@ -61,9 +82,9 @@ function emitAdd() {
           variant="outlined"
           v-model.trim="supplier.name"
           placeholder=""
-          :rules="[(v: any) => !!v || 'Required']"
+          :rules="[rules.required, rules.duplicate]"
           required
-          :readonly="!props.create"
+          :readonly="props.existing == undefined"
         ></v-text-field>
       </v-col>
       <v-col cols="3">
@@ -72,19 +93,19 @@ function emitAdd() {
           variant="outlined"
           v-model.trim="supplier.link"
           placeholder="https://"
-          :readonly="!props.create"
-          :dirty="!props.create"
+          :readonly="props.existing == undefined"
+          :dirty="props.existing == undefined"
         ></v-text-field>
       </v-col>
       <v-col cols="2">
         <v-text-field
           label="Price"
           variant="outlined"
-          v-model.number="supplier.price"
+          v-model="formatted_price"
           type="number"
           min="0"
-          :readonly="!props.create"
-          :dirty="!props.create"
+          :readonly="props.existing == undefined"
+          :dirty="props.existing == undefined"
         ></v-text-field>
       </v-col>
       <v-col>
@@ -93,27 +114,27 @@ function emitAdd() {
           variant="outlined"
           v-model.trim="supplier.note"
           placeholder=""
-          :readonly="!props.create"
-          :dirty="!props.create"
+          :readonly="props.existing == undefined"
+          :dirty="props.existing == undefined"
         ></v-text-field>
       </v-col>
       <v-col cols="auto" class="mb-6">
         <v-btn
-          v-if="props.create"
+          v-if="props.existing == undefined"
           density="comfortable"
-          icon="mdi-plus"
-          title="Add"
-          color="green"
+          icon="mdi-trash-can-outline"
+          title="Delete"
           type="submit"
-          @click="emitAdd()"
+          @click="emitDel()"
         ></v-btn>
         <v-btn
           v-else
           density="comfortable"
-          icon="mdi-trash-can-outline"
-          title="Delete"
+          icon="mdi-plus"
+          title="Add"
+          color="green"
           type="submit"
-          @click="emitDel()"
+          @click="emitAdd()"
         ></v-btn>
       </v-col>
     </v-row>
diff --git a/elebox-tauri/src/db_cmd_category.ts b/elebox-tauri/src/db_cmd_category.ts
index fc6b4f5..cb247fe 100644
--- a/elebox-tauri/src/db_cmd_category.ts
+++ b/elebox-tauri/src/db_cmd_category.ts
@@ -10,7 +10,7 @@ export namespace DbCategory {
 
   export async function get(name: string) {
     return invoke("get_category", { name }).catch((err) =>
-      console.error(`Get part, ${err}`)
+      console.warn(`Get part, ${err}`)
     );
   }
 
@@ -19,21 +19,31 @@ export namespace DbCategory {
   }
 
   export async function add(item: CategoryInterface) {
-    await invoke("add_category", { item })
-      .then((msg) => console.log(`Add category, ${msg}`))
-      .catch((err) => console.error(`Add category, ${err}`));
+    try {
+      const msg = await invoke("add_category", { item });
+      console.log(`Add category, ${msg}`);
+      return msg;
+    } catch (err) {
+      console.warn(`Add category, ${err}`);
+      throw err;
+    }
   }
 
   export async function update(ori_name: string, new_item: CategoryInterface) {
-    await invoke("update_category", { ori_name, new_item })
-      .then((msg) => console.log(`Update category, ${msg}`))
-      .catch((err) => console.error(`Update category, ${err}`));
+    try {
+      const msg = await invoke("update_category", { ori_name, new_item });
+      console.log(`Update category, ${msg}`);
+      return msg;
+    } catch (err) {
+      console.warn(`Update category, ${err}`);
+      throw err;
+    }
   }
 
   export async function remove(name: string) {
     await invoke("del_category", { name })
       .then((msg) => console.log(`Delete category, ${msg}`))
-      .catch((err) => console.error(`Delete category, ${err}`));
+      .catch((err) => console.warn(`Delete category, ${err}`));
   }
 
   export async function getTree(): Promise<TreeNodeInterface[]> {
diff --git a/elebox-tauri/src/db_cmd_manufacturer.ts b/elebox-tauri/src/db_cmd_manufacturer.ts
index 5fc065b..3079787 100644
--- a/elebox-tauri/src/db_cmd_manufacturer.ts
+++ b/elebox-tauri/src/db_cmd_manufacturer.ts
@@ -6,7 +6,7 @@ export namespace DbManufacturer {
 
   export async function get(name: string) {
     return invoke("get_mfr", { name }).catch((err) =>
-      console.error(`Get part, ${err}`)
+      console.warn(`Get part, ${err}`)
     );
   }
 
@@ -15,23 +15,33 @@ export namespace DbManufacturer {
   }
 
   export async function add(item: ManufacturerInterface) {
-    await invoke("add_mfr", { item })
-      .then((msg) => console.log(`Add manufacturer, ${msg}`))
-      .catch((err) => console.error(`Add manufacturer, ${err}`));
+    try {
+      const msg = await invoke("add_mfr", { item });
+      console.log(`Add manufacturer, ${msg}`);
+      return msg;
+    } catch (err) {
+      console.warn(`Add manufacturer, ${err}`);
+      throw err;
+    }
   }
 
   export async function update(
     ori_name: string,
     new_item: ManufacturerInterface
   ) {
-    await invoke("update_mfr", { ori_name, new_item })
-      .then((msg) => console.log(`Update manufacturer, ${msg}`))
-      .catch((err) => console.error(`Update manufacturer, ${err}`));
+    try {
+      const msg = await invoke("update_mfr", { ori_name, new_item });
+      console.log(`Update manufacturer, ${msg}`);
+      return msg;
+    } catch (err) {
+      console.warn(`Update manufacturer, ${err}`);
+      throw err;
+    }
   }
 
   export async function remove(name: string) {
     await invoke("del_mfr", { name })
       .then((msg) => console.log(`Delete manufacturer, ${msg}`))
-      .catch((err) => console.error(`Delete manufacturer, ${err}`));
+      .catch((err) => console.warn(`Delete manufacturer, ${err}`));
   }
 }
diff --git a/elebox-tauri/src/db_cmd_package.ts b/elebox-tauri/src/db_cmd_package.ts
index 106a977..015e7d0 100644
--- a/elebox-tauri/src/db_cmd_package.ts
+++ b/elebox-tauri/src/db_cmd_package.ts
@@ -6,7 +6,7 @@ export namespace DbPackage {
 
   export async function get(name: string) {
     return invoke("get_package", { name }).catch((err) =>
-      console.error(`Get part, ${err}`)
+      console.warn(`Get part, ${err}`)
     );
   }
 
@@ -15,20 +15,30 @@ export namespace DbPackage {
   }
 
   export async function add(item: PackageInterface) {
-    await invoke("add_package", { item })
-      .then((msg) => console.log(`Add package, ${msg}`))
-      .catch((err) => console.error(`Add package, ${err}`));
+    try {
+      const msg = await invoke("add_package", { item });
+      console.log(`Add package, ${msg}`);
+      return msg;
+    } catch (err) {
+      console.warn(`Add package, ${err}`);
+      throw err;
+    }
   }
 
   export async function update(ori_name: string, new_item: PackageInterface) {
-    await invoke("update_package", { ori_name, new_item })
-      .then((msg) => console.log(`Update package, ${msg}`))
-      .catch((err) => console.error(`Update package, ${err}`));
+    try {
+      const msg = await invoke("update_package", { ori_name, new_item });
+      console.log(`Update package, ${msg}`);
+      return msg;
+    } catch (err) {
+      console.warn(`Update package, ${err}`);
+      throw err;
+    }
   }
 
   export async function remove(name: string) {
     await invoke("del_package", { name })
       .then((msg) => console.log(`Delete package, ${msg}`))
-      .catch((err) => console.error(`Delete package, ${err}`));
+      .catch((err) => console.warn(`Delete package, ${err}`));
   }
 }
diff --git a/elebox-tauri/src/db_cmd_part.ts b/elebox-tauri/src/db_cmd_part.ts
index 8474ccd..a38903f 100644
--- a/elebox-tauri/src/db_cmd_part.ts
+++ b/elebox-tauri/src/db_cmd_part.ts
@@ -6,7 +6,7 @@ export namespace DbPart {
 
   export async function get(name: string) {
     return invoke("get_part", { name }).catch((err) =>
-      console.error(`Get part, ${err}`)
+      console.warn(`Get part, ${err}`)
     );
   }
 
@@ -15,26 +15,36 @@ export namespace DbPart {
   }
 
   export async function add(item: PartInterface) {
-    await invoke("add_part", { item })
-      .then((msg) => console.log(`Add part, ${msg}`))
-      .catch((err) => console.error(`Add part, ${err}`));
+    try {
+      const msg = await invoke("add_part", { item });
+      console.log(`Add part, ${msg}`);
+      return msg;
+    } catch (err) {
+      console.warn(`Add part, ${err}`);
+      throw err;
+    }
   }
 
   export async function update(ori_name: string, new_item: PartInterface) {
-    await invoke("update_part", { ori_name, new_item })
-      .then((msg) => console.log(`Update part, ${msg}`))
-      .catch((err) => console.error(`Update part, ${err}`));
+    try {
+      const msg = await invoke("update_part", { ori_name, new_item });
+      console.log(`Update part, ${msg}`);
+      return msg;
+    } catch (err) {
+      console.warn(`Update part, ${err}`);
+      throw err;
+    }
   }
 
   export async function remove(name: string) {
     await invoke("del_part", { name })
       .then((msg) => console.log(`Delete part, ${msg}`))
-      .catch((err) => console.error(`Delete part, ${err}`));
+      .catch((err) => console.warn(`Delete part, ${err}`));
   }
 
   export async function modifyQty(name: string, increment: number) {
     await invoke("increment_part", { name, increment })
       .then((msg) => console.log(`Modify qty part, ${msg}`))
-      .catch((err) => console.error(`Modify qty part, ${err}`));
+      .catch((err) => console.warn(`Modify qty part, ${err}`));
   }
 }
diff --git a/elebox-tauri/src/input_rules.ts b/elebox-tauri/src/input_rules.ts
new file mode 100644
index 0000000..72d5bb8
--- /dev/null
+++ b/elebox-tauri/src/input_rules.ts
@@ -0,0 +1,11 @@
+import { ref } from "vue";
+
+export function makeRules(items?: any[]) {
+  return ref({
+    required: (v: any) => !!v || "Required",
+    duplicate: (v: any) =>
+      items == undefined ||
+      !items.some((i) => i.name === v) ||
+      "Already exists",
+  });
+}
diff --git a/elebox-tauri/src/views/Home.vue b/elebox-tauri/src/views/Home.vue
index d91daad..aaa3d46 100644
--- a/elebox-tauri/src/views/Home.vue
+++ b/elebox-tauri/src/views/Home.vue
@@ -1,91 +1,27 @@
 <script setup lang="ts">
-import { onMounted, ref, reactive } from "vue";
-import { Part } from "../interface";
-import { useRouter, useRoute } from "vue-router";
-import { DbPart } from "../db_cmd_part";
-import PartQty from "../components/PartQty.vue";
-
-let parts = reactive<Part[]>([]);
-
-const router = useRouter();
-const route = useRoute();
-
-const search = ref("");
-const headers = ref([
-  { key: "name", title: "Name", sortable: true },
-  { key: "quantity", title: "Quantity" },
-  { key: "category", title: "Category" },
-  { key: "package", title: "Package" },
-  { key: "mfr", title: "Manufacturer" },
-]);
-
-async function getParts() {
-  let promise = await DbPart.list();
-  Object.assign(parts, promise);
+import { onMounted, ref } from "vue";
+import { invoke } from "@tauri-apps/api/tauri";
+import PartList from "../components/PartList.vue";
+import NewDatabase from "../components/NewDatabase.vue";
+
+const isPath = ref(false);
+
+async function getDbPath() {
+  const path = await invoke("get_db_path", {});
+  if (path !== "") {
+    isPath.value = true;
+  }
 }
 
-function reload() {
-  // window.location.reload();
-
-  const currentPath = route.path;
-  router.replace("/redirect").then(() => {
-    router.replace(currentPath);
-  });
-}
-
-onMounted(getParts);
+onMounted(getDbPath);
 </script>
 
 <template>
   <v-container>
     <v-row>
       <v-container>
-        <v-card flat variant="text">
-          <template v-slot:text>
-            <v-row class="align-center">
-              <v-col>
-                <v-text-field
-                  v-model="search"
-                  label="Search"
-                  prepend-inner-icon="mdi-magnify"
-                  variant="outlined"
-                  hide-details
-                  single-line
-                ></v-text-field>
-              </v-col>
-              <v-col cols="auto">
-                <v-btn
-                  @click="reload"
-                  text="Update"
-                  icon="mdi-refresh"
-                  density="comfortable"
-                  size="large"
-                  title="Refresh"
-                ></v-btn>
-              </v-col>
-            </v-row>
-          </template>
-
-          <v-data-table
-            :headers="headers"
-            :items="parts"
-            :search="search"
-            v-if="parts.length > 0"
-          >
-            <template v-slot:item.name="{ item }">
-              <v-btn
-                :to="{ name: 'part_detail', params: { name: item.name } }"
-                variant="text"
-              >
-                {{ item.name
-                }}<v-icon v-if="item.starred" color="#fcba03">mdi-star</v-icon>
-              </v-btn>
-            </template>
-            <template v-slot:item.quantity="{ item }">
-              <PartQty :part="item.name" />
-            </template>
-          </v-data-table>
-        </v-card>
+        <PartList v-if="isPath" />
+        <NewDatabase v-else @update="getDbPath" />
       </v-container>
     </v-row>
   </v-container>
diff --git a/elebox-tauri/src/views/Part.vue b/elebox-tauri/src/views/Part.vue
index b4dfcb7..ed7c72e 100644
--- a/elebox-tauri/src/views/Part.vue
+++ b/elebox-tauri/src/views/Part.vue
@@ -9,6 +9,14 @@ import { CustomField, PkgType, Supplier } from "../interface";
 import PartCustomField from "../components/PartCustomField.vue";
 import PartSupplier from "../components/PartSupplier.vue";
 
+const snackbar = ref(false);
+const snackbar_msg = ref("");
+const rules = ref({
+  required: (v: any) => !!v || "Required",
+  duplicate: (v: any) =>
+    !parts.some((part) => part.name === v) || "Already exists",
+});
+
 const router = useRouter();
 const origin_name = ref<string>("");
 const part = ref<DbPart.Part>({
@@ -21,11 +29,10 @@ const part = ref<DbPart.Part>({
 });
 
 const qty_input = ref<number | undefined>(undefined);
-// const alert = ref(false);
 
 const new_custom_field = ref<CustomField>({
+  field_type: "Normal",
   name: "",
-  field_type: "",
   value: "",
 });
 
@@ -36,6 +43,7 @@ const new_supplier = ref<Supplier>({
   note: "",
 });
 
+let parts = reactive<DbPart.Part[]>([]);
 let categories = reactive<DbCategory.Category[]>([]);
 let packages = reactive<DbPackage.Package[]>([]);
 let mfrs = reactive<DbMfr.Manufacturer[]>([]);
@@ -66,8 +74,12 @@ async function newPart() {
 
   part.value.custom_fields = custom_fields;
   part.value.suppliers = suppliers;
-  await DbPart.add(part.value);
-  router.replace("/"); // Back to home
+  await DbPart.add(part.value)
+    .then(() => router.replace("/")) // Back to home
+    .catch((err) => {
+      snackbar.value = true;
+      snackbar_msg.value = err;
+    });
 }
 
 async function updatePart() {
@@ -94,8 +106,17 @@ async function updatePart() {
 
   part.value.custom_fields = custom_fields;
   part.value.suppliers = suppliers;
-  await DbPart.update(origin_name.value, part.value);
-  router.replace("/"); // Back to home
+  await DbPart.update(origin_name.value, part.value)
+    .then(() => router.replace("/")) // Back to home
+    .catch((err) => {
+      snackbar.value = true;
+      snackbar_msg.value = err;
+    });
+}
+
+async function getParts() {
+  const data = await DbPart.list();
+  Object.assign(parts, data);
 }
 
 async function getCategories() {
@@ -171,6 +192,7 @@ onMounted(() => {
     getPart(origin_name.value);
   }
 
+  getParts();
   getCategories();
   getMfrs();
   getPackages();
@@ -211,7 +233,7 @@ onMounted(() => {
             variant="outlined"
             v-model="part.name"
             placeholder="RP2040"
-            :rules="[(v: any) => !!v || 'Required']"
+            :rules="[rules.required, rules.duplicate]"
             required
           ></v-text-field>
         </v-col>
@@ -221,7 +243,7 @@ onMounted(() => {
             variant="outlined"
             v-model="part.category"
             :items="Object.values(categories).map((cat) => cat.name)"
-            :rules="[(v: any) => !!v || 'Required']"
+            :rules="[rules.required]"
           ></v-autocomplete>
         </v-col>
         <v-col cols="3">
@@ -230,7 +252,7 @@ onMounted(() => {
             variant="outlined"
             v-model.number="qty_input"
             placeholder="15"
-            :rules="[(v: any) => !!v || 'Required']"
+            :rules="[rules.required]"
             required
             type="number"
             min="0"
@@ -338,17 +360,13 @@ onMounted(() => {
             <v-spacer class="my-2"></v-spacer>
             <PartCustomField
               v-for="cf in custom_fields"
-              :field_type="cf.field_type"
-              :name="cf.name"
-              :value="cf.value"
-              :create="false"
+              :current="cf"
+              :existing="undefined"
               @del="handleCustomFieldDel"
             />
             <PartCustomField
-              :field_type="new_custom_field.field_type"
-              :name="new_custom_field.name"
-              :value="new_custom_field.value"
-              :create="true"
+              :current="new_custom_field"
+              :existing="custom_fields"
               @update="handleCustomFieldUpdate"
               @add="handleCustomFieldAdd"
             />
@@ -362,19 +380,13 @@ onMounted(() => {
             <v-spacer class="my-2"></v-spacer>
             <PartSupplier
               v-for="s in suppliers"
-              :name="s.name"
-              :link="s.link"
-              :price="s.price"
-              :note="s.note"
-              :create="false"
+              :current="s"
+              :existing="undefined"
               @del="handleSupplierDel"
             />
             <PartSupplier
-              :name="new_supplier.name"
-              :link="new_supplier.link"
-              :price="new_supplier.price"
-              :note="new_supplier.note"
-              :create="true"
+              :current="new_supplier"
+              :existing="suppliers"
               @update="handleSupplierUpdate"
               @add="handleSupplierAdd"
             />
@@ -382,5 +394,14 @@ onMounted(() => {
         </v-col>
       </v-row>
     </v-container>
+
+    <v-snackbar v-model="snackbar">
+      {{ snackbar_msg }}
+      <template v-slot:actions>
+        <v-btn color="pink" variant="text" @click="snackbar = false">
+          Close
+        </v-btn>
+      </template>
+    </v-snackbar>
   </v-form>
 </template>
diff --git a/elebox-tauri/src/views/PartDetail.vue b/elebox-tauri/src/views/PartDetail.vue
index 6cfeaba..561a35c 100644
--- a/elebox-tauri/src/views/PartDetail.vue
+++ b/elebox-tauri/src/views/PartDetail.vue
@@ -3,6 +3,7 @@ import { onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { DbPart } from "../db_cmd_part";
 import ItemEditButton from "../components/ItemEditButton.vue";
+import ItemDeleteButton from "../components/ItemDeleteButton.vue";
 
 const router = useRouter();
 const route = useRoute();
@@ -44,46 +45,7 @@ onMounted(() => {
           <ItemEditButton :path_name="'update_part'" :item_name="name" />
         </v-col>
         <v-col cols="auto">
-          <v-dialog max-width="500">
-            <template v-slot:activator="{ props: activatorProps }">
-              <v-btn
-                v-bind="activatorProps"
-                density="comfortable"
-                icon="mdi-trash-can-outline"
-                title="Delete"
-              ></v-btn>
-            </template>
-
-            <template v-slot:default="{ isActive }">
-              <v-card
-                title="Confirm Delete"
-                prepend-icon="mdi-trash-can-outline"
-              >
-                <v-card-text>
-                  <p>
-                    Are you sure you want to delete this part
-                    <strong>{{ part.name }}</strong> ?
-                  </p>
-                  <p>This action cannot be undone.</p>
-                </v-card-text>
-
-                <v-card-actions>
-                  <v-spacer></v-spacer>
-                  <v-btn
-                    text="Cancel"
-                    @click="isActive.value = false"
-                    variant="tonal"
-                  ></v-btn>
-                  <v-btn
-                    text="Delete"
-                    @click="removePart"
-                    color="red"
-                    variant="tonal"
-                  ></v-btn>
-                </v-card-actions>
-              </v-card>
-            </template>
-          </v-dialog>
+          <ItemDeleteButton :name="part.name" @delete="removePart" />
         </v-col>
       </v-row>
     </div>
diff --git a/elebox-tauri/src/views/Settings.vue b/elebox-tauri/src/views/Settings.vue
index 15c491a..8da1b19 100644
--- a/elebox-tauri/src/views/Settings.vue
+++ b/elebox-tauri/src/views/Settings.vue
@@ -6,12 +6,12 @@ import DbPath from "../components/DbPath.vue";
 const csv_path = ref("");
 
 async function export_csv() {
-  await invoke("export_csv", { csvPath: csv_path.value });
+  await invoke("export_csv", { csv_path: csv_path.value });
   console.debug(`Export path: ${csv_path.value}`);
 }
 
 async function import_csv() {
-  await invoke("import_csv", { csvPath: csv_path.value });
+  await invoke("import_csv", { csv_path: csv_path.value });
   console.debug(`Import path: ${csv_path.value}`);
 }
 </script>
@@ -44,7 +44,7 @@ async function import_csv() {
         <v-label>Version</v-label>
       </v-col>
       <v-col cols="auto">
-        <code>1.0.0-beta.2</code>
+        <code>1.0.0-beta.3</code>
       </v-col>
     </v-row>
   </v-container>