feat: add hooks useTitle for set title

src/hooks/useTitle.ts

@@ -0,0 +1,7 @@
+import React from "react";
+
+export default function useTitle(title: string) {
+  React.useEffect(() => {
+    document.title = `NAM | ${title}`
+  }, [title])
+}

src/pages/Backbone.tsx

@@ -12,6 +12,7 @@ import ReactTable from "../components/ReactTable";
 import IconButton from "../components/IconButton";
 import { Edit } from "iconsax-react";
 import { ColumnDef } from "@tanstack/react-table";
+import useTitle from "../hooks/useTitle";
 
 interface UserData {
   backbone: string;
@@ -22,6 +23,8 @@ interface UserData {
 }
 
 export default function Backbone() {
+    useTitle("Backbone");
+  
   const data: UserData[] = [
     { backbone: "BB-BDG-SMD", device_start: "DV-CODE-1", device_end: "DV-CODE-2", total_core: "24 Core", total_fishbone: "3" },
     { backbone: "BB-BDG-SBG", device_start: "DV-CODE-3", device_end: "DV-CODE-4", total_core: "24 Core", total_fishbone: "5" },

src/pages/Dashboard.tsx

@@ -1,4 +1,8 @@
+import useTitle from "../hooks/useTitle";
+
 export default function Dashboard() {
+  useTitle("Dashboard");
+  
   return (
     <div>
       Dashboard

src/pages/Devices.tsx

@@ -12,6 +12,7 @@ import ReactTable from "../components/ReactTable";
 import { ColumnDef } from "@tanstack/react-table";
 import IconButton from "../components/IconButton";
 import { Edit } from "iconsax-react";
+import useTitle from "../hooks/useTitle";
 
 interface UserData {
   device_code: string;
@@ -22,6 +23,8 @@ interface UserData {
 }
 
 export default function Devices() {
+  useTitle("Devices");
+  
   const data: UserData[] = [
     { device_code: 'DV-CODE-1', device_type: "OTB", address: "Jl. Contoh 1", port_amount: '16', status: "Active" },
     { device_code: 'DV-CODE-2', device_type: "OTB", address: "Jl. Contoh 2", port_amount: '16', status: "Active" },

src/pages/Fishbone.tsx

@@ -12,6 +12,7 @@ import ReactTable from "../components/ReactTable";
 import { ColumnDef } from "@tanstack/react-table";
 import IconButton from "../components/IconButton";
 import { Edit } from "iconsax-react";
+import useTitle from "../hooks/useTitle";
 
 interface UserData {
   backbone: string;
@@ -21,6 +22,8 @@ interface UserData {
 }
 
 export default function Fishbone() {
+  useTitle("Fishbone");
+  
   const data: UserData[] = [
     { backbone: 'BB-BDG-SMD', device_start: "DV-CODE-1", device_end: "DV-CODE-2", total_core: '24 Core', },
     { backbone: 'BB-BDG-SBG', device_start: "DV-CODE-3", device_end: "DV-CODE-4", total_core: '24 Core', },

src/pages/Towers.tsx

@@ -12,6 +12,7 @@ import ReactTable from "../components/ReactTable";
 import { ColumnDef } from "@tanstack/react-table";
 import IconButton from "../components/IconButton";
 import { Edit } from "iconsax-react";
+import useTitle from "../hooks/useTitle";
 
 interface UserData {
   tower_code: string;
@@ -20,6 +21,8 @@ interface UserData {
 }
 
 export default function Towers() {
+  useTitle("Towers");
+  
   const data: UserData[] = [
     { tower_code: 'TW-CODE-1', device: "DV-CODE-1", address: "Jl. Contoh 1" },
     { tower_code: 'TW-CODE-2', device: "DV-CODE-2", address: "Jl. Contoh 2" },

src/pages/auth/Login.tsx

@@ -8,8 +8,11 @@ import Typography from "@mui/material/Typography";
 import Grid from "@mui/material/Grid2";
 import { useNavigate } from "react-router";
 import { useAuthStore } from "../../stores/authStore";
+import useTitle from "../../hooks/useTitle";
 
 export default function Login() {
+  useTitle("Login");
+  
   let navigate = useNavigate();
 
   const { login, token, isLoading, error } = useAuthStore();

src/stores/storage.ts

@@ -1,3 +1,4 @@
+import CryptoJS from "crypto-js";
 import { StateStorage } from "zustand/middleware";
 
 const KEY = import.meta.env.VITE_APP_KEY;