From 49266bbc97ecb37ca14746d98a14c6cfbe441b7d Mon Sep 17 00:00:00 2001
From: Jordan <srcrr-gitlab@ipriva.com>
Date: Fri, 12 Jul 2024 06:14:14 -0700
Subject: [PATCH] work on area rug functions.

---
 components/AreaRugTag.tsx | 53 +++++++++++++++++++++++++++++++++++++++
 package.json              |  1 +
 pnpm-lock.yaml            |  3 +++
 3 files changed, 57 insertions(+)
 create mode 100644 components/AreaRugTag.tsx

diff --git a/components/AreaRugTag.tsx b/components/AreaRugTag.tsx
new file mode 100644
index 0000000..1557750
--- /dev/null
+++ b/components/AreaRugTag.tsx
@@ -0,0 +1,53 @@
+import { area_t } from "@/lib/dimensions";
+import convert, { Area, Length } from "convert";
+import dayjs, { Dayjs } from "dayjs";
+import { StyleSheet, Text, View } from "react-native";
+
+export type AreaRugTagProps = {
+    dimensions: area_t,
+    price_per_area: {
+        price: number,
+        per: {
+            n: number,
+            u: Area,
+        }
+    },
+    date?: Dayjs
+    currencySymbol?: string
+};
+
+export const AreaRugTag = (props: AreaRugTagProps) => {
+    const date = props.date || dayjs();
+    const square = props.dimensions.l * props.dimensions.w;
+    const areaUnits = `square ${props.dimensions.u}`;
+    const square2 = convert(square, areaUnits as Area).to(props.price_per_area.per.u)
+    const price = (square2 / props.price_per_area.per.n) * props.price_per_area.price;
+    const sPrice = price.toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    })
+    const currencySymbol = props.currencySymbol || "$";
+    return (
+        <View style={styles.component}>
+            <Text aria-label="area rug dimensions" style={styles.dimensions}>{props.dimensions.l} x {props.dimensions.w}</Text>
+            <Text aria-label="area rug price" style={styles.price}>{currencySymbol} {sPrice}</Text>
+            <Text aria-label="area rug date" style={styles.date}>{date.format("YYYY/MM/DD")}</Text>
+            <Text aria-label="this week's color" style={styles.tagColor}>[Curent Tag Color]</Text>
+        </View>
+    )
+};
+
+const styles = StyleSheet.create({
+    component: {
+        paddingVertical: 100,
+        flex: 1,
+    },
+    dimensions: {
+    },
+    price: {
+    },
+    date: {
+    },
+    tagColor: {
+    },
+})
\ No newline at end of file
diff --git a/package.json b/package.json
index 16dbd54..1b607f6 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@reduxjs/toolkit": "^2.2.6",
     "class-transformer": "^0.5.1",
     "convert": "^5.3.0",
+    "dayjs": "^1.11.11",
     "expo": "~51.0.18",
     "expo-asset": "^10.0.10",
     "expo-constants": "~16.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ab01bdb..1375574 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ dependencies:
   convert:
     specifier: ^5.3.0
     version: 5.3.0
+  dayjs:
+    specifier: ^1.11.11
+    version: 1.11.11
   expo:
     specifier: ~51.0.18
     version: 51.0.18(@babel/core@7.24.7)(@babel/preset-env@7.24.7)