Skip to content

Commit

Permalink
これでいく！！！！
Browse files Browse the repository at this point in the history
  • Loading branch information
@toririm
toririm committed Nov 3, 2024
1 parent 31bc5e1 commit 2a9fdb1
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 67 deletions.
Binary file modified bun.lockb
View file
Binary file not shown.
135 changes: 68 additions & 67 deletions pos/app/routes/cashier-mini.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,6 @@ import bellSound from "~/assets/bell.mp3";
import logoSVG from "~/assets/cafeore.svg";
import logoMotion from "~/assets/cafeore_logo_motion.webm";
import { useOrderStat } from "~/components/functional/useOrderStat";
import {
Table,
TableBody,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "~/components/ui/table";
import { cn } from "~/lib/utils";

export const meta: MetaFunction = () => {
Expand All @@ -36,8 +27,6 @@ export default function CasherMini() {
);
const order = orderState?.edittingOrder;
const submittedOrderId = orderState?.submittedOrderId;
const [queuedItems, setQueuedItems] = useState(new Map());

const { data: preOrder } = useSWRSubscription(
["orders", submittedOrderId ?? "none"],
documentSub({ converter: orderConverter }),
Expand Down Expand Up @@ -85,19 +74,7 @@ export default function CasherMini() {
return "　";
}, [isOperational, submittedOrderId]);

useEffect(() => {
if (order?.items?.length === 0) return;
const item = order?.items?.slice(-1)[0].name;
const updatedItems = new Map(queuedItems);
if (item in queuedItems) {
updatedItems[item] += 1;
setQueuedItems(updatedItems);
} else {
updatedItems.set(item, 1);
setQueuedItems(updatedItems);
}
[order?.items];
});
const charge = order?.getCharge();

return (
<>
Expand Down Expand Up @@ -138,51 +115,75 @@ export default function CasherMini() {
)}
>
<img src={logoSVG} alt="" className="absolute h-screen w-screen p-28" />
<div className="wrap flex flex-col px-[50px] pt-[40px]">
<p className="pb-[50px] font-serif text-5xl text-white">
No. <span className="text-6xl">{orderId}</span>
<div className="flex h-screen w-screen flex-col px-28 py-10 font-noto">
<p className="flex-none pb-16 font-medium text-5xl text-white">
No. <span className="font-semibold text-7xl">{orderId}</span>
</p>
<div className="grid grid-cols-2 items-center justify-items-center p-[20px]">
<div>
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">商品名</TableHead>
<TableHead>杯数</TableHead>
<TableHead className="text-right">金額</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{queuedItems?.forEach((name, cups) => (
<TableRow key={name}>
<TableCell className="font-medium">{name}</TableCell>
<TableCell>{cups}</TableCell>
<TableCell className="text-right">
{order?.items.find((item) => item.name === name)
?.price * cups}
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={3}>Total</TableCell>
<TableCell className="text-right">$2,500.00</TableCell>
</TableRow>
</TableFooter>
</Table>
<p className="font-serif text-4xl text-white">
商品点数： {order?.items.length ?? 0} 点
</p>
<div className="flex h-4/5 flex-col justify-between">
<div className="">
{order?.items.map((item, idx) => {
return (
<div
key={`${idx}-${item.id}`}
className="flex items-center justify-between pb-7"
>
<p className="flex-none pr-14 font-bold text-6xl text-white">
{idx + 1}
</p>
<p className="flex-1 font-bold text-5xl text-white">
{item.name}
</p>
<p className="flex-none font-bold text-5xl text-white">
{item.price} 円
</p>
</div>
);
})}
<div className="flex items-center justify-between pb-7">
{(order?.discount ?? 0) > 0 && (
<>
<p className="flex-none pr-14 font-bold text-3xl text-white">
割引
</p>
<p className="font-bold text-4xl text-white">
-{order?.discount} 円
</p>
</>
)}
</div>
</div>
<div>
<p className="font-serif text-4xl text-white">
合計： {order?.billingAmount ?? 0} 円
</p>
<p className="font-serif text-4xl text-white">
{/* お釣り： {charge > 0 ? charge : 0} 円 */}
お釣り： {0} 円
</p>
<div className="">
<div className="mb-7 h-1 w-full bg-white" />
<div className="flex items-center justify-between pb-7">
<p className="flex-none pr-14 font-bold text-5xl text-white">
合計
</p>
<p className="font-bold text-5xl text-white">
{order?.billingAmount} 円
</p>
</div>
<div className="flex h-14 items-center justify-between pb-7">
{(order?.received ?? 0) > 0 && (
<>
<p className="flex-none pr-14 font-bold text-4xl text-white">
お預かり
</p>
<p className="font-bold text-4xl text-white">
{order?.received} 円
</p>
</>
)}
</div>
<div className="flex h-12 items-center justify-between pb-7">
{(charge ?? 0) >= 0 && (
<>
<p className="flex-none pr-14 font-bold text-4xl text-white">
おつり
</p>
<p className="font-bold text-4xl text-white">{charge} 円</p>
</>
)}
</div>
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions pos/app/tailwind.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "@fontsource/zen-old-mincho";
@import "@fontsource-variable/noto-sans-jp";

@tailwind base;
@tailwind components;
Expand Down
1 change: 1 addition & 0 deletions pos/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"dependencies": {
"@conform-to/react": "^1.2.2",
"@conform-to/zod": "^1.2.2",
"@fontsource-variable/noto-sans-jp": "^5.1.0",
"@fontsource/zen-old-mincho": "^5.1.0",
"@radix-ui/react-alert-dialog": "^1.1.2",
"@radix-ui/react-dialog": "^1.1.2",
Expand Down
1 change: 1 addition & 0 deletions pos/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ module.exports = {
},
fontFamily: {
zen: "Zen Old Mincho",
noto: "Noto Sans JP Variable",
},
keyframes: {
"accordion-down": {
Expand Down

0 comments on commit 2a9fdb1

Please sign in to comment.