The Frappe HR Mobile App not sync in real-time on local hosted

Frappe HR
1

Hi,

When I apply a leave on ERPnext desktop. the current status of it not updated on Frappe HR mobile. I need to refresh or clear the cache of the app, then only the current status updated. it looks like the app not response in real-time. I need help!
leave application frappe mobile

leave application
leave application928×419 31.8 KB

2

I tested it with the latest version, we haven’t found the issue on the local and frappe cloud side.

3

Thanks for your reply, after updated latest version the app have no problem.

4

Hi @Jaihyo , I’m still experiencing the same issue. Could you please confirm which version you updated!

5

Hi Swetha_R

You can try copy this code and paste it on Home.vue and then run bench build --force.
https://raw.githubusercontent.com/Jaihyo/frappe-installation-on-linux/refs/heads/main/home.vue?token=GHSAT0AAAAAACYHLMNFE3FADWR765HK6ID6ZZJS46A
It will add swipe refresh circle when you swipe down the home page.

6

hey @Jaihyo ,
the link is not working it returning 404

7 
<template>
  <BaseLayout>
    <template #body>
      <!-- Swipe-to-refresh functionality -->
      <ion-refresher slot="fixed" @ionRefresh="handleRefresh">
        <ion-refresher-content pulling-text="Pull to refresh" refreshing-spinner="circles"></ion-refresher-content>
      </ion-refresher>

      <div class="flex flex-col items-center my-7 p-4 gap-7">
        <CheckInPanel />
        <QuickLinks :items="quickLinks" title="Quick Links" />
        <RequestPanel :myRequests="myRequests" :teamRequests="teamRequests" />
      </div>
    </template>
  </BaseLayout>
</template>

<script setup>
import { ref, inject, computed, onMounted } from "vue"
import { IonRefresher } from "@ionic/vue"

import CheckInPanel from "@/components/CheckInPanel.vue"
import QuickLinks from "@/components/QuickLinks.vue"
import BaseLayout from "@/components/BaseLayout.vue"
import RequestPanel from "@/components/RequestPanel.vue"

import LeaveIcon from "@/components/icons/LeaveIcon.vue"
import ExpenseIcon from "@/components/icons/ExpenseIcon.vue"
import EmployeeAdvanceIcon from "@/components/icons/EmployeeAdvanceIcon.vue"
import SalaryIcon from "@/components/icons/SalaryIcon.vue"

import { myLeaves, teamLeaves } from "@/data/leaves"
import { myClaims, teamClaims } from "@/data/claims"
import { useListUpdate } from "@/composables/realtime"

// Define Quick Links
const quickLinks = [
  {
    icon: LeaveIcon,
    title: "Request Leave",
    route: "LeaveApplicationFormView",
  },
  {
    icon: ExpenseIcon,
    title: "Claim an Expense",
    route: "ExpenseClaimFormView",
  },
  {
    icon: EmployeeAdvanceIcon,
    title: "Request an Advance",
    route: "EmployeeAdvanceFormView",
  },
  {
    icon: SalaryIcon,
    title: "View Salary Slips",
    route: "SalarySlipsDashboard",
  },
]

// Fetch My and Team Requests
const socket = inject("$socket")

const myRequests = computed(() => updateRequestDetails(myLeaves, myClaims))
const teamRequests = computed(() =>
  updateRequestDetails(teamLeaves, teamClaims)
)

function updateRequestDetails(leaves, claims) {
  const requests = [...(leaves.data || []), ...(claims.data || [])]
  return getSortedRequests(requests)
}

function getSortedRequests(list) {
  return list
    .sort((a, b) => new Date(b.posting_date) - new Date(a.posting_date))
    .splice(0, 10)
}

onMounted(() => {
  useListUpdate(socket, "Leave Application", () => teamLeaves.reload())
  useListUpdate(socket, "Expense Claim", () => teamClaims.reload())
})

// Swipe-to-refresh handler
const handleRefresh = async (event) => {
  try {
    // Reload the leaves and claims data
    await myLeaves.reload()
    await myClaims.reload()
    await teamLeaves.reload()
    await teamClaims.reload()
  } catch (error) {
    console.error("Error refreshing data:", error)
  } finally {
    event.target.complete()
  }
}
</script>

<style scoped>
/* Add any custom styling here */
</style>