fix: update layout and styling for better responsiveness in various components
This commit is contained in:
parent
c49027492c
commit
8ad735fbf9
@ -337,7 +337,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
|
||||
<CardHeader>
|
||||
<CardTitle>Pilih Bahan Baku</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<CardContent className="max-h-[calc(100vh-16rem)] space-y-4 overflow-y-auto">
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Nama Bahan Baku <span className="text-destructive">*</span>
|
||||
@ -386,7 +386,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
|
||||
const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
|
||||
|
||||
return (
|
||||
<div key={price.id} className={isAdded ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3' : 'flex items-center justify-between gap-3 rounded-lg border p-3'}>
|
||||
<div key={price.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${isAdded ? 'border-primary' : ''}`}>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
{price.photo_url ? (
|
||||
<img src={price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
|
||||
@ -401,7 +401,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => addVariant(rm, price.id)}>
|
||||
<Plus className="h-4 w-4" />
|
||||
Tambah
|
||||
@ -432,7 +432,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
|
||||
const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
|
||||
|
||||
return (
|
||||
<div key={price.id} className={isAdded ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3' : 'flex items-center justify-between gap-3 rounded-lg border p-3'}>
|
||||
<div key={price.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${isAdded ? 'border-primary' : ''}`}>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
{price.photo_url ? (
|
||||
<img src={price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
|
||||
@ -447,7 +447,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => addVariant(selectedMaterial, price.id)}>
|
||||
<Plus className="h-4 w-4" />
|
||||
Tambah
|
||||
|
||||
@ -313,7 +313,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
|
||||
<CardHeader>
|
||||
<CardTitle>Pilih Bahan Baku</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<CardContent className="max-h-[calc(100vh-16rem)] space-y-4 overflow-y-auto">
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Nama Bahan Baku <span className="text-destructive">*</span>
|
||||
@ -362,7 +362,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
|
||||
const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
|
||||
|
||||
return (
|
||||
<div key={price.id} className={isAdded ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3' : 'flex items-center justify-between gap-3 rounded-lg border p-3'}>
|
||||
<div key={price.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${isAdded ? 'border-primary' : ''}`}>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
{price.photo_url ? (
|
||||
<img src={price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
|
||||
@ -377,7 +377,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => addVariant(rm, price.id)}>
|
||||
<Plus className="h-4 w-4" />
|
||||
Tambah
|
||||
@ -408,7 +408,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
|
||||
const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
|
||||
|
||||
return (
|
||||
<div key={price.id} className={isAdded ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3' : 'flex items-center justify-between gap-3 rounded-lg border p-3'}>
|
||||
<div key={price.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${isAdded ? 'border-primary' : ''}`}>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
{price.photo_url ? (
|
||||
<img src={price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
|
||||
@ -423,7 +423,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => addVariant(selectedMaterial, price.id)}>
|
||||
<Plus className="h-4 w-4" />
|
||||
Tambah
|
||||
|
||||
@ -866,8 +866,8 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
|
||||
] ??
|
||||
0) >
|
||||
0
|
||||
? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
|
||||
: 'flex items-center justify-between gap-3 rounded-lg border p-3'
|
||||
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
|
||||
: 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
|
||||
}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
@ -909,7 +909,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
|
||||
@ -306,9 +306,9 @@ export default function PurchaseEdit({
|
||||
.id
|
||||
] ??
|
||||
0) >
|
||||
0
|
||||
? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
|
||||
: 'flex items-center justify-between gap-3 rounded-lg border p-3'
|
||||
0
|
||||
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
|
||||
: 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
|
||||
}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
@ -350,7 +350,7 @@ export default function PurchaseEdit({
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
|
||||
@ -308,8 +308,8 @@ return 0;
|
||||
variant
|
||||
.id
|
||||
] ?? 0) > 0
|
||||
? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
|
||||
: 'flex items-center justify-between gap-3 rounded-lg border p-3'
|
||||
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
|
||||
: 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
|
||||
}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
@ -351,7 +351,7 @@ return 0;
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
|
||||
@ -236,8 +236,8 @@ return 0;
|
||||
variant
|
||||
.id
|
||||
] ?? 0) > 0
|
||||
? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
|
||||
: 'flex items-center justify-between gap-3 rounded-lg border p-3'
|
||||
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
|
||||
: 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
|
||||
}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
@ -279,7 +279,7 @@ return 0;
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
|
||||
@ -396,17 +396,17 @@ export default function TransactionCreate({
|
||||
: variant.reject_stock;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={variant.id}
|
||||
className={
|
||||
(quantities[
|
||||
variant
|
||||
.id
|
||||
] ?? 0) > 0
|
||||
? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
|
||||
: 'flex items-center justify-between gap-3 rounded-lg border p-3'
|
||||
}
|
||||
>
|
||||
<div
|
||||
key={variant.id}
|
||||
className={
|
||||
(quantities[
|
||||
variant
|
||||
.id
|
||||
] ?? 0) > 0
|
||||
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
|
||||
: 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
|
||||
}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
{variant.photo_url ? (
|
||||
<img
|
||||
@ -450,7 +450,7 @@ export default function TransactionCreate({
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
|
||||
@ -376,17 +376,17 @@ export default function TransactionEdit({
|
||||
: variant.reject_stock;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={variant.id}
|
||||
className={
|
||||
(quantities[
|
||||
variant
|
||||
.id
|
||||
] ?? 0) > 0
|
||||
? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
|
||||
: 'flex items-center justify-between gap-3 rounded-lg border p-3'
|
||||
}
|
||||
>
|
||||
<div
|
||||
key={variant.id}
|
||||
className={
|
||||
(quantities[
|
||||
variant
|
||||
.id
|
||||
] ?? 0) > 0
|
||||
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
|
||||
: 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
|
||||
}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
{variant.photo_url ? (
|
||||
<img
|
||||
@ -430,7 +430,7 @@ export default function TransactionEdit({
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user