feature: Modular Slice Refactoring

client/lib/Store/holdingsSlice.ts

@@ -0,0 +1,28 @@
+'use client'
+
+
+import { StateCreator } from 'zustand'
+
+export interface UserHolding {
+  goldGrams: number
+  silverGrams: number
+  platinumGrams: number
+  apxiTokens: number
+}
+
+export interface HoldingsSlice {
+  userHoldings: UserHolding
+  setUserHoldings: (holdings: UserHolding) => void
+}
+
+const initialUserHoldings: UserHolding = {
+  goldGrams: 156.75,
+  silverGrams: 892.40,
+  platinumGrams: 45.20,
+  apxiTokens: 1250.00
+}
+
+export const createHoldingsSlice: StateCreator<HoldingsSlice> = (set) => ({
+  userHoldings: initialUserHoldings,
+  setUserHoldings: (holdings) => set({ userHoldings: holdings })
+})

client/lib/Store/index.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+import { createPriceSlice, PriceSlice } from './priceSlice'
+import { createHoldingsSlice, HoldingsSlice } from './holdingsSlice'
+import { createVaultSlice, VaultSlice } from './vaultSlice'
+import { createUISlice, UISlice } from './uiSlice'
+
+// Combine all slice types
+export type Store = PriceSlice & HoldingsSlice & VaultSlice & UISlice
+
+export const useStore = create<Store>()(
+  persist(
+    (set, get, api) => ({
+      ...createPriceSlice(set, get, api),
+      ...createHoldingsSlice(set, get, api),
+      ...createVaultSlice(set, get, api),
+      ...createUISlice(set, get, api),
+    }),
+    {
+      name: 'ui-store',
+      partialize: (state) => ({ activeView: state.activeView }),
+    }
+  )
+)

client/lib/Store/priceSlice.ts

@@ -0,0 +1,28 @@
+'use client'
+
+
+import { StateCreator } from 'zustand'
+
+export interface MetalPrice {
+  gold: number
+  silver: number
+  platinum: number
+  lastUpdated: Date
+}
+
+export interface PriceSlice {
+  metalPrices: MetalPrice
+  setMetalPrices: (prices: MetalPrice) => void
+}
+
+const initialMetalPrices: MetalPrice = {
+  gold: 2342.50,
+  silver: 27.85,
+  platinum: 1024.30,
+  lastUpdated: new Date()
+}
+
+export const createPriceSlice: StateCreator<PriceSlice> = (set) => ({
+  metalPrices: initialMetalPrices,
+  setMetalPrices: (prices: MetalPrice) => set({ metalPrices: prices })
+})

client/lib/Store/uiSlice.ts

@@ -0,0 +1,14 @@
+'use client'
+
+
+import { StateCreator } from 'zustand'
+
+export interface UISlice {
+  activeView: 'dashboard' | 'por' | 'zakat' | 'redemption' | 'sharia'
+  setActiveView: (view: 'dashboard' | 'por' | 'zakat' | 'redemption' | 'sharia') => void
+}
+
+export const createUISlice: StateCreator<UISlice> = (set) => ({
+  activeView: 'dashboard',
+  setActiveView: (view) => set({ activeView: view })
+})

client/lib/Store/vaultSlice.ts

@@ -0,0 +1,32 @@
+'use client'
+
+
+import { StateCreator } from 'zustand'
+
+export interface VaultData {
+  totalGoldGrams: number
+  totalSilverGrams: number
+  totalPlatinumGrams: number
+  totalTokensMinted: number
+  lastAuditDate: Date
+  verificationStatus: 'verified' | 'pending' | 'syncing'
+}
+
+export interface VaultSlice {
+  vaultData: VaultData
+  setVaultData: (data: VaultData) => void
+}
+
+const initialVaultData: VaultData = {
+  totalGoldGrams: 15678.50,
+  totalSilverGrams: 89240.75,
+  totalPlatinumGrams: 4520.25,
+  totalTokensMinted: 125000,
+  lastAuditDate: new Date(),
+  verificationStatus: 'verified'
+}
+
+export const createVaultSlice: StateCreator<VaultSlice> = (set) => ({
+  vaultData: initialVaultData,
+  setVaultData: (data) => set({ vaultData: data })
+})

client/lib/utils.ts

@@ -4,3 +4,13 @@ import { twMerge } from 'tailwind-merge'
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+
+export function formatCurrency(value: number, currency = 'USD'): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value)
+}