Displaying with Slice

We want to show customers a real-time dashboard of ice cream order processing. Completed orders should be displayed prominently, and the list of ongoing orders should also be visible. By using Slice, you can present the same ice cream order data in real time from different perspectives for customers, staff, and administrators.

Dashboard Slice

First, let's declare a slice for the real-time dashboard to show to customers. You can display the waiting orders and the orders being picked up by querying them separately.
apps/angelo/lib/icecreamOrder/icecreamOrder.store.ts
1// ...existing code...
2
3export class IcecreamOrderSlice extends slice(
4  srv.icecreamOrder,
5  { guards: { root: Public, get: Public, cru: Public } },
6  (init) => ({
7    inPublic: init().exec(function () {
8      return this.icecreamOrderService.queryAny();
9    }),
10    inWaiting: init().exec(function () {
11      return this.icecreamOrderService.queryByStatuses(["active", "processing"]);
12    }),
13    inPickup: init().exec(function () {
14      return this.icecreamOrderService.queryByStatuses(["served"]);
15    }),
16  })
17) {}
18  
19// ...existing code...
inWaiting slice is a slice that queries the waiting orders and inPickup slice is a slice that queries the orders being picked up. When the slice is declared, the state and actions of the store are automatically created.
apps/angelo/lib/icecreamOrder/icecreamOrder.dictionary.ts
1// ...existing code...
2.slice<IcecreamOrderSlice>((fn) => ({
3  inPublic: fn(["IcecreamOrder In Public", "IcecreamOrder 공개"]).arg((t) => ({})),
4  inWaiting: fn(["IcecreamOrder In Waiting", "IcecreamOrder 대기"]).arg((t) => ({})),
5  inPickup: fn(["IcecreamOrder In Pickup", "IcecreamOrder 픽업"]).arg((t) => ({})),
6  }))
7// ...existing code...
You need to fill the dictionary. --------Need to be modified---------

Connect to Zone

apps/angelo/app/[lang]/dashboard/page.tsx
1import { Load } from "@akanjs/ui";
2import { fetch, IcecreamOrder, usePage } from "@koyo/client";
3
4export default function Page() {
5  const { l } = usePage();
6  return (
7    <Load.Page
8      of={Page}
9      loader={async () => {
10        const [{ icecreamOrderInitInWaiting }, { icecreamOrderInitInPickup }] = await Promise.all([
11          fetch.initIcecreamOrderInWaiting(),
12          fetch.initIcecreamOrderInPickup(),
13        ]);
14        return { icecreamOrderInitInWaiting, icecreamOrderInitInPickup };
15      }}
16      render={({ icecreamOrderInitInWaiting, icecreamOrderInitInPickup }) => {
17        return (
18          <div className="flex size-full gap-2 p-4">
19            <div className="w-2/3">
20              <h2 className="my-2 text-3xl font-bold">{l("icecreamOrder.pickup")}</h2>
21              <IcecreamOrder.Zone.Card
22                className="space-y-2"
23                init={icecreamOrderInitInPickup}
24                sliceName="icecreamOrderInWaiting"
25                showControls={false}
26              />
27            </div>
28            <div className="w-1/3">
29              <h2 className="my-2 text-3xl font-bold">{l("icecreamOrder.waiting")}</h2>
30              <IcecreamOrder.Zone.Card
31                className="space-y-2"
32                init={icecreamOrderInitInWaiting}
33                sliceName="icecreamOrderInPickup"
34                showControls={false}
35              />
36            </div>
37          </div>
38        );
39      }}
40    />
41  );
42}
apps/angelo/lib/icecreamOrder/icecreamOrder.dictionary.ts
1// ...existing code...
2  .translate({
3    waiting: ["Waiting", "대기중"],
4    pickup: ["Pickup", "픽업가능"],
5  });

Query Control

apps/angelo/lib/icecreamOrder/IcecreamOrder.Unit.tsx
1interface CardProps extends ModelProps<"icecreamOrder", cnst.LightIcecreamOrder> {
2  showControls?: boolean;
3}
4export const Card = ({ icecreamOrder, showControls = true }: CardProps) => { 
5
6// ...existing code...
7
8      {showControls ? (
9        <div className="bg-base-100/50 flex items-center justify-center gap-2 rounded-xl p-4">
10          <Model.ViewWrapper sliceName="icecreamOrder" modelId={icecreamOrder.id}>
11            <button className="btn btn-primary">
12              <span>{l.trans({ en: "View", ko: "보기" })}</span>
13            </button>
14          </Model.ViewWrapper>
15          <IcecreamOrder.Util.Process icecreamOrderId={icecreamOrder.id} disabled={icecreamOrder.status !== "active"} />
16          <IcecreamOrder.Util.Serve
17            icecreamOrderId={icecreamOrder.id}
18            disabled={icecreamOrder.status !== "processing"}
19          />
20          <IcecreamOrder.Util.Finish icecreamOrderId={icecreamOrder.id} disabled={icecreamOrder.status !== "served"} />
21          <IcecreamOrder.Util.Cancel icecreamOrderId={icecreamOrder.id} disabled={icecreamOrder.status !== "active"} />
22        </div>
23      ) : null}
24
25// ...existing code...
apps/angelo/lib/icecreamOrder/IcecreamOrder.Zone.tsx
1interface CardProps {
2  className?: string;
3  init: ClientInit<"icecreamOrder", cnst.LightIcecreamOrder>;
4  showControls?: boolean;
5  sliceName?: string;
6}
7export const Card = ({ className, init, showControls = true, sliceName }: CardProps) => {
8  useInterval(() => {
9    if (sliceName) void st.slice[sliceName as "icecreamOrder"].do.refreshIcecreamOrder();
10  }, 3000);
11  return (
12    <>
13      <Load.Units
14        className={className}
15        init={init}
16        renderItem={(icecreamOrder: cnst.LightIcecreamOrder) => (
17          <IcecreamOrder.Unit.Card
18            key={icecreamOrder.id}
19            icecreamOrder={icecreamOrder}
20            showControls={showControls}
21          />
22        )}
23      />
24      {showControls ? (
25        <Model.ViewEditModal
26          sliceName="icecreamOrderInPublic"
27          renderTitle={(icecreamOrder: DefaultOf<cnst.IcecreamOrder>) =>
28            `IcecreamOrder - ${icecreamOrder.id ? icecreamOrder.id : "New"}`
29          }
30          renderView={(icecreamOrder: cnst.IcecreamOrder) => (
31            <IcecreamOrder.View.General className="w-full" icecreamOrder={icecreamOrder} />
32          )}
33          renderTemplate={() => <IcecreamOrder.Template.General />}
34        />
35      ) : null}
36    </>
37  );
38};

Slice Component Rules

Released under the MIT License
Official Akan.js Consulting onAkansoft
Copyright © 2025 Akan.js. All rights reserved.
System managed bybassman